How to make a weather app as a complete beginner by using the Open Weather API ?

Hello, dear “developer candidate” out there.
I am a beginner programmer and a beginner writer so I am probably a better person to comfort you rather than a senior developer, as we are in similar positions.
I would like to share my first weather app and my solution with you.

Firstly I would like to state that I challenged myself to complete the application without looking at online resources (Do not get me wrong, 80% of programming is probably checking stuff online. However, I believe that it is a good idea to challenge yourself sometimes)

To begin with, this is the app and how it looks. Now let’s dive into details and learn how to create a similar app.

As we usually do we start by selecting the elements that we are going to work with.
We need input to reach the value entered, submit to add a click event, and the warning to display the alert in case of empty or invalid values.

I also created an empty array where I am going to push the names of the cities that the API returns to us. We will need these values to check if a city has been displayed before or not.

We are going to give a clicking event to the submit button so we can use the .addEventListener method. The first thing that we need to handle is the empty queries and display a “warning” message to the user. We can check it by checking if the input.value === “” or not. However, there is a more elegant way of doing it by just saying if(!input.value) which can be translated as if the value of the input is a true value. We can just write a warning message as innerText. Since I didn’t want the warning to be displayed for a long time I created a setTimeout function to adjust the innerText back to an empty value.

Everything else will happen inside the else block.
Firstly I create a function named getTheCity() where I get the data from the API. I have used the fetch API but you can just use Axios or Async Await.
Since I want to enter API to get the city that the user inputs on the screen I can just use input.value within the template literals. Please make sure to use the toLowerCase() method so it won’t give you a headache when you check for duplicate values inside the array.

For the sake of simplicity, I didn’t deal too much with the error handling and wrote just a simple line of code where I check if the response (res) returns as ok or not. Usually, the API will return a response as not ok (a response not starting with a 200 code) in case of invalid entries so I decided to display a simple “please enter a valid city” warning. Of course, you can change it and make the error handling more efficient. As you already know I used a simple setTimeout to clear the innerText of the warning element.
Outside the if block, make sure to “transform” the response to a javascript object by using the .json() method.

Now that we have valid data we can use .then() to deal with the data and display whatever we want to display. However, before handling all the conditions in the data we should create a function to display the cities.
We will come back to this part and explain it in detail after creating the function.

I have decided to call the function displayTheCity and enter a “data” parameter. Firstly we need to select the empty weatherContainer that we have created inside the HTML. (This is my repo link so you can just copy-paste the HTML and CSS from there).
It is always a great idea to destructure the object instead of using dots or square brackets to reach the value.
Here is a very useful MDN link to learn more about destructuring.

I am European and we use Celsius to measure the temperature so that is the reason why I have transformed the default Kelvin value to Celsius. If you are an American you can of course use Fahrenheit. Here is a Reddit link to the countries that use Fahrenheit. See, it is only you.

Since we just need the name of the city to check if a city is a duplicate value it is enough to push the city name to the array. I advise you to use the toLowerCase() method thus will be easier to check for duplicate values.

I have created a card before and just copied it to the innerHTML of the weatherContainer. Please note how I have used template literals and the destructured variables to generate new values each time a request is sent to the server. I used the name, degree, country description, and icons as elements that I wanted to display. You can get the icons from my repo that I will attach at the end of the article.
I wanted that each time I search for a city the displayed card is the first one in line so that’s why I have used (+ weatherContainer.innerHTML) at the end of the backticks.

Now that we have our function it is time to get back to our function and explain its conditions. Firstly we destructure the name since we need it to check for duplicate values. We can check it by using the .includes() built-in method. In case the city already exists a short warning message will be displayed and then it will be cleared after 3 seconds by using the setTimeout() method. This is optional but I have set a maximum number of 4 cities to be displayed for styling purposes. You can totally ignore this condition or change it according to your wish. Finally, if none of the previous conditions is true we can display the city by calling the displayTheCity() function that we just created.

Immediately under the displayTheCity() function that we have created, we can call the getTheCity() function and then reset the value of our input to “” empty. Please make sure to call the function inside the initial else block.

If you wish you can also give functionality to the input element by adding an eventListener. Firstly you should decide which key you are going to use when calling the function(I have decided to use the key “Enter”). A simple (event.code === “Enter”) will make the job. Since we have already given all the functionality to the submit button we can just call it with the click() method.

Here you check the repository and get the styling, markup, and icons. Please note that you can also use the default icons but the ones I have used are more stylish. I have actually downloaded them after searching online. You can also create your icons by yourself.
Please reach me for any questions and I am also open to pull requests.