https://github.com/itmtm/project-react-calculate

Simple calculator built with React, TypeScript
https://github.com/itmtm/project-react-calculate

interface javascript react scss usecallback useeffect usememo usestate

Last synced: about 1 month ago
JSON representation

Simple calculator built with React, TypeScript

• Host: GitHub
• URL: https://github.com/itmtm/project-react-calculate
• Owner: ITmTm
• Created: 2024-09-03T11:46:22.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-10T09:56:13.000Z (over 1 year ago)
• Last Synced: 2025-03-02T04:44:31.766Z (12 months ago)
• Topics: interface, javascript, react, scss, usecallback, useeffect, usememo, usestate
• Language: TypeScript
• Homepage: https://project-react-calculate.vercel.app
• Size: 1.06 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🧮 Calculator App

![Screenshot_3](https://github.com/user-attachments/assets/d7d44248-8353-4e27-8d62-4c67c509dae9)

## Calculator App – это простое, но мощное калькуляторное приложение, разработанное с использованием современных технологий, таких как React и TypeScript. Приложение поддерживает базовые арифметические операции и включает в себя удобный адаптивный интерфейс.



## 📝 Description

### Calculator App позволяет пользователям:

* Выполнять основные арифметические операции: сложение, вычитание, умножение и деление

* Обрабатывать десятичные числа и отрицательные значения

* Работать с адаптивным интерфейсом, который автоматически подстраивается под размер экрана

* Поддержка цифр до 16 знаков для точных вычислений

* Ввод чисел с автоматической подстройкой размера шрифта в зависимости от длины числа



## 🎯 Functions

### Calculator App позволяет пользователям:

* **Простой и чистый интерфейс** – Визуально привлекательный и понятный дизайн, подходящий для любых устройств.

* **Адаптивный интерфейс** – Шрифт на экране калькулятора автоматически меняется, чтобы вписываться в доступное пространство (реализовано с использованием `useRef` и `useEffect`).

* **Плавная обработка чисел** – Максимальная длина числа – 16 цифр, с автоматическим форматированием для тысяч.

* **Обработка ошибок деления на ноль** – В случае деления на ноль выводится сообщение "Can't divide by 0".

* **Интерактивные кнопки** – Реализована обработка всех основных арифметических операций, включая работу с отрицательными и десятичными числами.



## ⚙️ Technologies

[![ReactJS](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org)  

[![JavaScript](https://img.shields.io/badge/JavaScript-yellow?style=for-the-badge&logo=JavaScript&logoSize=%20)](https://www.javascript.com/)  

[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org)  



## 📚  Using Libraries

[![SASS](https://img.shields.io/badge/-blue?style=social&logo=sass&label=SASS%20(SCSS))](https://sass-lang.com/)  



## 🧪 Testing

* Run the tests:

* `npm run test`



## 🚀 Getting Started

Tools needed to run this app: `node` and `npm`

- `npm install` to install dependencies

- `npm start` to run the app

- Go to `http://localhost:3000`