├── README.md
└── fetch
    ├── CODE_OF_CONDUCT.md
    ├── LICENSE
    ├── README.md
    ├── basic-fetch
        ├── flowers.jpg
        └── index.html
    ├── fetch-array-buffer
        ├── index.html
        └── viper.ogg
    ├── fetch-json
        ├── index.html
        ├── products.json
        └── style.css
    ├── fetch-request-with-init
        ├── flowers.jpg
        └── index.html
    ├── fetch-request
        ├── flowers.jpg
        └── index.html
    ├── fetch-response-clone
        ├── flowers.jpg
        └── index.html
    ├── fetch-response
        ├── flowers.jpg
        └── index.html
    ├── fetch-text
        ├── index.html
        ├── page1.txt
        ├── page2.txt
        ├── page3.txt
        └── style.css
    ├── fetch-with-init-then-request
        ├── flowers.jpg
        └── index.html
    └── object-fit-gallery-fetch
        ├── images
            ├── pic1.jpg
            ├── pic10.jpg
            ├── pic11.jpg
            ├── pic12.jpg
            ├── pic13.jpg
            ├── pic14.jpg
            ├── pic15.jpg
            ├── pic16.jpg
            ├── pic2.jpg
            ├── pic3.jpg
            ├── pic4.jpg
            ├── pic5.jpg
            ├── pic6.jpg
            ├── pic7.jpg
            ├── pic8.jpg
            └── pic9.jpg
        ├── index.html
        ├── main.js
        └── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # fetch-examples
2 | 
3 | > NOTE: The contents of this repository has been moved to [dom-examples/fetch](https://github.com/mdn/dom-examples/tree/master/fetch)
4 | 
5 | A repository of Fetch examples. See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API for the corresponding documentation.
6 | 


--------------------------------------------------------------------------------
/fetch/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 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 | -->
17 | 


--------------------------------------------------------------------------------
/fetch/LICENSE:
--------------------------------------------------------------------------------
  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/>
117 | 


--------------------------------------------------------------------------------
/fetch/README.md:
--------------------------------------------------------------------------------
 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/)
17 | 


--------------------------------------------------------------------------------
/fetch/basic-fetch/flowers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/basic-fetch/flowers.jpg


--------------------------------------------------------------------------------
/fetch/basic-fetch/index.html:
--------------------------------------------------------------------------------
 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>
39 | 


--------------------------------------------------------------------------------
/fetch/fetch-array-buffer/index.html:
--------------------------------------------------------------------------------
 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>
73 | 


--------------------------------------------------------------------------------
/fetch/fetch-array-buffer/viper.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/fetch-array-buffer/viper.ogg


--------------------------------------------------------------------------------
/fetch/fetch-json/index.html:
--------------------------------------------------------------------------------
 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>
52 | 


--------------------------------------------------------------------------------
/fetch/fetch-json/products.json:
--------------------------------------------------------------------------------
 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 | }
11 | 


--------------------------------------------------------------------------------
/fetch/fetch-json/style.css:
--------------------------------------------------------------------------------
 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 | }
29 | 


--------------------------------------------------------------------------------
/fetch/fetch-request-with-init/flowers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/fetch-request-with-init/flowers.jpg


--------------------------------------------------------------------------------
/fetch/fetch-request-with-init/index.html:
--------------------------------------------------------------------------------
 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 Request example with init</title>
 9 | 
10 |     <link rel="stylesheet" href="" />
11 |   </head>
12 | 
13 |   <body>
14 |     <h1>Fetch Request with init example</h1>
15 |     <img src="" />
16 |   </body>
17 |   <script>
18 |     const myImage = document.querySelector("img");
19 | 
20 |     const myHeaders = new Headers();
21 | 
22 |     const myOptions = {
23 |       method: "GET",
24 |       headers: myHeaders,
25 |       mode: "cors",
26 |       cache: "default",
27 |     };
28 | 
29 |     const myRequest = new Request("flowers.jpg", myOptions);
30 | 
31 |     fetch(myRequest)
32 |       .then((response) => {
33 |         if (!response.ok) {
34 |           throw new Error(`HTTP error, status = ${response.status}`);
35 |         }
36 |         return response.blob();
37 |       })
38 |       .then((blob) => {
39 |         const objectURL = URL.createObjectURL(blob);
40 |         myImage.src = objectURL;
41 |       })
42 |       .catch((error) => {
43 |         const p = document.createElement("p");
44 |         p.appendChild(document.createTextNode(`Error: ${error.message}`));
45 |         document.body.insertBefore(p, myImage);
46 |       });
47 |   </script>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/fetch/fetch-request/flowers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/fetch-request/flowers.jpg


