Clock

by eulomelo

HTML

<!DOCTYPE HTML>
<html>

  <head>
    <title>Clock</title>
    <meta charset="UTF-8">
    <style>
      body {
        font-family: monospace;
      }

      .clock {
        font-size: 50px;

      }

    </style>
  </head>

  <body>
    <center>
      <h1>
        Simple Clock
      </h1>
      <input type="button" id="Reset" value="Reset">
      <input type="button" id="Start" value="Start">
      <input type="button" id="Stop" value="Stop "><br>
      <label for="cars">Choose a Mode:</label>

      <select name="mode" id="modes">
        <option value="Clock">Clock</option>
        <option value="Stopwatch">Stopwatch</option>
      </select>
    </center>

    <script>
      let clock = document.createElement('div');
      clock.classList.add('clock');
      document.body.appendChild(clock);

      let selection = document.getElementById("modes");
      let reset = document.getElementById("Reset");
      let start = document.getElementById("Start");
      let stop = document.getElementById("Stop");
      let mode = "Clock";
      let stopwatchtime = 0;
      let stopwatchbutton = "Stop";

      reset.addEventListener("click", function() {
        console.log(mode);
      })

      selection.addEventListener("change", function() {
        if (selection.value == "Stopwatch") {
          console.log("Stopwatch");
          mode = "Stopwatch";
        }
        if (selection.value == "Clock") {
          console.log("Clock");
          mode = "Clock";
        }
      })

      start.addEventListener("click", function() {
        stopwatchbutton = "Start";
      })

      Stop.addEventListener("click", function() {
        stopwatchbutton = "Stop";
      })
      Reset.addEventListener("click", function() {
        stopwatchbutton = "Stop";
        stopwatchtime = 0;
      })


      function time() {
        if (mode == "Clock") {
          var d = new Date();
          var s = d.getSeconds();
          var m = d.getMinutes();
          var h = d.getHours();
     ...