From 824faa290d3e6feba85def4b4c3a10539e8e9217 Mon Sep 17 00:00:00 2001 From: Meira Tompkins Date: Thu, 30 Apr 2020 02:09:59 -0400 Subject: [PATCH] status bar and font change and background img backend --- final_project/css/style.css | 34 +++++++++++++++-- final_project/index.html | 6 ++- final_project/js/this.js | 74 +++++++++++++++++++++++++++---------- 3 files changed, 89 insertions(+), 25 deletions(-) diff --git a/final_project/css/style.css b/final_project/css/style.css index 21094e6..45fe931 100644 --- 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 index ff4b622..5360a0a 100644 --- a/final_project/index.html +++ b/final_project/index.html @@ -5,13 +5,15 @@ Final Project +
-

Good

+
+
-
+

What pictures would you like to see?

diff --git a/final_project/js/this.js b/final_project/js/this.js index ecb9b06..9c65627 100644 --- 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 = ` - // 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 { + 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(); \ No newline at end of file +retrieveSavedText(); + + +setInterval(function () { + var now = new Date(); + document.getElementById('hours').style.width = ((now.getHours() / 24) * 100) + 'px'; +}, 1000); \ No newline at end of file