Merge pull request #6 from lechinal/hourlyForecast

Hourly forecast
lechinal · Jul 9, 2024 · c61f547 · c61f547
2 parents 189e5b8 + 751ce28
commit c61f547
Show file tree

Hide file tree

Showing 22 changed files with 444 additions and 164 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,11 +3,21 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700;900&family=Roboto:wght@300;400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
-      name="description"
-      content="Web site created using create-react-app"
+      name="ForecastPro"
+      content="Weather App created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,6 @@
-import './App.css';
 import React, { Suspense, lazy, useState, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
+import styles from './App.module.css';
 import SearchBar from './components/SearchBar/SearchBar';
 import { Loader } from './components/Loader/Loader';
 import Header from './components/Header/Header';
@@ -49,26 +49,26 @@ function App() {
   }, [favoriteCities]);
 
   return (
-    <div className="App">
-      <section>
+    <div className={styles.app}>
+      <header>
         <Header />
         <SearchBar
           setCity={setCity}
           addToFavorites={addToFavorites}
           favoriteCities={favoriteCities}
         />
-      </section>
+      </header>
 
       {favoriteCities.length > 0 && (
-        <div>
+        <section className={styles.favCities}>
           <FavoriteCities
             cities={favoriteCities}
             onCityClick={handleCityClick}
             onRemoveCityClick={handleRemoveCity}
             addToFavorites={addToFavorites}
             setCity={setCity}
           />
-        </div>
+        </section>
       )}
 
       <Suspense fallback={<Loader />}>

diff --git a/src/App.css → src/App.module.css b/src/App.css → src/App.module.css
@@ -1,6 +1,5 @@
-.App {
+.app {
   text-align: center;
 
-  background-color: #ce9233;
   background-color: #dadce0;
 }
diff --git a/src/components/App.jsx b/src/components/App.jsx
diff --git a/src/components/CityDetails/CityDetails.jsx b/src/components/CityDetails/CityDetails.jsx
@@ -23,7 +23,7 @@ function CityDetails({
 
           <div className={styles.temperature}>
             <p className={styles.dailyTemp}>
-              {weather.main && Math.floor(weather.main.temp - 273.15)}°C
+              {weather.main && Math.floor(weather.main.temp - 273.15)} °C
             </p>
             <div className={styles.minmax}>
               <div className={styles.min}>
@@ -46,3 +46,4 @@ function CityDetails({
 }
 
 export default CityDetails;
+
diff --git a/src/components/CityDetails/CityDetails.module.css b/src/components/CityDetails/CityDetails.module.css
@@ -4,6 +4,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 100%;
 }
 
 .details {
@@ -13,12 +14,12 @@
   align-items: center;
   gap: 20px;
 
-  width: 300px;
+  width: 100%;
   height: 100%;
 
   padding: 30px 50px 30px 50px;
 
-  background: rgba(16, 33, 54, 0.8);
+  background: rgba(39, 56, 74, 1);
   border-radius: 30px;
 }
 
@@ -74,3 +75,44 @@
   width: 1px;
   height: 40px;
 }
+@media (min-width: 481px) and (max-width: 768px) {
+  .details {
+    max-width: 680px;
+  }
+  .location h1 {
+    color: #767d85;
+    font-size: 18px;
+    line-height: 21.6px;
+  }
+  .dailyTemp {
+    font-size: 60px;
+    line-height: 108px;
+  }
+  .min,
+  .max {
+    font-size: var(--fontSize28);
+    line-height: 21.6px;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024) {
+  .details {
+    max-width: 980px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .details {
+    width: 411px;
+    margin-right: 30px;
+  }
+
+  .cityDetailsContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-end;
+
+    /* width: 500px; */
+  }
+}
diff --git a/src/components/FavoriteCities/FavoriteCities.jsx b/src/components/FavoriteCities/FavoriteCities.jsx
@@ -40,12 +40,16 @@ function FavoriteCities({
 
   return (
     <div className={styles.favoriteCities}>
-      <h2>Favorite Cities</h2>
+      {/* <h2>Favorite Cities</h2> */}
       <ul className={styles.citiesList}>
         {visibleCities.map((city, index) => (
           <li key={index} className={styles.city}>
             <span onClick={() => handleCityClick(city)}>{city}</span>
-            <button onClick={event => handleRemoveCity(event, city)}>X</button>
+            <div>
+              <button onClick={event => handleRemoveCity(event, city)}>
+                <div className={styles.buttonContent}>X</div>
+              </button>
+            </div>
           </li>
         ))}
       </ul>
@@ -56,14 +60,18 @@ function FavoriteCities({
           disabled={currentPage === 0}
           className={styles.navButton}
         >
-          <ArrowBackIosIcon />
+          <div className={styles.iconContainer}>
+            <ArrowBackIosIcon />
+          </div>
         </button>
         <button
           onClick={goToNextPage}
           disabled={startIndex + ITEMS_PER_PAGE >= cities.length}
           className={styles.navButton}
         >
-          <ArrowForwardIosIcon />
+          <div className={styles.iconContainer}>
+            <ArrowForwardIosIcon />
+          </div>
         </button>
       </div>
     </div>

diff --git a/src/components/FavoriteCities/FavoriteCities.module.css b/src/components/FavoriteCities/FavoriteCities.module.css
@@ -1,33 +1,42 @@
 .favoriteCities {
-  margin-bottom: 30px;
+  margin: 20px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
+
 .citiesList {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  gap: 30px;
+  gap: 10px;
 
   list-style: none;
+
+  font-size: var(--fontSize12);
 }
 
 .city {
   background-color: rgba(16, 33, 54, 0.5);
+  color: white;
   cursor: pointer;
+
   border-radius: 20px;
-  padding: 15px 20px 15px 20px;
-  color: white;
+  padding: 5px 10px 5px 10px;
+
   text-decoration: underline;
-  display: inline-block;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 45px;
 }
 
-/* .city:hover {
+.city:hover {
   background-color: white;
   border: 1px solid rgba(16, 33, 54, 0.5);
   color: black;
-} */
+}
 
 .city span {
   padding-left: 15px;
@@ -39,10 +48,10 @@
   background-color: transparent;
   border: none;
   color: white;
-  font-size: 16px;
+  font-size: var(--fontSize10);
 }
-.city button:hover {
-  color: red;
+.city:hover button {
+  color: #ce9233;
 }
 
 .pagination {
@@ -53,18 +62,20 @@
   gap: 20px;
 }
 .navButton {
-  /* background-color: rgba(255, 255, 255, 0.2); */
   background-color: white;
+  background: rgba(255, 255, 255, 0.2);
+
   border-radius: 20px;
   border: 1px solid lightblue;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  /* border: none; */
-  padding: 10px;
+  padding: 15px 10px 15px 10px;
   cursor: pointer;
 
-  width: 100px;
+  width: 50px;
+  height: 30px;
 }
 
 .navButton:hover {
@@ -86,3 +97,9 @@
   color: #999;
   cursor: not-allowed;
 } */
+
+@media (min-width: 481px) and (max-width: 768px) {
+  .citiesList {
+    font-size: var(--fontSize14);
+  }
+}
diff --git a/src/components/ForecastEntry/ForecastEntry.jsx b/src/components/ForecastEntry/ForecastEntry.jsx
@@ -31,9 +31,9 @@ const ForecastEntry = ({ entry, onSelect }) => {
       ></div>
       <p className={styles.formatedMonth}> {formattedMonth}</p>
       <img src={iconUrl} alt="weather icon" width="75px" height="75px" />
-      <div className={styles.temp}> {temp}° C</div>
+      <div className={styles.temp}> {temp} °C</div>
       <div className={styles.feelsLike}>
-        Feels like: <p className={styles.feelsLikeTemp}>{feelsLike}° C</p>
+        Feels like: <p className={styles.feelsLikeTemp}>{feelsLike} °C</p>
       </div>
 
       <div className={styles.minMaxtempBox}>

diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -1,3 +1,19 @@
 .header {
   padding-top: 30px;
 }
+
+.header h1 {
+  font-size: var(--fontSize40);
+}
+
+@media (min-width: 481px) and (max-width: 768px) {
+  .header h1 {
+    font-size: var(--fontSize50);
+  }
+}
+
+@media (min-width: 769px) {
+  .header h1 {
+    font-size: var(--fontSize70);
+  }
+}
diff --git a/src/components/HourlyForecast/HourlyForecast.jsx b/src/components/HourlyForecast/HourlyForecast.jsx
@@ -42,7 +42,7 @@ function HourlyForecast({ entry }) {
       </div>
 
       <div className={styles.temp}>
-        <p>{`${temperature}°C`}</p>
+        <p>{`${temperature} °C`}</p>
       </div>
 
       <div className={styles.description}>
@@ -52,7 +52,7 @@ function HourlyForecast({ entry }) {
       <img src={iconUrl} alt="weather icon" width="35px" height="35px" />
       <div className={styles.feels}>
         Feels like:
-        <p>{feelsLike}℃</p>
+        <p>{feelsLike} °C</p>
       </div>
 
       <div className={styles.details}>

diff --git a/src/components/HourlyForecast/HourlyForecast.module.css b/src/components/HourlyForecast/HourlyForecast.module.css
@@ -27,6 +27,10 @@
   color: #ce9233;
 }
 
+.temp p {
+  color: #767d85;
+}
+
 .details {
   display: flex;
   flex-direction: column;