JavaScript Projects #1 Your First JavaScript Project 🔥 For Beginners #javascript

Показать описание

🎁Latest JavaScript Projects For Beginners You Can Try👇

This is our first JavaScript project from our JavaScript projects series. For making your JavaScript knowledge more powerful, you have to deal with some real time JavaScript project. So start with a simple JavaScript project by learning event functions.

⌚Timestamps
00:00 - Introduction
00:37 - JavaScript Project Demo
02:21 - Creating Project Directory
02:43 - Html
03:22 - CSS
05:08 - JavaScript
13:37 - Project Output

If you enjoyed this tutorial, then please please 👍LIKE and SUBSCRIBE this channel & press the bell icon for future videos.
Thank you.

=============
SUPPORT ME 💪
=============

🎁 Support me on Patreon for exclusive episodes, discord and more!

☕ Buy Me A Coffee:

===================
Recommended Videos
===================

✅ Ultra Responsive Portfolio Website from Scratch Using Bootstrap Html CSS

==========================
Recommended Course (Playlist)
==========================
✅ WordPress Tutorial:

✅ Complete Bootstrap Designs:

✅ Web Development Tutorials:

✅ Responsive Web Design Tutorials:

✅ Python Projects:

===============================
Connect with me & get daily updates👇
===============================

Music provided by : NoCopyrightSounds

#javascript #javascript_projects #projects #js #tech2etc

Рекомендации по теме

Комментарии

Thank You So Much Guys For 10K ♥
Waiting For The Next Blast 🔥
SMASH the Subscribe Button 👊

Techetc

It's nice tutorial but it has limited colors and we have to add colors manually. We can generate random colors in a very simple way. We can take variables r, g and b after that we generate random number between 0 to 255 with r = Math.random() * 255, for making this number as a pure integer we use floor method {r = Math.floor(Math.random() * 255)} and same follows to g and b variable. Finally we use style method to change the color of body like body.style.backgroundColor = `rgb(${r}, ${g}, ${b}`;.... This will generate random color each time.

Hope this was helpful 👍🏻

DanishShaikh-oihf

Thank you so much I was looking for sth to start and practice by myself. And this is awesome.
Looking forward for more.. keep it up🙏

adamasMagna

My first project this video is awesome and you gave me a better understanding on js works

ashleyadams

It's very useful tutorial for beginners.
Thanks man for these kind of material

AbhishekSingh-fmlu

Thanks brother.. keep up the good work 😇

adityasuryavanshi

Can you make a page the constantly changes colour like your colour changing cursor project?

daveyclysm

Thank you so much, bro. It's beneficial.

ameerausman

First day 🎉 Lets end this series and accelerate my JS knowledge ... 7 days 12 project 😍

okmukuyt

I am not able to see the background color and the color is not changing upon button click

ankita

Thanks for the projects super easy to start with
I re-wrote it like that :

const button =
const body =

button.addEventListener('click', changeBackColor)

function changeBackColor() {

let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
console.log( r, "and g", g, "and b", b);

body.style.backgroundColor = `rgb(${r}, ${g}, ${b}`

}

rodrigomatiasdesouza

Thanks. What change should I make If I don't want random colors and want the colors in the same way as in the array?

aakashakbar

It's really helpful... Thank you for uploading..

krishnav

Bhai aur video upload karo minimum 50simple project

unique_d

you can also use this approach
btn.addEventListener("click", function () {
body.style.backgroundColor =
* color.length)];
});

shubhamkanaskar

Its changing but not on click, on refresh page

swamykanugula

i did put the code word for word, but never worked for me

mugikuyu

Sir I create this

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project One</title>
<style>
body{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#btn{
width: 110px;
height: 45px;
font-size: 18px;
padding: 5px;
border: 1px solid rgb(184, 183, 181);
cursor: pointer;
}
</style>
</head>
<body id="cB">
<button id="btn">Click Me</button>

<script>
var btn =
var bd =
btn.onclick = function(){
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);

var f = `rgb(${r}, ${g}, ${b})`;
bd.style.backgroundColor=f;
}

</script>
</body>
</html>

itxAhmad-cpir

JavaScript Projects #1 Your First JavaScript Project 🔥 For Beginners #javascript

JavaScript Projects #1 Your First JavaScript Project 🔥 For Beginners #javascript

Learn JavaScript With This ONE Project!

5 Javascript Projects to Build (For Beginners)

Your First JavaScript Project | Focus on Today | Part 1 | JavaScript Projects | Ep.01

🔥 JS Practice 1: Master JavaScript Essentials with Fun Mini Projects! 💡

5 JavaScript Projects (Code Included!)

JavaScript in Visual Studio Code 2020 (Getting Started) + Create First JavaScript Project

5 Mini JavaScript Projects - For Beginners

REACT JS tutorials || Demo - 1 || by Mr. Swamy Naidu On 26-08-2024 @7:30PM IST

9 JavaScript projects for web developers to start doing now!

HTML CSS JS projects (Beginner): 30 projects using HTML CSS and JavaScript

🔥🔥 JavaScript project ideas for beginners 2023 🔥🔥 #javascriptprojects #javascript

JavaScript Course - Project 1: Running your first JavaScript code.

Build 15 JavaScript Projects - Vanilla JavaScript Course

Electron JS in 100 Seconds

Learn JavaScript With These 4 Projects!

Your First Javascript Project | Javascript tutorial for beginners

10 JavaScript Projects in 1 Hour - Coding Challenge 🔥

76 JavaScript projects in 24 hours: Coding Ultramarathon (Part 1)

HTML CSS JS projects (Beginner): 16 projects using HTML CSS and JavaScript

Top 6 JavaScript Libraries for your next projects

Learn JavaScript by Building 7 Games - Full Course

HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

30 JavaScript Projects For Beginners | 30 Days JavaScript Projects For Practice