DEV Community

Cover image for How to build a Weather Converter with HTML, CSS and Vanilla JavaScript (Part 1 - Basic setup)
Jessica Wilkins
Jessica Wilkins

Posted on • Updated on

How to build a Weather Converter with HTML, CSS and Vanilla JavaScript (Part 1 - Basic setup)

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

You will also learn how to output error messages if the user does not provide a valid input.
invalid input

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.

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

You should see an option to download VS Code to your device.
download to mac

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

From there, it should automatically start to download to your computer.
downloading

If the download doesn't automatically start, then click on the direct download link.
direct download link

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

You should see the Welcome page.
vs code welcome page

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

Click on that icon and search for the Live Server extension using the search function.
Live server

Then click on the blue Install button.
install live server

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

Your terminal should look something like this.
terminal home screen

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
Enter fullscreen mode Exit fullscreen mode

You should see that we are now in the Desktop.
desktop location

Now we need to create a folder called weather-converter-project using the mkdir(make directory) command.

mkdir weather-converter-project
Enter fullscreen mode Exit fullscreen mode

If you go to the Desktop, you should see our new folder.
new folder desktop

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
Enter fullscreen mode Exit fullscreen mode

You should see that we are now inside the weather project folder.
inside weather project folder

We can use the touch command to add the index.html, styles.css and index.js files.

touch index.html styles.css index.js
Enter fullscreen mode Exit fullscreen mode

If you go to the folder, you should see those three files inside of it.

three files in folder

Close out the terminal by clicking on the X icon.
close terminal

Then go to File > Open Folder and choose our project folder.
open folder

You should see all of the project files in VS Code.
project files vs code

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

Type in! and hit enter which will give us the HTML boilerplate code.
emmet boilerplate

This should be your starter code.

<!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>
Enter fullscreen mode Exit fullscreen mode

Let's change the content inside the title tags to say the name of our project.

<title>Celsius to Fahrenheit Converter</title>
Enter fullscreen mode Exit fullscreen mode

We are then going to link the CSS file to the HTML file.
Inside the head tags add a link tag for the stylesheet.

<link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

Then link the JavaScript file to the HTML file. Inside the body tags, add a script tag for the index.js file.

<script src="index.js"></script>
Enter fullscreen mode Exit fullscreen mode

Inside the body tags, add an h1 tag for the title. This h1 tag will include a class name of title.

<h1 class="title">Celsius to Fahrenheit</h1>
Enter fullscreen mode Exit fullscreen mode

This is what our code should look like so far.

<!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>
Enter fullscreen mode Exit fullscreen mode

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

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

You should now see our page in the browser.
local server

Adding the input, reset and convert buttons

Under the h1 tag, create a div with a class name of card.

 <div class="card">

 </div>
Enter fullscreen mode Exit fullscreen mode

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.

 <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
 </div>
Enter fullscreen mode Exit fullscreen mode

Underneath the p tag, create another div with a class named input-container.

 <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
    <div class="input-container">

    </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

Inside the input-container, add this number input.

  <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>
Enter fullscreen mode Exit fullscreen mode

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 convertand class of btn.

<button class="btn" id="convert">Convert</button>
Enter fullscreen mode Exit fullscreen mode

Underneath the button add a reset button with the id of reset and class of btn.

<button class="btn" id="reset" type="reset">Reset</button>
Enter fullscreen mode Exit fullscreen mode

This is what the entire input-container should look like.

<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>
Enter fullscreen mode Exit fullscreen mode

Underneath the input-container, create a div with a class called result-div and an id called result.

<div class="result-div" id="result">

</div>
Enter fullscreen mode Exit fullscreen mode

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

First, add this font-awesome CDN to the head section of the HTML page.

<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>
Enter fullscreen mode Exit fullscreen mode

Inside the results-div, place the icon tag for fire.

<div class="result-div" id="result">
      <i class="fas fa-fire"></i>
</div>
Enter fullscreen mode Exit fullscreen mode

This is what the entire HTML page should look like.

<!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>
Enter fullscreen mode Exit fullscreen mode

This is what the results should look like in the browser.
final html code

In part 2, we will build out the JavaScript file which adds all of the functionality for our weather converter.

Final code

Top comments (0)