0% found this document useful (0 votes)

11 views

FlashCard Project

FlashCard Report Mast hai!!

Uploaded by

yashsangale16

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

11 views

FlashCard Project

FlashCard Report Mast hai!!

Uploaded by

yashsangale16

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 29

1.

Introduction
The Flash-Card project is a web-based application that
allows users to create, view, edit, and delete Flash-
Cards. It is designed to help users in their learning
process by providing a simple, user-friendly platform
to store and manage questions and answers. The
project is built using HTML, CSS, and JavaScript, and
offers features such as adding Flash-Cards,
showing/hiding answers, and editing or deleting
existing cards.

Page | 1
2. Flowchart

A flowchart can visually represent the flow of actions in the application:

1. User clicks "Add Flash-Card" ->
2. Display the form to enter a question and answer ->
3. User submits the form ->
4. Flash-Card gets created and displayed ->
5. User can:
- Edit the card (loop to Step 2)
- Delete the card
- Show/hide the answer.

Page | 2
3. Algorithm

1. Initialize the Environment:

- Load the page and initialize elements like buttons
and containers.

2. Add Flash-Card:
- When the user clicks the "Add Flash-Card" button,
hide the main container and display the input form for
adding a Flash-Card.

3. Submit Flash-Card:
- Validate that both the question and answer fields
are filled.
- If valid, add the Flash-Card to the card container,
hide the input form, and display the main container.

4. Show/Hide Answer:
- Toggle the display of the answer text when the user
clicks the "Show/Hide" link on a Flash-Card.

5. Edit Flash-Card:

Page | 3
- Allow the user to edit an existing Flash-Card by
repopulating the form with the question and answer,
and removing the original card from the display.

6. Delete Flash-Card:
- Remove the selected Flash-Card when the user
clicks the delete button.
HTML CODE:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>FlashCard</title>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.6.0/css/all.min.css" class="rel">

Page | 4
500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;
1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">

<body>
<div class="container">
<div class="add-flashcard-con">
<button id="add-flashcard">Add
FlashCard</button>
</div>
<div class="card-con">
<div class="card-list-con"></div>
</div>

<!-- Input For user to fill the question and answer --

>
Page | 5
<div class="question-container hide" id="add-
question-card">
<h2>Add FlashCard</h2>
<div class="wrapper">

<div class="error-con">
<span class="hide" id="error">Input Fields
cannot be Empty...</span>
</div>

<i class="fa-solid fa-xmark"
id="close-btn"></i>
</div>
<label for="question">Question: </label>
<textarea name="" id="question" class="input"
placeholder="Enter Question here..."
rows="2"></textarea>
<label for="answer">Answer: </label>
<textarea name="" id="answer" class="input"
rows="2" placeholder="Enter Answer Here...">
</textarea>
<button id="save-btn">Save</button>
</div>
</body>
<script src="FlashCard.js"></script>

Page | 6
</html>

CSS CODE:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
;

body {
background-color: #f7f9fd;
}

