bigcode/OctoCoder-Demo · Write a html and css code to render a clock

Question:

Write a html and css code to render a clock

Answer:

Here is an example of how you can use HTML, CSS, JavaScript, and jQuery to create a digital clock in your website or web app that displays the current time using UTC timezone (Coordinated Universal Time):

Create a basic HTML page with some boilerplate text for testing purposes:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <title>Digital Clock</title>


            <!-- Include Bootstrap 4 -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
            
            <!-- Add any other stylesheets here if needed -->


        </head>
        
        <body class="container mt-3 mb-2 p-3 bg-light rounded shadow border">
        
            <!-- Your content goes below this line! -->
            
        </body>
        
    </html>

Inside the body tag add two div tags as shown below:

        <div id="clock"></div>
        <script src="jquery.js"></script>

3) Next we will write our Javascript code inside the script element above by adding these lines of code after including jquery at step #2:

   $(document).ready(function(){
     function showTime() {
         var date = new Date(); // Get today's date


         var hours = date.getHours(); // Get hour from now
         var minutes = date.getMinutes(); // Get minute from now
         var seconds = date.getSeconds(); // Get second from now
         
         /*
          * If you want more accurate results uncomment 
          * next three lines and comment out previous one */
           
         //hours += Math.floor((minutes + 6)/60); 
         //minutes %= 60;  
         //seconds %= 60;  
         
         // Convert numbers into strings so they are displayed properly on screen
         hours = ("0"+hours).slice(-2);   
         minutes = ("0"+minutes).slice(-2);    
         seconds = ("0"+seconds).slice(-2);  


         $("#clock").text("Current Time : " + hours+":"+minutes+":"+seconds+""); 


         setTimeout('showTime()', 1000); 
     }


     showTime(); 
   });

4) Finally, let’s include bootstrap javascript library just before closing the head section like this:

    
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="<KEY>" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="<KEY>" crossorigin="anonymous"></script>

Spaces:

bigcode
/

OctoCoder-Demo

Runtime error

Write a html and css code to render a clock

Question:

Answer:

CodePen Output