Build Counting App

Content List

JavaScript Project | Build Counting App With HTML, CSS & Pure JavaScript | Beginner Project

JavaScript Project Build Counting App With HTML CSS & Pure JavaScript Beginner Project

Build Counting App | Pure Vanilla JavaScript, HTML & CSS

Complete Source Code Of JavaScript Counting App, Build Counting App With HTML, CSS & Pure JavaScript, HTML, CSS JavaScript Project For Beginners, Download Source Code.

Here in this project, you will have a complete understanding of UI designing of any web application or a website template with the help of CSS and JavaScript and you will also learn the CSS manipulations, HTML text manipulation with the help of pure Vanilla JavaScript.

This project is 100% beginner-friendly to give you a better understanding of creating elements in JavaScript and how you can utilize them to insert any element into its parent div. 

Build PacMan Game With Pure JavaScrip With Source Code.

Here we have used append child of JavaScript to add the child into its parent element.

I have also included the video of this project which you can watch and you can able to download the source code of this project and take the reference.

This JavaScript project is a 100% beginner family, so code along with me in this tutorial I have explained every single component, every single HTML, CSS code that I have used.

Build canteen app with HTML CSS and pure Vanilla JavaScript with source code

javascript practices project for beginner

I have also explained the UI designing part and how I have broken down the website template and the design pattern of this in different sections for proper styling.

Download the source code of the JavaScript counting app down below.

Happy learning.

HTML Code

<div class=”container”>
        <div class=”app”>
            <div class=”info”>
                <i class=”uil uil-adjust-circle”></i>
                <h1>Counting App</h1>
            </div>
            <div class=”count”>
                <h1 id=”number”>00</h1>
            </div>
            <div class=”button”>
                <button id=”count”>Count</button>
                <button id=”reset”>Reset</button>
            </div>
        </div>
    </div>

CSS Code

:root {
            –icons-color: #4c5773;
            –icons-bg-color: #e2e6e9;
            –shadow-dark-color: #d3dae7;
            –shadow-light-color: #fff;
            –main-bg-color: #ecf0f3;


            –box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
                -1rem -1rem 1rem var(–shadow-light-color);
        }

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background: var(–main-bg-color);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
        }

        h1{
            color: var(–icons-color);
        }

        .container {
            width: 300px;
            height: 500px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 1rem;
            padding: 1rem;
        }

        .app {
            padding: 0 1rem;
        }

        .info {
            display: flex;
            align-items: center;
        }

        .info i {
            font-size: 50px;
            margin-right: 1rem;
            background: var(–icons-color);
            border-radius: 10px;
            color: var(–main-bg-color);
            box-shadow: 1rem 1rem 1rem var(–shadow-light-color),
                -1rem -1rem 1rem var(–shadow-light-color);
            ;
            padding: 0.1rem;
        }

        .app .count {
            width: 100%;
            height: 250px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            margin-top: 1.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.5rem;
        }

        .count h1 {
            font-size: 150px;
            color: var(–icons-color);
        }

        .button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 3rem;

        }

        button {
            outline: none;
            border: none;
            padding: 1rem 2rem;
            font-size: 20px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 1rem;
            font-family: ‘Times New Roman’, Times, serif;
            font-weight: 600;
            cursor: pointer;
            color: var(–icons-color);

        }

Javascript Code

 const count = document.getElementById(‘count’);
        const reset = document.getElementById(‘reset’);
        const number = document.getElementById(‘number’);

        let num = 0;

        count.addEventListener(‘click’, () => {
            num++;
            if (num < 10) {
                number.innerHTML = “0” + num
            } else {
                number.innerHTML = num;

            }
        })

        reset.addEventListener(‘click’, () => {
            num = 0
            number.innerHTML = “00”;
        })

Health Calculator

Download Project Source Code

Just Wait We Are Preparing The To Download

My Services

Recent Post

Content List

JavaScript Project | Build Counting App With HTML, CSS & Pure JavaScript | Beginner Project

