experiment.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hassan Khairi's Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h1>Hassan Khairi</h1>
      <nav id="nav">

        <ul>
          <li> <a href="/home.html">Home</a> </li> 
          <li> <a href="/about.html"> About Me </a> </li>
          <li><a href="/projects.html"> My Projects </a></li>
          <li><a href="/contact.html">Contact Me </a></li>
          <li><a href="/experiment.html">Experiment</a></li>
        </ul>
        
      </nav>
    </main>
    <pre>This is an    <code>experimental</code>    page!</pre>
    <hr>
    <audio controls>
      <source src="watermelon.mp3" type="audio/mp3">
      Your browser does not support the audio tag.
    </audio>
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="grey" stroke-width="2" fill="blue" />
    </svg>

    <video width="320" height="240" controls>
      <source src="rk.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>

    <iframe src="https://www.youtube.com">
    </iframe>

    <br>
    <form>
      <label for="browser">Choose your browser from the list:</label>
      <input list="browsers" name="browser" id="browser">
      <datalist id="browsers">
        <option value="Edge">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>
      <input type="submit">
    </form>

    <div id="container"></div>

    <template id="template">
      <div>Click me</div>
    </template>

    <script>
      const container = document.getElementById("container");
      const template = document.getElementById("template");

      function clickHandler(event) {
        event.target.append(" — Clicked this div");
      }

      const secondClone = template.content.firstElementChild.cloneNode(true);
      secondClone.addEventListener("click", clickHandler);
      container.appendChild(secondClone);
    </script>

  </body>
</html>