Skip to content

Commit cac3794

Browse files
javitocorjavitocor
committed
Add forecast feature
1 parent 90898ac commit cac3794

File tree

6 files changed

+279
-55
lines changed

6 files changed

+279
-55
lines changed

‎dist/index.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<a class="nav-link" id="home">Home</a>
2121
</li>
2222
</ul>
23-
<form class="form-inline my-2 my-lg-0" action="javascript:void(0);">
23+
<form id="navSearch" class="form-inline my-2 my-lg-0" action="javascript:void(0);">
2424
<input class="form-control mr-sm-2" type="text" id="searchBar" placeholder="Search Location">
2525
<input class="btn btn-outline-success my-2 my-sm-0" id="search2" type="submit" value="Search!">
2626
</form>
@@ -29,12 +29,12 @@
2929
<main id="main" class="position-relative p-5">
3030
<div class="text-center bg-dark p-3 w-75 mx-auto d-flex flex-column">
3131
<h1 class="text-white-50">Search by Location</h1>
32-
<h5>Write the location to get the weather</h5>
32+
<h5 class="text-white-50">Write the location to get the weather</h5>
3333
<form id="searching" action="javascript:void(0);">
3434
<input class="form-class w-50" type="text" id="search" placeholder="Input your search keyword" name="search">
3535
<br><br>
36-
<input type="submit" class="btn btn-warning" id="submit" value="Weather">
37-
<input type="submit" class="btn btn-warning" id="submit2" value="Forecast!">
36+
<input type="submit" class="btn btn-warning" id="submit" value="Weather" name="weather">
37+
<input type="button" class="btn btn-warning" id="submit2" value="Forecast!" name="forecast">
3838
</form>
3939
</div>
4040
</main>
@@ -66,6 +66,10 @@ <h5 class="card-title text-center text-warning" id="title"></h5>
6666
</div>
6767
</div>
6868
</section>
69+
<section id="section2" class="bg-dark pt-3">
70+
<h3 id="cityName" class="text-center text-warning"></h3>
71+
<div class="row d-flex justify-content-around w-100" id="row"></div>
72+
</section>
6973
<footer class="footer bg-dark p-3">
7074
<div class="container">
7175
<p class="text-warning">Powered By &copy; JaviCorp</p>

‎dist/main.js‎

Lines changed: 143 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,16 @@ const submit = document.getElementById('submit');
1111
submit.addEventListener('click', event.getSearch.bind(this,'search'));
1212

1313
const submit2 = document.getElementById('submit2');
14-
submit2.addEventListener('click', event.getForecast);
14+
submit2.addEventListener('click', event.getForecast.bind(this));
1515

1616
const search2 = document.getElementById('search2');
1717
search2.addEventListener('click', event.getSearch.bind(this, 'searchBar'));
1818

1919
const home = document.getElementById('home');
20-
home.addEventListener('click', ()=>{ location.reload(); });
20+
home.addEventListener('click', ()=>{ dom().show('aaa') });
21+
22+
const farCel = document.getElementById('farCel');
23+
farCel.addEventListener('click', help.converter.bind(this));
2124

2225

2326

‎src/js/dom.js‎

Lines changed: 93 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,24 @@ import {helpers} from './helpers';
22