--------------------------------------------------------------------------------
/fetch/fetch-request/index.html:
--------------------------------------------------------------------------------
 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 Request example</title>
 9 |   </head>
10 | 
11 |   <body>
12 |     <h1>Fetch Request example</h1>
13 |     <img src="" />
14 |   </body>
15 |   <script>
16 |     const myImage = document.querySelector("img");
17 |     const myRequest = new Request("flowers.jpg");
18 | 
19 |     fetch(myRequest)
20 |       .then((response) => {
21 |         if (!response.ok) {
22 |           throw new Error(`HTTP error, status = ${response.status}`);
23 |         }
24 |         return response.blob();
25 |       })
26 |       .then((myBlob) => {
27 |         const objectURL = URL.createObjectURL(myBlob);
28 |         myImage.src = objectURL;
29 |       })
30 |       .catch((error) => {
31 |         const p = document.createElement("p");
32 |         p.appendChild(document.createTextNode(`Error: ${error.message}`));
33 |         document.body.insertBefore(p, myImage);
34 |       });
35 |   </script>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/fetch/fetch-response-clone/flowers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/fetch-response-clone/flowers.jpg


--------------------------------------------------------------------------------
/fetch/fetch-response-clone/index.html:
--------------------------------------------------------------------------------
 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 response clone example</title>
 9 | 
10 |     <style>
11 |       img {
12 |         width: 300px;
13 |         border: 2px solid black;
14 |         box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9);
15 |         margin: 0 10px;
16 |       }
17 |     </style>
18 |   </head>
19 | 
20 |   <body>
21 |     <h1>Fetch response clone example</h1>
22 |     <img src="" class="img1" />
23 |     <img src="" class="img2" />
24 |   </body>
25 |   <script>
26 |     const image1 = document.querySelector(".img1");
27 |     const image2 = document.querySelector(".img2");
28 | 
29 |     fetch("flowers.jpg").then((response1) => {
30 |       if (!response1.ok) {
31 |         showError(image1, `HTTP error, status = ${response1.status}`);
32 |       } else {
33 |         const response2 = response1.clone();
34 |         useResponse(response1, image1);
35 |         useResponse(response2, image2);
36 |       }
37 |     });
38 | 
39 |     function useResponse(response, image) {
40 |       response
41 |         .blob()
42 |         .then((myBlob) => {
43 |           const objectURL = URL.createObjectURL(myBlob);
44 |           image.src = objectURL;
45 |         })
46 |         .catch((error) => {
47 |           const p = document.createElement("p");
48 |           p.appendChild(document.createTextNode(`Error: ${error}`));
49 |           document.body.insertBefore(p, image);
50 |         });
51 |     }
52 |   </script>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/fetch/fetch-response/flowers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/fetch-response/flowers.jpg


--------------------------------------------------------------------------------
/fetch/fetch-response/index.html:
--------------------------------------------------------------------------------
 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 response example</title>
 9 | 
10 |     <link rel="stylesheet" href="" />
11 |   </head>
12 | 
13 |   <body>
14 |     <h1>Fetch basic response example</h1>
15 |     <img src="" />
16 |   </body>
17 |   <script>
18 |     const myImage = document.querySelector("img");
19 | 
20 |     const myRequest = new Request("flowers.jpg");
21 | 
22 |     fetch(myRequest)
23 |       .then((response) => {
24 |         console.log('response.type =', response.type);
25 |         console.log('response.url =', response.url);
26 |         console.log('response.userFinalURL =', response.useFinalURL);
27 |         console.log('response.status =', response.status);
28 |         console.log('response.ok =', response.ok);
29 |         console.log('response.statusText =', response.statusText);
30 |         console.log('response.headers =', response.headers);
31 |         if (!response.ok) {
32 |           throw new Error(`HTTP error, status = ${response.status}`);
33 |         }
34 |         return response.blob();
35 |       })
36 |       .then((myBlob) => {
37 |         const objectURL = URL.createObjectURL(myBlob);
38 |         myImage.src = objectURL;
39 |       })
40 |       .catch((error) => {
41 |         const p = document.createElement("p");
42 |         p.appendChild(document.createTextNode(`Error: ${error.message}`));
43 |         document.body.insertBefore(p, myImage);
44 |       });
45 | 
46 |     const myBlob = new Blob();
47 |     const options = { status: 200, statusText: "SuperSmashingGreat!" };
48 |     const myResponse = new Response(myBlob, options);
49 |   </script>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/fetch/fetch-text/index.html:
--------------------------------------------------------------------------------
 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 text example</title>
 9 | 
