Typescript Calculator

---

This project was created as part of FreeCodeCamp's Front End Development Libraries certification. For more details, check out the project description file.

📝 Table of Contents

• About
• Demo
• Features
• Technologies Used
• Getting Started
• Project Structure
• Contributing
• Other FCC Projects
• Authors
• License

ℹ️ About

A simple calculator built with React, TypeScript, and Tailwind CSS. Perform simple calculation operations with a beautiful interface.

🎥 Demo

✨ Features

• 🔢 Basic arithmetic operations (add, subtract, multiply, divide)
• 🌓 Dark/Light mode with system preference detection
• ✨ Beautiful glassmorphism design
• 💅 Smooth animations and transitions
• ⌨️ Keyboard input support

🛠️ Technologies Used

• React v17 (as per FreeCodeCamp requirements)
• TypeScript for static typing
• Tailwind CSS for styling
• Vite for fast development and bundling
• ESLint for code linting and quality control
• Prettier for code formatting
• Lucide React for icons and symbols

🏁 Getting Started

Follow these steps to get a local copy up and running:

1. Prerequisites

• Node.js (version 12 or higher)
• npm (usually comes with Node.js)
• Git

2. Clone the Repository

git clone git@github.com:MohamedLamineF/JavaScriptCalculatorFCC.git

3. Navigate to the Project Directory

cd JavaScriptCalculatorFCC

4. Install Dependencies

npm install

5. Start the Development Server

npm run dev

🌳 Project Structure

src/
├── components/
│ ├── Button.tsx
│ ├── ButtonGrid.tsx
│ ├── Calculator.tsx
│ ├── Display.tsx
│ |── Layout/
│ |   ├── Header.tsx
│ |   └── Footer.tsx
│ └── UI/
│     └── ThemeToggle.tsx
├── handlers/
│ |── digitHandler.ts
│ |── evaluationHandler.ts
│ └── operationsHandler.ts
├── hooks/
│ |── useDarkMode.ts
│ └── useKeyboardInput.tsx
├── reducers/
│ └── calculatorReducer.ts
├── types/
│ └── index.ts
├── utils/
│ |── calculator.ts
│ └── operationsUtils.ts
|── App.tsx
└── main.tsx

🛠️ Contributing

We welcome contributions! If you have ideas for improving this project, please feel free to:

• Open an issue to suggest changes or report bugs.
• Submit a pull request with your improvements.

🎯 Other FCC Projects

Check out my other projects from the FreeCodeCamp Frontend Development Libraries certification:

• Random DZ Quote Machine
• Markdown Previewer
• Drum Machine
• 25 + 5 Clock

✍️ Authors

Made with ❤️ by Lamine 😛

License

This project is licensed under the MIT License - see the license file for details.