Skip to content

README.md

Latest commit

 

History

History
172 lines (121 loc) · 4.73 KB

README.md

File metadata and controls

172 lines (121 loc) · 4.73 KB

Typescript Calculator

Typescript Calculator

Status

GitHub Issues

GitHub Pull Requests

GitHub License

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

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

🎥 Demo

Typescript Calculator

✨ 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:

✍️ Authors

Made with ❤️ by Lamine 😛

License

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