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.
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/
You should see an option to download VS Code to your device.
If you don't see your device listed, then click on the arrow to the right of the download button to find your device.
From there, it should automatically start to download to your computer.
If the download doesn't automatically start, then click on the 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.
You should see the 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.
Click on that icon and search for the Live Server extension using the search function.
Then click on the blue Install button.
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
Your terminal should look something like this.
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.
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.
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.
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.
Close out the terminal by clicking on the X icon.
Then go to File > Open Folder and choose our project folder.
You should see all of the project files in 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.
Type in! and hit enter which will give us the HTML boilerplate code.
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>
Let's change the content inside the title tags to say the name of our project.
<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.
<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.
<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.
<h1 class="title">Celsius to Fahrenheit</h1>
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>
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.
If you don't see that option available, then right click on the HTML document and click on Open with Live Server.
You should now see our page in the browser.
Adding the input, reset and convert buttons
Under the h1 tag, create a div with a class name of card.
<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.
<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.
<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.
<div class="card">
<p id="message">Enter a number between -90 and 57</p>
<div class="input-container">
<input placeholder="15°" type="number" value="" name="degrees" id="number" min="-90" max="57">
</div>
</div>
For the placeholder, we are using an HTML entity (15°) 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>
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>
This is what the entire input-container should look like.
<div class="input-container">
<input placeholder="15°" 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.
<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.
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>
Inside the results-div, place the icon tag for fire.
<div class="result-div" id="result">
<i class="fas fa-fire"></i>
</div>
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°" 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.
In part 2, we will build out the JavaScript file which adds all of the functionality for our weather converter.
Top comments (0)