Question

In: Computer Science

HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">    &n

HTML

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Clock</title>

    <link rel="stylesheet" href="clock.css">

    <script src="clock.js"></script>

</head>

<body>

    <main>

        <h1>Digital clock</h1>

        <fieldset>

            <legend>Clock</legend>

            <span id="hours">&nbsp;</span>:

            <span id="minutes">&nbsp;</span>:

            <span id="seconds">&nbsp;</span>&nbsp;

            <span id="ampm">&nbsp;</span>

        </fieldset>

    </main>

</body>

</html>

CSS:

body {

    font-family: Arial, Helvetica, sans-serif;

    background-color: white;

    margin: 0 auto;

    width: 450px;

    border: 3px solid blue;

    padding: 0 2em 1em;

}

h1 {

    color: blue;

}

label {

    float: left;

    width: 11em;

    text-align: right;

    padding-bottom: .5em;

}

input {

    margin-left: 1em;

    margin-bottom: .5em;

}

fieldset {

    margin-bottom: 1em;

}

JavaScript:

"use strict";

var $ = function(id) { return document.getElementById(id); };

var displayCurrentTime = function() {

    var now = new Date(); //use the 'now' variable in all calculations, etc.

};

var padSingleDigit = function(num) {

if (num < 10) { return "0" + num; }

else { return num; }

};

window.onload = function() {

    // set initial clock display and then set interval timer to display

    // new time every second. Don't store timer object because it

    // won't be needed - clock will just run.

};


I need to create an application that displays the current time in hours, minutes and seconds. The display should use a 12-hour clock and indicate whether it’s AM or PM.

Thanks!

Solutions

Expert Solution

deserves thumbs up :)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Clock</title>

<style>
body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;

margin: 0 auto;

width: 450px;

border: 3px solid blue;

padding: 0 2em 1em;

}

h1 {

color: blue;

}

label {

float: left;

width: 11em;

text-align: right;

padding-bottom: .5em;

}

input {

margin-left: 1em;

margin-bottom: .5em;

}

fieldset {

margin-bottom: 1em;

}
</style>

<script >
window.onload = function() {
clock();
function clock() {
var now = new Date();
var TwentyFourHour = now.getHours();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var mid = 'pm';
if (min < 10) {
min = "0" + min;
}
if (hour > 12) {
hour = hour - 12;
}
if(hour==0){
hour=12;
}
if(TwentyFourHour < 12) {
mid = 'am';
}   
document.getElementById('currentTime').innerHTML = hour+':'+min+':'+sec +' '+mid ;
setTimeout(clock, 1000);
}
}

</script>

</head>

<body>

<main>

<h1>Digital clock</h1>

<fieldset>

<legend>Clock</legend>

<span id="currentTime">&nbsp;</span>

</fieldset>

</main>

</body>

</html>

venereology answered 1 year ago
Next > < Previous

Related Solutions

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet"...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet" href="main.css" /> </head> <body> <div class="app-wrap"> <header> <input type="text" autocomplete="on" class="search-box" placeholder="Enter your location..." /> </header> <main> <section class= "location"> <div class="city">Hyderabad, IN</div> <div class="date">Thursday 23 July 2020</div> </section> <div class="current"> <div class="temp">25<span>°c</span></div> <div class="weather">Rainy</div> <div class="hi-low">20°c / 23°c</div> </div> </main> </div> <script src="main.js"></script> </body> </html> MAIN.js const api = { key="091ff564240e0e16c46ae680b188ca3e" base: "https://api.openweathermap.org/data/2.5" }; const searchbox = document.querySelector(".search-box"); searchbox.addEventListener("keypress", setQuery); function setQuery(evt) {...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image...
Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image Swap Application</title> <link rel="stylesheet" type="text/css" href="image_swap.css"> <script type="text/javascript" src="image_swap.js"></script> </head> <body>     <main>         <h1>Fishing Images</h1>         <p>Click on an image to enlarge.</p>         <ul id="imageLinks">             <li><a href="images/release.jpg" title="Catch and Release">                 <img src="thumbnails/release.jpg" alt=""></a></li>             <li><a href="images/deer.jpg" title="Deer at Play">                 <img src="thumbnails/deer.jpg" alt=""></a></li>             <li><a href="images/hero.jpg" title="The Big One!">                 <img src="thumbnails/hero.jpg" alt=""></a></li>             <li><a href="images/bison.jpg" title="Grazing Bison">                 <img src="thumbnails/bison.jpg"...
BEFORE html <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>  
BEFORE html <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above"> I'm a paragraph; what color am I? </p>      <p>     I'm another paragraph, what color am I ?      </p>    <ol>      <li id = "fix1"> I'm another list item;what...
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change...
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change anything within the <head></head> section of the HTML * --> <!-- * * --> <!-- *************************************************************************************** --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .btn{border:1px solid black; padding:5px;display:inline-block} </style> </head> <body> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Nothing to change here in the <body> * --> <!-- * * --> <!-- ***************************************************************************************...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
images wont show what is wrong with this code? <html> <head> <title>Major North American Sports Leagues</title>...
images wont show what is wrong with this code? <html> <head> <title>Major North American Sports Leagues</title> <!-- Calling CSS File --> <link rel="stylesheet" href="layout.css"> <!-----------------------------------------> <!-- Navbar Links to both Pages --> <ul> <li><a class="active" href="MarcosPage.html">Marcos Page</a></li> <li><a href="JessesPage.html">Jesses Page</a></li> </ul> <!-----------------------------------------------------------------> <!-- Java Script for creating arrays --> <script> //Creates array for title names var title = []; title[0] = ["NBA"]; title[1] = ["MLB"]; title[2] = ["NHL"]; title[3] = ["NFL"]; title[4] = ["MLS"]; title[5] = ["CFL"]; //Creates array for...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT