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

Author: dev-kamil

curriculum/challenges/english/25-front-end-development/lab-weather-app/66f12a88741aeb16b9246c59.md

@@ -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)
 );