We Keep Coding

Making This Javascript Countdown Timer Responsive

I am currently using a modified version of a JS countdown element for a site coming up. I've been learning a ton of how to use flex grids but haven't done a lot with block/inline-block, etc.
Currently when the countdown hits around 945px, the 4 inline-block boxes stay as 4 columns and end up overflowing to the edge of the screen:
My desired result would be at around 945px, the 4 columns would collapse to 2 side by side, with the text still being under their proper boxes. I was messing around altering the code in "inspect" in chrome and accidentally succeeded in doing this, but the 4 lines of text were still below the element with the boxes rather than in their proper place. Here is what my desired result looks like:
Here is the code:
https://codepen.io/Lancewalker/pen/QxpbZx
$(function (){
function countdown() {
var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();
var remTime = evenTime - currentTime;
var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);
hur %= 24;
min %= 60;
sec %= 60;
hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;
$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);
setTimeout(countdown, 1000);
}
countdown();
});
body {
background-color: #333;
}
.container {
width: 800px;
height: 350px;
margin: auto;
text-align: center
}
.container h2 {
color: #fff;
font-size: 30px;
font-family: Exo, Arial, Sans-serif;
padding: 50px 0 20px;
font-weight: normal
}
.container .content {
width: 100%;
}
.container .content > div {
display: inline-block;
margin: 35px 10px 0;
width: 120px;
height: 130px;
background: rgb(146, 163, 191, .6);
border-radius: 8px;
border: 1px solid #fff;
color: #fff;
line-height: 138px;
font-family: Exo, arial, sans-serif;
font-size: 55px;
}
.container .title {
width: ;
height: 50px;
position: relative
}
.container .title span {
display: inline-block;
width: 140px;
font-size: 20px;
font-family: 'Exo', arial, sans-serif;
color: #fff;
line-height: 50px;
}
<div class="container">
<h2>Apartments Coming Soon!</h2>
<div class="content">
<div class="days">85</div>
<div class="hours">22</div>
<div class="minutes">33</div>
<div class="seconds">54</div>
</div>
<div class="title">
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>

You have your .container class width set as a hard 800px value for starters.
.container {
max-width: 800px;
width: 90%;
height: 350px;
margin: auto;
text-align: center
}
Making this simple change will have your timer squares start to collapse underneath. You will have to make some more changes yourself but I would look into media queries and responsive design with %. Anytime you hard code a number such as 800px you will run into issues when you get to a smaller size.
I would also consider refactoring your HTML so that the time squares and titles are together.
<div class="time-square">
<div class="time-square-time">88</div>
<div class="time-square-title">Days</div>
</div>
You will be able to move your HTML around a little more cleanly this way, you are going to run into a few issues matching the title to the time in your current structure