10 |     <link rel="stylesheet" href="style.css" />
11 |   </head>
12 | 
13 |   <body>
14 |     <h1>Fetch text example</h1>
15 |     <ul>
16 |       <li><a data-page="page1">Page 1</a></li>
17 |       <li><a data-page="page2">Page 2</a></li>
18 |       <li><a data-page="page3">Page 3</a></li>
19 |     </ul>
20 |     <article></article>
21 |   </body>
22 |   <script>
23 |     const myArticle = document.querySelector("article");
24 |     const myLinks = document.querySelectorAll("ul a");
25 |     for (const link of myLinks) {
26 |       link.onclick = (e) => {
27 |         e.preventDefault();
28 |         const linkData = e.target.getAttribute("data-page");
29 |         getData(linkData);
30 |       };
31 |     }
32 | 
33 |     function getData(pageId) {
34 |       console.log(pageId);
35 |       const myRequest = new Request(`${pageId}.txt`);
36 | 
37 |       fetch(myRequest)
38 |         .then((response) => {
39 |           if (!response.ok) {
40 |             throw new Error(`HTTP error, status = ${response.status}`);
41 |           }
42 |           return response.text();
43 |         })
44 |         .then((text) => {
45 |           myArticle.innerText = text;
46 |         })
47 |         .catch((error) => {
48 |           myArticle.innerText = `Error: ${error.message}`;
49 |         });
50 |     }
51 |   </script>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/fetch/fetch-text/page1.txt:
--------------------------------------------------------------------------------
1 | Page 1: A desparate journey
2 | 
3 | This is the first exciting part of our story! Once upon a time, a man was creeping into a dark forest, to try to find the woodcutter's cottage. Somewhere, an owl hooted. A feeling of lingering dread spread all over his body, but he pressed on regardless.
4 | 


--------------------------------------------------------------------------------
/fetch/fetch-text/page2.txt:
--------------------------------------------------------------------------------
1 | Page 2: Light at the end of the tunnel
2 | 
3 | Brambles tugged at his clothes, and the rain lashed down, making our hero bruised and cold. when hope was all but lost, he noticed a dim light shining through the trees — this must be the woodcutter's cottage. This very sight spurred him to continue.
4 | 


--------------------------------------------------------------------------------
/fetch/fetch-text/page3.txt:
--------------------------------------------------------------------------------
1 | Page 3: The end unseen?
2 | 
3 | A kilometer or so more, and the cottage was now in sight — our hero could see lights shining in the windows, and a figure shuffling around within! This was the moment he was waiting for surely! He tiptoed up to the door, and carefully tried the handle. Fnding it unlocked, he burst open the door and shouted "your time has come, scoundrel..!" He was slightly disappointed to come face to face with a slightly scared dog.
4 | 


--------------------------------------------------------------------------------
/fetch/fetch-text/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   font-family: sans-serif;
 3 | }
 4 | 
 5 | h1,
 6 | h2 {
 7 |   text-align: center;
 8 | }
 9 | 
