Skip to content

Commit 6e859c3

Browse files
javitocorjavitocor
committed
Add celsius fahrenheit converter
1 parent d7d50d9 commit 6e859c3

File tree

6 files changed

+107
-55
lines changed

6 files changed

+107
-55
lines changed

‎dist/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,9 @@ <h5 class="card-title text-center text-warning" id="title"></h5>
6262
</ul>
6363
</div>
6464
<br>
65-
<div class="text-center"><input type="submit" id="farCel" class="btn btn-warning" value="To Farenheit"></div>
65+
<div class="text-center">
66+
<div class="d-inline"><input type="submit" id="farCel" class="btn btn-warning" value="Celsius/Farenheit"></div>
67+
</div>
6668
</div>
6769
</div>
6870
</section>

‎dist/main.js‎

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

‎src/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ search2.addEventListener('click', event.getSearch.bind(this, 'searchBar'));
1919
const home = document.getElementById('home');
2020
home.addEventListener('click', ()=>{ dom().show('aaa') });
2121

22-
const farCel = document.getElementById('farCel');
23-
farCel.addEventListener('click', help.converter.bind(this));
22+
2423

2524

2625

‎src/js/dom.js‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {helpers} from './helpers';
2-
2+
import { events } from './events';
33
const dom = function () {
44

55
function show(value) {
@@ -23,20 +23,21 @@ const dom = function () {
2323
}
2424

2525
function fillCard(data) {
26-
helpers().addInnerText('title', data['name']);
27-
helpers().addInnerText('temp', '<i class="fas fa-thermometer-half text-warning my-2"></i> Temp: ' + data['main']['temp'] + ' Celsius');
28-
helpers().addInnerText('feel', '<i class="fas fa-meteor text-warning my-2"></i> Feel: ' + data['main']['feels_like'] + ' Celsius');
26+
const data2 = helpers().getTemp(data);
27+
helpers().addInnerText('title', data['name'] + ', ' + data.sys.country);
28+
helpers().addInnerText('temp', '<i class="fas fa-thermometer-half text-warning my-2"></i> Temp: ' + data2.tempC + ' Celsius');
29+
helpers().addInnerText('feel', '<i class="fas fa-meteor text-warning my-2"></i> Feel: ' + data2.tempFeelC + ' Celsius');
2930
helpers().addInnerText('desc', '<i class="fas fa-cloud-sun-rain text-warning my-2"></i> ' + data['weather'][0]['main']);
3031
helpers().addInnerText('pressure', '<i class="fas fa-compress-arrows-alt text-warning my-2"></i> Pressure: ' + data['main']['pressure'] + ' hPa');
3132
helpers().addInnerText('humidity', '<i class="fas fa-percent text-warning my-2"></i> Humidity: ' + data['main']['humidity'] + '%');
32-
helpers().addInnerText('minTemp','<i class="fas fa-temperature-low text-warning my-2"></i> Min: ' + data['main']['temp_min'] + ' Celsius');
33-
helpers().addInnerText('maxTemp','<i class="fas fa-temperature-high text-warning my-2"></i> Max: ' + data['main']['temp_max'] + ' Celsius');
33+
helpers().addInnerText('minTemp','<i class="fas fa-temperature-low text-warning my-2"></i> Min: ' + data2.tempMinC + ' Celsius');
34+
helpers().addInnerText('maxTemp','<i class="fas fa-temperature-high text-warning my-2"></i> Max: ' + data2.tempMaxC + ' Celsius');
3435
helpers().addInnerText('wind','<i class="fas fa-wind text-warning my-2"></i> ' + data['wind']['speed'] + ' meter/sec');
3536
helpers().addInnerText('windDir','<i class="fas fa-compass text-warning my-2"></i> ' + data['wind']['deg'] + ' degrees');
3637
helpers().addInnerText('clouds','<i class="fas fa-cloud text-warning my-2"></i> Clouds: ' + data['clouds']['all'] + '%');
3738
helpers().addInnerText('sunrise','<i class="fas fa-sun text-warning my-2"></i> ' + `Sunrise: ${new Date((data.sys.sunrise + data.timezone) * 1000).toUTCString().slice(-11, -7)} AM`);
3839
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`);
39-
}
40+
}
4041

4142
function imageSwitch(data, id) {
4243
const code = data['weather'][0]['id'];
@@ -75,7 +76,7 @@ const dom = function () {
7576

7677
function createCard(data) {
7778
const name = document.getElementById('cityName');
78-
name.innerHTML = data.city.name;
79+
name.innerHTML = data.city.name + ', ' + data.city.country;
7980
const row = document.getElementById('row');
8081
row.innerHTML = "";
8182
const forecastFive = data.list.filter(function(value, index, Arr) {
@@ -137,7 +138,23 @@ const dom = function () {
137138
});
138139
}
139140

140-
return { show, fillCard, imageSwitch, createCard, clearForms }
141+
142+
function converter(data){
143+
if(document.getElementById('temp').innerHTML.includes(' Celsius')){
144+
helpers().addInnerText('temp', '<i class="fas fa-thermometer-half text-warning my-2"></i> Temp: ' + data.tempF + ' &#8457');
145+
helpers().addInnerText('feel', '<i class="fas fa-meteor text-warning my-2"></i> Feel: ' + data.tempFeelF + ' &#8457');
146+
helpers().addInnerText('minTemp','<i class="fas fa-temperature-low text-warning my-2"></i> Min: ' + data.tempMinF + ' &#8457');
147+
helpers().addInnerText('maxTemp','<i class="fas fa-temperature-high text-warning my-2"></i> Max: ' + data.tempMaxF + ' &#8457');
148+
} else {
149+
helpers().addInnerText('temp', '<i class="fas fa-thermometer-half text-warning my-2"></i> Temp: ' + data.tempC + ' Celsius');
150+
helpers().addInnerText('feel', '<i class="fas fa-meteor text-warning my-2"></i> Feel: ' + data.tempFeelC + ' Celsius');
151+
helpers().addInnerText('minTemp','<i class="fas fa-temperature-low text-warning my-2"></i> Min: ' + data.tempMinC + ' Celsius');
152+
helpers().addInnerText('maxTemp','<i class="fas fa-temperature-high text-warning my-2"></i> Max: ' + data.tempMaxC + ' Celsius');
153+
}
154+
}
155+
156+
157+
return { show, fillCard, imageSwitch, createCard, clearForms, converter, }
141158
};
142159

143160
export { dom }

‎src/js/events.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,26 @@
11
import {dom} from './dom';
2+
import { helpers } from './helpers';
23

34
const events = function () {
4-
55
async function getSearch(searchBar) {
66
try {
77
const value = (document.getElementById(searchBar).value).toLowerCase();
8-
const url = `http://api.openweathermap.org/data/2.5/weather?q=${value}&APPID=903507f17d707fecd352d38301efba77&units=metric`;
9-
const url2 = `http://api.openweathermap.org/data/2.5/weather?q=${value}&APPID=903507f17d707fecd352d38301efba77&unitsimperial`;
8+
const url = `http://api.openweathermap.org/data/2.5/weather?q=${value}&APPID=903507f17d707fecd352d38301efba77`;
109
const response = await fetch(url, { mode: 'cors' });
11-
const response2 = await fetch(url2, { mode: 'cors' });
1210
const cityData = await response.json();
13-
const cityData2 = await response2.json();
1411
showFlow(cityData);
1512
} catch (error) {
1613
console.error('Error:', error);
1714
alert('Could not find the location');
1815
}
19-
};
16+
};
2017