I would suggest restructuring your markup slightly - wrapping the number and the text ('day', 'hour', etc) in the same parent. This will ensure they stay together when content is wrapped.
For the CSS, change width: 800px to max-width - this ensure the content resizes on screens smaller than 800px.
You can then use CSS Grid to layout the boxes and simplify the code.
Codepen
$(function() {
function countdown() {
var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();
var remTime = evenTime - currentTime;
var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);
hur %= 24;
min %= 60;
sec %= 60;
hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;
$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);
setTimeout(countdown, 1000);
}
countdown();
});
body {
background: #333;
}
.container {
max-width: 800px;
height: 350px;
margin: auto;
text-align: center;
}
.container h2 {
color: #fff;
font-size: 30px;
font-family: Exo, Arial, Sans-serif;
padding: 50px 0 20px;
font-weight: normal;
}
.content {
display: grid;
grid-template-columns: repeat(auto-fit, 120px);
/* use grid gap instead of margin around boxes */
grid-gap: 10px;
justify-content: center;
}
.box>div {
height: 130px;
background: rgb(146, 163, 191, 0.6);
border-radius: 8px;
border: 1px solid #fff;
color: #fff;
font-family: Exo, arial, sans-serif;
font-size: 55px;
margin-bottom: 20px;
/* use flexbox instead of lineheight for vertical centering */
display: flex;
align-items: center;
justify-content: center;
}
.box span {
display: inline-block;
font-size: 20px;
font-family: "Exo", arial, sans-serif;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Apartments Coming Soon!</h2>
<div class="content">
<div class="box">
<div class="days">85</div>
<span>Days</span>
</div>
<div class="box">
<div class="hours">22</div>
<span>Hours</span>
</div>
<div class="box">
<div class="minutes">33</div>
<span>Minutes</span>
</div>
<div class="box">
<div class="seconds">54</div>
<span>Seconds</span>
</div>
</div>
</div>

Just split into to two parts of div, it will looks fine.
If I misunderstood your question, please let me know.
$(function (){
function countdown() {
var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();
var remTime = evenTime - currentTime;
var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);
hur %= 24;
min %= 60;
sec %= 60;
hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;
$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);
setTimeout(countdown, 1000);
}
countdown();
});
body {
background-color: #333;
}
.container {
width: 800px;
height: 350px;
margin: auto;
text-align: center
}
.container h2 {
color: #fff;
font-size: 30px;
font-family: Exo, Arial, Sans-serif;
padding: 50px 0 20px;
font-weight: normal
}
.container .content {
width: 100%;
}
.container .content > div {
display: inline-block;
margin: 35px 10px 0;
width: 120px;
height: 130px;
background: rgb(146, 163, 191, .6);
border-radius: 8px;
border: 1px solid #fff;
color: #fff;
line-height: 138px;
font-family: Exo, arial, sans-serif;
font-size: 55px;
}
.container .title {
width: ;
height: 50px;
position: relative
}
.container .title span {
display: inline-block;
width: 140px;
font-size: 20px;
font-family: 'Exo', arial, sans-serif;
color: #fff;
line-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Apartments Coming Soon!</h2>
<div class="content">
<div class="days">85</div>
<div class="hours">22</div>
</div>
<div class="title">
<span>Days</span>
<span>Hours</span>
</div>
<div class="content">
<div class="minutes">33</div>
<div class="seconds">54</div>
</div>
<div class="title">
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>

You can use CSS Media Queries like following:
#media (max-width: 992px) {
.container .content > div, .container .title span {
width: 20%;
}
}
#media (max-width: 768px) {
.container .content > div, .container .title span {
width: 50%;
}
}

JavaScript Beep Sound incorrect on mobile but desktop

