Responsive Calculator with Multiple Themes

Just completed a challenge from Frontend Mentor – a responsive calculator with multiple themes! I aimed to replicate the design as faithfully as possible, showcasing my frontend skills in action. 💻

Demo
Introduction
Screen Recording
Features
Technologies Used
How to Use
Themes
Project Structure
About Me
Get in Touch
Designed and Developed by

🚀 Demo

Check out the live demo of the Responsive Calculator with Multiple Themes: Calculator Demo

Introduction

The Responsive Calculator with Multiple Themes is a frontend project that replicates a calculator design from Frontend Mentor. It demonstrates my frontend development skills by creating a fully functional and responsive calculator. This project is designed to provide a user-friendly interface and multiple themes for customization.

Screen Recording

Features

Responsive Design: The calculator is responsive, ensuring it looks and functions well on various screen sizes and devices.
Multiple Themes: Users can choose from different themes to customize the calculator's appearance.
Basic Operations: Perform basic arithmetic operations such as addition, subtraction, multiplication, and division.
Error Handling: The calculator handles errors gracefully and displays "Error" for invalid inputs.

Technologies Used

HTML
CSS
JavaScript

How to Use

Open the live demo link: Calculator Demo
Use the numeric keys to input numbers.
Click the operation keys (+, -, *, /) to select the desired arithmetic operation.
Click the equal (=) key to calculate the result of the entered expression.
The output will be displayed in the output area.

Themes

The calculator provides three themes for customization:

Theme 1: A dark theme with contrasting colors.
Theme 2: A light theme with softer colors.
Theme 3: A high-contrast dark theme.

Project Structure

The project consists of the following files:

index.html: The HTML structure of the calculator.
index.css: The stylesheet that defines the visual appearance of the calculator for different themes.
index.js: The JavaScript code responsible for the calculator's functionality, including theme selection and arithmetic operations.

🚀 About Me

👋 Hello there! I'm Muhammad Abrar Khan, a dynamic junior software developer and enthusiastic front-end specialist. Currently pursuing a BSc in Computer Science at UBIT, Karachi University, my passion lies in crafting captivating web experiences. Proficient in Python, HTML, CSS, and JavaScript, I've delivered full-stack projects while specializing in front-end development.

I'm fueled by a continuous quest for knowledge, consistently refining my skills through certifications and hands-on projects. From content creation to virtual assistance, my journey has been diverse, nurturing my creativity and honing my problem-solving abilities. Let's connect and embark on an exciting journey into the ever-evolving realm of software together!