add styles

tajulafreen · tajulafreen · Feb 9, 2024 · Feb 2, 2024 · Feb 4, 2024 · Feb 4, 2024
commit b2858772bd73f05663a5cea78b06d96719c2521c
diff --git a/Source-Code/WeatherApp/index.html b/Source-Code/WeatherApp/index.html
@@ -4,20 +4,61 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather App</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
-        <div>
-        <h1>Weather App</h1>
-        <div>
-        <input id="input" type="text" placeholder="Enter city name">
-        <button id="btn">Search</button>
-    </div>
-        <h6 id="country"></h6>
-        <h6 id="city-name"></h6>
-        <p id="date-time"></p>
-        <div id="weather-icon"></div>
-        <p id="temp"></p>
-        <button id="getlocation">get the location</button>
+        <div class="weather-app">
+            <div class="weather-container">         
+
+    <ul class="weather-information">
+        <!-- <h2 class="heading">Check Weather</h2>
+         -->
+        <h1 id="temp" class="temp">23°C</h1>
+        <li class="column">
+        <h1 id="city-name" class="city">Kadapa</h1>
+        <h4 id="date-time" class="time">2024-02-06 3:59</h4>
+    </li>
+    <li class="column">
+        <img id="weather-icon" class="icon" src="./icons/night/113.png" class="icon" alt="icon" />
+        <span id="condition" class="condition">Clear</span>
+    </li>
+
+    </ul>
+    <ul class="weather-suggestions">
+        <form>
+        <input class="input" id="input" type="text" placeholder="Enter city name">
+        <button class="search" id="btn"><i class="fa fa-search"></i></button>
+        </form>
+        <ul>
+        <li>
+            <a class="location" id="getlocation"><i class="fa fa-location-arrow "> Get Weather of your city</i></a>
+        </li>
+        <li class="city">London</li>
+        <li class="city">Delhi</li>
+        <li class="city">Canada</li>
+        <li class="city">Morocco</li>
+        </ul>
+        <h3 class="weather-details">Weather details</h3>
+        <li class="row">
+            <h3  class="country">Country</h3>
+            <h3 id="country" class="country">India</h3>
+
+        </li>
+        <li class="row">
+            <p  class="condition">Condition</p>
+            <span id="condition" class="condition">Clear</span>
+
+        </li>
+        <li class="row">
+            <p class="humidity">Humidity</p>
+            <span id="humidity" class="humidity">humidity</span>
+
+        </li>
+    </ul>
+</div>
+
+
         <script src="script.js"></script>
          </div>
   </body>

diff --git a/Source-Code/WeatherApp/script.js b/Source-Code/WeatherApp/script.js
@@ -1,12 +1,15 @@
-const input = document.getElementById('input');
-const btn = document.getElementById('btn');
-const apiKey = 'e3a46268fdc2475cb63214712240202';
-const cityName = document.getElementById('city-name');
-const dateTime = document.getElementById('date-time');
-// const icon = document.getElementById('icon');
-const temp = document.getElementById('temp');
-const country = document.getElementById('country');
-const locat = document.getElementById('getlocation');
+const input = document.getElementById("input");
+const btn = document.getElementById("btn");
+const apiKey = "e3a46268fdc2475cb63214712240202";
+const cityName = document.getElementById("city-name");
+const dateTime = document.getElementById("date-time");
+const condition = document.getElementById("condition");
+const temp = document.getElementById("temp");
+const humidity = document.getElementById("humidity");
+const country = document.getElementById("country");
+const locat = document.getElementById("getlocation");
+const cities = document.getElementsByClassName("city");
+const icon = document.getElementById("icon");
 
 const fetchData = async (url) => {
   try {
@@ -26,35 +29,47 @@ const updateWeatherInfo = (result) => {
   dateTime.innerText = `${result.location.localtime}`;
   temp.innerText = `${result.current.temp_c} °C`;
 };
-const getData = async (cityName) => fetchData(
-  `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityName}&aqi=no`,
-);
+const getData = async (cityName) =>
+  fetchData(
+    `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityName}&aqi=no`
+  );
 
-const getlocation = async (lat, long) => fetchData(
-  `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&aqi=no`,
-);
+const getlocation = async (lat, long) =>
+  fetchData(
+    `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${lat},${long}&aqi=no`
+  );
 
 const gotlocation = async (position) => {
   try {
     const result = await getlocation(
       position.coords.latitude,
-      position.coords.longitude,
+      position.coords.longitude
     );
     updateWeatherInfo(result);
   } catch (error) {
-    cityName.innerText = 'Error fetching weather based on location';
+    cityName.innerText = "Error fetching weather based on location";
   }
 };
-const failedlocation = () => console.log('failed to locate location');
+const failedlocation = () => console.log("failed to locate location");
 
-btn.addEventListener('click', async () => {
+btn.addEventListener("click", async () => {
   try {
     const { value } = input;
     const result = await getData(value);
     updateWeatherInfo(result);
   } catch (error) {
-    cityName.innerText = 'Error to fetch weather';
+    cityName.innerText = "Error to fetch weather";
   }
 });
 
-locat.addEventListener('click', () => navigator.geolocation.getCurrentPosition(gotlocation, failedlocation));
+locat.addEventListener("click", () =>
+  navigator.geolocation.getCurrentPosition(gotlocation, failedlocation)
+);
+const citiesArray = [...cities];
+// citiesArray.forEach((element) => {
+//   element.addEventListener("click", async () => {
+//     const cityName = element.innerText; // Extract city name from the clicked element
+//     const result = await getData(cityName); // Pass the city name to getData
+//     updateWeatherInfo(result);
+//   });
+// });
diff --git a/Source-Code/WeatherApp/style.css b/Source-Code/WeatherApp/style.css
@@ -1,6 +1,160 @@
-body {
-    font-family: Georgia, 'Times New Roman', Times, serif;
-    margin: 0;
-    overflow-x: hidden;
-    height: 100vh;
-  }
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.weather-app{
+  min-height: 100vh;
+  min-width: 100vw;
+  background-image: url(./images/Night/clear.jpg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+  color: #fff;
+  transition: 500ms linear;
+  opacity: 1;
+}
+.weather-app::before{
+ content: "";
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.3);
+ z-index: 0;
+}
+.weather-container{
+ display: flex;
+ justify-content: space-between;
+}
+.heading{
+  display: flex;
+  align-items: center;
+}
+
+.temp{
+  font-size: 56px;
+  font-weight: 700;
+}
+.city{
+  font-size: 48px;
+  font-weight: 700;
+
+}
+li{
+  list-style: none;
+}
+.weather-information{
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end; 
+  padding: 5% 10%;
+  gap: 5%;
+  justify-content: space-between;
+
+}
+.column{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.row{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 25px auto;
+}
+
+.weather-suggestions{
+  width: 40vw;
+  height: 100vh;
+  background: rgba(236, 236, 178, 0.104);
+  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.3);
+  backdrop-filter: blur(5px);
+  --webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgb(236, 236, 178,0);
+  z-index: 1;
+  padding: 3em 2em;
+}
+form {
+margin-bottom: 3em;
+display: flex;
+gap: 10px;
+}
+.input{
+  height: 40px;
+  width: 90%;
+  border-radius: 9px;
+  border: inherit;
+  padding: 15px;
+  background: none;
+  color: #fff;
+  border-bottom: 1px solid #ccc;
+}
+.input:focus{
+  outline: none;
+}
+.search{
+  height: 40px;
+  width: 40px;
+  border-radius: 9px;
+  border: inherit;
+  background-color: rgb(129, 180, 231);
+}
+.fa-search{
+  color: #fafafa;
+}
+.weather-suggestions > ul{
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  justify-content: center;
+  margin: auto;
+
+}
+.weather-suggestions > ul >li{
+margin: 15px auto;
+font-size: medium;
+height: 30px;
+padding: 5px;
+display: flex;
+justify-content: flex-start;
+}
+
+.icon{
+  height: 70px;
+  width: 70px;
+  border-radius: 50%;
+}
+span{
+  font-size: medium;
+}
+.weather-details{
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 30px auto;
+  align-items: center;
+}
+.city, .location{
+  display: block;
+  cursor: pointer;
+}
+.city:hover, .location:hover{
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .weather-container{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+   }
+   .weather-suggestions, .weather-information{
+width: 100%;
+   }
+}