33
const dom = function () {
44

5-
function show() {
6-
if(document.getElementById('main').style.display == 'block'){
7-
document.getElementById('main').style.display = 'none';
8-
document.getElementById('section').style.display = 'block';
9-
} else {
10-
document.getElementById('main').style.display = 'none';
11-
document.getElementById('section').style.display = 'block';
12-
}
5+
function show(value) {
6+
switch (true) {
7+
case value === 'search':
8+
document.getElementById('main').style.display = 'none';
9+
document.getElementById('section').style.display = 'block';
10+
document.getElementById('section2').style.display = 'none';
11+
break;
12+
case value === 'forecast':
13+
document.getElementById('main').style.display = 'none';
14+
document.getElementById('section').style.display = 'none';
15+
document.getElementById('section2').style.display = 'block';
16+
break;
17+
default:
18+
document.getElementById('main').style.display = 'block';
19+
document.getElementById('section').style.display = 'none';
20+
document.getElementById('section2').style.display = 'none';
21+
break;
22+
}
1323
}
1424

1525
function fillCard(data) {
@@ -28,39 +38,104 @@ const dom = function () {
2838
helpers().addInnerText('sunset','<i class="fas fa-sun text-warning my-2"></i> ' + `Sunset: ${new Date((data.sys.sunset + data.timezone) * 1000).toUTCString().slice(-11, -7)} PM`);
2939
}
3040

31-
function imageSwitch(data) {
41+
function imageSwitch(data, id) {
3242
const code = data['weather'][0]['id'];
3343
switch (true) {
3444
case code >= 200 && code <= 232:
35-
document.getElementById('image').style.backgroundImage = "url('../src/images/lighting.jpg')";
45+
document.getElementById(id).style.backgroundImage = "url('../src/images/lighting.jpg')";
3646
break;
3747
case code >= 300 && code <= 321:
38-
document.getElementById('image').style.backgroundImage = "url('../src/images/drizzle.jpg')";
48+
document.getElementById(id).style.backgroundImage = "url('../src/images/drizzle.jpg')";
3949
break;
4050
case code >= 500 && code <= 531:
41-
document.getElementById('image').style.backgroundImage = "url('../src/images/rain.jpg')";
51+
document.getElementById(id).style.backgroundImage = "url('../src/images/rain.jpg')";
4252
break;
4353
case code >= 600 && code <= 622:
44-
document.getElementById('image').style.backgroundImage = "url('../src/images/snow.jpg')";
54+
document.getElementById(id).style.backgroundImage = "url('../src/images/snow.jpg')";
4555
break;
4656
case code >= 701 && code <= 781:
47-
document.getElementById('image').style.backgroundImage = "url('../src/images/mist.jpg')";
57+
document.getElementById(id).style.backgroundImage = "url('../src/images/mist.jpg')";
4858
break;
4959
case code >= 801 && code <= 804:
50-
document.getElementById('image').style.backgroundImage = "url('../src/images/rainclouds.jpg')";
60+
document.getElementById(id).style.backgroundImage = "url('../src/images/rainclouds.jpg')";
5161
break;
5262
case code==800:
53-
document.getElementById('image').style.backgroundImage = "url('../src/images/shiningsun.jpg')";
63+
document.getElementById(id).style.backgroundImage = "url('../src/images/shiningsun.jpg')";
5464
break;
5565
default:
56-
document.getElementById('image').style.backgroundImage = "url('../src/images/bluesky.jpg')";
66+
document.getElementById(id).style.backgroundImage = "url('../src/images/bluesky.jpg')";
5767
break;
5868
}
5969
};
6070

71+
function clearForms() {
72+
document.getElementById("searching").reset();
73+
document.getElementById('navSearch').reset();
74+
}
75+
76+
function createCard(data) {
77+
const name = document.getElementById('cityName');
78+
name.innerHTML = data.city.name;
79+
const row = document.getElementById('row');
80+
row.innerHTML = "";
81+
const forecastFive = data.list.filter(function(value, index, Arr) {
82+
return index % 8 == 0;
83+
});
84+
forecastFive.forEach ((day, index) =>{
85+
const cont = helpers().createElement('div', "col-5");
86+
const card = helpers().createElement('div', "card bg-dark text-white w-100 mb-2 mx-2");
87+
const imgBg = helpers().createElement('div', '');
88+
imgBg.id = 'images'+`${index+1}`;
89+
imgBg.style = "background-size: cover;background-position-y: 100%;height: 75vh;";
90+
const over = helpers().createElement('div', "card-img-overlay");
91+
const h5 = helpers().createElement('h5', "card-title text-center text-warning");
92+
h5.innerHTML = day.dt_txt.slice(0, -9);
93+
const listCont = helpers().createElement('div', "d-flex flex-row justify-content-around");
94+
const ul1 = helpers().createElement('ul',"list-group list-unstyled");
95+
const ul2 = helpers().createElement('ul',"list-group list-unstyled");
96+
const temp = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-thermometer-half text-warning my-2"></i> Temp: ' + day['main']['temp'] + ' Celsius');
97+
const feel = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-meteor text-warning my-2"></i> Feel: ' + day['main']['feels_like'] + ' Celsius');
98+
const pressure = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-compress-arrows-alt text-warning my-2"></i> Pressure: ' + day['main']['pressure'] + ' hPa');
99+
const humidity = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-percent text-warning my-2"></i> Humidity: ' + day['main']['humidity'] + '%');
100+
const desc = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-cloud-sun-rain text-warning my-2"></i> ' + day['weather'][0]['main']);
101+
const minTemp = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-temperature-low text-warning my-2"></i> Min: ' + day['main']['temp_min'] + ' Celsius');
102+
const maxTemp = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-temperature-high text-warning my-2"></i> Max: ' + day['main']['temp_max'] + ' Celsius');
103+
const clouds = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-cloud text-warning my-2"></i> Clouds: ' + day['clouds']['all'] + '%');
104+
const wind = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-wind text-warning my-2"></i> ' + day['wind']['speed'] + ' meter/sec');
105+
const windDir = helpers().createElementWithInnerText('li', "list-group-item", '<i class="fas fa-compass text-warning my-2"></i> ' + day['wind']['deg'] + ' degrees');
106+
const color = document.getElementsByClassName('list-group-item');
107+
for(let i = 0; i<color.length; i++){
108+
color[i].style = "background-color: rgba(255,255,255,0.1);";
109+
};
110+
ul2.appendChild(minTemp);
111+
ul2.appendChild(maxTemp);
112+
ul2.appendChild(wind);
113+
ul2.appendChild(windDir);
114+
ul2.appendChild(clouds);
115+
116+
ul1.appendChild(temp);
117+
ul1.appendChild(feel);
118+
ul1.appendChild(desc);
119+
ul1.appendChild(pressure);
120+
ul1.appendChild(humidity);
121+
122+
listCont.appendChild(ul1);
123+
listCont.appendChild(ul2);
124+
125+
over.appendChild(h5);
126+
over.appendChild(listCont);
61127

128+
card.appendChild(imgBg);
129+
card.appendChild(over);
130+
131+
cont.appendChild(card);
132+
row.appendChild(cont);
133+
134+
imageSwitch(day, ('images'+`${index+1}`));
135+
});
136+
}
62137

63-
return { show, fillCard, imageSwitch, }
138+
return { show, fillCard, imageSwitch, createCard, clearForms }
64139
};
65140

66141
export { dom }

‎src/js/events.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,33 @@ const events = function () {
1818
}
1919
};
2020

21-
async function getForecast(searchBar) {
21+
async function getForecast() {
2222
try {
2323
const value = (document.getElementById('search').value).toLowerCase();
2424
const url = `https://api.openweathermap.org/data/2.5/forecast?q=${value}&units=metric&appid=903507f17d707fecd352d38301efba77`;
2525
const response = await fetch(url, { mode: 'cors' });
2626
const cityData = await response.json();
27-
showFlow(cityData);
27+
console.log(cityData.list)
28+
forecastFlow(cityData);
2829
} catch (error) {
2930
console.error('Error:', error);
3031
alert('Could not find the location');
3132
}
3233
};
3334

34-
function showFlow(data) {
35+
function showFlow(data) {
36+
dom().clearForms();
3537
dom().fillCard(data);
36-
dom().imageSwitch(data);
37-
dom().show();
38+
dom().imageSwitch(data, 'image');
39+
dom().show('search');
3840
};
3941

42+
function forecastFlow(data) {
43+
dom().clearForms();
44+
dom().createCard(data);
45+
dom().show('forecast');
46+
}
47+
4048
return { getSearch, showFlow, getForecast, }
4149
};
4250

‎src/js/helpers.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,30 @@ const helpers = function helpers() {
44
element.className = className;
55
return element;
66
};
7+
8+
const createElementWithInnerText = function createElementWithInnerText(tag, className, text) {
9+
const element = document.createElement(tag);
10+
element.className = className;
11+
element.innerHTML = text;
12+
return element;
13+
};
14+
715

816
const addInnerText = function addInnerText(className, text) {
917
const element = document.getElementById(className);
1018
return element.innerHTML = text;
1119
};
20+
21+
function converter(){
22+
if(document.getElementById('temp').innerHTML.includes('Celsius')){
23+
24+
}
25+
const tempFahrenheit = parseFloat((tempCelsius * (9 / 5) + 32).toFixed(2));
26+
const tempCelsius = parseFloat(((tempFahrenheit - 32) * 5/9).toFixed(2));
27+
}
1228

1329
return {
14-
addInnerText, createElement,
30+
addInnerText, createElement, converter, createElementWithInnerText,
1531
};
1632
};
1733

0 commit comments

Comments
 (0)