Part 1 - HTML
Here we need to place the HTML code to tell it where to generate the story and what elements to use to do so.
Example:
<div class="clock">
<div id="clockDisplay"></div>
</div>
Part 2 - CSS
The CSS section is fairly simple to manipulate to your liking.
Example:
#clockDisplay{ background-color: rgba(0,0,0,0.70);
width: 350px;
border-radius: 50px;
padding: 5px;
height: 50px;
margin: 0 auto; }
.clock{ background-image: url(snow.gif);
width: 400px;
border: 10px solid white;
height: 220px;
padding-top: 180px;
box-shadow: 0px 0px 50px violet;
text-align: center;
border-radius: 400px;
text-shadow: 2px 2px 35px violet;
font-size: 45px;
font-family: 'Josefin Sans', sans-serif;
color: white;
margin: 0 auto; }
Part 3 - jQuery
For the jQuery part we'll need access to the newest jQuery library. Luckily all you have to do is take this tag from right below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and throw it into your header or footer!
Example:
function renderTime(){
var currentTime = new Date();
var diem = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('renderTime()',1000);
if (h == 0) {
h = 12;
}else if (h > 12){
h = h - 12;
diem = "PM";
}
if (h < 10){
h = "0" + h;
}
if (m < 10){
m = "0" + m;
}
if (s < 10){
s = "0" + s;
}
var clock = document.getElementById('clockDisplay');
clock.textContent = h + ":" + m + ":" + s + " " + diem;
clock.innerText = h + ":" + m + ":" + s + " " + diem;
}
renderTime();
