How to build a Weather Converter with HTML, CSS and Vanilla JavaScript (Part 3-Adding CSS)
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-13 22:03:07

In [part 3](https://dev.to/codergirl1991/how-to-build-a-weather-converter-with-html-css-and-vanilla-javascript-part-3-adding-css-3ofl), we will finish building out the project by adding the CSS to it.

Start the local server, by clicking on the blue `Go Live` button in the bottom right hand corner of the page of Visual Studio Code.
![go live button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m9zaqjujpk1gtgmk5zm.png)
 

In our `styles.css` file, we will first add a basic CSS reset. This is used to reset the default browser styles for the HTML.
```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```
We are then going to choose the background color and center the text. 
```css
body {
  background-color: #5a4fcf;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}
```
You should see this result in the browser.
![purple background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06ucousd9hcedsev7y4x.png)
 
We are then going to target the `title` and `card` classes to change the background color and round out the border.
```css
.title,
.card {
  border-radius: 15px;
  background-color: #faf9f6;
}
```
![white card background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9e41hpe4p4iud5te3ngi.png)
 
The next step is to use a Google font. 

Go to https://fonts.google.com/, and search for the `Limelight` font.

![limelight font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qigsaemeiw7alvg2p21.png)
 
Click on the Google font, and choose `Select this style`.
![select style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0jaanphlckyrvzcgx68.png)
 
A tab on the right hand side will slide open, and you should see the option to copy the code for the `link` tag. 

![copy link tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tda9fvdccs5scnhso3z.png)
 
Add that `link` tag, inside the `head` for our HTML file.
```html
  <!--Google font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
</head>
```
In the CSS file, add the `Limelight` font to the `title` class along with these margin and padding styles.
```css
.title {
  padding: 20px 0;
  margin: 40px auto 30px;
  max-width: 40%;
  font-family: "Limelight", cursive;
}
```
![title styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm4k2oz4p0tr7e4j8c6t.png)
 
Next, add these `margin` styles for the `#message`. 
```css
#message {
  margin: 20px 0 30px;
}
```
Next, set the dimensions for the `card` class.
```css
.card {
  max-width: 300px;
  height: 250px;
  padding: 15px;
  margin: auto;
}
```
![card class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvr0k63nn8bszm48y644.png)
 
For the `.input-container`, we will use `flex` to add some space between the input and buttons.

```css
.input-container {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-around;
}
```
![space between buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmfpuy5uri4vyjz4bb3m.png)
 
We will then set the width for the number input.
```css
input[type="number"] {
  width: 20%;
}
```
Next, set the margins for the `.result-div` and `.result-text`.
```css
.result-div {
  margin: 10px 0;
}

.result-text {
  margin: 10px;
}
```
We will then set the colors and font sizes for the Font Awesome icons.

```css
.fas,
.far {
  margin-left: 5px;
  font-size: 1.3rem;
}

.fa-fire,
.fa-burn {
  color: #ff0000;
}

.fa-fire {
  font-size: 3rem;
}

.fa-sun {
  color: #ffbf00;
}

.fa-icicles {
  color: #00d0ff;
}
```
Then we want to add the button styles.
```css
.btn {
  color: white;
  padding: 5px;
  margin: 0 10px;
  background-color: #0818a8;
  cursor: pointer;
  border: none;
  border-radius: 10%;
}
```
![button styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu8rhovoj28shf55yxa2.png)
 
Lastly, we will add two media queries to target smaller mobile devices.

```css
@media (max-width: 500px) {
  .title {
    max-width: 300px;
    font-size: 1.3rem;
  }
}

@media (max-width: 300px) {
  .title {
    max-width: 200px;
    font-size: 1rem;
  }
}
```
This is what the entire CSS file should look like.
```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #5a4fcf;
    text-align: center;
    font-family: "Open Sans", sans-serif;
}

.title,
.card {
  border-radius: 15px;
  background-color: #faf9f6;
}

.title {
    padding: 20px 0;
    margin: 40px auto 30px;
    max-width: 40%;
    font-family: "Limelight", cursive;
}

#message {
    margin: 20px 0 30px;
}

.card {
    max-width: 300px;
    height: 250px;
    padding: 15px;
    margin: auto;
}

.input-container {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-around;
}

input[type="number"] {
    width: 20%;
}

.result-div {
    margin: 10px 0;
}
  
.result-text {
    margin: 10px;
}

.fas,
.far {
  margin-left: 5px;
  font-size: 1.3rem;
}

.fa-fire,
.fa-burn {
  color: #ff0000;
}

.fa-fire {
  font-size: 3rem;
}

.fa-sun {
  color: #ffbf00;
}

.fa-icicles {
  color: #00d0ff;
}

.btn {
    color: white;
    padding: 5px;
    margin: 0 10px;
    background-color: #0818a8;
    cursor: pointer;
    border: none;
    border-radius: 10%;
}

@media (max-width: 500px) {
    .title {
      max-width: 300px;
      font-size: 1.3rem;
    }
}
  
@media (max-width: 300px) {
    .title {
        max-width: 200px;
        font-size: 1rem;
    }
}
```
In part 4, we will setup a GitHub repository and deploy our project to GitHub Pages.

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