2118
async function getForecast() {
2219
try {
2320
const value = (document.getElementById('search').value).toLowerCase();
2421
const url = `https://api.openweathermap.org/data/2.5/forecast?q=${value}&units=metric&appid=903507f17d707fecd352d38301efba77`;
2522
const response = await fetch(url, { mode: 'cors' });
26-
const cityData = await response.json();
27-
console.log(cityData.list)
23+
const cityData = await response.json();
2824
forecastFlow(cityData);
2925
} catch (error) {
3026
console.error('Error:', error);
@@ -37,6 +33,9 @@ const events = function () {
3733
dom().fillCard(data);
3834
dom().imageSwitch(data, 'image');
3935
dom().show('search');
36+
37+
const farCel = document.getElementById('farCel');
38+
farCel.onclick = function () { dom().converter(helpers().getTemp(data)) };
4039
};
4140

4241
function forecastFlow(data) {

‎src/js/helpers.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,25 @@ const helpers = function helpers() {
1818
return element.innerHTML = text;
1919
};
2020

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));
21+
function getTemp(data) {
22+
const report = {};
23+
report.tempC = (parseFloat(data.main.temp) - 273.15).toFixed(1);
24+
report.tempF = ((parseFloat(data.main.temp) - 273.15) * (9 / 5) + 32).toFixed(1);
25+
26+
report.tempFeelC = (parseFloat(data.main.feels_like) - 273.15).toFixed(1);
27+
report.tempFeelF = ((parseFloat(data.main.feels_like) - 273.15) * (9 / 5) + 32).toFixed(1);
28+
29+
report.tempMinC = (parseFloat(data.main.temp_min) - 273.15).toFixed(1);
30+
report.tempMinF = ((parseFloat(data.main.temp_min) - 273.15) * (9 / 5) + 32).toFixed(1);
31+
32+
report.tempMaxC = (parseFloat(data.main.temp_max) - 273.15).toFixed(1);
33+
report.tempMaxF = ((parseFloat(data.main.temp_max) - 273.15) * (9 / 5) + 32).toFixed(1);
34+
35+
return report;
2736
}
28-
37+
2938
return {
30-
addInnerText, createElement, converter, createElementWithInnerText,
39+
addInnerText, createElement, createElementWithInnerText, getTemp,
3140
};
3241
};
3342

0 commit comments

Comments
 (0)