Lets build 4 JavaScript projects for beginners
JavaScript is a versatile programming language that can be used to create interactive and dynamic web pages. If you are new to JavaScript and want to practice your skills, building these beginner-friendly projects can be a great way to enhance your understanding and gain hands-on experience. So, grab a cup of chai and let’s dive into these JavaScript projects!
1. Interactive To-Do List
A To-Do list is a common project for beginners as it helps in understanding the basics of JavaScript. You can create a simple to-do list where users can add, delete, and mark tasks as completed. Implementing the functionalities of adding and deleting tasks using JavaScript will give you a solid foundation.
2. Quiz App
Building a quiz app is another excellent project to enhance your JavaScript skills. You can create multiple-choice questions with options and keep track of the user’s score. Implement features such as randomizing questions and displaying the final score to provide an engaging experience for users.
3. Weather App
Weather apps are quite popular, and building one can be a great learning experience. You can use APIs to fetch real-time weather data and display it on your web page. Implement features like searching for different locations to display their respective weather conditions. This project will help you understand how to work with APIs and handle asynchronous JavaScript.
4. Memory Game
A memory game is a fun and challenging project for beginners. Create a grid of cards, each with a hidden symbol. Users can click on two cards to uncover them. If the symbols match, the cards stay open; otherwise, they are flipped back. Add a timer and implement logic to track the number of moves made. This project will strengthen your understanding of event handling and DOM manipulation using JavaScript.
Remember, the key to mastering JavaScript is practice. By building these projects, you will gain confidence and insight into the workings of JavaScript. So, grab your chai, start coding, and have fun building these JavaScript projects!
sir ese vs code me bhi krskte h na
else {
const bmi = (weight / ((height * height) / 10000)).toFixed(2);
let conditionMessage = '';
// show the result
if (bmi <= 18.6) {
conditionMessage = `<p>under weight = less than 18.6</p>`;
} else if (bmi === 18.6 || bmi === 24.9) {
conditionMessage = `<p>normal range = 18.6 and 24.9 </p>`;
} else if (bmi >= 24.9) {
conditionMessage = `<p>overweight = Greater than 24.9 </p>`;
}
results.innerHTML = `<span>${bmi}</span>`;
results.innerHTML = `<p>${conditionMessage}</p>`;
}
smooth background color change with help of css transition: background-color add on your body 😁😆😄😃😀😇
body {
transition: color 1s ease;
transition: background-color 0.7s ease
}
❣
"Chai and Code, your JavaScript series is an absolute gem! 🌟 I just wrapped up your challenging assignments, and I'm blown away by the depth and clarity of your content. A true delight for JavaScript enthusiasts like me! 👏🚀"
Project 1 = 9:50 -> Color Changer
Project 2 = 25:30 -> BMI Calculator
Project 3 = 42:37 => Digital Clock
Project 4 = 50:00 => Guess the Number
video on mark down
Boht khub surat naam hai sir
Thank you sir for sharing your knowledge, creativity, and passion through your YouTube channel. It's evident that you have a deep understanding of the subject matter, and your ability to convey it to your audience is remarkable. I can't wait to see more from you in the future. Keep up the fantastic work!
Love from Kashmir💌
Project 1:
<script>
const buttons=document.querySelectorAll('.button')
const body=document.querySelector('body')
buttons.forEach((button)=>{
button.addEventListener('click',(e)=>{
body.style.backgroundColor=e.target.id
})
})
</script>
Thank you sir
So informative , so pracical , just experiencing like a WOW 🧡🧡
Thanks sir , very good video and explained
I really had no idea about Cron Job while he mentioned at 45:25 only thing came in my mind was setInterval and that's how I got to know about cron job 😍
Thank you so much sir❤
I think it will be more optimized if we do like this, instated of writing if statement repeatedly
allBtns.forEach((btn) => {
console.log(btn)
btn.addEventListener('click', (clkEvent) => {
console.log(clkEvent)
console.log(clkEvent.target)
if(clkEvent.target.id != null){
body.style.backgroundColor = clkEvent.target.id
}
})
} )
Could someone help me?
As a I am stuck at project 4 while re-assigning the random number in variable
the error is ==> " ; " expected
Assignment = 41:00
const form = document.querySelector('form');
form.addEventListener('submit', function (formsubmit) {
formsubmit.preventDefault();
const height = parseInt(document.querySelector('#height').value);
const weight = parseInt(document.querySelector('#weight').value);
const result = document.querySelector('#results');
if (height === '' || height < 0 || isNaN(height)) {
result.innerHTML = `enter valid hight${height}`;
} else if (weight === '' || weight < 0 || isNaN(weight)) {
result.innerHTML = `enter valid weight${weight}`;
} else {
const bmi = (weight / ((height * height) / 10000)).toFixed(3);
if (bmi < 18.6) {
result.innerHTML = `<span> ${bmi} <br> Under Weight </span>`;
} else if (bmi > 18.6 && bmi < 24.9) {
result.innerHTML = `<span> ${bmi} <br> Normel </span>`;
} else if (bmi > 24.9) {
result.innerHTML = `<span> ${bmi} <br> overweight </span>`;
}
}
});
is right ?
dear sir thanku for video
but ek baat
apki video dekh dekh k chai ka deewana jrur ho gya hu
raat ko 2 bje chai bna ke pini pdti hai 😊😊
project 1 = 9:50
const buttons = document.querySelectorAll('.button');
const body = document.querySelector('body');
buttons.forEach(function (button) {
button.addEventListener('click', function (click) {
switch (click.target.id) {
case click.target.id:
body.style.backgroundColor = click.target.id;
}
});
});
git p video bnado sir please, ik already available hain videos, but saralta se samajhne ki aadat si ho chuki h….🥹