Ashutosh0x / Animated-Calculator

A sleek and interactive glassmorphic calculator with tilt and glare effects.

Home Page:https://glassmorphic-animated-calculator.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Animated Glassmorphic Calculator

This is a stylish and interactive calculator designed with a glassmorphic aesthetic. It features a sleek interface with a glass-like appearance, providing an engaging user experience. The calculator allows users to perform basic arithmetic operations and includes additional features like glare effect and gyroscope functionality for an enhanced experience.

image

Features

  • Glassmorphic Design: The calculator has a modern glass-like design, providing a visually appealing interface.
  • Basic Arithmetic Operations: Users can perform addition, subtraction, multiplication, and division operations conveniently.
  • Clear Functionality: Clear button (c) to reset the input field.
  • Decimal and Double Zero Input: Users can input decimal numbers and double zeros.
  • Dynamic Transition Effects: Smooth transition effects for a polished user experience.
  • Glare Effect: Includes a glare effect for added visual appeal.
  • Gyroscope Functionality: Utilizes gyroscope sensors for interactive tilting effects.
  • Responsive Design: The calculator is responsive and adapts to different screen sizes.

Usage

  1. Enter numbers and operators using the provided buttons.
  2. Use the = button to compute the result of the expression.
  3. To clear the input field, click on the c button.
  4. Enjoy the dynamic glassmorphic design with tilt and glare effects.

Installation

  1. Clone the repository or download the source files.
  2. Open index.html in a web browser.

Dependencies

  • Node Waves: A lightweight JavaScript library for creating click effects on buttons.

Implementation Details

  • The calculator is built using HTML, CSS, and JavaScript.
  • CSS styles are provided in the style.css file.
  • JavaScript functionality is implemented in the app.js file.
  • The VanillaTilt library is used for the glassmorphic tilt effect.
  • Gyroscope functionality is enabled using the device's gyroscope sensors.
  • Glare effect is implemented for enhanced visual appeal.

Credits

  • VanillaTilt: Library for adding tilt effect to elements.
  • Node Waves: JavaScript library for click effects.

About

A sleek and interactive glassmorphic calculator with tilt and glare effects.

https://glassmorphic-animated-calculator.vercel.app/


Languages

Language:JavaScript 76.9%Language:HTML 14.6%Language:CSS 8.6%