advanced-concepts/index.html at master · njb90/advanced-concepts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self';font-src 'self'; img-src 'self' data: https:; style-src 'self' ; script-src 'self'"> -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Advanced Concepts</title>
  </head>
  <body>
    <div>
      <img
        src="./autoupload-fetch/images/pic.jpg"
        width="100"
        height="200"
        alt="sample picture"
      />
    </div>

    <div>
      <video width="320" height="220" controls>
        <source src="./autoupload-fetch/video/sledding.mp4" type="video/mp4" />
      </video>
    </div>
    <div id="raw-json"></div>
    <img src='http://res.cloudinary.com/picturecloud7/image/upload/c_fill,f_auto,h_300,q_auto,w_300/v1//autoupload-test/images/pic' height='300' width='300'/>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        fetch(
          "https://www.beckypeltz.me/advanced-concepts/autoupload-fetch/raw/data.json"
        )
          .then(response => {
            return response.json();
          })
          .then(myJson => {
            document.querySelector("#raw-json").innerHTML = JSON.stringify(
              myJson
            );
          });
      });
    </script>
  </body>
</html>