DEV Community

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

Posted on • Edited on

How to build a Weather Converter with HTML, CSS and Vanilla JavaScript (Part 3-Adding CSS)

#webdev #tutorial #beginners #javascript

In part 3, 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

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.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

We are then going to choose the background color and center the text.

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

You should see this result in the browser.
purple background

We are then going to target the title and card classes to change the background color and round out the border.

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

white card background

The next step is to use a Google font.

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

limelight font

Click on the Google font, and choose Select this style.
select style

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

Add that link tag, inside the head for our HTML file.

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

In the CSS file, add the Limelight font to the title class along with these margin and padding styles.

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

title styles

Next, add these margin styles for the #message.

#message {
  margin: 20px 0 30px;
}
Enter fullscreen mode Exit fullscreen mode

Next, set the dimensions for the card class.

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

card class

For the .input-container, we will use flex to add some space between the input and buttons.

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

space between buttons

We will then set the width for the number input.

input[type="number"] {
  width: 20%;
}
Enter fullscreen mode Exit fullscreen mode

Next, set the margins for the .result-div and .result-text.

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

.result-text {
  margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

We will then set the colors and font sizes for the Font Awesome icons.

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

Then we want to add the button styles.

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

button styles

Lastly, we will add two media queries to target smaller mobile devices.

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

@media (max-width: 300px) {
  .title {
    max-width: 200px;
    font-size: 1rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

This is what the entire CSS file should look like.

* {
    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;
    }
}
Enter fullscreen mode Exit fullscreen mode

In part 4, we will setup a GitHub repository and deploy our project to GitHub Pages.

Final Code

Top comments (0)