Skip to content

finished project #221

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
cjedrasik03 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

finished project #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added bg-3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
132 changes: 132 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!doctype html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather Application</title>
</head>

<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex justify-content-between">

<!-- Left Side: Today's Date -->
<div>
<span class="navbar-text font-weight-bold todays-date">Today's Date: </span>
</div>

<!-- Weather Forecast w/ Logo on the right -->
<a class="navbar-brand mx-right" href="#">
<img src="logoImage.jpg" width="50" height="30" class="d-inline-block align-top mr-2" alt="" />
<strong>Weather Forecast</strong>
</a>
</nav>

<body
style="
background-image: url(&quot;bg-3.jpg&quot;);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
margin: 0;
"
>
<!-- Pill container for search box and Today's weather forecast-->
<div class="container">
<div class="row">
<div class="weather-container container-md my-5 text-center">
<div
class="col text-center border border-dark rounded-pill"
style="min-height: 300px; background-color: #e3f2fd"
>
<div class="mt-3">
<h3><strong>Today's Forecast</strong></h3>
<input
type="text"
class="city-input form-control-md mt-3 text-center"
placeholder="Please enter a city"
/>
<button
type="button"
class="search btn btn-info text-center mb-1"
>
Search
</button>
<div class="row">
<div class="col-12 col-md py-5">
<div id="weatherDisplay">
<h1 class="todays-weather"><strong></strong></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- 5 Day Forecast Container -->
<div class="container forecastDisplay">
<div class="row text-center">
<!-- 1 -->
<div
class="col-12 col-md py-4 m-1 border border-secondary rounded"
style="background-color: #e3f2fd"
>
<h4><strong></strong></h4>
<div class="py-3 weather-info">
<h3><strong></strong></h6>
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Feb 15, 2025

Choose a reason for hiding this comment

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

wrong closing tag

</div>
</div>
<!-- 2 -->
<div
class="col-12 col-md py-4 m-1 border border-secondary rounded"
style="background-color: #e3f2fd"
>
<h4><strong></strong></h4>
<div class="py-3 weather-info">
<h3><strong></strong></h6>
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Feb 15, 2025

Choose a reason for hiding this comment

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

again

</div>
</div>
<!-- 3 -->
<div
class="col-12 col-md py-4 m-1 border border-secondary rounded"
style="background-color: #e3f2fd"
>
<h4><strong></strong></h4>
<div class="py-3 weather-info">
<h3><strong></strong></h6>
</div>
</div>
<!-- 4 -->
<div
class="col-12 col-md py-4 m-1 border border-secondary rounded"
style="background-color: #e3f2fd"
>
<h4><strong></strong></h4>
<div class="py-3 weather-info">
<h3><strong></strong></h6>
</div>
</div>
<!-- 5 -->
<div
class="col-12 col-md py-4 m-1 border border-secondary rounded"
style="background-color: #e3f2fd"
>
<h4><strong></strong></h4>
<div class="py-3 weather-info">
<h3><strong></strong></h6>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Binary file added logoImage.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
97 changes: 97 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
let searchBtn = document.querySelector(".search");
let weatherDisplay = document.querySelector(".todays-weather");
let forecastCards = document.querySelectorAll(".forecastDisplay .col-md");

// I had to rely on code copilot to help me format how the code is organized below. I couldnt get things to work properly alone.
// I mostly struggled on the fetch API and then manipulating/formating the data that was fetched. But I understand how it works

searchBtn.addEventListener("click", function () {
let userInput = document.querySelector(".city-input").value.trim();
document.querySelector(".city-input").value = "";

if (!userInput) {
alert("Please enter a city name!");
return;
}

const fetchCordinates = (userInput) => {
const url = `http://api.openweathermap.org/geo/1.0/direct?q=${userInput}&limit=1&appid=5fcdd42d3867910bc60aa5df701c10d9`;
return fetch(url, { method: 'GET' })
.then(response => response.json())
.then(data => {
return {
Lat: data[0].lat,
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Feb 15, 2025

Choose a reason for hiding this comment

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

if data comes in a different format your app will crash.
Always be safe, check if its array and if so, then try to access it. Also you need to catch the errors.

Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Feb 15, 2025

Choose a reason for hiding this comment

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

why with capital? use lowercase

Lon: data[0].lon,
};
});
};

fetchCordinates(userInput)
.then(cordinates => {
getCurrWeather(cordinates);
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Feb 15, 2025

Choose a reason for hiding this comment

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

you are calling this getCurrentWeather but this function returns nothing. Better calling it fetchWeather. Also you are displaying the weather inside of this function. This is confusing and prone to bugs. Be clear with what the functions are doing

return getForecast(cordinates);
})
.then(forecastData => {
updateForecastDisplay(forecastData);
});

const getCurrWeather = (cordinates) => {
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${cordinates.Lat}&lon=${cordinates.Lon}&appid=5fcdd42d3867910bc60aa5df701c10d9`;
fetch(url, { method: 'GET' })
.then(response => response.json())
.then(data => {
let weatherData = {
Copy link
Copy Markdown

@ronyrosenberg ronyrosenberg Feb 15, 2025

Choose a reason for hiding this comment

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

if you are not reassigning this, should be const

Name: data.name,
Temp: ((data.main.temp - 273.15) * 9 / 5 + 32).toFixed(1),
Description: data.weather[0].description,
};
updateWeatherDisplay(weatherData);
});
};

const getForecast = (cordinates) => {
const url = `https://api.openweathermap.org/data/2.5/forecast?lat=${cordinates.Lat}&lon=${cordinates.Lon}&appid=5fcdd42d3867910bc60aa5df701c10d9`;
return fetch(url, { method: 'GET' })
.then(response => response.json())
.then(data => {
let dailyForecasts = {};

data.list.forEach(entry => {
let date = new Date(entry.dt * 1000).toLocaleDateString("en-US", { weekday: "long" });

if (!dailyForecasts[date] && entry.dt_txt.includes("12:00:00")) {
dailyForecasts[date] = {
Temp: ((entry.main.temp - 273.15) * 9 / 5 + 32).toFixed(1),
Description: entry.weather[0].description
};
}
});

return dailyForecasts;
});
};

const updateWeatherDisplay = (weatherData) => {
weatherDisplay.innerHTML = `
<h1>${weatherData.Name}</h2>
<p><strong>${weatherData.Temp}°F</strong></p>
<p>${weatherData.Description}</p>
`;
};

const updateForecastDisplay = (forecastData) => {
let days = Object.keys(forecastData);

forecastCards.forEach((card, index) => {
if (index < days.length) {
let forecast = forecastData[days[index]];
card.querySelector("h4 strong").textContent = days[index];
card.querySelector(".weather-info h3 strong").textContent = `${forecast.Temp}°F`;
}
});
};
});




Empty file added style.css
View file
Open in desktop
Empty file.