Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

December 23, 2021 01:01 pm GMT

Counter in JS || 50 JS Project Challenge 2

Hello

In this post I will show you how to make Random Background, when you click a button in JavaScript.

This is Part 1 of the 50 JS Project Challenge.

So let's get into it.

First, here is the video tutorial:

So let's start coding.

First, we need to create three files:

index.html
style.css
home.js

Once we have those files created, we can start coding.

Here is the code for index.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">    <link rel="stylesheet" href="style.css">    <title>Document</title></head><body>    <div class="wrapper">        <h1 class="number">0</h1>        <div class="buttons">            <button class="upper" onclick="add()">Add Count</button>            <button class="lower" onclick="Lower()">Lower Count</button>        </div>    </div>    <script src="home.js"></script></body></html>

So basically we are creating one Text for the counter and two buttons. Nothing crazy so far.

Now it's time for styling!. Open our style.css and write this code in it.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*{    margin: 0;    padding: 0;    font-family: 'Poppins', sans-serif;}.wrapper{    display: flex;    justify-content: center;    align-items: center;    padding-top: 35vh;}h1{    font-size: 4rem;}.buttons{    padding-left: 1.5rem;}button{    margin-left: 0.5rem;    background-color: #4287f5;    color: white;    padding: 12px 7.5px;    border-radius: 20px;    border: none;    outline: none;    cursor: pointer;}

We have a font here declared, the font is Poopins.
We are rewriting the default padding and margin and changing the font to Poopins. The other is just styling elements.

Now let's move to the JavaScript part. Here is the code for JavaScript.

const upper = document.querySelector(".upper");const lower = document.querySelector(".lower");const numberElement = document.querySelector(".number")let number = 0;function add(){    number += 1;    numberElement.innerHTML = number;}function Lower(){    number -= 1;    numberElement.innerHTML = number;}

So first we are creating variables for each element in HTML. The we are creating a variable for Number Integer so we can count how many users press the button. So we are creating two functions, one for increasing our counter, and one for decreasing.
Function obtains a Number + or -, and then we are passing the value to the actual text.

And that's it. You can see the Actual value of the number on the screen, depending which button you are pressing.

Thanks for reading my post, and I hope I will see you next time.

Original Link: https://dev.to/vector3studio/counter-in-js-50-js-project-challenge-2-2cej

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To