Design Flashcards with HTML, CSS, and JavaScript

Published on June 07, 2024

Hey everyone, welcome back to our channel! Today, we’re going to dive into creating a simple yet effective Flashcard App using the power of HTML, CSS, and JavaScript. Flashcards are a fantastic way to study and memorise information, and by the end of this tutorial, you’ll have your very own interactive flashcard application ready to use. So, let’s get started!

As you can see, I have a basic HTML structure set up here. We have our usual doctype declaration and HTML tags. The title of our page is “Flashcard App”.

Next, we have a meta tag for the viewport, which ensures that our app looks good and is responsive across different devices.

Here, we’re linking to Font Awesome’s stylesheet. Font Awesome provides us with some great icons that we’ll use for our app.

We’re also linking to a custom stylesheet called “style.css”. This is where we’ll define the styles for our flashcard app.

Inside the body tag, we have a container div that wraps our entire app. This helps keep our layout organised.

Here, we have a button with the id “add-flashcard”. This button will allow users to add new flashcards to their collection.

Next, we have a div with the id “card-con”. This is where our flashcards will be displayed.

Below that, we have a question container with the id “add-question-card“. This is a hidden container that will appear when users want to add a new flashcard.

Inside the question container, we have a close button and an error message. The error message will appear if users try to save a flashcard without filling out all the required fields.

We have two textareas inside the question container – one for the question and one for the answer. Users will type their questions and answers into these fields.

Finally, we have a save button that users will click to save their flashcard.

At the bottom of our HTML file, we’re linking to a JavaScript file called “script.js“. This is where we’ll write the code to make our flashcard app interactive.

CSS

Let’s dive into the CSS code and see how we’re styling our Flashcard App to make it user-friendly and attractive.

First, we have some global styles applied to all elements using the universal selector (*). We’re resetting the padding and margin to 0, setting the box-sizing to border-box for easier sizing calculations, and specifying the font-family as “Poppins” for a clean and modern look.

We’ve set the background colour of the body to a light grey (#ccc) to create a pleasant backdrop for our app.

Inside the .container class, we’re defining the width to be 90% of the viewport width (90vw) with a maximum width of 62.5em (roughly 1000px). This ensures that our app remains responsive and looks good on different screen sizes.

The .add-flashcard-con class styles the container for our “Add Flashcard” button. We’re aligning the button to the right and giving it some padding and styling to make it stand out.

We’ve styled the button element to have a solid background colour (#2a2a2a), white text colour, padding for better clickability, and rounded corners for a modern touch.

The #card-con class styles the container for our flashcards. We’ve added some margin at the top for spacing.

Here, we’re styling the container for adding new flashcards. It’s positioned absolutely in the centre of the screen, with a white background, rounded corners, and a subtle box shadow for depth.

We’re styling the error message to display in red if input fields are empty. The close button (with the class .fa-xmark) is positioned at the top right corner of the question container and styled with a red background and white colour.

Labels are styled with a dark blue colour for better readability. Textareas have consistent styling for width, padding, border, and border-radius. The focus state is highlighted with a darker border colour.

Similar to the “Add Flashcard” button, the save button is styled with a solid background colour, white text, padding, and rounded corners.

This styles the container for displaying multiple flashcards in a grid layout. It adds some padding and defines the grid columns for responsive layout.

Each individual card has a white background, subtle box shadow, padding, and rounded corners for a clean look.

We’re styling the show/hide buttons for each flashcard with a solid background colour, white text, padding, and rounded corners.

The edit and delete buttons are styled with transparent backgrounds, appropriate padding, font size, and colour for better visibility.

Finally, we have media queries to adjust the layout for smaller screens. This ensures that our app remains functional and visually appealing on devices of all sizes

JAVASCRIPT

Let’s dive into the JavaScript code and see how we’re bringing our Flashcard App to life with functionality!

We begin by selecting various DOM elements that we’ll be interacting with throughout our script. These include the main container, the add question card container, input fields for the question and answer, error message, the “Add Flashcard” button, and the close button for the question card.

We set up event listeners for the “Add Flashcard” button and the close button. When the “Add Flashcard” button is clicked, the main container is hidden, and the add question card container is displayed. The close button allows users to cancel adding a new flashcard and return to the main view.

The submitQuestion function handles the submission of a new flashcard. It checks if both the question and answer fields are filled out. If not, it displays an error message. Otherwise, it adds the new flashcard to the list and clears the input fields.

The viewList function dynamically creates a new card element and appends it to the list of flashcards. It displays the question and provides a “Show/Hide” button to reveal or hide the answer. Additionally, it adds edit and delete buttons for each flashcard.

The modifyElement function allows users to edit or delete existing flashcards. If the edit button is clicked, it populates the question and answer fields with the existing values, allowing users to modify them. The delete button removes the flashcard from the list.

The disableButtons function disables edit buttons while a flashcard is being edited to prevent conflicts.

And there you have it! We’ve just covered the JavaScript code that adds essential functionality to our Flashcard App. These interactive features empower users to seamlessly create, view, edit, and delete flashcards, elevating their learning experience. In our upcoming tutorial, we’ll delve into more advanced features and enhancements. Be sure to stay tuned for that! If you’re finding value in this video, don’t hesitate to subscribe to our channel and click the notification bell to stay updated with our latest content. Thank you for tuning in, and I look forward to seeing you in our next video!

Our Latest Blog

Build Strong Front-End Skills with the LSET Angular Developer Exam

Build Strong Front-End Skills with the LSET Angular Developer Exam

In today’s fast-paced digital world, front-end development is a crucial skill for building dynamic and...
Read More
Get Expert Help Anytime with HyperLearn from LSET

Get Expert Help Anytime with HyperLearn from LSET

Learning to code or solving technical challenges doesn’t have to be a lonely and frustrating...
Read More
Transform Your Coding Journey with HyperLearn by LSET

Transform Your Coding Journey with HyperLearn by LSET

In today’s fast-paced tech landscape, staying ahead in coding and software development is essential for...
Read More