gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): renamed forecast->weather in Build a Weather App (#60877)

Browse Source
This commit is contained in:
dev-kamil
2025-06-15 17:03:44 +02:00
committed by GitHub
parent 44e734398f
commit c10c38e633
1 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md
+29 -29
View File
@@ -41,7 +41,7 @@ You will use a weather API. The output data has the following format:
**User Stories:**
1. You should have a `button` element with an `id` of `get-forecast`.
1. You should have a `button` element with an `id` of `get-weather`.
1. You should have a `select` element with seven `option` elements nested within it. The first option should have an empty string as its text and `value` attribute. The rest should have the following for their text and values (with the value being lowercase):
@@ -64,13 +64,13 @@ You will use a weather API. The output data has the following format:
- You should have an element with the id `humidity` for displaying the amount of humidity in air.
- You should have an element with the id `wind` element for displaying the wind speed.
- You should have an element with the id `wind` for displaying the wind speed.
- You should have an element with the id `wind-gust` element for displaying the wind gust.
- You should have an element with the id `wind-gust` for displaying the wind gust.
- You should have an element with the id `weather-main` element for displaying the main weather type.
- You should have an element with the id `weather-main` for displaying the main weather type.
- You should have an element with the id `location` element for displaying the current location.
- You should have an element with the id `location` for displaying the current location.
1. You should have an asynchronous function named `getWeather` that fetches the weather information from the `https://weather-proxy.freecodecamp.rocks/api/city/<CITY>` API and returns it. Note that this API returns data using the metric system, that means m/s for wind speed, and Celsius for the temperature.
@@ -303,10 +303,10 @@ const helper = (wobj) => ({
# --hints--
You should have a `button` element with an `id` of `get-forecast`.
You should have a `button` element with an `id` of `get-weather`.
```js
assert.exists(document.querySelector('button#get-forecast'));
assert.exists(document.querySelector('button#get-weather'));
```
You should have a `select` element.
@@ -344,7 +344,7 @@ You should have an `img` element with the id `weather-icon` for displaying the w
```js
async () => {
document.querySelector('select').value = 'chicago';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('img#weather-icon'));
};
@@ -355,7 +355,7 @@ You should have an element with the id `main-temperature` for displaying the mai
```js
async () => {
document.querySelector('select').value = 'london';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('#main-temperature'));
};
@@ -366,7 +366,7 @@ You should have an element with the id `feels-like` for displaying what the temp
```js
async () => {
document.querySelector('select').value = 'london';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('#feels-like'));
};
@@ -377,51 +377,51 @@ You should have an element with the id `humidity` for displaying the amount of h
```js
async () => {
document.querySelector('select').value = 'london';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('#humidity'));
};
```
You should have an element with the id `wind` element for displaying the wind speed.
You should have an element with the id `wind` for displaying the wind speed.
```js
async () => {
document.querySelector('select').value = 'new york';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('#wind'));
};
```
You should have an element with the id `wind-gust` element for displaying the wind gust.
You should have an element with the id `wind-gust` for displaying the wind gust.
```js
async () => {
document.querySelector('select').value = 'new york';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('#wind-gust'));
};
```
You should have an element with the id `weather-main` element for displaying the main weather type.
You should have an element with the id `weather-main` for displaying the main weather type.
```js
async () => {
document.querySelector('select').value = 'new york';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('#weather-main'));
};
```
You should have an element with the id `location` element for displaying the current location.
You should have an element with the id `location` for displaying the current location.
```js
async () => {
document.querySelector('select').value = 'new york';
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.exists(document.querySelector('#location'));
};
@@ -504,7 +504,7 @@ async () => {
try {
const city = 'new york';
document.querySelector('select').value = city;
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
// fetch the expected values from the API to confront
const body = await fetch(
@@ -541,7 +541,7 @@ async () => {
try {
const city = 'chicago';
document.querySelector('select').value = city;
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
// fetch the expected values from the API to confront
const body = await fetch(
@@ -578,7 +578,7 @@ async () => {
try {
const city = 'london';
document.querySelector('select').value = city;
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
// fetch the expected values from the API to confront
const body = await fetch(
@@ -615,7 +615,7 @@ async () => {
try {
const city = 'tokyo';
document.querySelector('select').value = city;
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
// fetch the expected values from the API to confront
const body = await fetch(
@@ -652,7 +652,7 @@ async () => {
try {
const city = 'los angeles';
document.querySelector('select').value = city;
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
// fetch the expected values from the API to confront
const body = await fetch(
@@ -726,7 +726,7 @@ async () => {
};
const city = 'paris';
document.querySelector('select').value = city;
document.querySelector('#get-forecast').click();
document.querySelector('#get-weather').click();
await new Promise(resolve => setTimeout(resolve, 1));
assert.include(testArr[0], 'Something went wrong, please try again later');
assert.lengthOf(testArr, 1);
@@ -818,7 +818,7 @@ async () => {
<option value="tokyo">Tokyo</option>
<option value="london">London</option>
</select>
<button id="get-forecast">Get Forecast</button>
<button id="get-weather">Get Weather</button>
</div>
<script type="text/javascript" src="script.js"></script>
@@ -878,7 +878,7 @@ body {
font-size: 1.25em;
}
#get-forecast {
#get-weather {
font-size: 1.25em;
height: 50px;
width: 200px;
@@ -1024,7 +1024,7 @@ body {
```
```js
const getForecastBtn = document.getElementById('get-forecast');
const getWeatherBtn = document.getElementById('get-weather');
const selectEl = document.getElementById('location-selector');
const weatherInfoEl = document.getElementById('weather-info');
@@ -1038,7 +1038,7 @@ const mainEl = document.getElementById('weather-main');
const locationEl = document.getElementById('location');
const arrowEl = document.getElementById('compass-arrow');
getForecastBtn.addEventListener(
getWeatherBtn.addEventListener(
'click',
() => selectEl.value && showWeather(selectEl.value)
);