Final Commit

rishabh0com · Jan 2, 2024 · fbe8e54 · fbe8e54
1 parent 952b4aa
commit fbe8e54
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,11 @@
 </head>
 
 <body>
+    <div class="app">
+        <img src="./images/thunder.png" alt="">
+        <h1>Weather App</h1>
+    </div>
+
     <div class="upper">
         <div class="search">
             <input id="input" type="text" placeholder="Enter city name..">

diff --git a/script.js b/script.js
@@ -29,7 +29,7 @@ let humidity, windSpeed, temprature,  weather;
 async function getTemprature() {
     console.log("Time",new Date().getHours())
     try {
-        let response = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIkey}`);
+        let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIkey}`);
         let data = await response.json()
         console.log(data)
         weather = data.weather[0].main
@@ -52,7 +52,7 @@ getTemprature()
 async function getForcast() {
     // console.log(forcastDivs)
     try {
-        let res = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=${APIkey}`);
+        let res = await fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=${APIkey}`);
         let data = await res.json();
         // console.log(data)
        let forDays = data.list.filter((ele, index) => index % 8 == 0);

diff --git a/style.css b/style.css
@@ -177,10 +177,14 @@ background-image: linear-gradient(315deg, #fefefe 0%, #00a4e4 74%);
 .forC img{
     width: 6rem;
 }
+.app{
+    display: none;
+}
+
 /* @media query */
 @media (max-width : 900px){
     html{
-        font-size: 58%;
+        font-size: 57%;
     }
     .mainSec{
       width: 95%;
@@ -191,16 +195,33 @@ background-image: linear-gradient(315deg, #fefefe 0%, #00a4e4 74%);
       padding-top: 2rem;
       margin-top: 2rem;
       align-items: center;
+      margin-bottom: 3rem;
     }
     .upper{
         width: 90%;
     }
     .search input{
-        width: 80%;
+        width: 75%;
     }
     .secDiv{
         width: 90%;
     }
+    .app{
+        display: flex;
+        align-items: center;
+        width: 85%;
+        height: 3rem;
+        background-color:#343a40;
+        margin: auto;
+        border-bottom-left-radius: 3rem;
+        border-bottom-right-radius: 3rem;
+        text-align: center;
+        justify-content: center;
+    }
+    .app img{
+        display: block;
+        width: 3.5rem;
+    }