Javascript Projects

Content List

Daulat Hussain Profile

Take Quiz

Subscription Form (#3)

JavaScript Project | Build Color Particles Drawing with the help of Javascript

JavaScript Project | Build Color Particles Drawing Javascript

Best JavaScript project to build your understanding of vanilla JavaScript

Beginners Friendly Javascript Projects with SourceCode, JavaScript Project | Build Color Particles Drawing Javascript, Learn Javascript build projects

Best JavaScript project to build your understanding of vanilla JavaScript

In this project, we going to use pure JavaScript and understand some of the important fundamentals that how JavaScript works.

Check JavaScript PacMan Game

In this project, we also use HTML5 Canvas for drawing multiple particles with the help of in JavaScript

Building Code understanding of JavaScript including with recent introduction HTML5 Canvas tag and its API to build some amazing particles on mouseover and click event

This tutorial on Javascript project for beginners I will help you to develop the core understanding hope all of you will enjoy this amazing JavaScript project and improve your understanding of this amazing language

The source code of this JavaScript project is provided below so you can download that and have a look from your end that how I have written the code on the acids are provided here so you can feel free to download it.

learn javascripts, building projects
html css and javascrips projects tutorial
Best javascript project for beginners
beginner friendly javascript project

HTML Code

<body>

    <div class=”wrapper”>
        <div class=”container”>
            <div class=”left”>
                <div class=”header”>
                    <div class=”shareBox”>
                        <i class=”uil uil-share-alt”></i>
                        <div class=”box”>
                            <i class=”uil uil-facebook-f”></i>
                            <i class=”uil uil-twitter”></i>
                            <i class=”uil uil-instagram-alt”></i>
                            <i class=”uil uil-youtube”></i>
                        </div>
                    </div>
                    <div class=”tittle”>Color Particles</div>
                </div>
                <div class=”draw”>
                    <canvas id=”canvas”></canvas>
                </div>


            </div>
           

        </div>
    </div>

CSS Code

<style>
        :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);
        }

 

        * {
            margin: 0;
            padding: 0;
            outline: 0;
            border: 0;
            box-sizing: border-box;
        }

 

        body {
            font-family: ‘Courier New’, Courier, monospace;
            height: 100vh;
            background: var(–main-bg-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(–icons-color);
            width: 100vw;
        }

 

        .uil {
            cursor: pointer;
        }



        .wrapper {
            background: var(–main-bg-color);
            border-radius: 2rem;
            width: 84%;
            height: 80%;
            box-shadow: var(–box-shadow);
            padding: 1rem;
        }

 

        .wrapper .container {
            height: 100%;
            display: flex;
            gap: 1rem;
            justify-content: space-between;
        }

 

        .wrapper .container .left {
            width: 100%;
            border-radius: 2rem;
            padding: 1rem;
        }

 

        .wrapper .container .left .header {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: -1rem;
            margin-bottom: 1rem;
        }

 

        .wrapper .container .left .header .shareBox {
            width: 20%;
            padding: 0.5rem;
        }

 

        .wrapper .container .left .header .shareBox .box {
            position: absolute;
            width: 200px;
            padding: 1rem 1rem;
            background: var(–main-bg-color);
            display: block;
            justify-content: space-between;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            margin-top: -5.8rem;
            box-shadow: -1rem -1rem 1rem var(–shadow-light-color);
        }

 

        .wrapper .container .left .header .shareBox .box i {
            background: var(–icons-bg-color);
            padding: 0.5rem;
            border-radius: 50%;
        }

 

        .wrapper .container .left .header .shareBox .box i:hover {
            box-shadow: var(–box-shadow);
        }

 

        .wrapper .container .left .header .tittle {
            font-size: 20px;
            text-transform: uppercase;
            font-family: Georgia, ‘Times New Roman’, Times, serif;
        }

 

        .wrapper .container .left .draw {
            width: 100%;
            height: 90%;
            border-radius: 2rem;
            box-shadow: var(–box-shadow);
        }

 

        .wrapper .container .left #canvas {
            width: 100%;
            height: 100%;
            background: yellow;
            border-radius: 2rem;
        }
    </style>

