Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Question and Answer Section" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Question and Answer Section" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Question and Answer Section [Source Code]
To get the following HTML, CSS & JS code for the Question and Answer Section project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question & Answer Section</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="questions">
<div class="center">
<article class="question">
<div class="questionText">
<p>What is the meaning of web development?</p>
<button class="questionBtn">
<span class="plus"><i class="fa fa-plus-circle"></i></span>
<span class="minus"><i class="fa fa-minus-circle"></i></span>
</button>
</div>
<div class="answerText">
<p>Web development is the building and maintenance of websites; it's the work that happens behind
the scenes to make a website look great, work fast and perform well with a seamless user
experience.</p>
</div>
</article>
<article class="question">
<div class="questionText">
<p>Is 3 months enough for web development?</p>
<button class="questionBtn">
<span class="plus"><i class="fa fa-plus-circle"></i></span>
<span class="minus"><i class="fa fa-minus-circle"></i></span>
</button>
</div>
<div class="answerText">
<p>Web development bootcamps typically take 3-4 months to complete and teach all the skills you need
to qualify for a web developer job. Learning web development from online courses could take
anywhere from a single month to several years, depending on how much time you devote to your
courses.</p>
</div>
</article>
<article class="question">
<div class="questionText">
<p>Are web developers in demand 2023?</p>
<button class="questionBtn">
<span class="plus"><i class="fa fa-plus-circle"></i></span>
<span class="minus"><i class="fa fa-minus-circle"></i></span>
</button>
</div>
<div class="answerText">
<p>The US Bureau of Labor Statistics projects a 23% employment growth for web developers from 2021
to 2031. Additionally, an average of 21,800 programmer and web designer jobs open each year to
fulfill market demand. If you're considering becoming a web developer, now is the time.</p>
</div>
</article>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: black;
}
.center {
width: 90vw;
max-width: 600px;
margin: 50px auto;
}
.question {
background-color: white;
border-radius: 0.5rem;
padding: 1rem 1.5rem 1rem 1.5rem;
margin-bottom: 1.5rem;
}
.questionText {
display: flex;
justify-content: space-between;
align-items: center;
color: slateblue;
}
.questionText p {
font-size: 1.2rem;
font-weight: 500;
}
.questionText .questionBtn {
font-size: 1.8rem;
font-weight: 500;
color: slateblue;
background: transparent;
border: none;
cursor: pointer;
}
.answerText {
border-top: 2px solid slategray;
padding: 0.5rem 0 0 0;
text-align: justify;
display: none;
}
.minus {
display: none;
}
.showText .answerText {
display: block;
}
.showText .minus {
display: inline;
}
.showText .plus {
display: none;
}
JavaScript
const questions = document.querySelectorAll(".question");
questions.forEach((question)=>{
const btn = question.querySelector(".questionBtn");
btn.addEventListener("click",()=>{
question.classList.toggle("showText")
})
})
Generating Download Link...