The Calculator App is a simple web-based calculator that allows users to perform basic arithmetic operations. It's designed to provide a convenient tool for performing calculations quickly and easily.
Users should be able to:
- view the optimal layout for the site depending on their device's screen size;
- The calculator will display the result of the calculations in real-time.
- To reset the calculator, click the reset button
- Semantic HTML
- Modern Vanilla CSS
- TypeScript
- Astro - JavaScript Framework
- utilize TypeScript to add basic typing annotations;
- leverage Astro for static site generation (SSG) and deploy it on GitHub Pages;
- customize
<input type="range" />to have a consistent appearance across all major browsers; - benefit modern Vanilla CSS features such as nesting, custom media queries, media query ranges, and cascade layers using Lightning CSS;
- receive an image from the user through drag & drop or the prompt widnow; then, preview it on the page;
- apply CSS filters, rotations, and flips on an image;
- draw a canvas based on an image and let the user download it as a new image file.
1. First, you need to clone the project:
git clone -b master https://github.com/zahrahasti/calculator.gitAlternatively, you can copy the source of the project directly to your local environment using Degit:
pnpm i -g degit
degit https://github.com/zahrahasti/calculator.git new-project-folder2. Then, install required packages:
pnpm i3. Finally, run the dev script to start the dev server and locally preview the project in development mode:
pnpm run devBefore deploying the project or creating a new pull request, run the following commands and make sure there are no errors:
pnpm run format
pnpm run build