SudoKMaar / formula-inator

Ah, Formula-inator, my latest and greatest creation! This web-based calculator application is built with React, so it's sure to be responsive and work well across different devices and screen sizes. And because it supports both light and dark modes, users can choose their preferred visual theme.

Home Page:https://formula-inator.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Formula-inator

Ah, Formula-inator, my latest and greatest creation! This web-based calculator application is built with React, so it's sure to be responsive and work well across different devices and screen sizes. And because it supports both light and dark modes, users can choose their preferred visual theme. But what really sets Formula-inator apart from the competition is its user-friendly interface. With its simple and intuitive design, even the most mathematically challenged can perform basic arithmetic calculations with ease. So what are you waiting for? Go forth and conquer the world with the power of Formula-inator! Mwahahaha! Just wait until Perry the Platypus hears about this! Bwahahaha!

Hosted online at formula-inator

Features

  • Perform Basic Arithmetic Operations: The Formula-inator supports addition, subtraction, multiplication, and division. Users can input numbers and select the desired arithmetic operation through intuitive buttons on the interface. The calculator performs the calculations in real-time and displays the result instantly.

  • Clear Input and Reset: The app allows users to clear the input and reset the calculator with a single click. The "AC" (All Clear) button wipes the current input and resets the calculator, providing a fresh start for new calculations.

  • Light and Dark Modes: Formula-inator offers both light and dark modes, catering to users' preferences and enhancing the user experience. By clicking the theme button, users can switch between the light mode, which features a bright and clean interface, and the dark mode, which provides a visually appealing and comfortable experience in low-light environments.

  • Real-Time Result Display: As users enter numbers and perform calculations, the Formula-inator provides a real-time display of the calculated result. The result is shown in the monitor section of the interface, allowing users to see the outcome of their calculations immediately.

Installation and Usage

Enter this fantastical realm of Formula-inator by following these steps:

  1. Clone the repository to your computing device, and let the magic commence.
git clone https://github.com/SudoKMaar/formula-inator.git
  1. Traverse to the enchanted project directory.
cd formula-inator
  1. Invoke the incantation to install the necessary dependencies
yarn
  1. Ignite the spark of development with the following spell.
yarn start
  1. Open your web browser and traverse the mystical realm of Formula-inator at http://localhost:3000.

Usage

  • Enter numbers by clicking the corresponding buttons on the calculator interface. The numbers will be displayed in the input area.
  • Select the arithmetic operator (+, -, *, /) to perform the desired calculation.
  • The result of the calculation will be displayed in real-time in the monitor section of the interface.
  • Click the "AC" button to clear the input and reset the calculator.
  • To switch between light and dark modes, click the theme button (a sun/moon icon). This allows you to customize the visual appearance of the calculator based on your preference and environment.

Technologies Used

  • React: Formula-inator is built using React, a popular JavaScript library for building user interfaces. React provides a component-based architecture and allows for efficient rendering and state management.

  • SCSS: The Formula-inator's styling and layout are implemented using SCSS (Sass), a powerful CSS preprocessor. SCSS enhances CSS by providing features like variables, nesting, mixins, and more, which make styling and maintaining the calculator's stylesheets more efficient and maintainable.

  • React Icons: The React Icons library is employed to include icons in the application, such as the sun and moon icons used for the light and dark mode toggle button.

  • Classnames: The Classnames library is utilized to apply conditional CSS class names to the calculator components. This allows for dynamic styling based on the current theme (light or dark mode).

Contributing

Join the ranks of fellow wizards and enchantresses by contributing to the magical realm of Formula-inator! Should you stumble upon any issues or possess brilliant insights for improvement, do not hesitate to unfurl your spellbinding ideas. Open an issue or submit a pull request, and together, we shall elevate the Formula-inator calculator to new heights!

License

This project is licensed under the MIT License. You are free to use, modify, and distribute the codebase in accordance with the terms of this license.

Acknowledgments

  • The Formula-inator was inspired by various online calculator designs and user interface patterns. We thank the creators of those calculators for their inspiration and innovative ideas.

About

Ah, Formula-inator, my latest and greatest creation! This web-based calculator application is built with React, so it's sure to be responsive and work well across different devices and screen sizes. And because it supports both light and dark modes, users can choose their preferred visual theme.

https://formula-inator.netlify.app/

License:MIT License


Languages

Language:JavaScript 66.9%Language:HTML 15.1%Language:SCSS 13.4%Language:CSS 4.6%