Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f8620dd

Browse files
Chore: All Activites completed for Day-24
1 parent 7733b52 commit f8620dd

File tree

11 files changed

+386
-0
lines changed

11 files changed

+386
-0
lines changed

‎Day24/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Weather App
2+
3+
The weather app called **Weather in** designed with HTML, CSS, Bootstrap and Javascript for educational purposes. That's all you need to know.
4+
5+
![weather app js](https://user-images.githubusercontent.com/65046391/82387841-fa32e000-9a2f-11ea-9bce-2a857bce5247.jpg)

‎Day24/Task.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Day 24: Project 1 - Weather App ☀️🌧️
2+
3+
Welcome to your first project! Today, you'll be building a dynamic Weather App that fetches real-time weather data, displays a 5-day forecast, and provides an interactive user experience. Let's get started! 🚀
4+
5+
## Tasks/Activities 📝
6+
7+
### Activity 1: Setting Up the Project 🛠️
8+
- [X] **Task 1:** Initialize a new project directory and set up the basic HTML structure for the weather app.
9+
- [X] **Task 2:** Add a basic CSS file to style the weather app, including a container for displaying weather information.
10+
11+
### Activity 2: Fetching Weather Data 🌍
12+
- [X] **Task 3:** Use the Fetch API to get current weather data from a public weather API (e.g., OpenWeatherMap). Log the response data to the console.
13+
- [X] **Task 4:** Parse the weather data and display the current temperature, weather condition, and city name on the web page.
14+
15+
### Activity 3: Adding Search Functionality 🔍
16+
- [X] **Task 5:** Add an input field and a search button to the HTML structure. Style the input and button using CSS.
17+
- [X] **Task 6:** Write a function to fetch and display weather data for a city entered in the search input field. Log any errors to the console.
18+
19+
### Activity 4: Displaying the Forecast 📅
20+
- [X] **Task 7:** Use the Fetch API to get the weather forecast from the public weather API. Log the response data to the console.
21+
- [X] **Task 8:** Parse the forecast data and display the temperature and weather condition for each day in the forecast on the web page.
22+
23+
### Activity 5: Enhancing the UI 🎨
24+
- [X] **Task 9:** Add icons or images to represent different weather conditions (e.g., sunny, rainy, cloudy) based on the weather data.
25+
- [X] **Task 10:** Add CSS animations or transitions to make the weather app more interactive and visually appealing.
26+
27+
## Feature Request 🎯
28+
29+
1. **Weather Data Fetching Script:** Write a script that fetches current weather data from a public API and displays the temperature, weather condition, and city name on the web page.
30+
2. **Search Functionality Script:** Create a script that allows users to search for weather information by city name and displays the results.
31+
3. **5-Day Forecast Script:** Write a script that fetches and displays a 5-day weather forecast on the web page.
32+
4. **UI Enhancement Script:** Create a script that adds icons for different weather conditions and includes CSS animations or transitions for a better user experience.
33+
34+
## Achievement Unlocked 🏆
35+
36+
By the end of these activities, you will:
37+
38+
- ✅ Set up a basic project structure with HTML and CSS.
39+
- ✅ Use the Fetch API to retrieve and display weather data from a public API.
40+
- ✅ Implement search functionality to fetch weather data for different cities.
41+
- ✅ Display a 5-day weather forecast using data from a public API.
42+
- ✅ Enhance the user interface with icons and animations to make the weather app more interactive and visually appealing.
43+
44+
---
45+
46+
Let's build a weather app that not only informs but also delights users with its functionality and design! 🌤️💻

‎Day24/img/cloud.svg

Lines changed: 3 additions & 0 deletions
Loading[フレーム]

‎Day24/img/day_image.svg

Lines changed: 26 additions & 0 deletions
Loading[フレーム]

‎Day24/img/down.svg

Lines changed: 6 additions & 0 deletions
Loading[フレーム]

‎Day24/img/night_image.svg

Lines changed: 26 additions & 0 deletions
Loading[フレーム]

‎Day24/img/up.svg

Lines changed: 6 additions & 0 deletions
Loading[フレーム]

‎Day24/index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Weather in App</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
11+
crossorigin="anonymous"
12+
/>
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
15+
<body>
16+
<div class="container my-5">
17+
<h1 class="text-center title">Weather in</h1>
18+
<form class="search-loaction">
19+
<input
20+
type="text"
21+
name="city"
22+
placeholder="What city?"
23+
autocomplete="off"
24+
class="form-control text-muted form-rounded p-4 shadow-sm"
25+
/>
26+
</form>
27+
28+
<div class="card rounded my-3 shadow-lg d-none back-card">
29+
<div class="card-top text-center">
30+
<div class="city-name my-3">
31+
<p>Abuja</p>
32+
<span>...</span>
33+
</div>
34+
<img src="img/night_image.svg" alt="" class="card-img-top time" />
35+
</div>
36+
37+
<div class="card-body">
38+
<div class="card-mid row">
39+
<div class="col-8 text-center temp">
40+
<span>30&deg;C</span>
41+
</div>
42+
<div class="col-4 condition-temp">
43+
<p class="condition">Thunder Storm</p>
44+
<p class="high">30&deg;C</p>
45+
<p class="low">27&deg;C</p>
46+
</div>
47+
</div>
48+
49+
<div class="icon-container card shadow mx-auto">
50+
<img src="img/cloud.svg" alt="" />
51+
</div>
52+
<div class="card-bottom px-5 py-4 row">
53+
<div class="col text-center">
54+
<p>30&deg;C</p>
55+
<span>Feels Like</span>
56+
</div>
57+
<div class="col text-center">
58+
<p>55%</p>
59+
<span>Humidity</span>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<script src="request.js"></script>
67+
<script src="index.js"></script>
68+
</body>
69+
</html>

‎Day24/index.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const searchForm = document.querySelector('.search-loaction');
2+
const cityValue = document.querySelector('.search-loaction input');
3+
const cityName = document.querySelector('.city-name p');
4+
const cardBody = document.querySelector('.card-body');
5+
const timeImage = document.querySelector('.card-top img');
6+
const cardInfo = document.querySelector('.back-card');
7+
8+
const spitOutCelcius = (kelvin) => {
9+
celcius = Math.round(kelvin - 273.15);
10+
return celcius;
11+
}
12+
const isDayTime = (icon) => {
13+
if (icon.includes('d')) { return true }
14+
else { return false }
15+
}
16+
updateWeatherApp = (city) => {
17+
console.log(city);
18+
const imageName = city.weather[0].icon;
19+
const iconSrc = `http://openweathermap.org/img/wn/${imageName}@2x.png`
20+
cityName.textContent = city.name;
21+
cardBody.innerHTML = `
22+
<div class="card-mid row">
23+
<div class="col-8 text-center temp">
24+
<span>${spitOutCelcius(city.main.temp)}&deg;C</span>
25+
</div>
26+
<div class="col-4 condition-temp">
27+
<p class="condition">${city.weather[0].description}</p>
28+
<p class="high">${spitOutCelcius(city.main.temp_max)}&deg;C</p>
29+
<p class="low">${spitOutCelcius(city.main.temp_min)}&deg;C</p>
30+
</div>
31+
</div>
32+
33+
<div class="icon-container card shadow mx-auto">
34+
<img src="${iconSrc}" alt="" />
35+
</div>
36+
<div class="card-bottom px-5 py-4 row">
37+
<div class="col text-center">
38+
<p>${spitOutCelcius(city.main.feels_like)}&deg;C</p>
39+
<span>Feels Like</span>
40+
</div>
41+
<div class="col text-center">
42+
<p>${city.main.humidity}%</p>
43+
<span>Humidity</span>
44+
</div>
45+
</div>
46+
`;
47+
if (isDayTime(imageName)) {
48+
console.log('day');
49+
timeImage.setAttribute('src', 'img/day_image.svg');
50+
if (cityName.classList.contains('text-white')) {
51+
cityName.classList.remove('text-white');
52+
} else {
53+
cityName.classList.add('text-black');
54+
}
55+
56+
} else {
57+
console.log('night');
58+
timeImage.setAttribute('src', 'img/night_image.svg');
59+
if (cityName.classList.contains('text-black')) {
60+
cityName.classList.remove('text-black');
61+
} else {
62+
cityName.classList.add('text-white');
63+
}
64+
65+
}
66+
67+
cardInfo.classList.remove('d-none');
68+
}
69+
70+
71+
72+
//add an event listner to the form
73+
searchForm.addEventListener('submit', e => {
74+
e.preventDefault();
75+
const citySearched = cityValue.value.trim();
76+
console.log(citySearched);
77+
searchForm.reset();
78+
79+
requestCity(citySearched)
80+
.then((data) => {
81+
updateWeatherApp(data);
82+
})
83+
.catch((error) => { console.log(error) });
84+
})

‎Day24/request.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const key = 'cbe3dd267a18f6c89943b3eff94f1ed7';
2+
3+
const requestCity = async (city) => {
4+
const baseURL = 'http://api.openweathermap.org/data/2.5/weather'
5+
const query = `?q=${city}&appid=${key}`;
6+
7+
//make fetch call (promise call)
8+
const response = await fetch(baseURL + query);
9+
10+
const data = await response.json();
11+
return data;
12+
13+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /