How to build a Weather Converter with HTML, CSS and Vanilla JavaScript (Part 1 - Basic setup)
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-13 21:44:44

In this tutorial, you will learn how to build a weather converter, which will take in a user input and output the conversion from Celsius to Fahrenheit. 
[Final project](https://jdwilkin4.github.io/Weather-Converter-Project/)

 

You will also learn how to output error messages if the user does not provide a valid input.
![invalid input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45iqtp2s8bqjd8qde13t.png)

Once we finish building out the project, I will teach you how to deploy it to GitHub Pages.


The idea for this project was based on the first [freeCodeCamp Basic Algorithm challenge](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit).
 
This will be a series of articles broken up into 4 parts. 

## What you will learn in Part 1
* How to install and work with Visual Studio Code
* How to create project files using the VS Code Terminal
* How to build out the HTML structure for our project
* How to use Font Awesome Icons

## Prerequisites
You should have a basic introduction into HTML, CSS, and Vanilla JavaScript. This is aimed at beginners looking to practice their skills.

## How to install Visual Studio Code
I will be using Visual Studio Code to build out our project.
You are free to use a different code editor if you choose.

First, go the official VS code website which is https://code.visualstudio.com/
![VS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p22d1q5xgcy8frpsrqr.png)
 
You should see an option to download VS Code to your device.
![download to mac](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvx6bsieclebev3tx7dy.png)

If you don't see your device listed, then click on the arrow to the right of the download button to find your device. 

![arrow for download options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4thj17ir1o16w4lcbv1h.png)
 
From there, it should automatically start to download to your computer. 
 ![downloading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02wet7hh0f5cnbw3fs5r.png)

If the download doesn't automatically start, then click on the direct download link.
![direct download link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u48bl54vwvwldxoj9zyv.png)
 
Click on the downloaded file and walk through the installation instructions. 

Once installed, click on the VS Code icon to open the application.

![vs code icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q04fh7zougvv6mlde7j9.png)
 
You should see the Welcome page.
![vs code welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvfgruzvr0a6d39mcw98.png)
 
## Installing extensions for Visual Studio Code
VS Code extensions are helpful tools to use during the development process for your projects.

The extensions tab is located on the left hand side of VS code.

![extensions tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3dbwlg5v9jnsyfcivfh.png)
 
Click on that icon and search for the Live Server extension using the search function.
![Live server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/128la08tr7h5hpvstdhh.png)
 
Then click on the blue Install button.
![install live server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/331k6rlhgt4m5r5y8pqx.png)
 
This extension will allow us to start a local server and see what our page would look like in the browser. It will also automatically restart the server whenever we make changes to the files. 

## How to create project files and folders using the Terminal
I am going to show you how to create files and folder on your computer using the Terminal. It is important for beginner developers to know how to run basic commands in the terminal.

In Visual Studio Code, go to the top menu and click on Terminal > New Terminal
![new terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jek30d7ibipux4rl8bp1.png)

Your terminal should look something like this.
![terminal home screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl3qmvabp3ggy9y759yb.png)
 
We want to create a project folder in the Desktop. We first need to `cd`(change directory) to the Desktop.

Run this command in the terminal and hit enter.
```
cd Desktop
```
You should see that we are now in the Desktop.
![desktop location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs60ga1y3yxiuz9apnt1.png)
 
Now we need to create a folder called `weather-converter-project` using the `mkdir`(make directory) command.

```
mkdir weather-converter-project
```
If you go to the Desktop, you should see our new folder.
![new folder desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k2fp7jkuoyvneszrsm9.png)
 
Inside that folder, we need to add a total of three files for HTML, CSS and JavaScript.

In the terminal, `cd`(change directory) to the `weather-converter-project`.
```
cd weather-converter-project
```
You should see that we are now inside the weather project folder.
![inside weather project folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktuuhiok7y8p34cdsr1b.png)
 
 We can use the `touch` command to add the `index.html`, `styles.css` and `index.js` files. 
```
touch index.html styles.css index.js
```
If you go to the folder, you should see those three files inside of it.

![three files in folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0g0rwqfg5jskpy7vadu.png)
 
Close out the terminal by clicking on the `X` icon.
![close terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikh9hff1edv0rxolcpuk.png)
 
Then go to File > Open Folder and choose our project folder.
![open folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5paoglba8eom2q0tbwk.png)

You should see all of the project files in VS Code.
![project files vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yujizlzeij03f5inpyo8.png)

## How to create the HTML structure

### Adding the HTML boilerplate code 
Now that we are setup with Visual Studio Code, let's start building out the HTML page.

Click on the `index.html` file to open it in VS Code.
![click on html file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/issxbsxt52v9pi0eq571.png)
 
Type in`!` and hit enter which will give us the [HTML boilerplate code](https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/).
![emmet boilerplate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xquxp8ki0nynjwly522.png)
 
This should be your starter code.
```html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
  </head>

  <body>

  </body>

</html>
```
Let's change the content inside the `title` tags to say the name of our project.
```html
<title>Celsius to Fahrenheit Converter</title>
```
We are then going to link the CSS file to the HTML file.
Inside the `head` tags add a `link` tag for the stylesheet.

```html
<link rel="stylesheet" href="styles.css">
```
Then link the JavaScript file to the HTML file. Inside the `body` tags, add a `script` tag for the `index.js` file.
```html
<script src="index.js"></script>
```

Inside the body tags, add an `h1` tag for the title. This `h1` tag will include a class name of `title`. 
```html
<h1 class="title">Celsius to Fahrenheit</h1>
```

This is what our code should look like so far.

```html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Celsius to Fahrenheit Converter</title>

    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1 class="title">Celsius to Fahrenheit</h1>

    <script src="index.js"></script>
  </body>

</html>
```
### Starting the local server
Let's start our local server to see what our page looks like in the browser so far.

In the bottom right hand corner, you should see a `Go Live` button which will open up a new tab in your preferred browser. 
![go live](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggq699s2un34an70zue4.png)
 
If you don't see that option available, then right click on the HTML document and click on `Open with Live Server`. 
![open with live server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj3b9qpyq359lkwb6ytq.png)
 
You should now see our page in the browser.
![local server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvtx341rqounb0bbr1cs.png)
 
### Adding the input, reset and convert buttons
Under the `h1` tag, create a `div` with a class name of `card`.
```html
 <div class="card">
    
 </div>
```
Inside that `div`, add a `p` tag with an `id` of `message` and the text "Enter a number between -90 and 57". The reason why we are using the numbers -90 and 57 is because those are the lowest and highest celsius weather temperatures on record. 
```html
 <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
 </div>
```
Underneath the `p` tag, create another `div` with a class named `input-container`.
```html
 <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
    <div class="input-container">

    </div>
 </div>
```
Inside the `input-container`, add this number input.
```html
  <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
    <div class="input-container">
      <input placeholder="15&deg;" type="number" value="" name="degrees" id="number" min="-90" max="57">
    </div>
  </div>
```
For the placeholder, we are using an HTML entity (`15&deg;`) to display the degree symbol. 

For the value (`value=""`), it is going to be empty because it will be supplied by the user later on.

Underneath the `input`, add a `button` with an `id` of `convert`and class of `btn`.

```html
<button class="btn" id="convert">Convert</button>
```
Underneath the `button` add a reset button with the `id` of `reset` and class of `btn`. 
```html
<button class="btn" id="reset" type="reset">Reset</button>
```
This is what the entire `input-container` should look like.
```html
<div class="input-container">
      <input placeholder="15&deg;" type="number" value="" name="degrees" id="number" min="-90" max="57">
      <button class="btn" id="convert">Convert</button>
      <button class="btn" id="reset" type="reset">Reset</button>
</div>
```
Underneath the `input-container`, create a `div` with a class called `result-div` and an `id` called `result`.
```html
<div class="result-div" id="result">

</div>
```
Inside this `div`, is where the conversion results will display based on the user's input.

## How to use Font Awesome Icons
We want to use different weather icons that will match with the conversion results. 
![hot image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02az5tx9oj39881rpe8l.png)
 
First, add this font-awesome CDN to the `head` section of the HTML page.
```html
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Celsius to Fahrenheit Converter</title>

  <!--this is our CSS stylesheet-->
  <link rel="stylesheet" href="styles.css">
  
  <!--this is the font awesome cdn-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
```
Inside the `results-div`, place the icon tag for fire.
```html
<div class="result-div" id="result">
      <i class="fas fa-fire"></i>
</div>
```
This is what the entire HTML page should look like.
```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Celsius to Fahrenheit Converter</title>

  <!--this is our CSS stylesheet-->
  <link rel="stylesheet" href="styles.css">

  <!--this is the font awesome cdn-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <h1 class="title">Celsius to Fahrenheit</h1>

  <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
    <div class="input-container">
      <input placeholder="15&deg;" type="number" value="" name="degrees" id="number" min="-90" max="57">
      <button class="btn" id="convert">Convert</button>
      <button class="btn" id="reset" type="reset">Reset</button>
    </div>

    <div class="result-div" id="result">
      <i class="fas fa-fire"></i>
    </div>
  </div>

  <script src="index.js"></script>
</body>

</html>
```
This is what the results should look like in the browser.
![final html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qym02ytdn5qlqwp3o6q.png)

In [part 2](https://dev.to/codergirl1991/how-to-build-a-weather-converter-with-html-css-and-vanilla-javascript-part-2-adding-javascript-59f1), we will build out the JavaScript file which adds all of the functionality for our weather converter. 

[Final code](https://github.com/jdwilkin4/Weather-Converter-Project)