status bar and font change and background img backend

met18001 · Apr 30, 2020 · 824faa2 · 824faa2
1 parent 27b7496
commit 824faa2
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 25 deletions.
diff --git a/final_project/css/style.css b/final_project/css/style.css
@@ -17,12 +17,12 @@ body {
   font-family: 'Orbitron', sans-serif;
   color: #66ff99;
   font-size: 56px;
+  text-align: center;
 
 
 }
 p{
-
-    font-family: 'Orbitron', sans-serif;
+    font-family: 'Montserrat', sans-serif;   
     color: #66ff99;
     font-size: 20px;
 }
@@ -40,5 +40,33 @@ p{
           min-height: 100vh;
 
 }
-
+h1{
+  font-family: 'Montserrat', sans-serif;
+  color: white;
+  font-size: 20px;
+  font-weight: 400;
+  text-align: center;
+}
+#good{
+  margin: 0px;
+  font-size: 40px;
+  color: white;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 400;
+  text-align: center;
+}
+
+
+.bar {
+  border: 1px solid #66ff99; 
+  margin: 0.25em; 
+  border-radius: 2.75px;
+  background-color: white;
+  width: 30%;
+}
+
+.bar .progress {
+  background: #66ff99; 
+  height: 1em;
+}
 
diff --git a/final_project/index.html b/final_project/index.html
@@ -5,13 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Final Project</title>
     <link rel="stylesheet" href="css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="wrapper">
-        <div id="clock"></div>
         <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>
 
-        <div id="img"></div>
+        <h1> What pictures would you like to see?</h1>
     </div>
 
 

diff --git a/final_project/js/this.js b/final_project/js/this.js
@@ -1,18 +1,52 @@
 const numItemsToGenerate = 1; 
 
-function renderItem(){
-  fetch(`https://source.unsplash.com/1600x900/?morning`).then((response)=> {   
-    document.body.style.backgroundImage = `url(${response.url})`
-   // item.classList.add('item');
-    //item.innerHTML = `
-    //  <img class="morning-image" src="${response.url}" alt="morning image"/>
-   // `     
-  //  document.documentElement.appendChild(item);
-  }) 
+var today = new Date()
+var curHr = today.getHours()
+
+if (curHr < 12) {
+  document.getElementById('morning').innerText ='morning'
+  for(let i=0;i<numItemsToGenerate;i++){
+  rendermoringItem();
+  };
+} else if (curHr < 18) {
+  document.getElementById('morning').innerText ='afternoon'
+  for(let i=0;i<numItemsToGenerate;i++){
+  renderafternoonItem();
+  }
+} else {
+  document.getElementById('morning').innerText ='night'
+  for(let i=0;i<numItemsToGenerate;i++){
+  rendernightItem();
+  }
 }
-for(let i=0;i<numItemsToGenerate;i++){
-  renderItem();
-};
+
+
+  function rendermoringItem(){
+
+    const setBackground = fetch(`https://source.unsplash.com/1600x900/?morning`).then((response)=> {   
+      document.body.style.backgroundImage = `url(${response.url})`
+
+    }) 
+
+  };
+
+  function renderafternoonItem(){
+
+    const setBackground = fetch(`https://source.unsplash.com/1600x900/?afternoon`).then((response)=> {   
+      document.body.style.backgroundImage = `url(${response.url})`
+
+    }) 
+
+  };
+
+  function rendernightItem(){
+
+    const setBackground = fetch(`https://source.unsplash.com/1600x900/?night`).then((response)=> {   
+      document.body.style.backgroundImage = `url(${response.url})`
+
+    }) 
+
+  };
 
 
 
@@ -51,13 +85,7 @@ var curHr = today.getHours()
  // document.write("hello");
 //}
 
-if (curHr < 12) {
-  document.getElementById('morning').innerText ='morning'
-} else if (curHr < 18) {
-  document.getElementById('morning').innerText ='afternoon'
-} else {
-  document.getElementById('morning').innerText ='night'
-}
+
 
 
 
@@ -75,4 +103,10 @@ const retrieveSavedText = function() {
 }
 
 document.addEventListener('keyup', saveLocally);
-retrieveSavedText();
+retrieveSavedText();
+
+
+setInterval(function () {
+  var now = new Date();
+  document.getElementById('hours').style.width = ((now.getHours() / 24) * 100) + 'px';
+}, 1000);