Mini Projects II - Class 1
Dear Sciaku Learner you are not logged in or not enrolled in this course.Please Click on login or enroll now button.
If you have any query feel free to chat us!
Happy Coding! Happy Learning!
Lecture 48 :- Mini Projects II - Class 1
In "Mini Projects II - Class 1," we'll continue building more mini web projects to further enhance your web development skills. Let's dive into two exciting mini projects:
Mini Project 1: Quiz App
In this project, we'll create a simple quiz app that presents users with multiple-choice questions and provides instant feedback on their answers.
HTML:
htmlCopy code
<!DOCTYPE html> <html> <head> <title>Quiz App</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Quiz App</h1> <div id="questionContainer"></div> <button id="nextButton">Next Question</button> </div> <script src="script.js"></script> </body> </html>CSS (styles.css):
cssCopy code
body { font-family: Arial, sans-serif; background-color: #f5f5f5; } .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); text-align: center; } h1 { margin-bottom: 20px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; font-size: 16px; margin-top: 20px; }JavaScript (script.js):
javascriptCopy code
const questions = [ { question: "What is the capital of France?", options: ["Berlin", "Madrid", "Paris", "Rome"], correctAnswer: "Paris" }, { question: "Which planet is known as the Red Planet?", options: ["Venus", "Mars", "Jupiter", "Mercury"], correctAnswer: "Mars" }, { question: "Who painted the Mona Lisa?", options: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"], correctAnswer: "Leonardo da Vinci" } ]; const questionContainer = document.getElementById('questionContainer'); const nextButton = document.getElementById('nextButton'); let currentQuestion = 0; function showQuestion() { const question = questions[currentQuestion]; const optionsHtml = question.options.map(option => ` <input type="radio" name="answer" value="${option}"> <label>${option}</label><br> `).join(''); questionContainer.innerHTML = ` <h2>${question.question}</h2> <form id="quizForm">${optionsHtml}</form> `; } function checkAnswer() { const quizForm = document.getElementById('quizForm'); const userAnswer = quizForm.answer.value; const correctAnswer = questions[currentQuestion].correctAnswer; if (userAnswer === correctAnswer) { alert("Correct!"); } else { alert(`Wrong! The correct answer is ${correctAnswer}.`); } currentQuestion++; if (currentQuestion < questions.length) { showQuestion(); } else { questionContainer.innerHTML = "<h2>Quiz Complete!</h2>"; nextButton.style.display = "none"; } } nextButton.addEventListener('click', checkAnswer); showQuestion();Mini Project 2: Infinite Scroll Gallery
In this project, we'll create an infinite scroll gallery that loads more images as the user scrolls down the page.
HTML:
htmlCopy code
<!DOCTYPE html> <html> <head> <title>Infinite Scroll Gallery</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Infinite Scroll Gallery</h1> <div id="gallery"></div> <div id="loadingMessage">Loading...</div> <script src="script.js"></script> </body> </html>CSS (styles.css):
cssCopy code
body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } h1 { text-align: center; margin: 20px 0; } #gallery { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 800px; margin: 0 auto; padding: 20px; } .img { width: 250px; height: 200px; margin-bottom: 20px; object-fit: cover; } #loadingMessage { text-align: center; margin: 20px; font-size: 18px; color: #007bff; }JavaScript (script.js):
javascriptCopy code
const gallery = document.getElementById('gallery'); const loadingMessage = document.getElementById('loadingMessage'); let page = 1; function fetchImages() { loadingMessage.style.display = 'block'; setTimeout(() => { // Simulating API call with setTimeout for (let i = 1; i <= 10; i++) { const img = document.createElement('img'); img.src = `image${(page - 1) * 10 + i}.jpg`; img.alt = `Image ${(page - 1) * 10 + i}`; img.className = 'img'; gallery.appendChild(img); } page++; loadingMessage.style.display = 'none'; }, 1000); } function checkScroll() { if (window.innerHeight + window.scrollY >= document.body.offsetHeight) { fetchImages(); } } window.addEventListener('scroll', checkScroll); fetchImages();In these mini projects, you've created a simple quiz app and an infinite scroll gallery. These projects will help you practice and consolidate your HTML, CSS, and JavaScript skills.
As you continue to build more mini projects and explore web development, you'll gain the skills and confidence to tackle larger and more complex projects.
Feel free to experiment, add your own creative touch, and customize these projects to match your preferences.
If you have any specific questions or need further clarification on any topic, feel free to ask! Happy coding!
- 1. Launching Web Development Master Course MERN Stack Love Babbar
- 2. What is Version Control Git vs GitHub
- 3. How to install Git windows
- 4. How to install Git macOS
- 5. Creating a Git Repository
- 6. Lifecycle of a Change
- 7. Reviewing History in a Git Repo
- 8. Doing your First Commit
- 9. Let's create a Branch, Merge it & Tag a Commit
- 10. Undoing changes in Git
- 11. How to push a Commit GitHub Desktop
Comments: 21
Paid for the course but it still locked, can solve this problem please, when you take the payment the couse should be unlocked, evey time i have to message for any purchase
Now your Paypal payment is accepted and your course is activated successfully. Please leave your valuable feedback.
Why i am being asked for payment if i am already enrolled in the course
Dear anand, your payment is now updated check your course, apologize for several delays. Please leave your valuable feedback.
thanks its working now
hello ,I have a doubt
hello i have a doubt
hi
I'm paying through my Card, but it giving an error. why ? how we can purchase a course in Pakistan. Paypal is banned here
can we download the videos
i done my payment for mern stack development love babbar but cant acces to course kindly give me access
Dear Krishnapal your payment is already accepted go and check back.
Why i am being asked for payment if i am already enrolled in the course
Dear Shivansh, if you already done your payment then contact us on our official Email id [email protected] or reply here.
Why i am being asked for payment if i am already enrolled in the course
Dear p8354046, if you already done your payment then contact us on our official Email id [email protected] or reply here.
Why i am being asked for payment if i am already enrolled in the course
Dear, Don't worry now your problem is solved check your id.
Why i am being asked for payment if i am already enrolled in the course
Yes bro
I'm facing same issue
Dear, Don't worry now your problem is solved check your id.
i want debit card option
how can i assure that this is not scam?
i have same doubt is this website real or a fraud
No its not any fraud. its genuine if you need any proof please contact us via email.
No it's not any scam, its genuine if you need any proof please contact us via email.
how to do payment ?
Click on Watch now button then click next video then payment option is showing
i am unable to access the video even i have already completed my payment .
Your problem is solved
plz add codes lecture wise ! it wold be great and helpful also
now we have added starter package in lecture 2nd, go now and download it.
how to view this one
Why video not play
Now it's working.
Thank you for the access of the videos. It would be greatful if I could no the way to download the videos
Use idm to download
ok
Hello bro can you share course with me?
hello everyone