Ada-C7 · janicewilson · May 22, 2017 · May 22, 2017
diff --git a/index.css b/index.css
@@ -1,16 +1,154 @@
-body {
-    background-color: #80d4ea;
+html, body, div, span, applet, object, iframe,
+blockquote, pre, h1, p, a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	vertical-align: baseline;
+}
+
+/*input, textarea {
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
+}*/
+
+html, body {
+	display: flex;
+	flex-flow: column nowrap;
+
+	justify-content: flex-start;
+	min-height: 100%;
+	width: 100%;
+
+	background-image: linear-gradient(to top right, #58105b, #105a5b);
+	color: #fff;
+	font-family: 'Source Sans', serif;
+	font-weight: 400;
+
+	font-size: 1rem;
+
+
+}
+
+#days {
+	display: flex;
+	flex-flow: row nowrap;
+
+	align-content: center;
+	justify-content: center;
+	height: 5vh;
+}
+
+#days p {
+	padding: 3rem 1rem;
+
+	color: white;
+	font-size: 1rem;
+	font-family: 'Source Sans Pro', serif;
+	font-weight: 300;
+	letter-spacing: .06rem;
+	text-transform: uppercase;
+}
+
+main {
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1 1 auto;
+
+	align-items: center;
+	justify-content: center;
+
+     min-height: 95vh;
+	justify-content: center;
+}
+
+#date {
+	color: white;
+	font-size: 4rem;
+	font-family: 'Roboto Condensed', serif;
+	font-weight: bold;
+	letter-spacing: -.1rem;
 }
 
 #clock {
-    height: 100px;
-    width: 800px;
-    margin: auto;
-    position: absolute;
-    top: 0; left: 0; bottom: 0; right: 0;
-    padding-top: 70px;
-    font-family: courier, monospace;
-    text-align: center;
-    color: white;
-    font-size: 100px;
+	display: flex;
+	flex-flow: row nowrap;
+
+	color: white;
+	font-size: 1rem;
+}
+
+#time span {
+	color: white;
+	font-family: 'Roboto Condensed', serif;
+	font-weight: bold;
+	font-size: 13rem;
+	text-align: left;
+
+}
+
+form {
+     padding: 3rem 0 2rem;
+
+     color: white;
+	font-family: 'Source Sans Pro', serif;
+     font-size: 1.4rem;
+     font-weight: 400;
+     letter-spacing: .04rem;
+     text-align: center;
+     text-decoration: none;
+     text-transform: uppercase;
+}
+
+input.radio-button {
+	display: none;
+}
+input.radio-button + label {
+	margin: 0 1rem;
+	padding: 1rem 3rem;
+
+	border: 1px solid white;
+	border-radius: 30px;
+	cursor: pointer;
+}
+input.radio-button:not(:checked) + label:hover {
+	box-shadow: 0px 1px 100px;
+}
+input.radio-button + label:active,
+input.radio-button:checked + label {
+	background: rgba(255, 255, 255, 0.2);
+}
+
+
+@media screen and (min-width: 992px) {
+	html {
+	    font-size: 1rem;
+	}
+}
+
+@media screen and (max-width: 991px) {
+	html {
+		font-size: .8rem;
+	}
+}
+
+@media screen and (max-width: 767px) {
+	html {
+		font-size: .6rem;
+	}
+}
+
+@media screen and (max-width: 479px) {
+	html {
+		font-size: .4rem;
+	}
 }
diff --git a/index.html b/index.html
@@ -1,14 +1,40 @@
 <!DOCTYPE html>
 <html>
-  <head>
-      <title>Clock Tower</title>
-      <meta charset="utf-8">
-      <link href="index.css" media="screen" rel="stylesheet" type="text/css"/>
-  </head>
-
-  <body>
-      <div id='clock'></div>
-  </body>
-</html>
+     <head>
+          <title> Time Travel </title>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <link href='index.css' media='screen' rel='stylesheet' type="text/css"/>
+          <link rel="stylesheet" type="text/css" href='https://fonts.googleapis.com/css?family=Roboto+Condensed:bold|Roboto:black|Source+Sans+Pro'>
+
+     </head>
+
+     <body>
+          <div id='days'></div>
+          <main>
+
+               <div id='date'></div>
 
