Build Counting App

Content List

Daulat Hussain Profile

Take Quiz

Subscription Form (#3)

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

Water Calculator by daulat hussain
Water
Fat calculator by daulat hussain
Fat
Protein calculator by daulat hussain
Protein
BMI calculator By daulat hussain
Calories

Download Project Source Code

Just Wait We Are Preparing The To Download

Download Code

My Services

Daulat hussain social media marketing
Contact Me
Daulat hussain fitness video
Contact Me
Daulat Hussain consultancy for markting
Contact Me
daulat hussain website development tutorial
Contact Me

Recent Post

21 Amazing Daily Hacks for Healthy Life

21 Amazing Daily Hacks for Healthy Life

Read...

5-Minutes Breakfast Recipes For Indian Diet

5-Minutes Breakfast Recipes For Indian

Read...

21 Day Challenge Will Remind You

21 Day Challenge Will Remind You

Read...

4-Week Workout Plan Will Have You Feeling Strong

4-Week Workout Plan Will Feel Strong

Read...

Content List

Daulat Hussain Profile

Take Quiz

Subscription Form (#3)

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

Water Calculator by daulat hussain
Water
Fat calculator by daulat hussain
Fat
Protein calculator by daulat hussain
Protein
BMI calculator By daulat hussain
Calories

Download Project Source Code

Just Wait We Are Preparing The To Download

Download Code

My Services

Daulat hussain social media marketing
Contact Me
Daulat hussain fitness video
Contact Me
Daulat Hussain consultancy for markting
Contact Me
daulat hussain website development tutorial
Contact Me

Recent Post

21 Amazing Daily Hacks for Healthy Life

21 Amazing Daily Hacks for Healthy Life

Read...

5-Minutes Breakfast Recipes For Indian Diet

5-Minutes Breakfast Recipes For Indian

Read...

21 Day Challenge Will Remind You

21 Day Challenge Will Remind You

Read...

4-Week Workout Plan Will Have You Feeling Strong

4-Week Workout Plan Will Feel Strong

Read...

Daulat Hussain projects

HTML, CSS & JavaScript

Daulat Hussain Profile

Welcome

Take Quiz

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

Water Calculator by daulat hussain
Water
Fat calculator by daulat hussain
Fat
Protein calculator by daulat hussain
Protein
BMI calculator By daulat hussain
Calories

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

Download Code

Recent Post

21 Amazing Daily Hacks for Healthy Life

21 Amazing Daily Hacks for Healthy

Read...

5-Minutes Breakfast Recipes For Indian Diet

5-Minutes Breakfast Recipes For Indian

Read...

21 Day Challenge Will Remind You

21 Day Challenge Will Remind You

Read...

4-Week Workout Plan Will Have You Feeling Strong

4-Week Workout Plan Will Feel

Read...

HTML, CSS & JAVASCRIPT​

Daulat Hussain JavaScript Tutorial
Let's Learn

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

Website development project by daulat hussain
Let's Learn

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

My Services

Daulat hussain social media marketing
Contact Me
Daulat hussain fitness video
Contact Me
Daulat Hussain consultancy for markting
Contact Me
daulat hussain website development tutorial
Contact Me