0

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? 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>```
eisha enan
  • 53
  • 7
  • Why do you have duplicate declarations of your function? Please clean up the code to contain the minimum reproducible example. https://stackoverflow.com/help/minimal-reproducible-example – ChrisG Jun 14 '21 at 12:59

2 Answers2

1

Your table is not being rendered properly because you are declaring it like this: <table align="center" #8db600" CELLSPACING=0>.

Is "#8db600"" supposed to be an attribute or an attribute value? Either way, you didn't finish either declaration, so it becomes a syntax error. Remove the stray "#8db600"".

Additionally, remove that duplicate declaration of the currentTime() function which is superfluous.

<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">
      <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>

</body>

</html>
Spectric
  • 30,714
  • 6
  • 20
  • 43
  • But the code you provided still shows the same output. The remaining time is not shown. – eisha enan Jun 14 '21 at 13:26
  • @eishaenan It shows the remaining time for me. Did you try running the code snippet? – Spectric Jun 14 '21 at 13:30
  • Yes sir I have, it's just blank as it was in my code too:( – eisha enan Jun 14 '21 at 13:33
  • @eishaenan This is what I see: https://imgur.com/a/SVfhihM – Spectric Jun 14 '21 at 13:35
  • and this is what I also see but maybe you didn't understand what was my actual problem, the black blank box at the bottom, I want there to be another clock/timer that will show me how much time is left of today!! something like the ans of my previous question the community: https://stackoverflow.com/questions/67968752/how-can-i-code-a-clock-to-show-me-that-how-much-time-is-left-of-the-day – eisha enan Jun 14 '21 at 13:40
1

I think I understand. You want 2 clocks, the first one showing NOW time and the second one showing time left in the day, am I right?.

In that case, the two div can not have the same ID and the function can not have the same name.

<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,
    #clock-left {
      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-left"></div>
  <script>
    function timeLeft() {
      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-left").innerText = result; /* adding time to the div */
      var t = setTimeout(function() {
        timeLeft()
      }, 1000); /* setting timer */
    }

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

    timeLeft(); /* calling currentTime() function to initiate the process */
  </script>
</body>
Pan Vi
  • 627
  • 6
  • 17