JavaScript Project Build Counting App With HTML CSS & Pure JavaScript Beginner Project

Build Counting App | Pure Vanilla JavaScript, HTML & CSS

Complete Source Code Of JavaScript Counting App, Build Counting App With HTML, CSS & Pure JavaScript, HTML, CSS JavaScript Project For Beginners, Download Source Code.

Here in this project, you will have a complete understanding of UI designing of any web application or a website template with the help of CSS and JavaScript and you will also learn the CSS manipulations, HTML text manipulation with the help of pure Vanilla JavaScript.

This project is 100% beginner-friendly to give you a better understanding of creating elements in JavaScript and how you can utilize them to insert any element into its parent div. 

Build PacMan Game With Pure JavaScrip With Source Code.

Here we have used append child of JavaScript to add the child into its parent element.

I have also included the video of this project which you can watch and you can able to download the source code of this project and take the reference.

This JavaScript project is a 100% beginner family, so code along with me in this tutorial I have explained every single component, every single HTML, CSS code that I have used.

Build canteen app with HTML CSS and pure Vanilla JavaScript with source code

javascript practices project for beginner

I have also explained the UI designing part and how I have broken down the website template and the design pattern of this in different sections for proper styling.

Download the source code of the JavaScript counting app down below.

Happy learning.

HTML Code

<div class=”container”>
        <div class=”app”>
            <div class=”info”>
                <i class=”uil uil-adjust-circle”></i>
                <h1>Counting App</h1>
            </div>
            <div class=”count”>
                <h1 id=”number”>00</h1>
            </div>
            <div class=”button”>
                <button id=”count”>Count</button>
                <button id=”reset”>Reset</button>
            </div>
        </div>
    </div>

CSS Code

:root {
            –icons-color: #4c5773;
            –icons-bg-color: #e2e6e9;
            –shadow-dark-color: #d3dae7;
            –shadow-light-color: #fff;
            –main-bg-color: #ecf0f3;


            –box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
                -1rem -1rem 1rem var(–shadow-light-color);
        }

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background: var(–main-bg-color);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
        }

        h1{
            color: var(–icons-color);
        }

        .container {
            width: 300px;
            height: 500px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 1rem;
            padding: 1rem;
        }

        .app {
            padding: 0 1rem;
        }

        .info {
            display: flex;
            align-items: center;
        }

        .info i {
            font-size: 50px;
            margin-right: 1rem;
            background: var(–icons-color);
            border-radius: 10px;
            color: var(–main-bg-color);
            box-shadow: 1rem 1rem 1rem var(–shadow-light-color),
                -1rem -1rem 1rem var(–shadow-light-color);
            ;
            padding: 0.1rem;
        }

        .app .count {
            width: 100%;
            height: 250px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            margin-top: 1.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.5rem;
        }

        .count h1 {
            font-size: 150px;
            color: var(–icons-color);
        }

        .button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 3rem;

        }

        button {
            outline: none;
            border: none;
            padding: 1rem 2rem;
            font-size: 20px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 1rem;
            font-family: ‘Times New Roman’, Times, serif;
            font-weight: 600;
            cursor: pointer;
            color: var(–icons-color);

        }

Javascript Code

 const count = document.getElementById(‘count’);
        const reset = document.getElementById(‘reset’);
        const number = document.getElementById(‘number’);

        let num = 0;

        count.addEventListener(‘click’, () => {
            num++;
            if (num < 10) {
                number.innerHTML = “0” + num
            } else {
                number.innerHTML = num;

            }
        })

        reset.addEventListener(‘click’, () => {
            num = 0
            number.innerHTML = “00”;
        })

Health Calculator

Download Project Source Code

Just Wait We Are Preparing The To Download

My Services

Recent Post

Daulat Hussain projects

HTML, CSS & JavaScript

Daulat Hussain Profile

Welcome

JavaScript Project | Build Counting App With HTML, CSS & Pure JavaScript | Beginner Project

