In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

Overview

Assignment

In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

calculator example

As you can tell the current layout needs a lot of styling work. Modify the layout, components, and calculator logic however you want. Everything is free game!

Deliverable

  1. Style the calculator however you want. Feel free to use any colors, layout, and animations that you would like. Be as creative as you want.
  2. Define all PropTypes for Number, Operator, and Screen components. If you add more components make sure to define the PropTypes.
  3. Deploy your application using any method you want (repo is setup for Github actions). Add the url: URL_TO_PROJECT

Deployment Instructions (Github actions)

  • Go to Settings
  • Go to Pages
  • in Source, select gh-pages branch
  • Click Save
  • In package.json, add a new key/value as: "homepage": "https://prof-tejera.github.io/ "

Once the build-deploy action finishes running, the app should be live at https://prof-tejera.github.io/

For other ways to deploy see https://github.com/prof-tejera/react-deployment-code

Bonus Points

  1. Add support for decimal places.
  2. Add support for negative numbers.
  3. How are you handling the overflow of text? How might we handle situations in which we are dealing with really large numbers?

How to run the project

npm i && npm start

Open http://localhost:3000

You might also like...
Basic React wrapper for the Leaflet Geoman Plugin

Basic React wrapper for the Leaflet Geoman Plugin

Base ReactJs project with Redux Toolkit, Jest and styled-components

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

This portfolio was built with React.JS and next. Many styled-components was created to be used everywhere on the app

This portfolio was built with React.JS and next. Many styled-components was created to be used everywhere on the app

This is a food ordering web application. It was built to practicalize the use of Reactjs concepts like: useState, useEffect, styled components and props
This is a food ordering web application. It was built to practicalize the use of Reactjs concepts like: useState, useEffect, styled components and props

PRIME CUISINE: FOOD ORDERING WEB APPLICATION About The Project This is a food ordering web application. It grants user access to their dashboard where

Projeto da 6 NLW de React da @Rocketseat, desenvolvido utilizando Firebase, Styled-Components e Typescript.
Projeto da 6 NLW de React da @Rocketseat, desenvolvido utilizando Firebase, Styled-Components e Typescript.

Letmeask 💬 Crie salas de Q&A ao-vivo. Tire as suas dúvidas da sua audiência em tempo-real 🟣 Tecnologias usadas ReactJS + Typescript Styled-component

⚛️  Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere
⚛️ Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere

SkynexUI Use the platform, don't care about how to style there ⚠️ Version 1.x.x is alpha, trust only in v2 A set of components writen on top of React

Tetromino - A tetris-style game created with React, Redux and TailwindCSS.
Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

A timer app that facilitates crossfit workouts. Supports Timed, Tabata, and EMOM style sessions.
A timer app that facilitates crossfit workouts. Supports Timed, Tabata, and EMOM style sessions.

A timer app that facilitates crossfit workouts. Supports Timed, Tabata, and EMOM style sessions.

An ESLint Shareable Config for Typescript React Base Style with Prettier

eslint-config-react-base An ESLint Shareable Config for Typescript React Base Style with Prettier. Features ESLint: ✅ TypeScript ✅ React: ✅ Prettier:

Owner
Brandon Cloutier
Brandon Cloutier
Terminal Styled Portfolio Website ˋ( ° ▽、° ) , a terminal style/styled portfolio website made with <3 using react.

Terminal Styled Portfolio Website ˋ( ° ▽、° ) , a terminal style/styled portfolio website made with <3 using react.

ashish 67 Nov 22, 2022
Syngenta ReactJS Balloon Assignment

This assignment related to React JS. In assignment an empty box, 5 circles each of unique colours. The colour generation method should randomly pick and assign one of the five colours to the circles. A text box that will take numeric input and a button named “shoot”.

Satya Prakash Mall 1 May 29, 2022
Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Welcome to Jed Saylor ?? All the code in these repos was created and explained by Jed Saylor on his course. To find help please visit: ?? Instagram Je

null 1 Nov 26, 2021
Aviasales React-Redux-MobX- - A quick start Redux + TypeScript Create React App template

A quick start Redux + TypeScript Create React App template An opinionated quick

null 0 Mar 14, 2022
Uniswap V3 Fee Calculator created with React & Typescript

Uniswap V3 Fee Calculator created with React & Typescript

Chun Rapeepat 130 Jan 3, 2023
Is a trivia challenge. Made using React with styled-components.

Trivia - Frontend Test This repository contemplates the requested requirements of Rather Lab. Installation Install the necessary modules: npm install

Federico G. Lopez 1 Dec 24, 2021
Here is the place try to learn to call API using React.js with anything your code style and contribute to open-source. Part of Hacktoberfest

Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage About The Project To welcome hacktoberfest we provide

Abdul Hakim 13 Oct 30, 2022
Generate GitBook style modern docs/tutorial websites using Gatsby + MDX

gatsby-gitbook-starter Kick off your project with this starter to create a powerful/flexible docs/tutorial web apps. Motivation We wanted to create a

Vaishnavi Dwivedi 6 Aug 2, 2022
A blend of @preact/signals-core and solid-js basic reactivity API

A blend of @preact/signals-core and solid-js basic reactivity API, with API and DX mostly identical to @preact/signals-core but extra goodness inspired by solid-js, 726 bytes minified with brotli.

Andrea Giammarchi 140 Jan 8, 2023
This project features basic simulations that show the effects of social distancing

This project features basic simulations that show the effects of social distancing

Veselin Stoyanov 2 Feb 1, 2022