Skip to content

Commit

Permalink
Merge pull request #2 from bbm2910/develop
Browse files Browse the repository at this point in the history 
Add files via upload
  • Loading branch information
@bbm2910
bbm2910 authored Feb 9, 2024
2 parents 8a1bc72 + 36a3d44 commit 66ed5ae
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 52 deletions.
Binary file added images/background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/smoke.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 6 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h1>Weather <span>Wise</span> </h1>
<input type="text" placeholder="Enter a location..." spellcheck="false" class="search-input">
<button class="search-btn">Search</button>
<div class="logo-scroll">
<p class="logo">Weather<span>Wise</span> - - - your daily forecast!</p>
<p class="logo"><span>Everyday we bring </span>your forecast!</p>
</div>
</div>
<div class="error">
Expand Down Expand Up @@ -66,9 +66,11 @@ <h2 class="temperature"></h2>
<span class="sunset"></span>
</div>
</div>
<h1>Weather app</h1>
<p>Part of <a href="https://www.theodinproject.com/" target="_blank">The Odin Project</a></p>
<p>Build with &lt; HTML CSS JS/&gt;</p>
<div class="about">
<h1>Weather app</h1>
<p>Part of <a href="https://www.theodinproject.com/" target="_blank">The Odin Project</a></p>
<p>Build with &lt; HTML CSS JS/&gt;</p>
</div>
<img src="./images/html-five2.svg" alt="" class="logo">
<img src="./images/css3-shiled.svg" alt="" class="logo">
<img src="./images/java-script.svg" alt="" class="logo">
Expand Down
26 changes: 16 additions & 10 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,38 +99,43 @@ const updateWeatherUI = (data, dayIndex) => {


function changeBackgroundAndIcon(data) {
console.log("this is" + data.weather[0].main);
document.body.style.opacity = 1; // Show the page content by setting the body opacity to 1

const weatherClasses = ["clear", "rain", "cloudy", "drizzle", "mist", "haze", "snow", "thunderstorm"];
const weatherClasses = ["clear", "rain", "cloudy", "drizzle", "mist", "haze", "snow", "thunderstorm", "smoke"];
weatherClasses.forEach((weatherClass) => {
weatherIcon.classList.remove(weatherClass);
document.body.classList.remove(weatherClass); // Remove existing weather classes from body
});

if (data.weather[0].main == "Clear") {
document.body.classList.add("clear");
weatherIcon.src = "./images/clear.png";
weatherIcon.classList.add("clear");
} else if (data.weather[0].main == "Rain") {
document.body.classList.add("rain");
weatherIcon.src = "./images/rain.png";
weatherIcon.classList.add("rain");
} else if (data.weather[0].main == "Clouds") {
document.body.classList.add("cloudy");
weatherIcon.src = "./images/cloudy.png";
weatherIcon.classList.add("cloudy");
} else if (data.weather[0].main == "Drizzle") {
document.body.classList.add("drizzle");
weatherIcon.src = "./images/drizzle.png";
weatherIcon.classList.add("drizzle");
} else if (data.weather[0].main == "Mist" || data.weather[0].main == "Haze") {
document.body.classList.add("haze");
weatherIcon.src = "./images/mist.png";
weatherIcon.classList.add("haze");
} else if (data.weather[0].main == "Snow") {
document.body.classList.add("snow");
weatherIcon.src = "./images/snow.png";
weatherIcon.classList.add("snow");
} else if (data.weather[0].main == "Thunderstorm") {
document.body.classList.add("thunderstorm");
weatherIcon.src = "./images/thunderstorm.png";
weatherIcon.classList.add("thunderstorm");
} else if (data.weather[0].main == "Smoke") {
document.body.classList.add("smoke");
weatherIcon.src = "./images/cloudy.png";
}
}



// Set sunrise-sunset
const getTimeFromTimestamp = (timestamp) => {
const date = new Date(timestamp * 1000);
Expand Down Expand Up @@ -168,4 +173,5 @@ searchField.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
getData();
}
});
});

107 changes: 69 additions & 38 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,15 +135,16 @@ table {
}
body {
font-family: 'Poppins', sans-serif;
background-color: #0b111a;
background-color: var(--white);
background-size: cover;
}
.wrapper {
width: 90%;
margin: 1% auto;
background-color: transparent;
}

