Skip to content

Develop a modern calculator interface using Tailwind CSS for clean, responsive design. Tailwind's utility-first approach ensures efficient styling and seamless adaptability across devices.

License

Notifications You must be signed in to change notification settings

ELHARCHAOUI-SIFEDDINE/Tailwind-Calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind Calculator 🧮

Welcome to the Tailwind Calculator, a web-based tool for performing basic arithmetic operations. This project utilizes HTML, CSS (Tailwind CSS), and JavaScript to create an intuitive interface with responsive design, allowing users to perform calculations effortlessly.

Demo 🕹️

Check out the live demo here.

Features 🚀

  • Arithmetic Operations: Perform addition, subtraction, multiplication, and division.
  • Interactive Interface: Dynamic styling using Tailwind CSS for a modern user experience.
  • History Tracking: View past calculations within the session.
  • Keyboard Support: Optionally use keyboard inputs for calculations.
  • Responsive Design: Optimized layout across various devices.

Technologies Used 🛠️

  • HTML
  • CSS (Tailwind CSS)
  • JavaScript

How to Use 📝

  1. Input Operations: Click on the calculator buttons to input numbers and operations.
  2. Perform Calculation: Press the "=" button to see the result of your operation.
  3. Clear or Delete: Use the "Clear" button to reset the current input or "Delete" button to remove the last input.
  4. Keyboard Shortcuts: Optionally use keyboard keys (e.g., numbers, operators, Enter) for faster input.

Files 🗂️

  • index.html: Contains the structure of the calculator application.
  • script.js: JavaScript file containing the calculator logic.

Code Overview 🧩

HTML Structure

The HTML structure includes elements for the calculator display, buttons for numbers and operations, and sections for history tracking.

JavaScript Logic

The JavaScript logic handles user inputs, performs calculations based on the selected operations, updates the display with results, and manages history tracking.

Screenshot 📸

calc

Setup Instructions 🛠️

  1. Clone the repository:

    git clone https://github.com/ELHARCHAOUI-SIFEDDINE/Tailwind-Calculator.git
  2. Navigate to the project directory:

    cd Tailwind-Calculator
  3. Open index.html in your preferred web browser to start using the calculator.

Contributing 🤝

Contributions are welcome! If you have suggestions for improvements or new features, please feel free to submit a pull request.

License 📜

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact 📧

For any inquiries or feedback, please contact elharchaouisifeddine@gmail.com.

About

Develop a modern calculator interface using Tailwind CSS for clean, responsive design. Tailwind's utility-first approach ensures efficient styling and seamless adaptability across devices.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published