-<script src="index.js"></script>
+               <div id='clock'>
+                    <div id='placeholder'></div>
+                    <div id='time'></div>
+                    <div id='placeholder'></div>
+               </div>
+
+               <form action>
+                 <input type='radio' name='clock' value='12-hour' id='r1' class='radio-button' />
+                 <label for='r1'>Squatter</label>
+
+                 <input type='radio' name='clock' value='24-hour' id='r2' class='radio-button' checked='checked'/>
+                 <label for='r2'>Trotter</label>
+               </form>
+          </main>
+
+           <script
+               src="https://code.jquery.com/jquery-3.2.1.min.js"
+               integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+               crossorigin="anonymous">
+          </script>
+          <script type='text/javascript' src='index.js'> </script>
+     </body>
+</html>
diff --git a/index.js b/index.js
@@ -1 +1,156 @@
-// Your code here
+$(document).ready(function() {
+     var days = [
+          ['Sunday', 'Sun'],
+          ['Monday', 'Mon'],
+          ['Tuesday', 'Tue'],
+          ['Wednesday', 'Wed'],
+          ['Thursday', 'Thu'],
+          ['Friday', 'Fri'],
+          ['Saturday', 'Sat']
+     ];
+
+     var months = [
+          ['January'],
+          ['February'],
+          ['March'],
+          ['April'],
+          ['May'],
+          ['June'],
+          ['July']
+          ['August'],
+          ['September'],
+          ['October'],
+          ['November'],
+          ['December']
+     ];
+
+     var radioButton = $("input[name=clock]:radio")
+
+     var squatter = setInterval(function() { refreshSquatterTime () }, 1000);
+     var trotter = setInterval(function() { refreshTrotterTime () }, 1000);
+
+
+     function refreshColor() {
+          var today = new Date(),
+          hours = today.getHours();
+          switch(true) {
+               case (hours > 18) :
+                    $('body').css('background', 'linear-gradient(to top right, #58105b, #105a5b)');
+                    break;
+               case (hours > 16 && hours < 19) :
+                    $('body').css('background', 'linear-gradient(to top right, #b04708, #105a5b)');
+                    break;
+               default:
+                    $('body').css('background', 'linear-gradient(to top right, #e9d659, #105a5b)');
+          }
+     }
+
+     function refreshDay(){
+
+          var today = new Date(),
+               currentDay = today.getDate(),
+               currentWeekday = today.getDay(),
+               currentMonth = today.getMonth(),
+               currentYear = today.getFullYear();
+
+          if (matchMedia) {
+               var screenSize = window.matchMedia('(max-width: 767px)');
+               screenSize.addListener(WidthChange);
+               WidthChange(screenSize);
+          }
+
+          function WidthChange(screenSize) {
+               if (screenSize.matches) {
+                    $('p').remove();
+                    for (i = 0; i < 7; i++) {
+                         if (currentWeekday == [i]) {
+                              $('p').css('background', 'rgba(255, 255, 255, 0.3)');
+                              var weekday = '<p>' + days[i][1] + '</p>';
+                         } else {
+                              var weekday = '<p>' + days[i][1] + '</p>';
+                         }
+                         $('#days').append(weekday);
+                    }
+               } else {
+                    $(  'p' ).remove();
+                    for (i = 0; i < 7; i++) {
+                         if (currentWeekday == [i]) {
+                              $( 'p' ).css( 'color', 'rgba(255, 255, 255, 0.3)');
+                              var weekday = '<p>' + days[i][0] + '</p>';
+                         } else {
+                              var weekday = '<p>' + days[i][0] + '</p>';
+                         }
+                         $('#days').append(weekday);
+                    }
+               }
+          }
+
+          var currentDate = currentDay + ' ' + months[currentMonth] + ' ' + currentYear;
+          $('#date').html(currentDate);
+     };
+
+     function refreshTrotterTime() {
+
+          var today = new Date(),
+               hours = today.getHours(),
+               minutes = today.getMinutes(),
+               seconds = today.getSeconds();
+
+          if (hours.toString().length < 2) {
+                    hours = '0' + hours;
+          }
+
+          if (minutes.toString().length < 2) {
+               minutes = '0' + minutes;
+          }
+
+          if (seconds.toString().length < 2) {
+                    seconds = '0' + seconds;
+          }
+               var currentTime = '<span>' + hours + ':</span><span>' + minutes + ':</span> <span>' + seconds + '</span>';
+               $('#time').html(currentTime);
+     };
+
+     function refreshSquatterTime() {
+
+          var today = new Date(),
+               hours = today.getHours(),
+               minutes = today.getMinutes(),
+               seconds = today.getSeconds();
+
+          if (hours > 12) {
+                    hours = hours - 12;
+          }
+
+          if (minutes.toString().length < 2) {
+              minutes = '0' + minutes;
+          }
+
+          if (seconds.toString().length < 2) {
+                    seconds = '0' + seconds;
+          }
+              var currentTime = '<span>' + hours + ':</span><span>' + minutes + ':</span> <span>' + seconds + '</span>';
+              $('#time').html(currentTime);
+     };
+
+     var refreshTime = radioButton.change(function () {
+
+          if ($('input[name=clock]:checked').val() == "24-hour") {
+               clearInterval(squatter)
+               refreshTrotterTime();
+               trotter = setInterval(function() { refreshTrotterTime () }, 1000);
+
+          } else if ($('input[name=clock]:checked').val() == "12-hour") {
+               clearInterval(trotter)
+               refreshSquatterTime();
+               squatter = setInterval(function() { refreshSquatterTime () }, 1000);
+         }
+    });
+
+    refreshColor();
+    window.setInterval(refreshColor, 1000);
+
+    refreshDay();
+    window.setInterval(refreshDay, 60000);
+
+});