JavaScript Project Build Counting App With HTML CSS & Pure JavaScript Beginner Project

Complete Source Code Of JavaScript Counting App, Build Counting App With HTML, CSS & Pure JavaScript, HTML, CSS JavaScript Project For Beginners, Download Source Code.

Here in this project, you will have a complete understanding of UI designing of any web application or a website template with the help of CSS and JavaScript and you will also learn the CSS manipulations, HTML text manipulation with the help of pure Vanilla JavaScript.

This project is 100% beginner-friendly to give you a better understanding of creating elements in JavaScript and how you can utilize them to insert any element into its parent div. 

Build PacMan Game With Pure JavaScrip With Source Code.

HEALTH CALCULATOR

Here we have used append child of JavaScript to add the child into its parent element.

I have also included the video of this project which you can watch and you can able to download the source code of this project and take the reference.

Build Counting App | Pure Vanilla JavaScript, HTML & CSS

javascript practices project for beginner

This JavaScript project is a 100% beginner family, so code along with me in this tutorial I have explained every single component, every single HTML, CSS code that I have used.

Build canteen app with HTML CSS and pure Vanilla JavaScript with source code

I have also explained the UI designing part and how I have broken down the website template and the design pattern of this in different sections for proper styling.

Download the source code of the JavaScript counting app down below.

Happy learning.

HTML Code

 <div class=”container”>
        <div class=”app”>
            <div class=”info”>
                <i class=”uil uil-adjust-circle”></i>
                <h1>Counting App</h1>
            </div>
            <div class=”count”>
                <h1 id=”number”>00</h1>
            </div>
            <div class=”button”>
                <button id=”count”>Count</button>
                <button id=”reset”>Reset</button>
            </div>
        </div>
    </div>

CSS Code

    :root {
            –icons-color: #4c5773;
            –icons-bg-color: #e2e6e9;
            –shadow-dark-color: #d3dae7;
            –shadow-light-color: #fff;
            –main-bg-color: #ecf0f3;


            –box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
                -1rem -1rem 1rem var(–shadow-light-color);
        }

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background: var(–main-bg-color);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
        }

        h1{
            color: var(–icons-color);
        }

        .container {
            width: 300px;
            height: 500px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 1rem;
            padding: 1rem;
        }

        .app {
            padding: 0 1rem;
        }

        .info {
            display: flex;
            align-items: center;
        }

        .info i {
            font-size: 50px;
            margin-right: 1rem;
            background: var(–icons-color);
            border-radius: 10px;
            color: var(–main-bg-color);
            box-shadow: 1rem 1rem 1rem var(–shadow-light-color),
                -1rem -1rem 1rem var(–shadow-light-color);
            ;
            padding: 0.1rem;
        }

        .app .count {
            width: 100%;
            height: 250px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            margin-top: 1.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.5rem;
        }

        .count h1 {
            font-size: 150px;
            color: var(–icons-color);
        }

        .button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 3rem;

        }

        button {
            outline: none;
            border: none;
            padding: 1rem 2rem;
            font-size: 20px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 1rem;
            font-family: ‘Times New Roman’, Times, serif;
            font-weight: 600;
            cursor: pointer;
            color: var(–icons-color);

        }

Javascript Code

 const count = document.getElementById(‘count’);
        const reset = document.getElementById(‘reset’);
        const number = document.getElementById(‘number’);

        let num = 0;

        count.addEventListener(‘click’, () => {
            num++;
            if (num < 10) {
                number.innerHTML = “0” + num
            } else {
                number.innerHTML = num;

            }
        })

        reset.addEventListener(‘click’, () => {
            num = 0
            number.innerHTML = “00”;
        })

Just Wait We Are Preparing The To Download

Recent Post

HTML, CSS & JAVASCRIPT​

JavaScript is the world’s most popular programming language. JavaScript is the programming language of the Web

Develop Your Understanding While building HTML, CSS & JavaScript Projects. Find All The Project Source Code.

My Services