Javascript Code For CountDown Timer

<script>

        const socialBox = document.querySelector(‘.box’);
        const share = document.querySelector(‘.uil-share-alt’);

        share.addEventListener(‘click’, () => {
            if (socialBox.style.display === ‘block’) {
                socialBox.style.display = ‘none’
            } else {
                socialBox.style.display = ‘block’
            }
        })



        const canvas = document.getElementById(‘canvas’);
        const ctx = canvas.getContext(‘2d’);
        const particleArray = [];
        let hue = 0;

        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        window.addEventListener(‘resize’, () => {
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
        })


        const mouse = {
            x: undefined,
            y: undefined
        }

        canvas.addEventListener(‘click’, (event) => {
            mouse.x = event.x;
            mouse.y = event.y;

            for (let i = 0; i < 10; i++) {
                particleArray.push(new Particle());
            }
        })
        canvas.addEventListener(‘mousemove’, (event) => {
            mouse.x = event.x;
            mouse.y = event.y;

            for (let i = 0; i < 10; i++) {
                particleArray.push(new Particle());
            }
        })

        console.log(particleArray.length)

        class Particle {
            constructor() {
                this.x = mouse.x;
                this.y = mouse.y;

                // this.x = Math.random()* canvas.width;
                // this.y = Math.random()* canvas.height;
                this.size = Math.random() * 5 + 1;
                this.speedY = Math.random() * 3 – 1.5;
                this.speedX = Math.random() * 3 – 1.5;
                this.color = ‘hsl(‘ + hue + ‘, 100%, 50%)’;
            }
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.size > 0.2) this.size -= 0.1;
            }
            draw() {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
                ctx.fill();

            }
        }



        function handelParticles() {
            for (let i = 0; i < particleArray.length; i++) {
                particleArray[i].update();
                particleArray[i].draw();


                if (particleArray[i].size <= 0.3) {
                    particleArray.splice(i, 1);
                    i–;
                }
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)

            // ctx.fillStyle = ‘rgba(0, 0, 0, 0.01)’
            // ctx.fillRect(0, 0, canvas.width, canvas.height)
            hue += 5;
            handelParticles()
      requestAnimationFrame(animate);
        }
        animate()
    </script>

Health Calculator

BMI calculator By daulat hussain

BMI
Calculator

Water Calculator by daulat hussain

Water
Calculator

Fat calculator by daulat hussain

Fat
Calculator

Protein calculator by daulat hussain

Protein
Calculator

Download Javascript Project Source Code

Just Wait We Are Preparing The To Download

Download Code

My Services

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

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 Color Particles Drawing with the help of Javascript

JavaScript Project | Build Color Particles Drawing Javascript

Best JavaScript project to build your understanding of vanilla JavaScript

Beginners Friendly Javascript Projects with SourceCode, JavaScript Project | Build Color Particles Drawing Javascript, Learn Javascript build projects

Best JavaScript project to build your understanding of vanilla JavaScript

In this project, we going to use pure JavaScript and understand some of the important fundamentals that how JavaScript works.

Check JavaScript PacMan Game

In this project, we also use HTML5 Canvas for drawing multiple particles with the help of in JavaScript

Building Code understanding of JavaScript including with recent introduction HTML5 Canvas tag and its API to build some amazing particles on mouseover and click event

This tutorial on Javascript project for beginners I will help you to develop the core understanding hope all of you will enjoy this amazing JavaScript project and improve your understanding of this amazing language

The source code of this JavaScript project is provided below so you can download that and have a look from your end that how I have written the code on the acids are provided here so you can feel free to download it.

learn javascripts, building projects
html css and javascrips projects tutorial
Best javascript project for beginners
beginner friendly javascript project

HTML Code

