Skip to content

JSON and APIs Eval #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
acl13 wants to merge 13 commits into
base: master
Choose a base branch
from
Open

JSON and APIs Eval #212

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e5c239b
initial commit
acl13 Aug 5, 2024
b5aa481
create html boilerplate; link bootstrap, css, and js
acl13 Aug 5, 2024
5f855e0
create page layout with dummy content
acl13 Aug 5, 2024
2a6a41e
fetch weather data for Charlotte
acl13 Aug 6, 2024
be302f7
display current weather data for Charlotte
acl13 Aug 6, 2024
ef4d7ae
create function to convert kelvin to fahrenheit; use for temperature …
acl13 Aug 6, 2024
22e83c6
display 5 day forecast data
acl13 Aug 6, 2024
fda783d
display days of week in forecast
acl13 Aug 6, 2024
cc82f64
allow user to search for weather data by city name
acl13 Aug 6, 2024
fb85a82
add error handler
acl13 Aug 6, 2024
88c3ce6
disable button and display loading icon while data is being fetched
acl13 Aug 6, 2024
d2ff77d
refactor to use templates and render HTML dynamically
acl13 Aug 6, 2024
2ded236
fix comments from pull request
acl13 Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather Project</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 offset-md-3 text-center">
<div class="page-header mt-5">
<h1>Weather Project</h1>
<hr />
</div>

<form class="search-form mt-5">
<div class="form-group">
<div class="row">
<div class="col-md-9">
<input
type="text"
id="search-query"
class="form-control"
placeholder="Enter City Name Here"
required
/>
</div>
<div class="col-md-3">
<button
type="button"
id="search"
class="btn btn-primary search"
>
Search
</button>
</div>
</div>
</div>
</form>

<div class="current-weather row mt-5"></div>
</div>
</div>
<div class="forecast row mt-5 text-center"></div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
117 changes: 117 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
document.getElementById("search").addEventListener("click", function () {
const userSearch = document.getElementById("search-query").value;
console.log(userSearch);
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove console logs


if (userSearch === "") {
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as the other project, this is not a good validation. Empty spaces make the api call

alert("Please enter the name of a city");
} else {
fetchWeatherData(userSearch);
}

document.getElementById("search-query").value = "";
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for readability, you can extract this to a separate function like:

Suggested change
document.getElementById("search-query").value = "";
const resetSearchInput() => {
document.getElementById("search-query").value = "";
}

});

const fetchWeatherData = (city) => {
const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=a01dd8f2b7b0fd48756b05d7cb1e2fe5`;
const searchButton = document.getElementById("search");
searchButton.disabled = true;
searchButton.innerHTML = `<i class="fa fa-spinner fa-spin"></i>Loading
`;
fetch(url, {
method: "GET",
dataType: "json",
})
.then((data) => data.json())
.then((data) => {
displayWeatherData(data);
searchButton.disabled = false;
searchButton.innerHTML = "Search";
})
.catch(handleError);
};

fetchWeatherData("Charlotte");

const displayCurrentWeather = (data) => {
document.querySelector(".current-weather").replaceChildren();
const fahrenheitTemp = convertKelvinToFahrenheit(data.list[0].main.temp);
const iconURL = `https://openweathermap.org/img/wn/${data.list[0].weather[0].icon}@2x.png`;

const template = `
<div class="col-md-6 justify-center">
<h2>${fahrenheitTemp}&deg</h2>
<h3 id="city">${data.city.name}</h3>
<h4 id="current-condition">${data.list[0].weather[0].main}</h4>
</div>
<div class="col-md-6">
<img
src= "${iconURL}"
/>
</div>`;

document
.querySelector(".current-weather")
.insertAdjacentHTML("beforeend", template);
};

const displayForecast = (data) => {
document.querySelector(".forecast").replaceChildren();
const dayOne = data.list[7];
const dayTwo = data.list[15];
const dayThree = data.list[23];
const dayFour = data.list[31];
const dayFive = data.list[39];
const forecastDisplay = [dayOne, dayTwo, dayThree, dayFour, dayFive];
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DRY, can you think of a more efficient (less lines of code) to do this using an array helped method?
hint, map :)


// Weekdays listed twice to account for overlap
const date = new Date();
const days = [
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is fixed, dont need to be recreated each time you call displayForecast, you can define on top of the file

"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];

forecastDisplay.forEach((day) => {
const index = forecastDisplay.indexOf(day);
const forecastIconURL = `https://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png`;
const forecastTemplate = `
<div class="col-md-2 justify-center p-5 border" id="${index}">
<h5 id="day-one-condition">${day.weather[0].main}</h5>
<h5 id="day-one-temp">${convertKelvinToFahrenheit(day.main.temp)}&deg</h5>
<img
id="day-one-icon"
src="${forecastIconURL}"
/>
<h6 id="day-one">${days[date.getDay() + (index + 1)]}</h6>
</div>`;

document
.querySelector(".forecast")
.insertAdjacentHTML("beforeend", forecastTemplate);
});
document.getElementById(`${0}`).classList.add("offset-md-1");
};

const displayWeatherData = (data) => {
displayCurrentWeather(data);
displayForecast(data);
};

const convertKelvinToFahrenheit = (deg) => {
return Math.round((deg - 273) * 1.8 + 32);
};

function handleError(error) {
console.log(`ERROR: ${error}`);
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a good start but ideally you want to display a message in the html alerting the user he entered a wrong city or that there was a server error.

}
18 changes: 18 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.current-weather img {
max-width: 150px;
}

.forecast img {
max-width: 50px;
margin: 0px auto;
}

.justify-center {
display: flex;
flex-direction: column;
justify-content: center;
}

.border {
border: 1px solid black;
}