full screen background img changes

met18001 · Apr 22, 2020 · f29d6e6 · f29d6e6
1 parent 12e9263
commit f29d6e6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 deletions.
diff --git a/final_project/css/style.css b/final_project/css/style.css
@@ -2,16 +2,13 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-height: 100vh;
 
   }
 
- img{
-
- }
- #img{
-   max-width: 100vw;
-   max-height: 100vh;
- }
 
 /* Google font */
 @import url('https://fonts.googleapis.com/css?family=Orbitron');
@@ -20,19 +17,28 @@ body {
   font-family: 'Orbitron', sans-serif;
   color: #66ff99;
   font-size: 56px;
-  position: absolute;
-  top: 50%;
-  left: 34%;
-
+
 
 }
 p{
-  position: absolute;
-    top: 40%;
-    left: 34%;
+
     font-family: 'Orbitron', sans-serif;
     color: #66ff99;
     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;
+          min-height: 100vh;
+
+}
 
 
diff --git a/final_project/index.html b/final_project/index.html
@@ -7,10 +7,12 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-    <div id="clock"></div>
-    <p id="good"> <span> <input type="text" editable name></span></p>
+    <div class="wrapper">
+        <div id="clock"></div>
+        <p id="good"> Good <span id="morning"> </span><span contenteditable=true id="name">Person</span></p>
 
-    <div id="img"></div>
+        <div id="img"></div>
+    </div>
 
 
 

diff --git a/final_project/js/this.js b/final_project/js/this.js
@@ -2,12 +2,12 @@ const numItemsToGenerate = 1;
 
 function renderItem(){
   fetch(`https://source.unsplash.com/1600x900/?morning`).then((response)=> {   
-    let item = document.getElementById("img");
-    item.classList.add('item');
-    item.innerHTML = `
-      <img class="morning-image" src="${response.url}" alt="morning image"/>
-    `     
-    document.documentElement.appendChild(item);
+    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);
   }) 
 }
 for(let i=0;i<numItemsToGenerate;i++){
@@ -52,9 +52,9 @@ var curHr = today.getHours()
 //}
 
 if (curHr < 12) {
-  document.write('good morning')
+  document.getElementById('morning').innerText ='morning'
 } else if (curHr < 18) {
-  document.write('good afternoon')
+  document.getElementById('morning').innerText ='afternoon'
 } else {
-  document.write('good evening')
+  document.getElementById('morning').innerText ='night'
 }