<body>

    <div class=”wrapper”>
        <div class=”container”>
            <div class=”left”>
                <div class=”header”>
                    <div class=”shareBox”>
                        <i class=”uil uil-share-alt”></i>
                        <div class=”box”>
                            <i class=”uil uil-facebook-f”></i>
                            <i class=”uil uil-twitter”></i>
                            <i class=”uil uil-instagram-alt”></i>
                            <i class=”uil uil-youtube”></i>
                        </div>
                    </div>
                    <div class=”tittle”>Color Particles</div>
                </div>
                <div class=”draw”>
                    <canvas id=”canvas”></canvas>
                </div>


            </div>
           

        </div>
    </div>

CSS Code

<style>
        :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);
        }

 

        * {
            margin: 0;
            padding: 0;
            outline: 0;
            border: 0;
            box-sizing: border-box;
        }

 

        body {
            font-family: ‘Courier New’, Courier, monospace;
            height: 100vh;
            background: var(–main-bg-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(–icons-color);
            width: 100vw;
        }

 

        .uil {
            cursor: pointer;
        }



        .wrapper {
            background: var(–main-bg-color);
            border-radius: 2rem;
            width: 84%;
            height: 80%;
            box-shadow: var(–box-shadow);
            padding: 1rem;
        }

 

        .wrapper .container {
            height: 100%;
            display: flex;
            gap: 1rem;
            justify-content: space-between;
        }

 

        .wrapper .container .left {
            width: 100%;
            border-radius: 2rem;
            padding: 1rem;
        }

 

        .wrapper .container .left .header {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: -1rem;
            margin-bottom: 1rem;
        }

 

        .wrapper .container .left .header .shareBox {
            width: 20%;
            padding: 0.5rem;
        }

 

        .wrapper .container .left .header .shareBox .box {
            position: absolute;
            width: 200px;
            padding: 1rem 1rem;
            background: var(–main-bg-color);
            display: block;
            justify-content: space-between;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            margin-top: -5.8rem;
            box-shadow: -1rem -1rem 1rem var(–shadow-light-color);
        }

 

        .wrapper .container .left .header .shareBox .box i {
            background: var(–icons-bg-color);
            padding: 0.5rem;
            border-radius: 50%;
        }

 

        .wrapper .container .left .header .shareBox .box i:hover {
            box-shadow: var(–box-shadow);
        }

 

        .wrapper .container .left .header .tittle {
            font-size: 20px;
            text-transform: uppercase;
            font-family: Georgia, ‘Times New Roman’, Times, serif;
        }

 

        .wrapper .container .left .draw {
            width: 100%;
            height: 90%;
            border-radius: 2rem;
            box-shadow: var(–box-shadow);
        }

 

        .wrapper .container .left #canvas {
            width: 100%;
            height: 100%;
            background: yellow;
            border-radius: 2rem;
        }
    </style>

Javascript Code For CountDown Timer

<script>

        const socialBox = document.querySelector(‘.box’);
        const share = document.querySelector(‘.uil-share-alt’);

        share.addEventListener(‘click’, () => {
            if (socialBox.style.display === ‘block’) {
                socialBox.style.display = ‘none’
            } else {
                socialBox.style.display = ‘block’
            }
        })



        const canvas = document.getElementById(‘canvas’);
        const ctx = canvas.getContext(‘2d’);
        const particleArray = [];
        let hue = 0;

        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        window.addEventListener(‘resize’, () => {
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
        })


        const mouse = {
            x: undefined,
            y: undefined
        }

        canvas.addEventListener(‘click’, (event) => {
            mouse.x = event.x;
            mouse.y = event.y;

            for (let i = 0; i < 10; i++) {
                particleArray.push(new Particle());
            }
        })
        canvas.addEventListener(‘mousemove’, (event) => {
            mouse.x = event.x;
            mouse.y = event.y;

            for (let i = 0; i < 10; i++) {
                particleArray.push(new Particle());
            }
        })

        console.log(particleArray.length)

        class Particle {
            constructor() {
                this.x = mouse.x;
                this.y = mouse.y;

                // this.x = Math.random()* canvas.width;
                // this.y = Math.random()* canvas.height;
                this.size = Math.random() * 5 + 1;
                this.speedY = Math.random() * 3 – 1.5;
                this.speedX = Math.random() * 3 – 1.5;
                this.color = ‘hsl(‘ + hue + ‘, 100%, 50%)’;
            }
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.size > 0.2) this.size -= 0.1;
            }
            draw() {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
                ctx.fill();

            }
        }



        function handelParticles() {
            for (let i = 0; i < particleArray.length; i++) {
                particleArray[i].update();
                particleArray[i].draw();


                if (particleArray[i].size <= 0.3) {
                    particleArray.splice(i, 1);
                    i–;
                }
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)

            // ctx.fillStyle = ‘rgba(0, 0, 0, 0.01)’
            // ctx.fillRect(0, 0, canvas.width, canvas.height)
            hue += 5;
            handelParticles()
      requestAnimationFrame(animate);
        }
        animate()
    </script>