Page | 7
.container {
width: 90vw;
max-width: 62.5em;
position: relative;
margin: auto;

.add-flashcard-con {
display: flex;
justify-content: center;
padding: 1.2em 1em;
}

button {
border: none;
outline: none;
cursor: pointer;

.add-flashcard-con button {
font-size: 2em;
background-color: #587ef4;
color: #ffffff;
padding: 10px;

Page | 8
font-weight: 500;
border-radius: 20px;

#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);

Page | 9
.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;
}

Page | 10
.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;

Page | 11
resize: none;

textarea:not(:last-child) {
margin-bottom: 1.2em;

textarea:focus {
border-color: #363d55;
}

#save-btn {
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;

Page | 12
}

.card {
background-color: #ffffff;
box-shadow: 0 0.4em 1.2em rgba(28, 0, 80, 0.80);
padding: 1.2em;
border-radius: 0.4em;
}

.question-div,
.answer-div {
text-align: justify;
}

.question-div {
margin-bottom: 0.5em;
font-weight: 500;
color: #414a67;

.show-hide-btn {
display: block;
background-color: #587ef4;
color: #ffffff;
text-decoration: none;
text-align: center;

Page | 13
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;

Page | 14
}

@media screen and (max-width: 800px) {

.card-list-container {
grid-template-columns: 1fr 1fr;
gap: 0.5em;
}
}

@media screen and (max-width: 4050px) {

body {
font-size: 14px;
}

.card-list-container {
grid-template-columns: 1fr;
gap: 1.2em;

}
}
JAVASCRIPT CODE:

const container =
document.querySelector(".container");
const addQuestionCard =
document.getElementById("add-question-card");

Page | 15
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 the 'Add

Flashacard' button
addQuestion.addEventListener("click", () => {
container.classList.add("hide");
question.value = "";
answer.value = "";
addQuestionCard.classList.remove("hide");
});

Page | 16
// Hiding the Created FlashCard
closeBtn.addEventListener("click", () => {
container.classList.remove("hide");
addQuestionCard.classList.add("hide");
if (editBool) {
editBool = false;
submitQuestion()
}
});

// Submiting the Question

cardButton.addEventListener("click", () => {

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(tempQuestion, tempAnswer);
question.value = "";
Page | 17
answer.value = "";
}
});

// Generating a Card
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"> ${tempQuestion} </p>`

//Answer
var displayAnswer =
document.createElement("p");
displayAnswer.classList.add("answer-div",
"hide");
displayAnswer.innerText = tempAnswer;
div.appendChild(displayAnswer);

Page | 18
//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);

// Editing the Show/Hide Button

let buttonsCon =
document.createElement("div");
buttonsCon.classList.add("button-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)

Page | 19
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"></i>`
deleteButton.addEventListener("click", () =>
{
modifyElement(deleteButton);
});
buttonsCon.appendChild(deleteButton);

div.appendChild(buttonsCon);

listCard[0].appendChild(div);
hideQuestion();
}

Page | 20
// Function to Hide question card
function hideQuestion() {
container.classList.remove("hide");
addQuestionCard.classList.add("hide");
}

// 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();

Page | 21
};

// Disable edit and delete buttons

const disableButtons = (value) => {
let editButtons =
document.getElementsByClassName("edit");

Array.from(editButtons).forEach((element) =>
{
element.disabled = value;
});
};

Page | 22
HTML CODE:

Page | 23
CASCADING STYLE SHEET (CSS) CODE:

Page | 24
JAVASCRIPT CODE:

Page | 25
4. Key Features

- Add Flash-Card: Allows users to add a new Flash-

Card with a question and answer.

- Show/Hide Answer: Users can toggle between

showing and hiding the answer of a Flash-Card.

- Edit Flash-Card: Provides an option to modify the

content of an existing Flash-Card.

- Delete Flash-Card: Users can delete a Flash-Card if it

is no longer needed.

Page | 26
5. Implementation

The Flash-Card project is implemented using three

core web technologies: HTML, CSS, and JavaScript.
Each of these technologies plays an important role in
making the application functional and user-friendly:

- HTML (Hypertext Markup Language) provides the

structure of the web page. It defines elements such as
buttons, text areas for entering questions and answers,
and containers for displaying Flash-Cards.

- CSS (Cascading Style Sheets) is responsible for the

styling and layout of the application. It ensures that
the Flash-Cards are visually appealing, the buttons are
well-positioned, and the overall design is user-friendly.
CSS also makes the application responsive, meaning it
adapts to different screen sizes like smartphones and
laptops.

Page | 27
- JavaScript brings interactivity to the project. It
controls the functionality that allows users to add new
Flash-Cards, edit or delete them, and show or hide
answers. JavaScript ensures that the web page
responds to user actions smoothly and dynamically.

6. Conclusion
The Flash-Card project effectively demonstrates how
basic web technologies can be used to build a useful
and interactive learning tool. By leveraging HTML,
CSS, and JavaScript, users can create customizable
Flash-Cards to enhance their study sessions, adding
flexibility and efficiency to their learning experience.

Page | 28
7. Outcomes
- Successfully built an interactive Flash-Card
application.
- Gained experience in DOM manipulation, event
handling, and UI design with HTML, CSS, and
JavaScript.
- Created a platform to enhance learning by allowing
the management of custom questions and answers.

Page | 29