bar color changes and small fixes

final_project/css/style.css

@@ -8,65 +8,110 @@ body {
     min-height: 100vh;
 
   }
+
+  .box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    margin: 10px;
+    padding: 10px;
+
+  }
 
+  img{
+    max-width: 30px;
+    max-height: 30px;
+    margin-left: 10px;
+
+  }
 
 /* Google font */
 @import url('https://fonts.googleapis.com/css?family=Orbitron');
 
 #clock {
   font-family: 'Orbitron', sans-serif;
-  color: #66ff99;
   font-size: 56px;
   text-align: center;
-
-
+  color: white;
 }
 p{
     font-family: 'Montserrat', sans-serif;   
-    color: #66ff99;
+    color: #66d4ff;
     font-size: 20px;
 }
 
 .wrapper{
-  display: -webkit-box;
   display: flex;
-  -webkit-box-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-          align-items: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-          flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
           min-height: 100vh;
 
 }
+button{
+  font-family: 'Montserrat', sans-serif;
+  font-size: 15px;
+  color: #66ff99;
+  background-color: black;
+  border:none;
+  border-radius: 10px;
+  padding: 10px;
+}
+select{
+  background-color: white;
+  border-radius: 10px;
+  width: 100px;
+  margin-right: 10px;
+  font-family: 'Montserrat', sans-serif;
+  text-align: center;
+  padding: 10px;
+}
+
 h1{
   font-family: 'Montserrat', sans-serif;
-  color: white;
   font-size: 20px;
   font-weight: 400;
   text-align: center;
+  color: hsla(162, 93%, 72%, 0.87);
+
 }
 #good{
   margin: 0px;
   font-size: 40px;
-  color: white;
+  color: hsla(162, 93%, 72%, 0.87);
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   text-align: center;
+
 }
 
-
 .bar {
-  border: 1px solid #66ff99; 
+  border: none;
   margin: 0.25em; 
   border-radius: 2.75px;
   background-color: white;
-  width: 30%;
+  box-shadow: 0 4px 8px 0 hsla(162, 93%, 72%, 0.87), 0 6px 20px 0 hsla(162, 93%, 72%, 0.87);
+  width: 50vw;
 }
 
 .bar .progress {
-  background: #66ff99; 
+  background: hsla(162, 93%, 72%, 0.87);
   height: 1em;
 }
 
+@media (max-width: 500px){
+  #good{
+    font-size: 20px;
+  }
+  #clock{
+    font-size: 20px;
+  }
+  h1{
+    font-size: 15px;
+  }
+  img{
+    max-width: 25px;
+    min-width: 25px;
+  }
+}

final_project/index.html

@@ -12,8 +12,13 @@
         <p id="good"> Good <span id="morning"> </span><span contenteditable=true id="name"> </span></p>
         <div id="clock"></div>
         <div class="bar"><div class="progress" id="hours"></div></div>
+
+
+
 
-        <h1> What pictures would you like to see?</h1>
+
+
+
     </div>
 
 

final_project/js/this.js

@@ -7,16 +7,39 @@ if (curHr < 12) {
   document.getElementById('morning').innerText ='morning'
   for(let i=0;i<numItemsToGenerate;i++){
   rendermoringItem();
+  var img = new Image();
+  var div = document.getElementById('logo');
+  img.onload = function() {
+  div.innerHTML += '<img src="'+img.src+'" />'; 
+  };
+  img.src = ('../final_project/img/nature.png');
+
+
+
   };
 } else if (curHr < 18) {
   document.getElementById('morning').innerText ='afternoon'
   for(let i=0;i<numItemsToGenerate;i++){
   renderafternoonItem();
+  var img = new Image();
+  var div = document.getElementById('logo');
+  img.onload = function() {
+  div.innerHTML += '<img src="'+img.src+'" />'; 
+  };
+  img.src = ('../final_project/img/weather.png');
   }
 } else {
   document.getElementById('morning').innerText ='night'
   for(let i=0;i<numItemsToGenerate;i++){
   rendernightItem();
+
+  var img = new Image();
+  var div = document.getElementById('logo');
+  img.onload = function() {
+  div.innerHTML += '<img src="'+img.src+'" />'; 
+  };
+  img.src = ('../final_project/img/night.png');
+
   }
 }
 
@@ -32,7 +55,7 @@ if (curHr < 12) {
 
   function renderafternoonItem(){
 
-    const setBackground = fetch(`https://source.unsplash.com/1600x900/?afternoon`).then((response)=> {   
+    const setBackground = fetch(`https://source.unsplash.com/1600x900/?afternoon,`).then((response)=> {   
       document.body.style.backgroundImage = `url(${response.url})`
 
     }) 
@@ -80,16 +103,6 @@ function currentTime() {
 var today = new Date()
 var curHr = today.getHours()
 
-//function writeText(displayText){
-  //var p = document.getElementById('good');
- // document.write("hello");
-//}
-
-
-
-
-
-
 let areaText = document.getElementById("name");
 
 const saveLocally = function() {
@@ -108,5 +121,16 @@ retrieveSavedText();
 
 setInterval(function () {
   var now = new Date();
-  document.getElementById('hours').style.width = ((now.getHours() / 24) * 100) + 'px';
-}, 1000);
+  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
+   //}
+//});