Health Calculator

BMI calculator By daulat hussain

BMI
Calculator

Water Calculator by daulat hussain

Water
Calculator

Fat calculator by daulat hussain

Fat
Calculator

Protein calculator by daulat hussain

Protein
Calculator

Download Javascript Project Source Code

Just Wait We Are Preparing The To Download

Download Code

My Services

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

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...

learn javascripts, building projects

JavaScript Project

Daulat Hussain Profile

Welcome

Take Quiz

JavaScript Project | Build Color Particles Drawing with the help of Javascript

JavaScript Project | Build Color Particles Drawing Javascript

Best JavaScript project to build your understanding of vanilla JavaScript

Beginners Friendly Javascript Projects with SourceCode, JavaScript Project | Build Color Particles Drawing Javascript, Learn Javascript build projects

Best JavaScript project to build your understanding of vanilla JavaScript

In this project, we going to use pure JavaScript and understand some of the important fundamentals that how JavaScript works.

Check JavaScript PacMan Game

Health Calculator

BMI calculator By daulat hussain

BMI
Calculator

Water Calculator by daulat hussain

Water
Calculator

Fat calculator by daulat hussain

Fat
Calculator

Protein calculator by daulat hussain

Protein
Calculator

Building Code understanding of JavaScript including with recent introduction HTML5 Canvas tag and its API to build some amazing particles on mouseover and click event

This tutorial on Javascript project for beginners I will help you to develop the core understanding hope all of you will enjoy this amazing JavaScript project and improve your understanding of this amazing language

The source code of this JavaScript project is provided below so you can download that and have a look from your end that how I have written the code on the acids are provided here so you can feel free to download it.

learn javascripts, building projects
html css and javascrips projects tutorial
Best javascript project for beginners
beginner friendly javascript project

HTML Code

<body>

    <div class=”wrapper”>
        <div class=”container”>
            <div class=”left”>
                <div class=”header”>
                    <div class=”shareBox”>
                        <i class=”uil uil-share-alt”></i>
                        <div class=”box”>
                            <i class=”uil uil-facebook-f”></i>
                            <i class=”uil uil-twitter”></i>
                            <i class=”uil uil-instagram-alt”></i>
                            <i class=”uil uil-youtube”></i>
                        </div>
                    </div>
                    <div class=”tittle”>Color Particles</div>
                </div>
                <div class=”draw”>
                    <canvas id=”canvas”></canvas>
                </div>


            </div>
           

        </div>
    </div>

CSS Code

