feat: convert temperature from celsius to fahrenheit

anndcodes · Oct 19, 2023 · 76600e4 · 76600e4
1 parent 57412a5
commit 76600e4
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -64,21 +64,25 @@ <h1 id="city"></h1>
                 <p id="description"></p>
               </div>
             </div>
-            <div class="weather col-5 d-flex column-gap-4">
-              <div>
+            <div class="weather col-5">
+              <div class="d-flex">
                 <h2 id="temperature"></h2>
+                <div>
+                  <span class="units">
+                    <a id="celsius" class="active">°C</a> |
+                    <a id="fahrenheit" href="">°F</a>
+                  </span>
+
+                    <p>
+                    <small class="weather-data"
+                      >💧 <span class="humidity"></span> 🌬️
+                      <span class="wind"></span
+                    ></small>
+                  </p>
+                </div>
+
               </div>
-              <div>
-                <p class="units">
-                  <a id="celsius" href="#">°C</a> |
-                  <a id="fahrenheit" href="#">°F</a>
-                </p>
-                <p>
-                  <small class="weather-data"
-                    >💧 <span class="humidity"></span> 🌬️
-                    <span class="wind"></span
-                  ></small>
-                </p>
+              <div class="d-flex justify-content-end align-items-start">
               </div>
             </div>
           </div>

diff --git a/script.js b/script.js
@@ -22,6 +22,7 @@ function formatDate(timestamp) {
 
 // get temperature by searching for a city
 function showTemp(response) {
+  celsiusTemp = response.data.main.temp;
   let city = (document.querySelector(
     "#city"
   ).innerHTML = `${response.data.name}`);
@@ -46,12 +47,32 @@ function search(city) {
   axios.get(apiUrl).then(showTemp);
 }
 
-function searchCity(event) {
+function handleSubmit(event) {
   event.preventDefault();
   let city = document.querySelector("#search").value;
   search(city);
 }
 
+// convert temperature from celsius to fahrenheit
+function showFahrenheitTemp(event) {
+  event.preventDefault();
+  let fahrenheitTemp = Math.round((celsiusTemp * 9) / 5 + 32);
+  let temperature = (document.querySelector("#temperature").innerHTML = fahrenheitTemp);
+  celsius.classList.remove("active");
+  fahrenheit.classList.add("active");
+  console.log(celsiusTemp);
+}
+
+function showCelsiusTemp(event) {
+  event.preventDefault();
+  console.log(celsiusTemp)
+  let temperature = (document.querySelector("#temperature").innerHTML = Math.round(celsiusTemp));
+  fahrenheit.classList.remove("active");
+  celsius.classList.add("active");
+  console.log(celsiusTemp);
+}
+
+
 // get user's current location temperature
 function getLocation(position) {
   let apiKey = "b782a5a0cba928a80029c0fd1ea418bd";
@@ -68,8 +89,18 @@ let currentLocal = document
   .querySelector("#current-btn")
   .addEventListener("click", getPosition);
 
+
 let form = document
   .querySelector(".search-form")
-  .addEventListener("submit", searchCity);
+  .addEventListener("submit", handleSubmit);
+
+let celsiusTemp = null;
+console.log(celsiusTemp);
+
+let fahrenheit = document.querySelector("#fahrenheit");
+fahrenheit.addEventListener("click", showFahrenheitTemp);
+
+let celsius = document.querySelector("#celsius");
+celsius.addEventListener("click", showCelsiusTemp);
 
 search("Sao Paulo");
diff --git a/style.css b/style.css
@@ -42,7 +42,7 @@ h1 {
   font-weight: 400;
 }
 
-h2 {
+#temperature {
   font-size: 8.5rem;
 }
 
@@ -87,13 +87,17 @@ img {
   font-size: 1.9rem;
 }
 
+.units a {
+  cursor: pointer;
+  color: #E86348;
+}
+
 .weather-data {
-  font-size: 1.3rem;
+  font-size: 1.4rem;
 }
 
 a {
   text-decoration: none;
-  color: inherit;
 }
 
 .btn {
@@ -119,11 +123,6 @@ input[type="search"] {
   font-weight: 700;
 }
 
-#celsius:hover,
-#fahrenheit:hover {
-  color: #E86348
-}
-
 footer {
   margin-top: 20px;
   font-size: 1.5rem;
@@ -135,4 +134,9 @@ footer span  {
 
 footer a {
   color: #E86348;
+}
+
+.units .active {
+  cursor: default;
+  color: #615f5e;
 }