10 | article {
11 |   width: 400px;
12 |   min-height: 480px;
13 |   margin: 0 auto;
14 |   padding: 10px;
15 |   background-image: repeating-linear-gradient(
16 |       to bottom,
17 |       transparent 1px,
18 |       transparent 20px,
19 |       rgb(0, 0, 150) 21px
20 |     ),
21 |     linear-gradient(to bottom right, white, #ccc);
22 |   border-radius: 20px;
23 |   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
24 |   line-height: 1.5;
25 | }
26 | 
27 | ul {
28 |   list-style-type: none;
29 |   padding-left: 0;
30 |   width: 480px;
31 |   margin: 0 auto;
32 |   padding-bottom: 30px;
33 | }
34 | 
35 | li {
36 |   float: left;
37 |   width: 33%;
38 | }
39 | 
40 | ul li a {
41 |   display: block;
42 |   text-align: center;
43 |   color: blue;
44 |   text-decoration: underline;
45 |   cursor: pointer;
46 | }
47 | 
48 | ul li a:hover,
49 | ul li a:focus {
50 |   text-decoration: none;
51 | }
52 | 


--------------------------------------------------------------------------------
/fetch/fetch-with-init-then-request/flowers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/fetch-with-init-then-request/flowers.jpg


--------------------------------------------------------------------------------
/fetch/fetch-with-init-then-request/index.html:
--------------------------------------------------------------------------------
 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 with init then Request example</title>
 9 | 
10 |     <link rel="stylesheet" href="" />
11 |   </head>
12 | 
13 |   <body>
14 |     <h1>Fetch with init then Request example</h1>
15 |     <img src="" />
16 |   </body>
17 |   <script>
18 |     const myImage = document.querySelector("img");
19 | 
20 |     const myHeaders = new Headers();
21 |     myHeaders.append("Content-Type", "image/jpeg");
22 | 
23 |     const myOptions = {
24 |       method: "GET",
25 |       headers: myHeaders,
26 |       mode: "cors",
27 |       cache: "default",
28 |     };
29 | 
30 |     const myRequest = new Request("flowers.jpg");
31 | 
32 |     fetch(myRequest, myOptions)
33 |       .then((response) => {
34 |         if (!response.ok) {
35 |           throw new Error(`HTTP error, status = ${response.status}`);
36 |         }
37 |         return response.blob();
38 |       })
39 |       .then((blob) => {
40 |         const objectURL = URL.createObjectURL(blob);
41 |         myImage.src = objectURL;
42 |       })
43 |       .catch((error) => {
44 |         var p = document.createElement("p");
45 |         p.appendChild(document.createTextNode(`Error: ${error.message}`));
46 |         document.body.insertBefore(p, myImage);
47 |       });
48 |   </script>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic1.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic10.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic11.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic12.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic13.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic14.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic15.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic16.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic2.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic3.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic4.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic5.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic6.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic7.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic8.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/images/pic9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/fetch-examples/daa95b3a1d38e30efafd30c32fe66c5077d43c70/fetch/object-fit-gallery-fetch/images/pic9.jpg


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/index.html:
--------------------------------------------------------------------------------
 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>Object-fit gallery Fetch()</title>
 9 | 
10 |     <link rel="stylesheet" href="style.css" />
11 |   </head>
12 | 
13 |   <body>
14 |     <div class="top-row">
15 |       <img class="thumb" />
16 |       <img class="thumb" />
17 |       <img class="thumb" />
18 |       <img class="thumb" />
19 |     </div>
20 |     <div class="second-row">
21 |       <img class="thumb" />
22 |       <img class="thumb" />
23 |       <img class="thumb" />
24 |       <img class="thumb" />
25 |     </div>
26 |     <div class="third-row">
27 |       <img class="thumb" />
28 |       <img class="thumb" />
29 |       <img class="thumb" />
30 |       <img class="thumb" />
31 |     </div>
32 |     <div class="bottom-row">
33 |       <img class="thumb" />
34 |       <img class="thumb" />
35 |       <img class="thumb" />
36 |       <img class="thumb" />
37 |     </div>
38 |     <img class="main" />
39 |   </body>
40 |   <script src="main.js"></script>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/main.js:
--------------------------------------------------------------------------------
 1 | const thumbs = document.querySelectorAll(".thumb");
 2 | const mainImg = document.querySelector(".main");
 3 | 
 4 | thumbs.forEach((thumb, index) => {
 5 |   const requestObj = `images/pic${index + 1}.jpg`;
 6 | 
 7 |   fetch(requestObj)
 8 |     .then((response) => {
 9 |       if (!response.ok) {
10 |         throw new Error(`HTTP error, status = ${response.status}`);
11 |       }
12 |       return response.blob();
13 |     })
14 |     .then((blob) => displayImage(thumb, blob))
15 |     .catch((error) => {
16 |       thumb.title = `Image load failed: ${error.message}`;
17 |     });
18 | });
19 | 
20 | function displayImage(currentThumb, blob) {
21 |   const objectURL = URL.createObjectURL(blob);
22 |   currentThumb.setAttribute("src", objectURL);
23 |   currentThumb.onclick = () => {
24 |     mainImg.setAttribute("src", objectURL);
25 |     mainImg.className = "blowup";
26 |     for (const thumb of thumbs) {
27 |       thumb.className = "thumb darken";
28 |     }
29 |   };
30 | }
31 | 
32 | mainImg.onclick = () => {
33 |   mainImg.className = "main";
34 |   for (const thumb of thumbs) {
35 |     thumb.className = "thumb";
36 |   }
37 | };
38 | 


--------------------------------------------------------------------------------
/fetch/object-fit-gallery-fetch/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   margin: 0;
 3 |   background: black;
 4 |   height: 100%;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0;
 9 |   width: 100%;
10 |   height: inherit;
11 | }
12 | 
13 | /* the three main rows going down the page */
14 | 
15 | body > div {
16 |   height: 25%;
17 | }
18 | 
19 | .thumb {
20 |   float: left;
21 |   width: 25%;
22 |   height: 100%;
23 |   object-fit: cover;
24 | }
25 | 
26 | .main {
27 |   display: none;
28 | }
29 | 
30 | .blowup {
31 |   display: block;
32 |   position: absolute;
33 |   object-fit: contain;
34 |   object-position: center;
35 |   top: 0;
36 |   left: 0;
37 |   width: 100%;
38 |   height: 100%;
39 |   z-index: 2000;
40 | }
41 | 
42 | .darken {
43 |   opacity: 0.4;
44 | }
45 | 


--------------------------------------------------------------------------------