I creat short script want to make a beep sound every second.
It just a simple JS in HTML file.
When it run on desktop (chrome) it working (beep every sec) but when it run on mobile (both android and ios) it only beep once and gone.
Can anyone suggest a fix?
I try many method but cannot find a fix.
here is script
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 !important;
padding: 0 !important;
}
h1 {
margin-top: 1px;
margin-bottom: 1px;
margin-right: 1px;
margin-left: 1px;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
label {
padding: 15px 2px 2px 5px;
display: inline-block;
}
select.form-control{display:inline-block}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.button:hover {
background-color: #45a049;
}
table, th, td {
border: 0px;
padding:0;
margin:0;
border-collapse: collapse;
}
td {
border: 0px;
padding:1;
margin:0;
}
</style>
<script>
var bit = 18;
var flat = 1;
var cmd = [0,0,0,0,0,0,0,0,0,0,0,0,0];
var j = 0;
var secTime = 0;
var t;
var confirmCmd;
var beep = function () {
(new
Audio(
"data:audio/wav;base64,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 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="
)).play();
}
function clock () {
var h1 = document.getElementById('clockShow'),
seconds = 0, minutes = 0, hours = 0;
function add() {
seconds++;
secTime++
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
beep();
}
function timer() {
t = setTimeout(add, 1000);
}
/* Start button */
start.onclick = function () {
//init
document.getElementById("msg").innerHTML="UP";
document.getElementById("start").disabled = true;
timer();
}
/* Clear button */
clear.onclick = function() {
clearTimeout(t);
h1.textContent = "00:00:00";
seconds = 0; minutes = 0; hours = 0;
document.getElementById("msg").innerHTML="START";
j = 0;
secTime = 0;
document.getElementById("Next").innerHTML = "Count Down";
document.getElementById("start").disabled = false;
}
}
</script>
</head>
<body onload="clock()">
<div align="center">
<h1 id="msg" style="font-size:20vw">START</h1>
<span style="font-size:5vw" id="Next">Clock</span>
</div><br>
<div align="center">
<h1 id="clockShow" style="font-size:5vw"><time>00:00:00</time></h1>
<button id="start" class="button">Start</button>
<button id="clear" class="button">Abort</button>
</div>
</body>
</html>

JS dynamically-added content not showing at specific screen size (CSS/Layout?)

So I've got this interesting bug that has got me stumped. I've got a JS timer that is counting down until Christmas. It's working as expected. It dynamically updates the content of the Days, Hours, Minutes, and Seconds divs. It shows correctly in all screen sizes except for this range: 737px - 766px (see screen shot).
.
For some reason, the divs collapse and show no numbers. However if I use my Google Developer Tools - Console, I can confirm that the numbers are in fact being deposited into the divs (see screen shot below).
For some reason that I can't pinpoint, the numbers don't show in this screen size range. The code is below:
<style>
.ct-increment-container {
border: 3px solid #eb1c24;
border-radius: 10px;
display: block;#eb1c24;
float: left;
margin-right: 7px;
}
#ct-days, #ct-hours, #ct-minutes, #ct-seconds {
font: 40px "Ubuntu", sans-serif;
font-weight: 500;
line-height: 1;
color: black;
text-align: center;
padding: 5px;
}
.ct-increment-container .ct-label {
background-color: #eb1c24;
color: white;
font-size: 11px;
font-family: "Open Sans", sans-serif;
text-align: center;
text-transform: uppercase;
display: block;
width: 100%;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding: 3px 0 1px;
}
.ct-msg {
clear: both;
text-transform: uppercase;
text-align: center;
color: red;
}
#media (min-width: 1025px) {
#cmas-timer {
display: table;
margin-top: -8px;
}
.ct-msg {
display: table-cell;
vertical-align: middle;
font-size: 26px;
}
}
#media (min-width: 959px) and (max-width: 1025px) {
.top-banner {
height: 125px;
}
#cmas-timer {
margin-top: -8px;
}
.ct-msg {
display: block;
padding-top: 5px;
font-size: 20px;
}
}
#media (max-width: 959px) {
#cmas-timer {
position: absolute;
left: 50%;
margin-left: -135px;
}
.ct-msg {
display: block;
padding-top: 5px;
font-size: 20px;
}
}
#media (min-width: 767px) and (max-width: 959px) {
.top-banner {
margin-top: 135px;
}
#cmas-timer {
top: -116px;
}
}
#media (max-width: 767px) {
div#main {
margin-top: 110px;
}
#cmas-timer {
top: 95px;
}
}
</style>
<div id="cmas-timer">
<div class="ct-increment-container">
<div id="ct-days"><!-- Javascript prints days here --></div>
<div class="ct-label">Days</div>
</div>
<div class="ct-increment-container">
<div id="ct-hours"><!-- Javascript prints hours here --></div>
<div class="ct-label">Hours</div>
</div>
<div class="ct-increment-container">
<div id="ct-minutes"><!-- Javascript prints minutes here --></div>
<div class="ct-label">Minutes</div>
</div>
<div class="ct-increment-container">
<div id="ct-seconds"><!-- Javascript prints seconds here --></div>
<div class="ct-label">Seconds</div>
</div>
<div class="ct-msg">'Til Christmas</div>
</div>
<script>
var deadline = 'December 24 2017 23:59:59';
function getTimeRemaining(){
var t = Date.parse(deadline) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function pad(n) {
return (n < 10) ? ("0" + n) : n;
}
function updateClock(){
var t = getTimeRemaining();
document.getElementById("ct-days").innerHTML = pad(t.days);
document.getElementById("ct-hours").innerHTML = pad(t.hours);
document.getElementById("ct-minutes").innerHTML = pad(t.minutes);
document.getElementById("ct-seconds").innerHTML = pad(t.seconds);
if(t.total<=0){
clearInterval(timeinterval);
}
}
updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);
</script>

You should give a link to live page/demo, because your code works fine, you can clearly see that here - https://jsfiddle.net/ncsresjw/
It is just jumping due to positioning rules, for example:
#cmas-timer {
top: -116px;
}
So, there must be something else affecting the text and it not possible to determine the cause just from one screenshot and one (working) snippet.

Why does my countdown app work fine when I open the html page through the browser, but not when I use an http server?

