To improve on the later analog clock walkthrough we are going to walk you through creating a progress bar, actually of three (3) variations, each of which represents the seconds, minutes and the hour.
These progress bar is going to indicate the progression of its time value by gradually filling its empty space with solid content just like this.
This is another walkthrough in the JavaScript series working with time values.
In the first walkthrough of the series; Digital Clock - The Walkthrough, I introduced a few date methods, of which we are going to expand on, in the course of the series.
We also showed you how to use the date methods to get the individual time value from the date object and pass these values to the innerHtml property of div containers up to arriving at the digital clock.
For convenience, you may want to start out with the tutorial; digital clock -the walkthrough.
Without any further do let's get started.
Since this walkthrough is more of an improvement of the digital clock, we could move up the clock and include the div containers for the progress bar down the page
#clockCont{
margin-top:400px;
other necessary css...
}
We've just decreased the clockcont margin-top, so we can have more space on the page to include the progress bar div containers.
Note;
We're using all of the codes from the digital clock walkthrough, all we'll be doing is to modify it, just like we've adjusted the clock by changing the clockcont margin-top.
So let's add the progress bar containers to the markup section of our document.
<div id="seconds">Seconds</div>
<div id="minutes">Minutes</div>
<div id="hours">Hours</div>
So when you do this the whole setup for the markup would look like this;
<div id="clockCont">
<div class="clockContainer" id="clock" ></div>
<p id="period" ></p>
</div>
<div id="seconds" >Seconds</div>
<div id="minutes" >Minutes</div>
<div id="hours" >Hours</div>
That's all for the markup, we'll then headup to CSS to give effect to the styling of this few containers we just added.
We want the seconds, minutes and hours containers to have the same height but of course each container's width will be dependent on the container's value (i.e. as the time value increase on up to 60, the progression of the progress bar gradually fills the empty space to completion level).
We also want to centrally align our containers, we can easily do that using the margin-top and margin-left property.
We also can include a border-radius, so to have the edges of our containers round, a font-size and line-height to print our text legibly and centrally inside the container.
#seconds, #minutes, #hours{
height:100px;
color:white;
border-radius:10px;
left:50px;
margin-top:50px;
margin-left:50px;
line-height:100px;
font-size:50px;
font-weight:bolder;
box-shadow:2px 2px 15px white;
}
You've probably seen the last 3 lines where we essentially added a text color, a font-weight and box-shadow to our containers.
That's quite explanatory; the font-weight property emboldens our text inside the containers. The box-shadow property adds a 2pixels horizontal, 2pixels vertical and 15pixels blurred white shadow to the div containers.
So let's add a background colors to the containers.
#seconds {
background:linear-gradient(black, yellow, black);
}
#minutes{
background:linear-gradient(black, green, black);
}
#hours{
background:linear-gradient(black, blue, black);
}
You can add a 900px width to the containers to see how all of this is going, but of course it isn't necessary because our containers' width will be populated from JavaScript.
Let's get to JavaScript and add a few more interactivity so we don't just have a static container but an actual progress bar.
Remember this script from the digital clock walkthrough?
<script type="text/javascript">
function digClock(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var sec = document.getElementById('seconds');
sec.textContent = "Seconds in"+" "+seconds;
var mins = document.getElementById('minutes');
var hrs = document.getElementById('hours');
if(seconds<23){
sec.textContent = seconds;
}
sec.style.width = seconds*15+'px';
mins.style.width = minutes*15+'px';
hrs.style.width = hours*15+'px';
if(hours<12){
var period = "AM"
}
if(hours==12){
var period = "PM";
}
if(hours<10){
hours="0"+hours;
}
if(minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}
if(hours==0){
hours=12;
}
if(hours>12){
hours=hours-12;
var period = "PM"
}
var time = hours+":"+minutes+":"+seconds+" "+period;
document.getElementById('clock').innerHTML = time;
setTimeout(digClock, 1000);
}
digClock();
</script>
We'll add some modifications to this.
First we'll like to grab seconds, minutes and hours div containers using the document.getElementById method and assign them to variables.
var sec = document.getElementById('seconds');
var mins = document.getElementById('minutes');
var hrs = document.getElementById('hours');
Now that we have the containers, what we can do is to set the width of these containers to their corresponding values of seconds, minutes and hours. So that as this value increase so does it's width.
Let's use the seconds container to explain this.
The width of these containers has to be 900pixels, not for any technical reason, just so it aligns with the clock. What we want is this; as the seconds increases, the value of its container also increases and once the seconds gets to 60, the width of its container should be completed (i.e. 900pixels) and so the process starts all over again with an increment in the div container of the minutes.
This also is applicable to the minutes and hours container. How do we get at this?
ImageAt this point we now know that for every second we need to move our seconds container's width by 15px.
Illustrating this;
1seconds = 15pixels.
2sexonds = 30pixels.
•
•
•
60seconds = 900pixels.
Let's add this to our code.
sec.style.width = seconds*15+'px';
mins.style.width = minutes*15+'px';
hrs.style.width = hours*15+'px';
From this you can see that we've set the width of the seconds, minutes and hours container to constantly increase per second by 15pixels until it gets to 60counts where the width is completed.
So you can also see that our container is working just fine and is updated as there is an increment in the value of our seconds, minutes and hours.
At this point, I'm putting you to a challenge, what can you add to improve this progress bar?
I'll start, then give you chance to comment your best design.
So this is what I'll do; as the seconds container width increases, I'll add the seconds time value inside the seconds container and once this get up to a point where I can add the Seconds in "seconds time value", somewhere around 22seconds, I'll include that inside the seconds container.
This line of code takes care of that;
if(seconds<23){
sec.textContent = seconds;
}
sec.textContent = "Seconds in"+" "+seconds;
So from the above code, if the seconds value is less than 23seconds, then we set the textContent of the seconds container to the seconds, above that value we add the Seconds in seconds time value.
This brings us to the end of this walkthrough, and this is the totality of the code
<!DOCTYPE html>
<html>
<head>
<title>Digital clock</title>
<style type="text/css">
*{
margin:0px;
border:0px;
padding:0px;
}
body {
background-color:#292929;
}
#clockCont{
position:relative;
height:200px;
width:600px;
margin-top:400px;
margin-left:200px;
background:linear-gradient(10deg, black, white, black);
box-shadow:10px 10px 15px black;
}
.clockContainer{
position:absolute;
height:130px;
width:530px;
margin-top:35px;
margin-left:35px;
background-color:#292929;
font-size:80px;
font-family:serif;
text-align:center;
line-height:130px;
font-weight:bolder;
box-shadow:10px 10px 15px black;
text-shadow:20px 20px 10px black;
color:white;
}
#seconds, #minutes, #hours{
height:100px;
color:white;
border-radius:10px;
left:50px;
margin-top:50px;
margin-left:50px;
line-height:100px;
font-size:50px;
font-weight:bolder;
box-shadow:2px 2px 15px white;
}
#seconds {
background:linear-gradient(black, yellow, black);
}
#minutes{
background:linear-gradient(black, green, black);
}
#hours{
background:linear-gradient(black, blue, black);
}
</style>
</head>
<body>
<div id="clockCont">
<div class="clockContainer" id="clock" ></div>
<p id="period" ></p>
</div>
<div id="seconds" ></div>
<div id="minutes" >Minutes</div>
<div id="hours" >Hours</div>
</body>
<script type="text/javascript">
function digClock(){
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var sec = document.getElementById('seconds');
sec.textContent = "Seconds in"+" "+seconds;
var mins = document.getElementById('minutes');
var hrs = document.getElementById('hours');
if(seconds<23){
sec.textContent = seconds;
}
sec.style.width = seconds*15+'px';
mins.style.width = minutes*15+'px';
hrs.style.width = hours*15+'px';
if(hours<12){
var period = "AM"
}
if(hours==12){
var period = "PM";
}
if(hours<10){
hours="0"+hours;
}
if(minutes<10){
minutes="0"+minutes;
}
if(seconds<10){
seconds="0"+seconds;
}
if(hours==0){
hours=12;
}
if(hours>12){
hours=hours-12;
var period = "PM"
}
var time = hours+":"+minutes+":"+seconds+" "+period;
document.getElementById('clock').innerHTML = time;
setTimeout(digClock, 1000);
}
digClock();
</script>
</html>
Add your improvement to this as a comment.
No comments:
Post a Comment