developers-calculator

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #golang #rust #linux #docker #macos #windows #kubernetes #awesome-list #pytorch

developers-calculator

(★ 12)

this is a all in one calculator has 3 modes normal + scientific + programmers/ developers calculations

developers-calculator Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🚀 CYBER CALC | Advanced Computation System

[![Live Demo](https://img.shields.io/badge/🌐_LIVE_DEMO-00D4FF?style=for-the-badge&logoColor=white)](https://developers-calculator.netlify.app)
[![GitHub Repo](https://img.shields.io/badge/📦_GITHUB-9933FF?style=for-the-badge&logo=github&logoColor=white)](https://github.com/koushik4475/developers-calculator.git)
![Status](https://img.shields.io/badge/STATUS-LIVE-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)

**The Ultimate Calculator with Futuristic 3D Animations & Multi-Mode Calculations**

[✨ Features](#-features) • [🎨 Modes](#-calculator-modes) • [💻 Tech Stack](#-tech-stack) • [🚀 Quick Start](#-quick-start) • [📸 Screenshots](#-screenshots)

</div>

---

## ✨ Features

### 🎮 Visual Experience
- 🌌 **3D Particle Background** with Three.js
- 🎨 **Cyberpunk Theme** with neon gradients
- ✨ **Animated UI Elements** 
- 🌈 **Smooth Transitions** at 60 FPS
- 💫 **Glowing Effects** and shadows
- 📱 **Fully Responsive** design

</td>
<td width="50%">

### ⚡ Powerful Features
- 🔢 **3 Calculation Modes** in one
- 🔄 **Real-time Base Conversion**
- ⚙️ **Bitwise Operations**
- 📐 **Scientific Functions**
- 🎯 **Accurate Computations**
- 🚀 **Lightning Fast** performance

</td>
</tr>
</table>

---

## 🎨 Calculator Modes

### 1️⃣ BASIC MODE
<details open>
<summary><b>Click to expand - Perfect for everyday calculations</b></summary>
<br>

#### Features:
- ➕ **Addition** - Simple and fast
- ➖ **Subtraction** - Clean interface  
- ✖️ **Multiplication** - Instant results
- ➗ **Division** - Error handling
- 🔢 **Decimal Support** - Precise calculations
- 🗑️ **Clear & Backspace** - Easy corrections

</details>

---

### 2️⃣ SCIENTIFIC MODE
<details open>
<summary><b>Click to expand - Advanced mathematical operations</b></summary>
<br>

#### 📐 Trigonometric Functions (Input in Degrees)
```
sin  cos  tan  |  asin  acos  atan
```

#### 🔬 Advanced Functions
| Function | Symbol | Description |
|----------|--------|-------------|
| **Square Root** | √ | Calculate square roots |
| **Power** | x^y | Exponentiation |
| **Logarithm** | log | Base-10 logarithm |
| **Pi** | π | Pi constant (3.14159...) |
| **Euler** | e | Euler's number (2.71828...) |
| **Factorial** | x! | Factorial calculation |

</details>

---

### 3️⃣ PROGRAMMER MODE
<details open>
<summary><b>Click to expand - Essential tools for developers</b></summary>
<br>

#### 🔢 Multi-Base Support

<table>
<tr>
<th>Base</th>
<th>Range</th>
<th>Example</th>
<th>Use Case</th>
</tr>
<tr>
<td><b>HEX</b></td>
<td>0-9, A-F</td>
<td><code>FF</code></td>
<td>Memory addresses, colors</td>
</tr>
<tr>
<td><b>DEC</b></td>
<td>0-9</td>
<td><code>255</code></td>
<td>Standard calculations</td>
</tr>
<tr>
<td><b>OCT</b></td>
<td>0-7</td>
<td><code>377</code></td>
<td>File permissions</td>
</tr>
<tr>
<td><b>BIN</b></td>
<td>0-1</td>
<td><code>11111111</code></td>
<td>Low-level programming</td>
</tr>
</table>

#### ⚙️ Bitwise Operations

```javascript
AND  →  Bitwise AND operation (a & b)
OR   →  Bitwise OR operation (a | b)
XOR  →  Bitwise XOR operation (a ^ b)
NOT  →  Bitwise NOT operation (~a)
<<   →  Left Shift (a << n)
>>   →  Right Shift (a >> n)
MOD  →  Modulo operation (a % b)
```

#### 📊 Real-time Conversion Display
> Automatically shows the current value in **all four bases** simultaneously!

**Example:**
```
HEX: FF
DEC: 255
OCT: 377
BIN: 1111 1111
```

</details>

---

## 💻 Tech Stack

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Three.js](https://img.shields.io/badge/Three.js-000000?style=for-the-badge&logo=three.js&logoColor=white)
![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)

</div>

### 🛠️ Built With:

- **HTML5** - Semantic structure
- **CSS3** - Glassmorphism, animations, gradients
- **Vanilla JavaScript** - Pure JS for optimal performance
- **Three.js (r128)** - 3D particle system and wireframe geometries
- **Netlify** - Fast deployment & hosting

---

## 🚀 Quick Start

### 📦 Installation

```bash
# Clone the repository
git clone https://github.com/koushik4475/developers-calculator.git

# Navigate to project directory
cd developers-calculator

# Open in browser
# Simply open index.html in your favorite browser
```

### 🔥 Using Live Server (Recommended)

```bash
# If you have VS Code with Live Server extension
1. Open the folder in VS Code
2. Right-click on index.html
3. Select "Open with Live Server"
```

### 🐍 Using Python

```bash
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Open: http://localhost:8000
```

### 📦 Using Node.js

```bash
# Install http-server globally
npm install -g http-server

# Run server
http-server

# Open: http://localhost:8080
```

---

## 🎯 Usage Guide

### Basic Mode
1. Click **Basic** mode button
2. Enter numbers using keypad
3. Select operation (+, -, ×, ÷)
4. Press **=** to calculate

### Scientific Mode
1. Switch to **Scientific** mode
2. Enter a number
3. Click any function (sin, cos, log, etc.)
4. **Note:** Trigonometry uses degrees

### Programmer Mode
1. Select **Programmer** mode
2. Choose base (HEX, DEC, OCT, BIN)
3. Enter values with allowed digits
4. View automatic conversions
5. Use bitwise operations

---

## 📸 Screenshots

### 🌟 Beautiful Cyberpunk Interface

<table>
<tr>
<td width="33%">
<img src="https://github.com/user-attachments/assets/20037cec-695f-4d00-917b-22ca23a82303" alt="Basic Mode" style="border-radius:10px">
<p align="center"><b>Basic Mode</b></p>
</td>
<td width="33%">
<img src="https://github.com/user-attachments/assets/2504f883-bf36-49dd-b2e8-24f582e665d2" alt="Scientific Mode" style="border-radius:10px">
<p align="center"><b>Scientific Mode</b></p>
</td>
<td width="33%">
<img src="https://github.com/user-attachments/assets/833d5b61-f6df-40ce-9965-5dc0081da966" alt="Programmer Mode" style="border-radius:10px">
<p align="center"><b>Programmer Mode</b></p>
</td>
</tr>
</table>

</div>

---

## 🎨 Design Highlights

### 🌌 3D Background
- **1500 particles** (desktop)
- **400 particles** (mobile)
- Rotating torus geometry
- Spinning octahedron
- Pulsing sphere wireframes

</td>
<td width="50%">

### ✨ Interactive UI
- Button press animations
- Hover effects with shine
- Smooth transitions
- Real-time display updates
- Glowing borders

</td>
</tr>
</table>

---

## 🔮 Future Enhancements

- [ ] Dark/Light theme toggle
- [ ] History and memory functions
- [ ] Keyboard shortcuts support
- [ ] More scientific constants
- [ ] Custom color themes
- [ ] Export calculation history
- [ ] Unit conversions
- [ ] Graph plotting mode

---

## 👨‍💻 Developer

### **KOUSHIK HY**

<img src="https://user-images.githubusercontent.com/74038190/212284087-bbe7e430-757e-4901-90bf-4cd2ce3e1852.gif" width="30"> **Full Stack Developer & Creative Coder** <img src="https://user-images.githubusercontent.com/74038190/212284087-bbe7e430-757e-4901-90bf-4cd2ce3e1852.gif" width="30">

<br>

[![Portfolio](https://img.shields.io/badge/🌐_Portfolio-00D4FF?style=for-the-badge&logoColor=white)](https://koushikhy.netlify.app)
[![GitHub](https://img.shields.io/badge/📦_GitHub-9933FF?style=for-the-badge&logo=github&logoColor=white)](https://github.com/koushik4475)
[![Email](https://img.shields.io/badge/📧_Email-FF0099?style=for-the-badge&logo=gmail&logoColor=white)](mailto:koushikhy@example.com)

<br>

### 🚀 Tech Stack & Skills

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=node.js&logoColor=white)
![Three.js](https://img.shields.io/badge/Three.js-000000?style=flat-square&logo=three.js&logoColor=white)

<br>

### 📊 GitHub Stats

<br>

### 🏆 GitHub Trophies

<br>

**Built with 💜 and lots of ☕**

</div>

---

## 📄 License

This project is open source and available under the **MIT License**.

---

## 🌟 Support

### If you like this project, please give it a ⭐ on GitHub!

[![GitHub stars](https://img.shields.io/github/stars/koushik4475/developers-calculator?style=social)](https://github.com/koushik4475/developers-calculator/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/koushik4475/developers-calculator?style=social)](https://github.com/koushik4475/developers-calculator/network/members)
[![GitHub watchers](https://img.shields.io/github/watchers/koushik4475/developers-calculator?style=social)](https://github.com/koushik4475/developers-calculator/watchers)

### 🚀 [TRY CYBER CALC NOW!](https://developers-calculator.netlify.app) 🚀

</div>

developers-calculator

developers-calculator Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

developers-calculator

developers-calculator Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README