27/07/21 • Frontend

Cal-ch the calculator

This project is a kickstart to my Javascript learning, in addition to my front-end journey where I wanted to incorporate a fun way to calculate simple equations. Along the process, I broadened my skillsets when handling packages in nodeJS such as tilt.js. Tilt.js is a smooth 3D tilt javascript library that is lightweight and runs on 60FPS, offering users to play around with perspectives on mouse hover.

The calculator has a minimalistic interface and is set out by a 4 by 5 grid. I made the buttons "c" (clear) and "+" (addition) be 2 squares wide to emphasise it's importance and "power" compared to the other buttons which only takes up 1 square.

Calculator

It has been set out to be translucent which reflects the warm-pink background when tilted on mouse hover, from inspirations of a CD disk. Furtheremore, a shadow under the calculator has also been applied on the opposite side of mouse hover to give an effect that this calculator is floating on top of the background.

                        
VanillaTilt.init(document.querySelector(".container"), {
    max: 15,
    speed: 400,
    glare: true,
    "max-glare": 0.2,
});                     
                    

This project is open source and can be viewed using the steps I have provided on my github repository. The repository can be viewed here