<!-- 
  (C) Anh Hoang Nguyen
  for Assignment 2, 420-DW1-AS, Winter 2025
  Demo at: https://aaanh.github.io/intro-to-webdev/assignments/a2
          is soft-protected by password: "420_dw1_as_w2025"
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Detailed Portfolio</title>
    <script src="../auth.js">

    </script>
  </head>
  <body>
    <h1>HTML Text Formatting and Links Practice</h1>
    <h2>Text Formatting</h2>
    <p>This is a simple text with different formatting:</p>
    <p><ins>This text has been inserted</ins></p>
    <p><del>This text has been deleted</del></p>
    <p><em>This text is emphasized (italicized)</em></p>
    <p><b>This text is bold</b></p>
    <p>This is a subscript text H<sub>2</sub>O</p>
    <p>This is a superscript text x<sup>2</sup></p>
    <p>Below is an image of a cat</p>
    <blockquote style="background: #aaaaaa77; padding: 1rem">
      <span
        style="
          border-radius: 100%;
          border: solid 1px black;
          padding: 1pt;
          width: 20px;
          height: 20px;
          display: inline-block;
          text-align: center;
          background: #1111cc50;
        "
        >i</span
      >
      Refresh for different images and links
    </blockquote>
    <a id="cat-image-url" href=""></a>
    <br />
    <img width="200" id="cat-image" />
    <br />
    <a id="cat-image-url-1" href=""></a>
    <br />
    <img width="200" id="cat-image-1" />
  </body>
  <script>
    fetch(
      "https://api.thecatapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=2"
    )
      .then((response) => {
        return response.json();
      })
      .then((parsed) => {
        const catImg = document.getElementById("cat-image");
        const catImgUrl = document.getElementById("cat-image-url");
        catImg.setAttribute("src", parsed[0].url);
        catImgUrl.setAttribute("href", parsed[0].url);
        catImgUrl.innerText = parsed[0].url;

        const catImg1 = document.getElementById("cat-image-1");
        const catImgUrl1 = document.getElementById("cat-image-url-1");
        catImg1.setAttribute("src", parsed[1].url);
        catImgUrl1.setAttribute("href", parsed[1].url);
        catImgUrl1.innerText = parsed[1].url;
      });
  </script>
</html>
