Merge pull request #29 from M-Tee/develop

Fixes display bug
M-Tee · Sep 25, 2020 · b3676d3 · b3676d3
2 parents a07bb40 + d301c7b
commit b3676d3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 59 deletions.
diff --git a/public/index.html b/public/index.html
@@ -63,7 +63,7 @@ <h2>Highlights</h2>
   </section>
   <!-- Third Section -->
   <section class="section3">
-    <div class="placeholder">
+
       <div class="card">
         <p id="nextDay">Tommorrow</p>
         <div class="innerCard">
@@ -72,6 +72,7 @@ <h2>Highlights</h2>
           <p id="nextforeCast">Sunny</p>
         </div>
       </div>
+
       <div class="card">
         <p id="nextDay2">Sartuday</p>
         <div class="innerCard">
@@ -83,15 +84,15 @@ <h2>Highlights</h2>
       <div class="card">
         <p id="nextDay3">Sunday</p>
         <div class="innerCard">
-          <img src="./Assets/noto-v1_sun-with-face.svg" alt="">
+          <img id="nextWeatherIcon" src="./Assets/noto-v1_sun-with-face.svg" alt="">
           <p id="nextDaydegree">30°</p>
           <p id="nextforeCast">Sunny</p>
         </div>
       </div>
       <div class="card hidden">
         <p id="nextDay4">Monday</p>
         <div class="innerCard">
-          <img src="./Assets/noto-v1_sun-with-face.svg" alt="">
+          <img id="nextWeatherIcon" src="./Assets/noto-v1_sun-with-face.svg" alt="">
           <p id="nextDaydegree">30°</p>
           <p id="nextforeCast">Sunny</p>
         </div>
@@ -100,20 +101,20 @@ <h2>Highlights</h2>
       <div class="card hidden">
         <p id="nextDay5">Tuesday</p>
         <div class="innerCard">
-          <img src="./Assets/noto-v1_sun-with-face.svg" alt="">
+          <img id="nextWeatherIcon" src="./Assets/noto-v1_sun-with-face.svg" alt="">
           <p id="nextDaydegree">30°</p>
           <p id="nextforeCast">Sunny</p>
         </div>
       </div>
       <div class="card hidden">
         <p id="nextDay6">Wednesday</p>
         <div class="innerCard">
-          <img src="./Assets/noto-v1_sun-with-face.svg" alt="">
+          <img id="nextWeatherIcon" src="./Assets/noto-v1_sun-with-face.svg" alt="">
           <p id="nextDaydegree">30°</p>
           <p id="nextforeCast">Sunny</p>
         </div>
       </div>
-    </div>
+
 
   </section>
   <button class="btn"></button>

diff --git a/public/index.js b/public/index.js
@@ -1,3 +1,7 @@
+const section = document.querySelector('.section3');
+const input = document.getElementById("input");
+const addbtn = document.querySelector('.btn');
+let defferedPrompt;
 
 if('serviceWorker' in navigator){
   window.addEventListener('load', () => {
@@ -6,7 +10,8 @@ if('serviceWorker' in navigator){
     .catch(err => console.log(err))
   })
 }
-(function displayDate(){
+
+(function displayDate() {
 	const displayDate = document.querySelector('#date');
 
 	let today = new Date()
@@ -17,11 +22,9 @@ if('serviceWorker' in navigator){
 	displayDate.textContent = `${date}th ${month} ${year} `
 })()
 
-
-const input = document.getElementById("input");
-
 input.addEventListener('keyup', async (event) => {
 	if (event.keyCode === 13) {
+
 		const typedString = document.getElementById("input").value;
 		getDaysForecast(typedString)
 	}
@@ -83,65 +86,29 @@ async function getWeeksForecast(lat, lon) {
 		.then(response => {
 			let data = response.data.daily
 			console.log(data)
-			checkScreenWidth(data)
+			displayWeeksForecast(data)
 		})
 		.catch(err => {
 			console.log(err);
 		});
 }
 
-function clearPlaceholder() {
-	const placeholder = document.querySelector('.placeholder')
-	placeholder.style.display = "none";
-}
-
-function checkScreenWidth(data){
-	let arraylength = 0
-	if (window.screen.width < 768) {
- arraylength = data.length - 5
-	} else{
-	 arraylength = data.length - 2	
-	}
-	displayWeeksForecast(data, arraylength)
-}
+function displayWeeksForecast(data) {
+	const nextDayDegree = [document.querySelectorAll('#nextDaydegree')]
+	const nextDayIcon = [document.querySelectorAll('#nextWeatherIcon')]
+	const nextforeCast = [document.querySelectorAll('#nextforeCast')]
 
-const section = document.querySelector('.section3');
+	let weeksTemp = nextDayDegree[0]
+	let weeksIcon = nextDayIcon[0]
+	let weeksForecast = nextforeCast[0]
 
-function displayWeeksForecast(data, arraylength) {
-	clearPlaceholder()
-	for (var i = 0; i < arraylength; i++) {
-		let day = data[i];
-		let icon = day.weather[0].icon
-
-		const card = document.createElement('div')
-		card.setAttribute('class', 'card')
-		section.appendChild(card);
-
-		const p = document.createElement('p')
-		p.textContent = 'next'
-		card.appendChild(p)
-
-		const innerCard = document.createElement('div')
-		innerCard.setAttribute('class', 'innerCard')
-		card.appendChild(innerCard)
-
-		const img = document.createElement('img')
-		img.setAttribute('src', `https://openweathermap.org/img/wn/${icon}.png`)
-		innerCard.appendChild(img)
-
-		const temp = document.createElement('p')
-		temp.textContent = `${Math.round(day.temp.day - 273.15)}°`;
-		innerCard.appendChild(temp)
-
-		const weather = document.createElement('p')
-		weather.textContent = day.weather[0].main
-		innerCard.appendChild(weather)
+	for(i = 0; i < 7; i++) {
+	weeksTemp[i].innerText = `${Math.round(data[i].temp.day - 273.15)}°`;
+	weeksIcon[i].setAttribute('src', `https://openweathermap.org/img/wn/${data[i].weather[0].icon}.png`) 
+	weeksForecast[i].innerText = data[i].weather[0].main
 	}
 }
 
-let defferedPrompt;
-const addbtn = document.querySelector('.btn');
-
 window.addEventListener('beforeinstallprompt', event => {
 	event.preventDefault();
 	defferedPrompt = event
@@ -152,7 +119,7 @@ addbtn.addEventListener('click', event => {
 	defferedPrompt.prompt();
 
 	defferedPrompt.userChoice.then(choice => {
-		if(choice.outcome === 'accepted'){
+		if (choice.outcome === 'accepted') {
 			console.log('user accepted the prompt')
 		}
 		defferedPrompt = null;