The app is fully functioning when I open the html file in my browser, but when I try and open it on localhost:3000 it only loads the html and doesn't pick up the css or javascript.
HTML:
<html>
<head>
<link href="./main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="del-countdown">
<h1>THE SINGULARITY IS NEAR</h1>
<div id="clock"></div>
<div id="units">
<span>Years</span>
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>
<script src="../index.js"></script>
</body>
</html>
CSS:
body{
background: #282e3a;
font-family: tahoma;
}
h1{
color: #fff;
text-align: center;
font-size: 74px;
letter-spacing: 10px;
margin-bottom: 5px;
}
h3{
color: #fff;
text-align: center;
font-size: 36px;
letter-spacing: 5px;
margin-top: 5px;
}
#del-countdown{
width: 850px;
margin: 15% auto;
}
#clock span{
float: left;
text-align: center;
font-size: 84px;
margin: 0 2%;
color: #fff;
padding: 20px;
width: 16%;
border-radius: 20px;
box-sizing: border-box;
}
#clock span:nth-child(1){
background: #696868;
}
#clock span:nth-child(2){
background: #7D7C7C;
}
#clock span:nth-child(3){
background: #9E9E9E;
}
#clock span:nth-child(4){
background: #C4C4C4;
}
#clock span:nth-child(5){
background: #D9D7D7;
}
#clock:after{
content: "";
display: block;
clear: both;
}
#units span{
float: left;
width: 20%;
text-align: center;
margin-top: 30px;
color: #ddd;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
text-shadow: 1px 1px 1px rgba(10,10,10, 0.7);
}
span.turn{
animation: turn 0.7s ease forwards;
}
#keyframes turn{
0%{transform: rotateX(0deg)}
100%{transform: rotateX(360deg)}
}
Index.js:
function updateTimer(deadline){
var time = deadline - new Date();
return {
'years': Math.floor( time/(1000*60*60*24*365) ),
'days': Math.floor( time/(1000*60*60*24) % 365 ),
'hours': Math.floor( (time/(1000*60*60)) % 24 ),
'minutes': Math.floor( (time/1000/60) % 60 ),
'seconds': Math.floor( (time/1000) % 60 ),
'total' : time
};
}
function animateClock(span){
span.className = "turn";
setTimeout(function(){
span.className = "";
},700);
}
function startTimer(id, deadline){
var timerInterval = setInterval(function(){
var clock = document.getElementById(id);
var timer = updateTimer(deadline);
clock.innerHTML = '<span>' + timer.years + '</span>'
+ '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//animations
var spans = clock.getElementsByTagName("span");
animateClock(spans[4]);
if(timer.seconds == 59) animateClock(spans[3]);
if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[2]);
if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
if(timer.days == 364 && timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);
//check for end of timer
if(timer.total < 1){
clearInterval(timerInterval);
clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>';
}
}, 1000);
}
window.onload = function(){
var deadline = new Date("January 01, 2045 00:00:01");
startTimer("clock", deadline);
};
Server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
//404 response
function send404Response(res) {
res.writeHead(404, {"Content-Type": "text/plain"})
res.write("Error 404: Page not found!")
res.end()
}
//Handle user request
function onRequest(req, res) {
if(req.method == 'GET' && req.url == '/') {
res.writeHead(200, {"Content-Type": "text/html"})
fs.createReadStream("./public/index.html").pipe(res)
}
else{
send404Response(res)
}
}
http.createServer(onRequest).listen(3000)
console.log("Server is now running...");

put the js and css file in a folder named pubilc. And call app.use('/public',express.static(__dirname + '/public'));
Now add css and js src="/public/js"

Javascript display and CSS

I had to create a "fake" weather page using Javascript only. I am struggling with the layout and have a couple of questions:
I tried everything to include padding above my "h1" title but nothing works.
I want the weather photos and infos to display in the middle of the box (as it does in day0) but I cannot get it to do it.
Would you recommend to break my .js file into different ones for each function or is it ok to put it all in one. I want to avoid it being confusing ?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AccuMeteo</title>
<meta name="description" content="AccuMeteo Weather Forecast">
<meta name="keywords" content="Daily and Weekly Weather forecast">
<link href="css/accumeteo.css" rel="stylesheet">
<script type="text/javascript" src="js/accumeteo.js"></script>
</head>
<body>
<!-- wrapper section starts -->
<div id="wrapper">
<!-- header section starts -->
<div id="header">
<img src="images/header.jpg" width="975" height="220" alt="Blue Sky Header" class="floatleft">
</div>
<!-- header section ends -->
<!-- menu section starts -->
<div id="menu">
<ul>
<li>Home</li>
<li>Vancouver</li>
<li>Dallas</li>
<li>New York</li>
<li>Contact Us</li>
</ul>
</div>
<!-- menu section ends -->
<div id="content">
<div id="city">
<h1>Vancouver, BC</h1>
</div>
<div id="date">
<noscript> <div>! JavaScript is not enabled.</div> </noscript>
<div id="PST"></div>
<div id="year"></div>
<div id="ordinal"></div>
<div id="day"></div>
</div>
<div id="panel">
<div id="day0">
</div>
<div id="day1">
</div>
<div id="day2">
</div>
<div id="day3">
</div>
<div id="day4">
</div>
<div id="day5">
</div>
<div id="day6">
</div>
</div>
</div>
<!-- footer section starts -->
<div id="footer">
<p class="bottom">Copyright © 2012 JC Design | All Rights Reserved | Terms and Conditions</p>
</div>
<!-- foot section ends -->
<!-- wrapper section starts -->
<script>
displayTime("PST");
</script>
</div>
</body>
</html>
.css
/*Homepage* /
/*Body*/
html {background-color: #e2e2e2}
body {
color: #000; background: #fff;
font-family: Verdana,helvetica,arial, sans-serif;
font-size: 90%;
text-align: left;
width: 975px;
margin-left: auto;
margin-right: auto;
}
p {
margin-left: 35px;
margin-right: 25px;
text-align: left;
}
/*---------------Navigation styles-------------------*/
#menu {
float: left;
margin:0;
padding-top: 0px;
width: 100%;
background: #4186d3; color: #04356c;
}
#menu ul {
margin: 0px;
position: relative
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
padding: 5px 16px;
margin-right: 0px;
background: #4186d3; color: #04356c;
text-decoration: none;
border-right: 1px solid #e2e2e2;
}
#menu ul li a:hover {
color: #04356c; background: #fff;
text-decoration: underline;
}
#menu li a#current {
background: #0d56a6; color: #fff;
}
/*Bottom link formatting*/
p.bottom a:link {
background: #04356c; color: #fff;
}
p.bottom a:visited {
color: #ba1212;
}
p.bottom a:hover {
color: #f9b41f;
text-decoration: none;
}
p.bottom a:active{
background: #3ca0d0; color: #000;
}
/*Page wrapper*/
#wrapper {
margin: 0 auto;
width: 975px;
text-align: left;
}
/*Banner styles*/
#header {
background-color: #2d1d06; color: #7d890d;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 150%;
width: 925px;
padding: 0px;
}
#footer {
clear: both;
background: #04356c; color: #fff;
font-family: Verdana,helvetica, arial, sans-serif;
font-size: 90%;
font-weight: normal;
width: 975px;
padding-bottom: 3px;
padding-top: 3px;
}
#footer p {
text-align: center;
}
.content {
padding: 0px 0px 0px 160px;
position: relative;
}
/* Images*/
img {
border: 0px;
padding: 0px;
}
.floatleft {
float: left;
margin: 0px;
padding: 0px;
border: none;
}
/*Headings*/
hr{
position: absolute;
width: 45%;
margin-left: 35px;
margin-right: 45px;
border: 1px dotted #000;
}
h1{
color: #7d890d;
font-size: 140%;
font-weight: normal;
margin-left: 35px;
}
h2{
color: #052a6e;
font-weight: normal;
font-size: 125%;
margin-left: 35px;
}
/*********************/
/* Date Properties */
/*********************/
#date {
float: right;
margin: 10px;
}
#day, #ordinal, #year {
float: right;
}
#ordinal {
vertical-align: baseline;
font-size: 0.8em;
position: relative;
top: -0.2em;
}
/* JavaScript Panel Properties */
#panel {
font-size: 0.8em;
width: 100%;
float: left;
margin: 5px;
}
#day0, #day1, #day2, #day3, #day4 {
float: left;
width: 181px;
height: 355px;
border: 1px solid black;
margin: 4px;
text-align: center;
}
td,th {
width: 175px;
height: 35px;
font-size: 1.3em;
}
th {
font-size: 1.5em;
}
#spacerCell {
height: 70px;
}
.tempLow, .tempHigh {
font-size: 2em;
color: blue;
}
.tempHigh {
color: red;
}
.js
var thisDate = new Date();
var day = thisDate.getDate();
var dayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var sun = new Forecast( "sunny.png", "Sunny", 17, 31 );
var clouds = new Forecast( "cloudy.png", "Cloudy", 10, 23 );
var showers = new Forecast( "mix.png", "Mix of Sun and Cloud", 12, 20 );
var rain = new Forecast( "rain.png", "Rain", 6, 14 );
var fList = [ sun, clouds, showers, rain ];
var pList = [ "day0", "day1", "day2", "day3", "day4" ];
var low, high;
// Functions
function init()
{
displayDate();
displayForecast();
}
window.onload=init;
function Forecast( image, title, minTemp, maxTemp )
{
this.image=image;
this.title=title;
this.minTemp=minTemp;
this.maxTemp=maxTemp;
}
function randomNumber( min, max )
{
var rand = Math.random() * (max - min + 1) + min;
rand = Math.floor(rand)
return rand;
}
function displayTime( timeZone )
{
var timeE = document.getElementById( timeZone );
var offset, hh, mm, AMorPM;
switch ( timeZone )
{
case "PST":
offset = -7;
break;
case "EST":
offset = -4;
break;
case "CDT":
offset = -5;
break;
default:
timeE.innerHTML += "Error!";
}
thisDate = calcTime( offset );
hh = thisDate.getHours();
mm = thisDate.getMinutes();
if( mm < 10 ){ mm = "0" + mm; }
if( hh > 12 )
{
hh -= 12;
AMorPM = " PM";
}
else
{
AMorPM = " AM";
}
timeE.innerHTML += hh + ":" + mm + " " + AMorPM + " (" + timeZone + ")";
}
// This will return a Date object with the city's current time based on that city's "offset" from the GMT.
function calcTime( offset )
{
var date = new Date();
date.setTime(date.getTime() + date.getTimezoneOffset()*60*1000 + offset*60*60*1000);
return date;
}
//This will return a new Date object for a single forecast
function addDays(myDate,days)
{
return new Date(myDate.getTime() + days*24*60*60*1000);
}
function displayDate()
{
var dayE = document.getElementById("day");
var ordinalE = document.getElementById("ordinal");
var yearE = document.getElementById("year");
// Display the day of the week and the date (month, day)
dayE.innerHTML = dayNames[ thisDate.getDay() ] +", ";
dayE.innerHTML += monthNames[ thisDate.getMonth() ] +" ";
dayE.innerHTML += " " +day;
// Function determining which ending to use for the date and displaying it
switch (day)
{
case 1:
case 21:
case 31:
ordinalE.innerHTML += "st";
break;
case 2:
case 22:
ordinalE.innerHTML += "nd";
break;
case 3:
case 23:
ordinalE.innerHTML += "rd";
break;
default:
ordinalE.innerHTML += "th";
}
// Display the year
yearE.innerHTML = ", " +thisDate.getFullYear();
}
function getDayTitle( i )
{
var dayTitle;
var dayOfWeek = addDays( thisDate, i )
var d = dayOfWeek.getDay();
if( d > 6 )
{
d -= 7;
}
// Function determining which title to use (today, tomorrow, day of the week)
switch ( i )
{
case 0:
dayTitle = "Today";
break;
case 1:
dayTitle = "Tomorrow";
break;
default:
dayTitle = dayNames[d];
}
return dayTitle;
}
function displayForecast()
{
for( i=0; i < pList.length; i++)
{
displayDailyForecast( i );
}
}
function displayDailyForecast( i )
{
var forecastE = document.getElementById( pList[i] );
var forecast = fList[ randomNumber(0,3) ];
var html = "<table>";
if( i == 0)
{
html += "<tr><td id='spacerCell'></td></tr>"
}
html += "<tr><th colspan='2'>" + getDayTitle(i) + "</th></tr>";
html += "<tr><td colspan='2'><img src='images/" + forecast.image + "' width='100' height='100'></td></tr>";
html += "<tr><td colspan='2'>" + forecast.title + "</td></tr>";
getTemp( forecast.minTemp, forecast.maxTemp );
html += "<tr><td class='tempLow'>"+ low +"&degC</td>";
html += "<td class='tempHigh'>"+ high +"&degC</td></tr>";
forecastE.innerHTML += html;
}
function getTemp( min, max )
{
var t1, t2;
t1 = randomNumber( min, max );
t2 = randomNumber( min, max );
if( t1 < t2 )
{
low = t1;
high = t2;
}
else if( t1 > t2 )
{
low = t2;
high = t1;
}
else // if t1==t2
{
low = t1;
high = t1 + 1;
}
}

Here you go. Use the padding property for padding, you were using a spacercell td for displaying things in the middle, and no a single js file is fine.
EDIT: Fixed a couple things. You were using a .content selector instead of a #content selector in your css. Here is the updated version.

Firstly I want to ask you that do you really need to use table tags for days? I mean cant you use div tags? because in table tag all the inner tags always have relative position.
You can insert div tags inside day0 / day1 etc tags with absolute position and then use
divId.innerHTML = getDayTitle(i)
( all your respective methods ) to set the text instead of generating entire table through js.
Secondly if in future if you change the font etc of your text then also table can create problems because it always uses " fit to contents " type method hence tr size may increase depending on your text size
Use div tags and it will surely work :)

For new browsers use flexbox.
http://www.html5rocks.com/en/tutorials/flexbox/quick/