final touches

met18001 · May 7, 2020 · a7c70a8 · a7c70a8
1 parent 4f00dea
commit a7c70a8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/final_project/css/style.css b/final_project/css/style.css
@@ -33,7 +33,8 @@ body {
   font-family: 'Orbitron', sans-serif;
   font-size: 56px;
   text-align: center;
-  color: white;
+  color: hsla(162, 93%, 72%, 0.87) ;
+
 }
 p{
     font-family: 'Montserrat', sans-serif;   
@@ -67,7 +68,25 @@ select{
   text-align: center;
   padding: 10px;
 }
-
+a{
+  font-family: 'Montserrat', sans-serif;
+  font-size: 15px;
+  font-weight: 400;
+  text-align: center;
+  color: hsla(162, 93%, 72%, 0.87);
+  text-decoration: none;
+  bottom: 10px;
+  position: absolute;
+}
+a:hover{
+  font-family: 'Montserrat', sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  text-align: center;
+  color: white;
+  transition: ease-in 1s;
+
+}
 h1{
   font-family: 'Montserrat', sans-serif;
   font-size: 20px;
@@ -79,11 +98,12 @@ h1{
 #good{
   margin: 0px;
   font-size: 40px;
-  color: hsla(162, 93%, 72%, 0.87);
+  color: white;
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   text-align: center;
 
+
 }
 
 .bar {

diff --git a/final_project/index.html b/final_project/index.html
@@ -10,15 +10,15 @@
 <body>
     <div class="wrapper">
         <p id="good"> Good <span id="morning"> </span><span contenteditable=true id="name"> </span></p>
-        <div id="clock"></div>
+        <div class="glow" id="clock"></div>
         <div class="bar"><div class="progress" id="hours"></div></div>
 
 
 
 
 
 
-                   
+        <a href="https://unsplash.com/">Photos sourced by <b>Unsplash.com</b></a>    
     </div>
 
 

diff --git a/final_project/js/this.js b/final_project/js/this.js
@@ -3,6 +3,9 @@ const numItemsToGenerate = 1;
 var today = new Date()
 var curHr = today.getHours()
 
+// moring, afternoon, night logic so that the text switches based on the time
+// also added the function call so that the morning img renders at the proper time
+// I also added an img functionality so that the img logo changes, but I didn't like the look of it so I removed it. 
 if (curHr < 12) {
   document.getElementById('morning').innerText ='morning'
   for(let i=0;i<numItemsToGenerate;i++){
@@ -43,6 +46,7 @@ if (curHr < 12) {
   }
 }
 
+//based on these functions, the morning, afternoon, and night image will be rendered. 
 
   function rendermoringItem(){
 
@@ -105,6 +109,8 @@ var curHr = today.getHours()
 
 let areaText = document.getElementById("name");
 
+//saving content editable space to local storage 
+
 const saveLocally = function() {
   let text = areaText.innerHTML;
   localStorage.setItem('siteData', text);
@@ -118,19 +124,9 @@ const retrieveSavedText = function() {
 document.addEventListener('keyup', saveLocally);
 retrieveSavedText();
 
-
+//setting width of bar based on day
 setInterval(function () {
   var now = new Date();
   document.getElementById('hours').style.width = ((now.getHours() / 24) * 750) + 'px';
 }, 1000);
 
-
-//document.addEventListener('DOMContentLoaded', function () {
-  //var input = document.getElementById('pictureTags');
-  //if (localStorage['pictureTags']) { // if job is set
-    //  input.value = localStorage['pictureTags']; // set the value
- // }
-  //input.onchange = function () {
-    //   localStorage['pictureTags'] = this.value; // change localStorage on change
-   //}
-//});