Skip to content

Latest commit

 

History

History
61 lines (45 loc) · 2.07 KB

README.md

File metadata and controls

61 lines (45 loc) · 2.07 KB
Raw

Flashcard Study Tool

A responsive and interactive flashcard study tool built with React.js, JavaScript, HTML, CSS, designed to help users learn and practice effectively. This application allows users to choose from a variety of questions and answers, flip flashcards, and interact with options seamlessly.

image

Features

  • Dynamic API Integration: Fetches trivia questions and answers from the Open Trivia Database (https://opentdb.com/).
  • Responsive Design: Adapts to various screen sizes using a grid layout.
  • Interactive Flip Animation: Flip cards to reveal the answers with smooth 3D animations.
  • Customizable Options: Select categories and the number of questions dynamically.
  • Add Custom Flashcards: Optionally create your own flashcards with custom questions and answers.
  • Clear Flashcards Feature: Reset the flashcard deck with a single click for a fresh study session.
  • Error Handling: Gracefully manages incomplete or invalid inputs, ensuring a smooth user experience.
  • Lightweight Styling: Custom CSS styling for a clean, user-friendly interface.

Technologies Used

  • React.js: Frontend library for building user interfaces.
  • Axios: HTTP client for fetching data from APIs.
  • HTML5/CSS3: For structuring and styling the app.
  • JavaScript (ES6+): For logic and interactivity.

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/flashcard-study-tool.git

  2. Navigate to project directory:

cd flashcard-study-tool
  1. Install dependencies:
npm install
  1. Start development server:
npm start

Usage

Open your browser and navigate to http://localhost:3000

How to Use

  1. Start the app and select a category and the number of questions.
  2. Click Generate to fetch flashcards.
  3. Click on a flashcard to flip it and reveal the answer.
  4. Use the interactive options for a quiz-like experience.

Contributing

All contributions are welcome.