Footer and beginning unit conversion

Added GitHub footer, added the beginning of the unit conversion scripts.
citroenboter · Nov 3, 2022 · 7ea09fa · 7ea09fa
1 parent 5d03e1a
commit 7ea09fa
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 11 deletions.
diff --git a/Plus/Final Project/index.html b/Plus/Final Project/index.html
@@ -59,8 +59,10 @@ <h2 class="card-title" id="city-header">Rat</h2>
                   </div>
                 </form>
                 <span id="freedom-units"> I need Freedom Units </span
-                  >&ensp;|&ensp;
-                  <span id="get-location">Get Location</span>
+                >&ensp;|&ensp;
+                <span id="normal-units"> I need Normal Units </span
+                >&ensp;|&ensp;
+                <span id="get-location">Get Location</span>
               </div>
               <!--Current temperature-->
               <div
@@ -82,18 +84,27 @@ <h2 class="card-title" id="city-header">Rat</h2>
                       </tr>
                       <tr>
                         <td><i class="fa-solid fa-wind desc-icon"></i></td>
-                        <td><span id="current-wind-speed">12</span> <span class="speed-unit">km/h</span></td>
+                        <td>
+                          <span id="current-wind-speed">12</span>
+                          <span class="speed-unit">km/h</span>
+                        </td>
                       </tr>
                       <tr>
-                        <td><i class="fa-solid fa-cloud-meatball desc-icon"></i></td>
-                        <td><span id="current-description">Rodent with cool tail</td>
+                        <td>
+                          <i class="fa-solid fa-cloud-meatball desc-icon"></i>
+                        </td>
+                        <td>
+                          <span id="current-description"
+                            >Rodent with cool tail</span
+                          >
+                        </td>
                       </tr>
                     </table>
                   </div>
                 </div>
               </div>
             </div>
-            </div>
+          </div>
           <!--5 day prediction-->
           <div class="row mt-5">
             <!--Day 1-->
@@ -184,9 +195,19 @@ <h3 class="card-subtitle">Day 5</h3>
             </div>
           </div>
         </div>
+        <div class="w-50 mx-auto text-center">
+          <span
+            ><a
+              href="https://github.com/citroenboter/SheCodes/tree/main/Plus/Final%20Project"
+              target="_blank"
+              >GitHub</a
+            >
+            - Marije Hammel</span
+          >
+        </div>
       </div>
     </div>
-  </div>
+
     <script type="text/javascript" src="src/index.js"></script>
   </body>
 </html>
diff --git a/Plus/Final Project/src/index.js b/Plus/Final Project/src/index.js
@@ -40,9 +40,9 @@ function searchCity(city) {
   //selects the input from the search bar
   let apiKey = "bc8b34dt7ae2e53dfe98ff6od201f7a2";
   let apiUrlCurrent = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}
-&units=metric`;
+&units=${unit}`;
   let apiUrlForecast = `https://api.shecodes.io/weather/v1/forecast?query=${city}&key=${apiKey}
-&units=metric`;
+&units=${unit}`;
   axios.get(apiUrlCurrent).then(displayCurrentWeather);
   axios.get(apiUrlForecast).then(displayForecast);
 }
@@ -73,6 +73,26 @@ function localWeather(location) {
   let longitude = location.coords.longitude;
 
   let apiKey = "bc8b34dt7ae2e53dfe98ff6od201f7a2";
-  let apiUrlCurrent = `https://api.shecodes.io/weather/v1/current?lon=${longitude}&lat=${latitude}&key=${apiKey}&units=metric`;
+  let apiUrlCurrent = `https://api.shecodes.io/weather/v1/current?lon=${longitude}&lat=${latitude}&key=${apiKey}&units=${unit}`;
   axios.get(apiUrlCurrent).then(displayCurrentWeather);
 }
+
+//Freedom units
+
+let unit = "metric";
+
+function convertFreedom() {
+  document.querySelectorAll(".temp-unit").innerHTML = "°F";
+  document.querySelectorAll(".speed-unit").innerHTML = "mph";
+  unit = "imperial";
+}
+let freedomUnits = document.querySelector("#freedom-units");
+getLocation.addEventListener("click", () => {
+  convertFreedom();
+});
+
+function convertNormal() {
+  document.querySelectorAll(".temp-unit").innerHTML = "°C";
+  document.querySelectorAll(".speed-unit").innerHTML = "km/h";
+  unit = "metric";
+}
diff --git a/Plus/Final Project/src/style.css b/Plus/Final Project/src/style.css
@@ -43,6 +43,11 @@ p {
     font-size: 46px;
 }
 
+#freedom-units:hover, #normal-units:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
 #get-location:hover {
     cursor: pointer;
     text-decoration: underline;
@@ -95,4 +100,4 @@ p {
     font-size: 40px;
     text-align: center;
     color: var(--main);
-}
+}