Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zun-liang/fcc-javascript-calculator

Solution to freeCodeCamp Challenge Build a JavaScript Calculator
https://github.com/zun-liang/fcc-javascript-calculator

css html javascript react vite

Last synced: 9 days ago
JSON representation

Solution to freeCodeCamp Challenge Build a JavaScript Calculator

Awesome Lists containing this project

README

        

# freeCodeCamp - Build a Javascript Calculator

This is a solution to the [Build a Javascript Calculator challenge](https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator) on freeCodeCamp.

## Table of contents

- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resources](#useful-resources)
- [Author](#author)

## Overview

### The challenge

Users should be able to:

- View the optimal layout for the site depending on their device's screen size
- Perform addition, subtraction, multiplication, and division

### Screenshot



screenshot desktop default

### Links

- Live Site URL: [here](https://zun-liang.github.io/fcc-javascript-calculator/)

## My process

### Built with

- HTML
- CSS
- Flexbox
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Styled Components](https://styled-components.com/) - For styles
- [Vite](https://vitejs.dev/)

### What I learned

- [eval()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)

### Helpful Resources

- [vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
- [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
- [CDN Fonts](https://www.cdnfonts.com/)
- [Using Font Files in React](https://darshnarekha09.medium.com/adding-local-fonts-in-react-9d1466952042)
- [eval](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)

## Author

- Website - [Zun Liang](https://zunldev.com/)
- GitHub - [@zun-liang](https://github.com/zun-liang)
- Frontend Mentor - [@zun-liang](https://www.frontendmentor.io/profile/zun-liang)
- freeCodeCamp - [@zun-liang](https://www.freecodecamp.org/zun-liang)