removed html code which is added danamically through js

ajmalfaris11 · May 31, 2024 · e8f58b5 · e8f58b5
1 parent e9d4535
commit e8f58b5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 46 deletions.
diff --git a/images/bgImg.jpg b/images/bgImg.jpg
diff --git a/index.html b/index.html
@@ -19,9 +19,7 @@
                         <h2 class="default_day">Sunday</h2>
                         <span class="default_date">18 may 2024</span>
                         <div class="icons">
-                            <img src="https://openweathermap.org/img/wn/[email protected]" alt="weather">
-                            <h2 class="weather_temp">22&degC</h2>
-                            <h3 class="cloudtxt">Overcsast Clouds</h3>
+                            <!-- Contents will add with help of js -->
                         </div>
                     </div>
                 </div>
@@ -32,46 +30,11 @@ <h3 class="cloudtxt">Overcsast Clouds</h3>
                     </form>
 
                     <div class="day_info">
-                        <div class="content">
-                            <p class="title">Name</p>
-                            <span class="value">United Kingdom</span>
-                        </div>
-                        <div class="content">
-                            <p class="title">Temp</p>
-                            <span class="value">23&deg C </span>
-                        </div>
-                        <div class="content">
-                            <p class="title">HUMIDITY</p>
-                            <span class="value">2%</span>
-                        </div>
-                        <div class="content">
-                            <p class="title">WIND SPEED</p>
-                            <span class="value">2.92 Km/h</span>
-                        </div>
+                        <!-- data show dinamically here with help of js  -->
                     </div>
                     <div class="list_content">
                         <ul>
-                            <li>
-                                <span>Mon</span>
-                                <img src="https://openweathermap.org/img/wn/[email protected]" alt="">
-                                <span class="day_temp">23&degC</span>
-                            </li>
-                            <li>
-                                <span>Mon</span>
-                                <img src="https://openweathermap.org/img/wn/[email protected]" alt="">
-                                <span class="day_temp">23&degC</span>
-                            </li>
-                            <li>
-                                <span>Mon</span>
-                                <img src="https://openweathermap.org/img/wn/[email protected]" alt="">
-                                <span class="day_temp">23&degC</span>
-                            </li>
-                            <li>
-                                <span>Mon</span>
-                                <img src="https://openweathermap.org/img/wn/[email protected]" alt="">
-                                <span class="day_temp">23&degC</span>
-                            </li>
-
+                            <!-- Data show here dinamically -->
                         </ul>
                     </div>
                 </div>

diff --git a/script.js b/script.js
@@ -44,12 +44,13 @@ btnEl.addEventListener("click", (e) => {
         const city = inputEl.value;
         inputEl.value = "";
         findLocation(city);
+        console.log(city);
     }
     else{
         alert("Please Give City or Country Name");
     }
 })
-
+findLocation("United Kingdom");
 async function findLocation(city){
     iconsContainer.innerHTML="";
     dayInfoEl.innerHTML="";
@@ -116,6 +117,7 @@ function displayImageContent(data){
 // display the right side content
 function rightSideContent(result){
 
+
     return `<div class="content">
                 <p class="title">Name</p>
                 <span class="value">${result.name}</span>
@@ -168,9 +170,11 @@ async function displayForeCast(lat,lon){
     const splitDay = dayName.split("", 3);
     const joinDay = splitDay.join("");
 
-    return `<li>
-    <span>${joinDay}</span>
-    <img src="https://openweathermap.org/img/wn/${frContent.weather[0].icon}@2x.png" alt="weather"
-    <span class="day_temp">${Math.round(frContent.main.temp - 273.15)}&degC</span>
-</li>`
+    return `
+    <li>
+        <span>${joinDay}</span>
+        <img src="https://openweathermap.org/img/wn/${frContent.weather[0].icon}@2x.png" alt="weather"
+        <span class="day_temp">${Math.round(frContent.main.temp - 273.15)}&degC</span>
+    </li>
+    `
 }
diff --git a/styles.css b/styles.css
@@ -126,6 +126,10 @@ body{
 
 }
 
+.input_field:focus{
+    border-color: #f152ff;
+}
+
 .content_section form button{
     position: absolute;
     top: 0;