I am trying to make a simple task manager. I added a clock at the top of the page and after a few check list I added few codes that will show me how much time of the day is left. I got that from my question: [How can I code a clock to show me that how much time is left of the day?](https://stackoverflow.com/questions/67968752/how-can-i-code-a-clock-to-show-me-that-how-much-time-is-left-of-the-day/67968868?noredirect=1#comment120135422_67968868)
I took the second answer and it was working separately as I wanted. But after I inserted that code to my main code the time is not being shown. It's just blank.
Here's my code:

```
    <html lang="en">
    <head>
        <title>Task Achievement</title>
        <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
        <script>
            function myFunction(item) {
                if (item.checked) {
                    item.parentNode.style.backgroundColor = "#8db600";
                } else {
                    item.parentNode.style.backgroundColor = "transparent";
                }
            }

        </script>
        <style>
            table { border:solid 1px #8db600; }
            body {
                background-color: #7ef9ff;
            }

            @import url('');

#clock {
    margin: auto;
    width: 300px;
    height: 50px ;
    background-color: black;
  font-family: "Concert One";
  color: #7ef9ff;
  font-size: 48px;

  text-align: center;
  padding: 5px 5px 5px 5px;
 }
 #task {
     width: 300px;
     margin: auto;
     color: #7ef9ff;
     background-color: black;
     font-family: "Concert One";

 }
 #tab {
     font-family: "Concert One";

 }

        </style>
    </head>
<body>

        <div id="clock"></div>
        <script>function currentTime() {
            var date = new Date(); /* creating object of Date class */
            var hour = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            if (hour > 12){
            hour = hour - 12;

            }
            else{
                hour = hour;
            }
            hour = updateTime(hour);
            min = updateTime(min);
            sec = updateTime(sec);
            document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */
              var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
          }

          function updateTime(k) {
            if (k < 10) {
              return "0" + k;
            }
            else {
              return k;
            }
          }

          currentTime(); /* calling currentTime() function to initiate the process */</script>

        <div id="task">
            <h4 align = 'center'>Today's Accomplishments</h4>
        </div>
        <div id="tab">
        <table align="center" #8db600" CELLSPACING=0>
            <tr>
                <td id="box">
                    Vocab<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
                <td id="box">
                    SAT-Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
                <td class="box">
                    SAT-Reading<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
                <td class="box">
                    SAT-Writing<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
                <td class="box">
                    Chemistry<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
                <td class="box">
                    Math<input type="checkbox" name="block" id="block" onclick="myFunction(this)">
                </td>
            </tr>
        </table>
        </div>

        <div id="clock"></div>
    <script>function currentTime() {
        var toDate=new Date();
  var tomorrow=new Date();
  tomorrow.setHours(24,0,0,0);
  var diffMS=tomorrow.getTime()/1000-toDate.getTime()/1000;
  var diffHr=Math.floor(diffMS/3600);
  diffMS=diffMS-diffHr*3600;
  var diffMi=Math.floor(diffMS/60);
  diffMS=diffMS-diffMi*60;
  var diffS=Math.floor(diffMS);
  var result=((diffHr<10)?"0"+diffHr:diffHr);
  result+=" : "+((diffMi<10)?"0"+diffMi:diffMi);
  result+=" : "+((diffS<10)?"0"+diffS:diffS);
        document.getElementById("clock").innerText = result; /* adding time to the div */
          var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */
      }

      function updateTime(k) {
        if (k < 10) {
          return "0" + k;
        }
        else {
          return k;
        }
      }

      currentTime(); /* calling currentTime() function to initiate the process */

</body>```

```