Skip to content

Commit c0ea9d0

Browse files
author
Schalk Neethling
committed
Merge remote-tracking branch 'fetch/main' into 153-chore-merge-fetch-examples-into-dom-examplesfetch
2 parents b7bfe5f + eaea7cb commit c0ea9d0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+817
-0
lines changed

‎fetch/CODE_OF_CONDUCT.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Community Participation Guidelines
2+
3+
This repository is governed by Mozilla's code of conduct and etiquette guidelines.
4+
For more details, please read the
5+
[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/).
6+
7+
## How to Report
8+
9+
For more information on how to report violations of the Community Participation Guidelines, please read our [How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/) page.
10+
11+
<!--
12+
## Project Specific Etiquette
13+
14+
In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
15+
Please update for your project.
16+
-->

‎fetch/LICENSE

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
CC0 1.0 Universal
2+
3+
Statement of Purpose
4+
5+
The laws of most jurisdictions throughout the world automatically confer
6+
exclusive Copyright and Related Rights (defined below) upon the creator and
7+
subsequent owner(s) (each and all, an "owner") of an original work of
8+
authorship and/or a database (each, a "Work").
9+
10+
Certain owners wish to permanently relinquish those rights to a Work for the
11+
purpose of contributing to a commons of creative, cultural and scientific
12+
works ("Commons") that the public can reliably and without fear of later
13+
claims of infringement build upon, modify, incorporate in other works, reuse
14+
and redistribute as freely as possible in any form whatsoever and for any
15+
purposes, including without limitation commercial purposes. These owners may
16+
contribute to the Commons to promote the ideal of a free culture and the
17+
further production of creative, cultural and scientific works, or to gain
18+
reputation or greater distribution for their Work in part through the use and
19+
efforts of others.
20+
21+
For these and/or other purposes and motivations, and without any expectation
22+
of additional consideration or compensation, the person associating CC0 with a
23+
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
24+
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
25+
and publicly distribute the Work under its terms, with knowledge of his or her
26+
Copyright and Related Rights in the Work and the meaning and intended legal
27+
effect of CC0 on those rights.
28+
29+
1. Copyright and Related Rights. A Work made available under CC0 may be
30+
protected by copyright and related or neighboring rights ("Copyright and
31+
Related Rights"). Copyright and Related Rights include, but are not limited
32+
to, the following:
33+
34+
i. the right to reproduce, adapt, distribute, perform, display, communicate,
35+
and translate a Work;
36+
37+
ii. moral rights retained by the original author(s) and/or performer(s);
38+
39+
iii. publicity and privacy rights pertaining to a person's image or likeness
40+
depicted in a Work;
41+
42+
iv. rights protecting against unfair competition in regards to a Work,
43+
subject to the limitations in paragraph 4(a), below;
44+
45+
v. rights protecting the extraction, dissemination, use and reuse of data in
46+
a Work;
47+
48+
vi. database rights (such as those arising under Directive 96/9/EC of the
49+
European Parliament and of the Council of 11 March 1996 on the legal
50+
protection of databases, and under any national implementation thereof,
51+
including any amended or successor version of such directive); and
52+
53+
vii. other similar, equivalent or corresponding rights throughout the world
54+
based on applicable law or treaty, and any national implementations thereof.
55+
56+
2. Waiver. To the greatest extent permitted by, but not in contravention of,
57+
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
58+
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
59+
and Related Rights and associated claims and causes of action, whether now
60+
known or unknown (including existing as well as future claims and causes of
61+
action), in the Work (i) in all territories worldwide, (ii) for the maximum
62+
duration provided by applicable law or treaty (including future time
63+
extensions), (iii) in any current or future medium and for any number of
64+
copies, and (iv) for any purpose whatsoever, including without limitation
65+
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
66+
the Waiver for the benefit of each member of the public at large and to the
67+
detriment of Affirmer's heirs and successors, fully intending that such Waiver
68+
shall not be subject to revocation, rescission, cancellation, termination, or
69+
any other legal or equitable action to disrupt the quiet enjoyment of the Work
70+
by the public as contemplated by Affirmer's express Statement of Purpose.
71+
72+
3. Public License Fallback. Should any part of the Waiver for any reason be
73+
judged legally invalid or ineffective under applicable law, then the Waiver
74+
shall be preserved to the maximum extent permitted taking into account
75+
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
76+
is so judged Affirmer hereby grants to each affected person a royalty-free,
77+
non transferable, non sublicensable, non exclusive, irrevocable and
78+
unconditional license to exercise Affirmer's Copyright and Related Rights in
79+
the Work (i) in all territories worldwide, (ii) for the maximum duration
80+
provided by applicable law or treaty (including future time extensions), (iii)
81+
in any current or future medium and for any number of copies, and (iv) for any
82+
purpose whatsoever, including without limitation commercial, advertising or
83+
promotional purposes (the "License"). The License shall be deemed effective as
84+
of the date CC0 was applied by Affirmer to the Work. Should any part of the
85+
License for any reason be judged legally invalid or ineffective under
86+
applicable law, such partial invalidity or ineffectiveness shall not
87+
invalidate the remainder of the License, and in such case Affirmer hereby
88+
affirms that he or she will not (i) exercise any of his or her remaining
89+
Copyright and Related Rights in the Work or (ii) assert any associated claims
90+
and causes of action with respect to the Work, in either case contrary to
91+
Affirmer's express Statement of Purpose.
92+
93+
4. Limitations and Disclaimers.
94+
95+
a. No trademark or patent rights held by Affirmer are waived, abandoned,
96+
surrendered, licensed or otherwise affected by this document.
97+
98+
b. Affirmer offers the Work as-is and makes no representations or warranties
99+
of any kind concerning the Work, express, implied, statutory or otherwise,
100+
including without limitation warranties of title, merchantability, fitness
101+
for a particular purpose, non infringement, or the absence of latent or
102+
other defects, accuracy, or the present or absence of errors, whether or not
103+
discoverable, all to the greatest extent permissible under applicable law.
104+
105+
c. Affirmer disclaims responsibility for clearing rights of other persons
106+
that may apply to the Work or any use thereof, including without limitation
107+
any person's Copyright and Related Rights in the Work. Further, Affirmer
108+
disclaims responsibility for obtaining any necessary consents, permissions
109+
or other rights required for any use of the Work.
110+
111+
d. Affirmer understands and acknowledges that Creative Commons is not a
112+
party to this document and has no duty or obligation with respect to this
113+
CC0 or use of the Work.
114+
115+
For more information, please see
116+
<http://creativecommons.org/publicdomain/zero/1.0/>

‎fetch/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# fetch-examples
2+
3+
A repository of Fetch examples. See [https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for the corresponding documentation.
4+
5+
See below for links to the live versions of each example:
6+
7+
- [Basic fetch example](https://mdn.github.io/fetch-examples/basic-fetch/)
8+
- [Fetch array buffer example](https://mdn.github.io/fetch-examples/fetch-array-buffer/)
9+
- [Fetch JSON example](https://mdn.github.io/fetch-examples/fetch-json/)
10+
- [Basic Fetch example with Request object](https://mdn.github.io/fetch-examples/fetch-request/)
11+
- [Basic Fetch example with Request object and Init object](https://mdn.github.io/fetch-examples/fetch-request-with-init/)
12+
- [Basic Fetch example with returned Response properties](https://mdn.github.io/fetch-examples/fetch-response/)
13+
- [Fetch cloned Response example](https://mdn.github.io/fetch-examples/fetch-response-clone/)
14+
- [Fetch text example](https://mdn.github.io/fetch-examples/fetch-text/)
15+
- [Fetch example with Request object and Init object](https://mdn.github.io/fetch-examples/fetch-with-init-then-request/)
16+
- [object-fit gallery with fetched images](https://mdn.github.io/fetch-examples/object-fit-gallery-fetch/)

‎fetch/basic-fetch/flowers.jpg

59.2 KB
Loading

‎fetch/basic-fetch/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<meta name="viewport" content="width=device-width" />
7+
8+
<title>Fetch basic example</title>
9+
10+
<link rel="stylesheet" href="" />
11+
</head>
12+
13+
<body>
14+
<h1>Fetch basic example</h1>
15+
16+
<img src="" class="my-image" />
17+
</body>
18+
<script>
19+
const myImage = document.querySelector(".my-image");
20+
21+
fetch("flowers.jpg")
22+
.then((response) => {
23+
if (!response.ok) {
24+
throw new Error(`HTTP error, status = ${response.status}`);
25+
}
26+
return response.blob();
27+
})
28+
.then((myBlob) => {
29+
const objectURL = URL.createObjectURL(myBlob);
30+
myImage.src = objectURL;
31+
})
32+
.catch((error) => {
33+
const p = document.createElement("p");
34+
p.appendChild(document.createTextNode(`Error: ${error.message}`));
35+
document.body.insertBefore(p, myImage);
36+
});
37+
</script>
38+
</html>

‎fetch/fetch-array-buffer/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<meta name="viewport" content="width=device-width" />
7+
8+
<title>Fetch arrayBuffer example</title>
9+
10+
<link rel="stylesheet" href="" />
11+
</head>
12+
13+
<body>
14+
<h1>Fetch arrayBuffer example</h1>
15+
16+
<button class="play">Play</button>
17+
<button class="stop">Stop</button>
18+
<span class="error"></span>
19+
20+
<pre></pre>
21+
</body>
22+
<script>
23+
const pre = document.querySelector("pre");
24+
const myScript = document.querySelector("script");
25+
const play = document.querySelector(".play");
26+
const stop = document.querySelector(".stop");
27+
const errorDisplay = document.querySelector(".error");
28+
29+
// use fetch to load an audio track, and
30+
// decodeAudioData to decode it and stick it in a buffer.
31+
// Then we put the buffer into the source
32+
function getData() {
33+
const audioCtx = new AudioContext();
34+
35+
return fetch("viper.ogg")
36+
.then((response) => {
37+
if (!response.ok) {
38+
throw new Error(`HTTP error, status = ${response.status}`);
39+
}
40+
return response.arrayBuffer();
41+
})
42+
.then((buffer) => audioCtx.decodeAudioData(buffer))
43+
.then((decodedData) => {
44+
const source = new AudioBufferSourceNode(audioCtx);
45+
source.buffer = decodedData;
46+
source.connect(audioCtx.destination);
47+
return source;
48+
});
49+
}
50+
51+
// wire up buttons to stop and play audio
52+
play.onclick = () => {
53+
getData()
54+
.then((source) => {
55+
errorDisplay.innerHTML = "";
56+
source.start(0);
57+
play.disabled = true;
58+
})
59+
.catch((error) => {
60+
errorDisplay.appendChild(document.createTextNode(`Error: ${error.message}`));
61+
});
62+
};
63+
64+
stop.onclick = () => {
65+
source.stop(0);
66+
play.disabled = false;
67+
};
68+
69+
// dump script to pre element
70+
pre.innerHTML = myScript.innerHTML;
71+
</script>
72+
</html>

‎fetch/fetch-array-buffer/viper.ogg

663 KB
Binary file not shown.

‎fetch/fetch-json/index.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<meta name="viewport" content="width=device-width" />
7+
8+
<title>Fetch json example</title>
9+
10+
<link rel="stylesheet" href="style.css" />
11+
</head>
12+
13+
<body>
14+
<h1>Fetch json example</h1>
15+
<ul></ul>
16+
</body>
17+
<script>
18+
const myList = document.querySelector("ul");
19+
20+
fetch("products.json")
21+
.then((response) => {
22+
if (!response.ok) {
23+
throw new Error(`HTTP error, status = ${response.status}`);
24+
}
25+
return response.json();
26+
})
27+
.then((data) => {
28+
for (const product of data.products) {
29+
const listItem = document.createElement("li");
30+
31+
const nameElement = document.createElement("strong");
32+
nameElement.textContent = product.Name;
33+
34+
const priceElement = document.createElement("strong");
35+
priceElement.textContent = `£${product.Price}`;
36+
37+
listItem.append(
38+
nameElement,
39+
` can be found in ${product.Location}. Cost: `,
40+
priceElement,
41+
);
42+
myList.appendChild(listItem);
43+
}
44+
})
45+
.catch((error) => {
46+
const p = document.createElement("p");
47+
p.appendChild(document.createTextNode(`Error: ${error.message}`));
48+
document.body.insertBefore(p, myList);
49+
});
50+
</script>
51+
</html>

‎fetch/fetch-json/products.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"products": [
3+
{ "Name": "Cheese", "Price": 2.5, "Location": "Refrigerated foods" },
4+
{ "Name": "Crisps", "Price": 3, "Location": "the Snack isle" },
5+
{ "Name": "Pizza", "Price": 4, "Location": "Refrigerated foods" },
6+
{ "Name": "Chocolate", "Price": 1.5, "Location": "the Snack isle" },
7+
{ "Name": "Self-raising flour", "Price": 1.5, "Location": "Home baking" },
8+
{ "Name": "Ground almonds", "Price": 3, "Location": "Home baking" }
9+
]
10+
}

‎fetch/fetch-json/style.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
html {
2+
font-family: sans-serif;
3+
}
4+
5+
ul {
6+
list-style-type: none;
7+
display: flex;
8+
flex-flow: column;
9+
align-items: flex-start;
10+
}
11+
12+
li {
13+
margin-bottom: 10px;
14+
background-color: pink;
15+
font-size: 150%;
16+
border-top: 3px solid pink;
17+
border-bottom: 3px solid pink;
18+
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
19+
}
20+
21+
strong {
22+
background-color: purple;
23+
color: white;
24+
padding: 0 8px;
25+
border-top: 3px solid purple;
26+
border-bottom: 3px solid purple;
27+
text-shadow: 2px 2px 1px black;
28+
}

0 commit comments

Comments
 (0)