<style>
        :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);
        }

 

        * {
            margin: 0;
            padding: 0;
            outline: 0;
            border: 0;
            box-sizing: border-box;
        }

 

        body {
            font-family: ‘Courier New’, Courier, monospace;
            height: 100vh;
            background: var(–main-bg-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(–icons-color);
            width: 100vw;
        }

 

        .uil {
            cursor: pointer;
        }



        .wrapper {
            background: var(–main-bg-color);
            border-radius: 2rem;
            width: 84%;
            height: 80%;
            box-shadow: var(–box-shadow);
            padding: 1rem;
        }

 

        .wrapper .container {
            height: 100%;
            display: flex;
            gap: 1rem;
            justify-content: space-between;
        }

 

        .wrapper .container .left {
            width: 100%;
            border-radius: 2rem;
            padding: 1rem;
        }

 

        .wrapper .container .left .header {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: -1rem;
            margin-bottom: 1rem;
        }

 

        .wrapper .container .left .header .shareBox {
            width: 20%;
            padding: 0.5rem;
        }

 

        .wrapper .container .left .header .shareBox .box {
            position: absolute;
            width: 200px;
            padding: 1rem 1rem;
            background: var(–main-bg-color);
            display: block;
            justify-content: space-between;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            margin-top: -5.8rem;
            box-shadow: -1rem -1rem 1rem var(–shadow-light-color);
        }

 

        .wrapper .container .left .header .shareBox .box i {
            background: var(–icons-bg-color);
            padding: 0.5rem;
            border-radius: 50%;
        }

 

        .wrapper .container .left .header .shareBox .box i:hover {
            box-shadow: var(–box-shadow);
        }

 

        .wrapper .container .left .header .tittle {
            font-size: 20px;
            text-transform: uppercase;
            font-family: Georgia, ‘Times New Roman’, Times, serif;
        }

 

        .wrapper .container .left .draw {
            width: 100%;
            height: 90%;
            border-radius: 2rem;
            box-shadow: var(–box-shadow);
        }

 

        .wrapper .container .left #canvas {
            width: 100%;
            height: 100%;
            background: yellow;
            border-radius: 2rem;
        }
    </style>

Javascript Code For CountDown Timer

<script>

        const socialBox = document.querySelector(‘.box’);
        const share = document.querySelector(‘.uil-share-alt’);

        share.addEventListener(‘click’, () => {
            if (socialBox.style.display === ‘block’) {
                socialBox.style.display = ‘none’
            } else {
                socialBox.style.display = ‘block’
            }
        })



        const canvas = document.getElementById(‘canvas’);
        const ctx = canvas.getContext(‘2d’);
        const particleArray = [];
        let hue = 0;

        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        window.addEventListener(‘resize’, () => {
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
        })


        const mouse = {
            x: undefined,
            y: undefined
        }

        canvas.addEventListener(‘click’, (event) => {
            mouse.x = event.x;
            mouse.y = event.y;

            for (let i = 0; i < 10; i++) {
                particleArray.push(new Particle());
            }
        })
        canvas.addEventListener(‘mousemove’, (event) => {
            mouse.x = event.x;
            mouse.y = event.y;

            for (let i = 0; i < 10; i++) {
                particleArray.push(new Particle());
            }
        })

        console.log(particleArray.length)

        class Particle {
            constructor() {
                this.x = mouse.x;
                this.y = mouse.y;

                // this.x = Math.random()* canvas.width;
                // this.y = Math.random()* canvas.height;
                this.size = Math.random() * 5 + 1;
                this.speedY = Math.random() * 3 – 1.5;
                this.speedX = Math.random() * 3 – 1.5;
                this.color = ‘hsl(‘ + hue + ‘, 100%, 50%)’;
            }
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.size > 0.2) this.size -= 0.1;
            }
            draw() {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
                ctx.fill();

            }
        }



        function handelParticles() {
            for (let i = 0; i < particleArray.length; i++) {
                particleArray[i].update();
                particleArray[i].draw();


                if (particleArray[i].size <= 0.3) {
                    particleArray.splice(i, 1);
                    i–;
                }
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)

            // ctx.fillStyle = ‘rgba(0, 0, 0, 0.01)’
            // ctx.fillRect(0, 0, canvas.width, canvas.height)
            hue += 5;
            handelParticles()
      requestAnimationFrame(animate);
        }
        animate()
    </script>

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...

Join Our Team

By joining our team you will get all the exclusive content & information, Before it goes live

Subscription Form (#3)

My Services

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

@daulathussain

I’m here to bring a lot of new guides and information about branding, health and business. Follow me for new updates

Quick Link

Coding

Nutrition

Podcast

Marketing

Shop

Contact Me

About Me

Services

Rules & Regulation

FAQ

Terms Condi

Privacy Policy

My Account

Lost Password

©CopyRight Reserve By Daulathussain.com