.search {
background: var(--black);
padding: 1% 2%;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.8);
Expand All @@ -162,8 +163,8 @@ body {
position: absolute;
white-space: nowrap;
animation: moveRightToLeft 20s linear infinite;
/* font-size: 1rem; */
font-weight: 100;
font-size: 1.5rem;
font-weight: 700;
}
.logo span {
color: var(--red);
Expand Down Expand Up @@ -207,30 +208,37 @@ body {
.error {
text-align: center;
margin-top: 3%;
font-weight: 100;
font-weight: 300;
padding: 10% 0;
display: none;
opacity: 80%;
color: var(--white);
color: var(--black);
border-radius: 6px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.ghost-image {
filter: invert();
width: 5%;
margin-bottom: 3%;
}
.error-h2 {
font-size: 1.5rem;
}
.content {
background-color: #0b111a;
color: var(--white);
margin-top: 3%;
border-radius: 5px;
padding: 2%;
height: 70vh;
display: grid;
grid-template-columns: 1fr 2fr;
/* display: none; */
grid-template-columns: 1fr 3fr;
gap: 3%;
}
.main-content {
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 1px 1px 10px #06090e, -5px -5px 2px #000;
padding: 5%;
}
.today {
color: var(--light-black);
Expand All @@ -253,8 +261,7 @@ body {
.weather-icon {
width: 50%;
border-radius: 50%;
opacity: 70%;
border: 15px solid var(--white);
/* opacity: 70%; */
}
.temperature {
margin-top: 5%;
Expand All @@ -267,17 +274,27 @@ body {
}
.secondary-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 1fr;
gap: 10%;
}
.secondary-content h1 {
margin-top: 30%;
font-weight: 100;
.about h1 {
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 5%;
color: var(--black);
}
.secondary-content p {
.about {
padding: 3%;
color: var(--black);
background: rgba(255, 255, 255, 0.07);
border-radius: 6px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.about p {
font-size: 0.8rem;
font-weight: 300;
margin-bottom: 2%;
}
.secondary-left {
Expand All @@ -296,19 +313,28 @@ body {
.details {
font-size: 1rem;
font-weight: 300;
color: var(--white);
margin-bottom: 5%;
padding: 10%;
background: #0b111a;
box-shadow: 5px 5px 10px #06090e, -5px -5px 10px #101926;
background: rgba(255, 255, 255, 0.07);
/* From https://css.glass */
background: rgba(255, 255, 255, 0.39);
border-radius: 6px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.details p {
margin-bottom: 20%;
font-weight: 400;
margin-bottom: 10%;
font-weight: 700;
letter-spacing: 1px;
font-size: 0.9rem;
color: var(--black);
}
.details span {
font-weight: 500;
color: var(--red);
color: var(--black);
font-size: 1rem;
font-weight: 600;
}

.secondary-top {
Expand All @@ -324,25 +350,25 @@ body {
}

.days div {
font-size: 1rem;
font-weight: 300;
color: var(--white);
margin-bottom: 3%;
padding: 1%;
background: #0b111a;
box-shadow: 5px 5px 10px #06090e, -5px -5px 10px #101926;
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 1px 1px 10px #06090e, -5px -5px 2px #000;
}
.day {
color: var(--white);
padding: 3%;
text-align: center;
font-size: 1rem;
font-weight: 600;
font-size: 1.2rem;
font-weight: 200;
margin-bottom: 3%;
}
.day-degrees {
font-weight: 600;
margin-right: 20px;
text-align: end;
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 2%;
color: var(--red);
text-align: center;
}
.first-day {
margin-top: 0;
Expand Down Expand Up @@ -390,6 +416,11 @@ body {
background-position: center;
background-size: cover;
}
.smoke {
background: url('./images/smoke.jpg');
background-position: center;
background-size: cover;
}
.thunderstorm {
background: url('./images/thunderstorm.jpeg');
background-position: center;
Expand All @@ -405,8 +436,8 @@ body {
position: fixed;
bottom: 0;

color: var(--red);
color: var(--black);
}
.footer:hover {
color: var(--white);
color: var(--red);
}

0 comments on commit 66ed5ae

Please sign in to comment.