Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a flashcard app. To build this app we need HTML, CSS and Javascript.
Â
This project is suitable for javascript intermediates. If you are looking for projects to practice your javascript skills you can check out this playlist here. This playlist consists of 100+ javascript projects. The difficulty of these projects varies from easy to quite complex ones. Hence this playlist is suitable for everyone from javascript beginners to javascript experts.
Â
Let us take a look at how this project works. The project consists of the ‘Add Flashcard’ button at the top right corner of the web page. When the user clicks on this button, we display a pop-up. This pop-up consists of input fields to set the question and answer for the flash card.
The user then saves the flashcard. We verify if the inputs are not empty before saving the flash card. The user can add as many flashcards as they like. Each flashcard comes with an edit and a delete button.
Â
Video Tutorial:
If you are interested to learn by watching a video tutorial, you can check out the video down below. Also, subscribe to my youtube channel where I post new and exciting tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Flash Card App’. Inside this folder, we have three files. The first file is index.html which is the HTML document. Next, we have the style.css file which is the stylesheet. And finally, we have the script.js file which is the script file.
HTML:
We begin with the HTML file. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flashcard App</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="add-flashcard-con">
<button id="add-flashcard">Add Flashcard</button>
</div>
<!-- Display Card of Question And Answers Here -->
<div id="card-con">
<div class="card-list-container"></div>
</div>
</div>
<!-- Input form for users to fill question and answer -->
<div class="question-container hide" id="add-question-card">
<h2>Add Flashcard</h2>
<div class="wrapper">
<!-- Error message -->
<div class="error-con">
<span class="hide" id="error">Input fields cannot be empty!</span>
</div>
<!-- Close Button -->
<i class="fa-solid fa-xmark" id="close-btn"></i>
</div>
<label for="question">Question:</label>
<textarea
class="input"
id="question"
placeholder="Type the question here..."
rows="2"
></textarea>
<label for="answer">Answer:</label>
<textarea
class="input"
id="answer"
rows="4"
placeholder="Type the answer here..."
></textarea>
<button id="save-btn">Save</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style the app using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f7f9fd;
}
.container {
width: 90vw;
max-width: 62.5em;
position: relative;
margin: auto;
}
.add-flashcard-con {
display: flex;
justify-content: flex-end;
padding: 1.2em 1em;
}
button {
border: none;
outline: none;
cursor: pointer;
}
.add-flashcard-con button {
font-size: 1em;
background-color: #587ef4;
color: #ffffff;
padding: 0.8em 1.2em;
font-weight: 500;
border-radius: 0.4em;
}
#card-con {
margin-top: 1em;
}
.question-container {
width: 90vw;
max-width: 34em;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em 2em;
border-radius: 0.6em;
box-shadow: 0 1em 2em rgba(28, 0, 80, 0.1);
}
.question-container h2 {
font-size: 2.2em;
color: #363d55;
font-weight: 600;
text-align: center;
margin-bottom: 2em;
}
.wrapper {
display: grid;
grid-template-columns: 11fr 1fr;
gap: 1em;
margin-bottom: 1em;
}
.error-con {
align-self: center;
}
#error {
color: #ff5353;
font-weight: 400;
}
.fa-xmark {
font-size: 1.4em;
background-color: #587ef4;
height: 1.8em;
width: 1.8em;
display: grid;
place-items: center;
color: #ffffff;
border-radius: 50%;
cursor: pointer;
justify-self: flex-end;
}
label {
color: #363d55;
font-weight: 600;
margin-bottom: 0.3em;
}
textarea {
width: 100%;
padding: 0.7em 0.5em;
border: 1px solid #d0d0d0;
outline: none;
color: #414a67;
border-radius: 0.3em;
resize: none;
}
textarea:not(:last-child) {
margin-bottom: 1.2em;
}
textarea:focus {
border-color: #363d55;
}
#save-btn {
font-size: 1em;
background-color: #587ef4;
color: #ffffff;
padding: 0.6em 0;
border-radius: 0.3em;
font-weight: 600;
}
.card-list-container {
display: grid;
padding: 0.2em;
gap: 1.5em;
grid-template-columns: 1fr 1fr 1fr;
}
.card {
background-color: #ffffff;
box-shadow: 0 0.4em 1.2em rgba(28, 0, 80, 0.08);
padding: 1.2em;
border-radius: 0.4em;
}
.question-div,
.answer-div {
text-align: justify;
}
.question-div {
margin-bottom: 0.5em;
font-weight: 500;
color: #363d55;
}
.answer-div {
margin-top: 1em;
font-weight: 400;
color: #414a67;
}
.show-hide-btn {
display: block;
background-color: #587ef4;
color: #ffffff;
text-decoration: none;
text-align: center;
padding: 0.6em 0;
border-radius: 0.3em;
}
.buttons-con {
display: flex;
justify-content: flex-end;
}
.edit,
.delete {
background-color: transparent;
padding: 0.5em;
font-size: 1.2em;
}
.edit {
color: #587ef4;
}
.delete {
color: #ff5353;
}
.hide {
display: none;
}
@media screen and (max-width: 800px) {
.card-list-container {
grid-template-columns: 1fr 1fr;
gap: 0.8em;
}
}
@media screen and (max-width: 450px) {
body {
font-size: 14px;
}
.card-list-container {
grid-template-columns: 1fr;
gap: 1.2em;
}
}
Javascript:
Finally, we implement the functionality using Javascript. Now copy the code provided to you below and paste it into your script file.
const container = document.querySelector(".container");
const addQuestionCard = document.getElementById("add-question-card");
const cardButton = document.getElementById("save-btn");
const question = document.getElementById("question");
const answer = document.getElementById("answer");
const errorMessage = document.getElementById("error");
const addQuestion = document.getElementById("add-flashcard");
const closeBtn = document.getElementById("close-btn");
let editBool = false;
//Add question when user clicks 'Add Flashcard' button
addQuestion.addEventListener("click", () => {
container.classList.add("hide");
question.value = "";
answer.value = "";
addQuestionCard.classList.remove("hide");
});
//Hide Create flashcard Card
closeBtn.addEventListener(
"click",
(hideQuestion = () => {
container.classList.remove("hide");
addQuestionCard.classList.add("hide");
if (editBool) {
editBool = false;
submitQuestion();
}
})
);
//Submit Question
cardButton.addEventListener(
"click",
(submitQuestion = () => {
editBool = false;
tempQuestion = question.value.trim();
tempAnswer = answer.value.trim();
if (!tempQuestion || !tempAnswer) {
errorMessage.classList.remove("hide");
} else {
container.classList.remove("hide");
errorMessage.classList.add("hide");
viewlist();
question.value = "";
answer.value = "";
}
})
);
//Card Generate
function viewlist() {
var listCard = document.getElementsByClassName("card-list-container");
var div = document.createElement("div");
div.classList.add("card");
//Question
div.innerHTML += `
<p class="question-div">${question.value}</p>`;
//Answer
var displayAnswer = document.createElement("p");
displayAnswer.classList.add("answer-div", "hide");
displayAnswer.innerText = answer.value;
//Link to show/hide answer
var link = document.createElement("a");
link.setAttribute("href", "#");
link.setAttribute("class", "show-hide-btn");
link.innerHTML = "Show/Hide";
link.addEventListener("click", () => {
displayAnswer.classList.toggle("hide");
});
div.appendChild(link);
div.appendChild(displayAnswer);
//Edit button
let buttonsCon = document.createElement("div");
buttonsCon.classList.add("buttons-con");
var editButton = document.createElement("button");
editButton.setAttribute("class", "edit");
editButton.innerHTML = `<i class="fa-solid fa-pen-to-square"></i>`;
editButton.addEventListener("click", () => {
editBool = true;
modifyElement(editButton, true);
addQuestionCard.classList.remove("hide");
});
buttonsCon.appendChild(editButton);
disableButtons(false);
//Delete Button
var deleteButton = document.createElement("button");
deleteButton.setAttribute("class", "delete");
deleteButton.innerHTML = `<i class="fa-solid fa-trash-can"></i>`;
deleteButton.addEventListener("click", () => {
modifyElement(deleteButton);
});
buttonsCon.appendChild(deleteButton);
div.appendChild(buttonsCon);
listCard[0].appendChild(div);
hideQuestion();
}
//Modify Elements
const modifyElement = (element, edit = false) => {
let parentDiv = element.parentElement.parentElement;
let parentQuestion = parentDiv.querySelector(".question-div").innerText;
if (edit) {
let parentAns = parentDiv.querySelector(".answer-div").innerText;
answer.value = parentAns;
question.value = parentQuestion;
disableButtons(true);
}
parentDiv.remove();
};
//Disable edit and delete buttons
const disableButtons = (value) => {
let editButtons = document.getElementsByClassName("edit");
Array.from(editButtons).forEach((element) => {
element.disabled = value;
});
};
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys. So if you have queries, suggestions, or feedback, you can comment below.
Happy Coding!
Can I use this on my website?