memish · January 19, 2019 22:37
diff --git a/Countdown.html b/Countdown.html
 <html>
 <head>
    <title>Count Down</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
 </head>
    <body>
 <!--  Table for displaying countdown info      -->
        <table class="table table-bordered table-responsive-sm" >
            <tr>
                <td>Countdown to Spring Break 2019</td>
            </tr>
            <tr>
                <td>
                 <table class="table table-bordered table-responsive-sm" >
                 <!--  Will Replace with integers related to days,hours, mins and seconds      -->    
                   <tr id="myRow1">
                   <td id='days'>Days</td> <td id='hours'>hours</td> <td id='mins'>Minutes</td> <td id='sec'>Seconds</td>
                   </tr>
                     <!--  Labels    -->
                    <tr id="myRow">
                   <td class="myC1">Days</td> <td class="myC1">Hours</td> <td class="myC1">Minutes</td> <td class="myC1">Seconds</td>
                   </tr>
                  </table>
                </td>
            </tr>

        </table>
        
         <script>
             
            //will call the getCountDown function once a second 
             setInterval(getCountDown, 1000); 
             
             
    function getCountDown(){
        
        //current date
             var d = new Date();
              var dTime = d.getTime();
              
             //target date to count to
             var target = new Date(2019, 2, 22);
             var tTime = target.getTime();
            
             //difference in milliseconds
             var diff = tTime - dTime;
        
             //milliseconds in a day
             var cd = 24 * 60 * 60 * 1000;
             
             //determines days - divide diff in milliseconds by milliseconds in a day
             var dayDiff = Math.floor(diff/cd);
             //milliseconds in an hour
             var  ch = 60 * 60 * 1000;
        
            //use modulus to get the hours -  - divide by milliseconds in a hour
             var h = Math.floor( (diff / ch)%24);
        
             //use modulus with minute to get the minutes
             var m = Math.floor( (diff / 60000)%60);
             
             var s = Math.floor( (diff / 1000)%60);
        
        //use getElementby ID to display everything to the page
             document.getElementById("days").innerHTML = dayDiff;
             document.getElementById("hours").innerHTML = h;
             document.getElementById("mins").innerHTML = m;
             document.getElementById("sec").innerHTML = s;
                document.getElementById("myRow").setAttribute("style", "background-color: #990000;");
        document.getElementById("myRow1").style.border = "thick solid #000000";
        document.getElementById("myRow").style.border = "thick solid #000000";
        var mn = document.getElementsByClassName("myC1");
        //document.getElementsByName
         mn[0].setAttribute("style", "color: white;");
         mn[1].setAttribute("style", "color: white;");
         mn[2].setAttribute("style", "color: white;");
         mn[3].setAttribute("style", "color: white;");
        
             
             }
        </script>
    
    </body>
 </html>
	<html>
	<head>
	<title>Count Down</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
	integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
	</head>
	<body>
	<!-- Table for displaying countdown info -->
	<table class="table table-bordered table-responsive-sm" >
	<tr>
	<td>Countdown to Spring Break 2019</td>
	</tr>
	<tr>
	<td>
	<table class="table table-bordered table-responsive-sm" >
	<!-- Will Replace with integers related to days,hours, mins and seconds -->
	<tr id="myRow1">
	<td id='days'>Days</td> <td id='hours'>hours</td> <td id='mins'>Minutes</td> <td id='sec'>Seconds</td>
	</tr>
	<!-- Labels -->
	<tr id="myRow">
	<td class="myC1">Days</td> <td class="myC1">Hours</td> <td class="myC1">Minutes</td> <td class="myC1">Seconds</td>
	</tr>
	</table>
	</td>
	</tr>

	</table>

	<script>

	//will call the getCountDown function once a second
	setInterval(getCountDown, 1000);


	function getCountDown(){

	//current date
	var d = new Date();
	var dTime = d.getTime();

	//target date to count to
	var target = new Date(2019, 2, 22);
	var tTime = target.getTime();

	//difference in milliseconds
	var diff = tTime - dTime;

	//milliseconds in a day
	var cd = 24 * 60 * 60 * 1000;

	//determines days - divide diff in milliseconds by milliseconds in a day
	var dayDiff = Math.floor(diff/cd);
	//milliseconds in an hour
	var ch = 60 * 60 * 1000;

	//use modulus to get the hours - - divide by milliseconds in a hour
	var h = Math.floor( (diff / ch)%24);

	//use modulus with minute to get the minutes
	var m = Math.floor( (diff / 60000)%60);

	var s = Math.floor( (diff / 1000)%60);

	//use getElementby ID to display everything to the page
	document.getElementById("days").innerHTML = dayDiff;
	document.getElementById("hours").innerHTML = h;
	document.getElementById("mins").innerHTML = m;
	document.getElementById("sec").innerHTML = s;
	document.getElementById("myRow").setAttribute("style", "background-color: #990000;");
	document.getElementById("myRow1").style.border = "thick solid #000000";
	document.getElementById("myRow").style.border = "thick solid #000000";
	var mn = document.getElementsByClassName("myC1");
	//document.getElementsByName
	mn[0].setAttribute("style", "color: white;");
	mn[1].setAttribute("style", "color: white;");
	mn[2].setAttribute("style", "color: white;");
	mn[3].setAttribute("style", "color: white;");


	}
	</script>

	</body>
	</html>