 |
| Love Quiz using html css js |
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Love Quiz using html css js. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Love-Quiz.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Love Quiz using html css js source code
Here we given a html, css and js source code of Love Quiz project as given -
HTML
In HTML, we created a structure and added a text on the project. Added a heading, text, button and result. Linked a css for styling using <link> tag and js for functionality using <script-src> tag. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Quiz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Love Quiz</h1>
<div id="quiz">
<div id="question"></div>
<div id="options"></div>
<button id="nextButton">Next</button>
</div>
<div id="result" class="hidden">
<h2>Your Love Meter:</h2>
<p id="score"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In CSS, we added a styling and design to the Love Quiz project. Added advanced css properties for styling the text, heading, buttons. Added a media query for more responsive design. Copy the given css code and paste it into style.css file.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 800px;
text-align: center;
}
h1 {
color: #e91e63;
}
#quiz {
margin-top: 20px;
}
#question {
margin-bottom: 20px;
}
#options {
display: flex;
flex-direction: column;
align-items: center;
}
.optionButton {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
width: 100%;
max-width: 300px;
}
.optionButton:hover {
background-color: #e91e63;
color: #fff;
border-color: #e91e63;
}
.optionButton.selected {
background-color: #e91e63;
color: #fff;
border-color: #e91e63;
}
button {
background-color: #e91e63;
color: #fff;
border: none;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
button:hover {
background-color: #d81b60;
}
#result {
margin-top: 20px;
}
.hidden {
display: none;
}
#score {
font-size: 1.5rem;
color: #e91e63;
}
@media (max-width: 1024px) {
.container {
width: 90%;
}
}
@media (max-width: 768px) {
.container {
width: 95%;
}
.optionButton {
padding: 8px 16px;
max-width: 250px;
}
}
@media (max-width: 480px) {
.container {
width: 95%;
}
.optionButton {
padding: 8px 12px;
max-width: 200px;
}
button {
padding: 8px 16px;
}
}
@media (max-width: 320px) {
.container {
padding: 10px;
}
.optionButton {
padding: 6px 12px;
max-width: 160px;
}
}Javascript
In Javascript, we added a data for the Love Quiz project with advanced functionality. Added a functions to add functionality when user select and click on next. At the end, we added score to show the result of the Quiz. Copy the given js code and paste it into script.js file.
const quizData = [
{
question: "What is your idea of a perfect date?",
options: ["A romantic dinner", "A long walk on the beach", "Stargazing in a cozy blanket"],
correctAnswer: 0
},
{
question: "What is your partner's most attractive quality?",
options: ["Sense of humor", "Kindness", "Intelligence"],
correctAnswer: 1
},
{
question: "What is the most romantic gift you can give?",
options: ["A handwritten love letter", "A surprise", "A personalized piece of jewelry"],
correctAnswer: 2
},
{
question: "Which song best describes your relationship?",
options: ["Tum Mile", "Tum Jo Aaye zindagi me", "Dil Diya Galliyan"],
correctAnswer: 0
}
];
let currentQuestion = 0;
let score = 0;
let optionButtons = [];
const quiz = document.getElementById('quiz');
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const nextButton = document.getElementById('nextButton');
const resultElement = document.getElementById('result');
const scoreElement = document.getElementById('score');
function loadQuestion() {
const currentQuizData = quizData[currentQuestion];
questionElement.textContent = currentQuizData.question;
optionsElement.innerHTML = "";
currentQuizData.options.forEach((option, index) => {
const button = document.createElement('button');
button.textContent = option;
button.classList.add('optionButton');
button.addEventListener('click', function() {
checkAnswer(index);
});
optionsElement.appendChild(button);
optionButtons.push(button);
});
nextButton.disabled = true;
}
function checkAnswer(index) {
const currentQuizData = quizData[currentQuestion];
if (index === currentQuizData.correctAnswer) {
score++;
}
optionButtons.forEach(button => button.disabled = true);
nextButton.disabled = false;
}
function showResult() {
quiz.classList.add('hidden');
resultElement.classList.remove('hidden');
scoreElement.textContent = `${score} out of ${quizData.length}`;
}
nextButton.addEventListener('click', () => {
currentQuestion++;
if (currentQuestion < quizData.length) {
loadQuestion();
} else {
showResult();
}
});
loadQuestion();Output
Check this output of Love Quiz project -
Also see this -
Hope this helps you to know about Love Quiz using html css js with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects