Javascript Projects

Content List

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

Download Javascript Project Source Code

Just Wait We Are Preparing The To Download

My Services

Recent Post

Content List

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

Download Javascript Project Source Code

Just Wait We Are Preparing The To Download

My Services

Recent Post

learn javascripts, building projects

JavaScript Project

Daulat Hussain Profile

Welcome

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

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

Recent Post

Join Our Team

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

My Services

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

Rules & Regulation

©CopyRight Reserve By Daulathussain.com