Session 1 basic article

by philll_t

HTML

<!DOCTYPE html>
<html>

  <body>

    <h1>
      Animals
    </h1>

    <input id="a" type="number" value="0" />
    <input id="b" type="number" value="0" />
    <button onclick="handleClick()">Click Me!</button>

    <script>
        var handleClick = function () {
          var elA     = document.getElementById("a");
          var elB     = document.getElementById("b");
          var elIndex = document.getElementById("index");
          
          var a = elA.value;
          var b = elB.value;
          
          var sum = Number(a) + Number(b);
          
          elIndex.textContent =  a + " + " + b + " = " + sum;
        }
    </script>

    <p>
      This page is all about animals!
    </p>
    <h2 id="index">
      Index
    </h2>

    <ul>
      <li><a href="#birds">Birds</a></li>
      <li><a href="#iguanas">Iguanas</a></li>
      <li>
        <ul>
          <li><a href="#in_captivity_as_pets">In Captivity as Pets</a></li>
          <li><a href="#range_and_habitat">Range and Habitat</a></li>
        </ul>
      </li>
    </ul>

    <h2 id="birds">
      Birds
    </h2>
    <div>
      <a href="#index"><small>Back to top.</small></a>
    </div>

    <p>
      <a target="_blank" href="https://www.nationalgeographic.com/animals/birds/">
        <img width="200px" src="https://www.nationalgeographic.com/content/dam/animals/rights-exempt/best-of-animals-2018/photo-ark-parrots-endangered-bird-world-intelligence-3.adapt.1900.1.jpg" />
      </a>
    </p>

    <p>
      <small><i>See more birds
          <a target="_blank" href="https://www.nationalgeographic.com/animals/birds/">here</a>.</i></small>
    </p>

    <p>
      The Magellanic penguin is named for the Portuguese explorer Ferdinand Magellan, whose crew spotted it while sailing around the tip of South America during their historic, if controversial, attempt to circumnavigate the world in 1519. This flightless seabird can be found on both the Atlantic and Pacific sides of the continent, mainly in...