Skip to content

Arius' Weather App Project #45

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
Ari-So-Irie wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Arius' Weather App Project #45

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
16 changes: 8 additions & 8 deletions cypress/integration/test-app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,8 @@ describe("Add message handling for imperfect location matching", () => {
.click();
cy.wait("@fetchSeattle");
cy.get(`main article h2`).contains("Seattle");
cy.get(`main article p`).contains("Area");
cy.get(`main article p`).contains("Seattle");
cy.get(`main article p`).contains("Area");
cy.get(`main article p`).contains("Seattle");
});
it("Can have the different entry name and area name", () => {
cy.intercept("GET", "https://wttr.in/mamaroneck*", {
Expand All @@ -167,8 +167,8 @@ describe("Add message handling for imperfect location matching", () => {
cy.wait("@fetchMamaroneck");

cy.get(`main article h2`).contains("mamaroneck");
cy.get(`main article p`).contains("Nearest Area");
cy.get(`main article p`).contains("Orienta");
cy.get(`main article p`).contains("Nearest Area");
cy.get(`main article p`).contains("Orienta");
});
});

Expand All @@ -184,14 +184,14 @@ describe("Add icon based on chance data", () => {
.click();
cy.wait("@fetchMamaroneck");
cy.get(`main article p`).contains("Chance of Sunshine");
cy.get(`main article p`).contains("53");
cy.get(`main article p`).contains("53");
});
it("Has a Chance of Rain p tag with appropriate data", () => {
cy.get(`main article p`).contains("Chance of Rain");
cy.get(`main article p`).contains("0");
cy.get(`main article p`).contains("Chance of Rain");
cy.get(`main article p`).contains("0");
});
it("Has a Chance of Snow p tag with appropriate data", () => {
cy.get(`main article p`).contains("Chance of Snow");
cy.get(`main article p`).contains("Chance of Snow");
});

// sunny icon
Expand Down
56 changes: 56 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script defer src="main.js"></script>
<title>Weather App</title>
</head>
<body>
<header class="header">
<h1>Weather App</h1>
<form id="search form">
<label for="location"> Pick a Location </label>
<input type="text" type="submit" name="location" id="location" placeholder="location here" required/>
<input type="submit" value="Get Weather"/>
</form>
</header>
<aside class="aside">
<form>
<label>
Convert the temperature:
<input type="number" id="temp-to-convert" placeholder="temperature here"required/>
</label> <label>
<input type="radio" name="convert-temp" id="to-c" value="C" class="temperature" checked="yes"/>
To Celcius
</label><label>
<input type="radio" name="convert-temp" id="to-f" value="F" class="temperature" checked/>
To Fahrenheit
</label><label>
<input type="submit" value="Convert" />
</label>
<h4></h4>
</form>
</aside>
<main class="main">
<p class="choose a location">Choose a location to view the weather.</p>
<article id="weatherForcast"></article>
<aside id="days-forcast" class="days">
<article id="today"></article>
<article id="tomorrow"></article>
<article id="day-after-tomorrow"></article>
</aside>
</main>
<aside class="previous">
<section>
<h4>
Previous Searches
</h4>
<ul></ul>
<p>No previous searches</p>
</section>
</aside>
</body>
</html>
119 changes: 119 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
let weatherForcast = document.querySelector("article");
let weatherImg = document.createElement('img');
let form = document.querySelector('form');
form.addEventListener("submit", (event) => {
event.preventDefault();
document.querySelector("main p").hidden = true;
let searchedLocation = event.target.location.value;
event.target.location.value = ''
fetch(`https://wttr.in/${searchedLocation}?format=j1`)
.then((result) => {
return result.json();
})
.then((json) => {
let feelsLike = getWeatherReport(weatherForcast, json, searchedLocation);
let ul = document.querySelector("ul");
let previousSearch = document.createElement("li");
let a = document.createElement("a");
a.textContent = searchedLocation;
a.href = `https://wttr.in/${searchedLocation}?format=j1`;
previousSearch.textContent = feelsLike;
previousSearch.prepend(a);
ul.append(previousSearch);
console.log(json);
let previous = document.querySelector("aside.previous p");
previous.hidden = true;
a.addEventListener("click", (event) => {
event.preventDefault();
getWeatherReport(weatherForcast, json, searchedLocation);
});
})
.catch((error) => {
console.log(error);
});
});
let getWeatherReport = (weatherForcast, json, searchedLocation) => {
weatherForcast.innerHTML = "";
let location = document.createElement("h2");
location.textContent = searchedLocation;
weatherForcast.append(location);
let area = json.nearest_area[0].areaName[0].value;
let areaInfo = document.createElement("p");
weatherForcast.append(areaInfo);
if (area.toLowerCase() === searchedLocation.toLowerCase()) {
areaInfo.textContent = `Area: ${area}`;
} else {
areaInfo.textContent = `Nearest Area: ${area}`;
}
let region = json.nearest_area[0].region[0].value;
regionInfo = document.createElement("p");
regionInfo.textContent = region;
weatherForcast.append(regionInfo);
let country = json.nearest_area[0].country[0].value;
countryInfo = document.createElement("p");
countryInfo.textContent = country;
weatherForcast.append(countryInfo);
let feelsLike = ` Currently feels like ${json.current_condition[0].FeelsLikeF} °F`;
tempInfo = document.createElement("p");
tempInfo.textContent = feelsLike;
weatherForcast.append(tempInfo);
let chanceOfSunlight = json.weather[0].hourly[0].chanceofsunshine;
let chanceOfRain = json.weather[0].hourly[0].chanceofrain;
let chanceOfSnow = json.weather[0].hourly[0].chanceofsnow;
let sunlight = document.createElement("p");
sunlight.textContent = `Chance of Sunshine ${chanceOfSunlight}%`;
weatherForcast.append(sunlight);
let rainfall = document.createElement("p");
rainfall.textContent = `Chance of Rain ${chanceOfRain}%`;
weatherForcast.append(rainfall);
let snowfall = document.createElement("p");
snowfall.textContent = `Chance of Snow ${chanceOfSnow}%`;
weatherForcast.append(snowfall);
for (let i = 0; i < json.weather[0].hourly.length; i++) {
if (Number(json.weather[0].hourly[i].chanceofsunshine) > 50) {
weatherImg.src = "./assets/icons8-summer.gif";
weatherImg.alt = "sun";
}
if (Number(json.weather[0].hourly[i].chanceofrain) > 50) {
weatherImg.src = "./assets/icons8-torrential-rain.gif";
("https://img.freepik.com/free-photo/rainy-day-icon-3d-render-illustration-style_516190-319.jpg?w=996");
weatherImg.alt = "rain";
}
if (Number(json.weather[0].hourly[i].chanceofsnow) > 50) {
weatherImg.src = "./assets/icons8-light-snow.gif";
weatherImg.alt = "snow";
}
}
weatherForcast.prepend(weatherImg);
let articles = document.querySelectorAll("aside article");
let forecast = ["Today ", "Tomorrow ", "Day After Tomorrow "];
for (let i = 0; i < articles.length; i++) {
articles[i].innerHTML = " ";
let days = document.createElement("p");
days.textContent = forecast[i];
let avgTemp = document.createElement("p");
avgTemp.textContent = `Average Temperature: ${json.weather[i].avgtempF} °F`;
let maxTemp = document.createElement("p");
maxTemp.textContent = `Max Temperature: ${json.weather[i].maxtempF} °F`;
let minTemp = document.createElement("p");
minTemp.textContent = `Min Temperature: ${json.weather[i].mintempF} °F`;
articles[i].append(days, avgTemp, maxTemp, minTemp);
}
return feelsLike;
};
let conAside = document.querySelector("aside.aside form");
conAside.addEventListener("submit", (event) => {
event.preventDefault();
let temp = event.target.querySelector("#temp-to-convert").value;
let conType = event.target.querySelectorAll(".temperature");
console.log("This is type:", conType);
if (conType[0].checked) {
let celcius = ((temp - 32) * 5) / 9;
event.target.querySelector("h4").textContent = `${celcius.toFixed(2)} °C`;
} else if (conType[1].checked) {
let fahreinheit = (temp * 9) / 5 + 32;
event.target.querySelector("h4").textContent = `${fahreinheit.toFixed(
2
)} °F`;
}
});
69 changes: 69 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
.header{
grid-area: header;
background-image: url("https://www.2ec.com.au/wp-content/uploads/sites/4/2022/08/MicrosoftTeams-image-21.jpg");
background-size: 1000px;
background-position: bottom;
border-bottom: 5px solid black;
justify-content: center;
padding: 10px;
}

.previous {
display: inline-block;
grid-area: previous;
border: 1px solid black;
justify-content: center;
padding: 10px;
}
.days article{
grid-area: days;
border: 2px solid black;
justify-content: center;
padding: 10px;

}
.aside {
grid-area: aside;
border: 1px solid black;
justify-content: center;
padding: 10px;
}

.main {
grid-area: main;
border: 5px solid black;
justify-content: center;
padding: 10px solid black;}

body {
background: rgb(33,29,136);
background: linear-gradient(94deg, rgba(33,29,136,1) 0%, rgba(29,129,253,1) 50%, rgba(69,246,252,1) 100%); display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"header header header"
"aside main previous"
"days days days";
justify-content: center;
color: white;
text-shadow: -1px 1px 2px #000,
1px 1px 2px #000,
1px -1px 0 #000,
-1px -1px 0 #000;
text-align: center;
font-family: sans-serif;
border: 10px solid black;
justify-content: center;
}

img {
border:solid black 5px;
}

aside aside form{
justify-content: center;
padding: 10px solid black;
}
article {
border: 2px solid black;
}