Skip to content

Ashutosh0x/Animated-Calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published