changes to header tab

hingham · Oct 4, 2018 · 9afc937 · 9afc937
1 parent adfee23
commit 9afc937
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 63 deletions.
diff --git a/css/style.css b/css/style.css
@@ -33,16 +33,14 @@ html, body {
 
 
 header {
-    height: 10em;
+    height: 8em;
     padding-bottom: .75em;
 }
 
-header{
-    background-image: url(/img/earthquakegraph.jpg);
-    background-repeat: no-repeat;
-    background-size: 100%;
-}
+header div img{
+    float: left;
 
+}
 
 footer {
     background-color: rgb(243, 239, 239);
@@ -52,17 +50,15 @@ footer {
 h1 {
     color: black;
     height: 1.5em;
-    font-size: 2em;
+    font-size: 40px;
     font-weight: bold;
-    margin-top: .5em;
     line-height: 60px;
-    text-align: center;
-    font-size: 40px;
-    z-index: 1;
+    text-align: left;
+    position: relative;
+    top: .75em;
 }
 
 
-
 a{
     text-decoration: none;
     color: rgb(12, 12, 12);
@@ -72,27 +68,26 @@ a:hover{
     color:  rgb(116, 116, 116);
 }
 
-p{
-    padding: .5em 3em .5em 3em;
-    text-align: center;
+p, h3{
+    padding: .5em;
+    text-align: left;
 }
 
 
 h3{ 
     font-weight: bold; 
     padding-top: .5em;
     text-transform: uppercase;
-    text-align: center;
+    text-align: left;
 }
 
-/* nav a {
-    font-size: 20px;
-    background-color: rgb(218, 218, 218);
-    color: rgb(15, 14, 14);
-} */
+
 
 nav{
-    margin-left: 2em;
+    margin-right: 2em;
+    float: right;
+    position: relative;
+    top: -1em;
 }
 
 .navbar a {
@@ -109,19 +104,18 @@ nav{
     font-weight: bold;
 }
 
-/* .navbar a.active {
-    background-color: #4CAF50;
-    color: white;
-} */
 
 
-header form {
+#trigger-quake {
     margin: .5em auto;
-    width: 50%;
-    align-content: center;
+    width: 70%;
     position: relative;
+    float: left;
     bottom: 15px;
     color: #1a1919;
+    text-align: left;
+    top: .5em;
+
 }
 
 
@@ -140,15 +134,24 @@ nav form, button{
 
 
 #liveFeed {
-    margin: 1em 2em 1em 2em;
-    background-color: rgba(184, 215, 181, .5);
-    color: black;
+    background-color: rgba(247, 230, 174, 0.5);
+    border: 0px solid red;
+    width: 20%;
+    height: 150px;
+    overflow: hidden;
+    margin-bottom: 1em;
+    position: relative;
+    float: right;
 }
 
 #liveFeed:hover{
     text-decoration: underline;
 }
 
+#liveFeed h3{
+    color: blue;
+}
+
 section  {
     background-color: rgb(218, 218, 218);
     margin: 0em 2em 0em 2em;

diff --git a/img/graph.png b/img/graph.png
diff --git a/img/logoGraph.jpg b/img/logoGraph.jpg
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <body id="body">
         <header>
             <div>
+                <img src="img/logoGraph.jpg">
                 <h1>Earthquake Update</h1>
             </div>
 
@@ -19,27 +20,31 @@ <h1>Earthquake Update</h1>
                 <a href="links.html">Links</a>
             </nav>
 
-            <div>
+
+
+        </header>
+
+        <main>
+
+        <section>
             <form id="trigger-quake">
-                <h2>How many earthquakes happened in the last three weeks where you live?</h2>
-                <h2>Enter a US state or country below to find out:</h2>
+                <h4>How many earthquakes happened in the last three weeks where you live?</h4>
+                <h4>Enter a US state or country below to find out:</h4>
                 <label for="user-state"></label>
                 <input type="text" id="user-state" name="user-state" placeholder="State or Country">
                 <input id="submit-state" type="submit">
                 <button id="reset-state" type="submit">Reset</button>
             </form>
-            </div>
-
-        </header>
-
-        <main>
           <a target="_blank" id="news-link" href=''>
-               <div id="liveFeed"></div></a>
+            <div id="liveFeed"></div></a>    
+
+
+        </section>
+
           <section class="inline">
 
-            <section>
                 <h2> Markers represent recent earthquakes. Click a marker to find out more about the earthquake in that location.</h2>
-            </section>
+
           </section>
           <div id="map"></div>
           <section>

diff --git a/js/app.js b/js/app.js
@@ -66,7 +66,6 @@ function changeFilters() {
 
   if (longInput && latInput && radInput) {
     var loc = new google.maps.LatLng(latInput, longInput);
-    console.log(loc);
     searchLocation = loc;
     searchRadius = radInput;
     reloadMap();
@@ -84,7 +83,6 @@ function changeFilters() {
         map.setCenter(loc);
         return;
       } else {
-        console.log('Geocoder couldn\'t find entered address');
       }
     });
   } else if (!longInput && !latInput && !radInput && !addressInput) {
@@ -148,8 +146,8 @@ function loadQuakes() {
       gMarkers.push(marker);
       marker.informationIndex = i;
 
-      marker.addListener('click', function(e) {
-      });
+      // marker.addListener('click', function(e) {
+      // });
 
 
       var infowindow = new google.maps.InfoWindow({

diff --git a/js/stateCheck.js b/js/stateCheck.js
@@ -49,28 +49,40 @@ function handleSubmit(event){
   event.preventDefault();
   var numberQuakes = 0;
   var quakeHappened = false;
+  var largestQuake = 0;
   var userState = document.getElementById('user-state').value;
   userState = userState.toLowerCase();
 
-  for (var i = 0; i<allCountries.length; i++){
-    if(states.includes(userState) || countries.includes(userState)){
-      console.log("includes place");
-
-      for (var j = 0; j < earthquakeInfo.features.length; j++){
-        var placeLowerCase = earthquakeInfo.features[j].properties.place.toLowerCase();
-        if (placeLowerCase.includes(userState)){
-          body.setAttribute('class', 'shake');
-          numberQuakes+=1;
-          quakeHappened = true;
+
+  if(states.includes(userState) || countries.includes(userState)){
+    console.log("includes place");
+
+    for (var j = 0; j < earthquakeInfo.features.length; j++){
+      var placeLowerCase = earthquakeInfo.features[j].properties.place.toLowerCase();
+      if (placeLowerCase.includes(userState)){
+        body.setAttribute('class', 'shake');
+        console.log(numberQuakes);
+        numberQuakes++;
+        quakeHappened = true;
+
+        var quakeMag = parseInt(earthquakeInfo.features[j].properties.mag);
+        //console.log('mag' + parseInt(earthquakeInfo.features[j].properties.mag));
+        console.log('mag' + quakeMag);
+        if(quakeMag > largestQuake){
+          largestQuake = quakeMag;
+          console.log('largest' + largestQuake);
         }
-      } 
+      }
     }
   }
+  console.log('the largest' + largestQuake);
+
   if(quakeHappened){
-  addElement('p', userState + ' has experienced ' + numberQuakes + ' earthquakes in the past 18 days.', stateForm);
-  document.getElementsByTagName('p')[0].setAttribute('id', 'quakeReport');
-  submit.style.display = 'none';
-  reset.style.display = 'inline-block';
+    var quakeContent = userState + ' has experienced ' + numberQuakes + ' earthquakes in the past 18 days.' + ' The largest of these earthquake was a magnitude ' + largestQuake +'!';
+    addElement('p', quakeContent, stateForm);
+    document.getElementsByTagName('p')[0].setAttribute('id', 'quakeReport');
+    submit.style.display = 'none';
+    reset.style.display = 'inline-block';
   }
   else{
     addElement('p', userState + ' is an invalid entry. Please try again.', stateForm);
@@ -91,6 +103,6 @@ function handleButton(event){
   reset.style.display = 'none';
 }
 
-//   removeElement('quakeReport'); 
+//   removeElement('quakeReport');
 //   body.removeAttribute('class', 'shake');
 // }