MrT3313 / MostBestestCalculator_TakeHomeChallenge1

CSS Grid Calculator

Most Bestest Calculator

This is the first take home challenge given out by Lambda's engineering team to Lambda X students (students who have completed the program and are looking to land their first job in the industry).

Through this project I hope to expand my testing capabilities with React Testing Library and Jest.

💻 Live Project 💻

THE CHALLENGE

• Task: Build a Calculator with CSS Grid
• Problem Link - Scotch.io
• Design Spec:

---

Versions

0.2.1 - Testing Update

1. <ActionButton />
   • Added data-testid: ActionButton_${actionSymbol}
2. <Button />
   • Added data-testid: NumButton_${num}
3. Calculator > index.js => <Calculator />
   • Testing calculator functionality => all buttons clicked and the resulting <History /> & <ResultScreen /> values confirmed.

0.2.0 - Testing / Update History Logic Overhaul with Util Functions

1. <App />
   • Tests:
     1. Renders w/o crashing
2. <History />
   • Added: data-testid
   • Tests:
     1. Initial textContent === ''
3. <ResultScreen />
   • Added: data-testid
   • Tests:
     1. Initial textContent === '0'
4. Util Functions
   1. updateHistoryString
      • Logic Overhaul
        1. Edge Cases extracted to own util functions (see below)
        2. Is now a pure function => returning a new (non mutated) updatedHistoryString or false if no changes were made
        3. Main Cases (First Entry / Second+ Entry / Extend Result) no longer nested in complicated single if statement. Each case it returning as soon as the updatedHistoryString is made
      • Tests: ✅
   2. CHECK_backToBackOperators
      • First edge case in UpdateHistoryString
      • returns true if user is trying to enter back to back operators
      • Tests: ✅
   3. CHECK_divideByZero
      • Second edge case in UpdateHistoryString
      • returns true and throws an alert if user is trying to divide by zero
      • Tests: ✅

0.1.1 - Post Project Presentation Update

Today I presented this weeks project to two of Lambda School's engineers as well as some other students. After I walked through the project they had some feedback which I have encorporated into this update!

1. Prior to the presentation I added a netlify.toml file and deployed a version of my dev branch for people who were at the presentation to access

2. Update <ActionButton /> to accept more appropraite props in order to be more dynamic

   • Previously: I was passing a type string prop from <ButtonContainer /> to <ActionButton />. This prop was filtered through a switch statement to render different JSX with the corresponding HTML Entity and pass the appropriate symbol into into the click() function
   • Update: I am now passing an operation array prop that contains a symbol and the corresponding SVG icon to be rendered. This allows the <ActionButton /> to dynamically render everything in one JSX return.

3. Dynamic class names

   • While rendering the appropriate HTML entity and passing of the appropriate symbol to the click() function was the main reason that caused the duplicate code in the <ActionButton /> it was highlighted that if I passed better props I could also dynamically create my class names. This was very obvious when I looked back at the <Button /> component ... which had an entire switch statement to catch the 0 button so the CSS could have it span 3 columns ... UPDATED!

4. In responsing to my comment about not having a 'views' directory it was suggested that, because this is a small project, it might not be needed and that instead I could change my components directory into a calculator directory and my Calculator.js file into an index.js file in order to signify the 'entry' into the app. So I did!

Thanks to Garrett & Matt (the Lambda Engineers) for making this happen!

Next Up: Improved Testing!

0.1.0 - Calculation Logic

While the scotch.io challenge only asks to create the calculator layout using CSS Grid I chose to add the actual calculation functionality! To do this I used React Hooks to add & track the state of a user's calculations.

1. Added <History /> component to <ResultScreen />
   • Tracks & displays button clicks through the history state prior to calculation
2. <Calculator />
   • result & history state being passed to <ResultScreen />
   • result, setResult & history, setHistory state being passed to <ButtonContainer />
3. <ButtonContainer /> holds all calculation logic
   • clear => Resets history & result state
   • click => Updates history state string
   • calculate => uses Javascript eval() to:
     1. Calculate result from passed history state
     2. Update result state
     3. Reset history state

0.0.4 - CSS Grid Layout

Challenge Complete

1. <ButtonContainer/>
   • holds main CSS grid
   • imports <Button/> & <ActionButton>
     • <Button/> is rendering a passsed num prop
     • <ActionButton/> is passed a text type prop which is filtered through a switch statement to render the HTML Entities
2. All components using project themes imported from index.css

Screenshot:

0.0.3 - CSS Reset & Color Variables

1. Meyer Reset: V2.0

   /* reset.css */
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)

2. Color Variables

   /* index.css */
   :root {
       --background_LightGrey: #F3F3F3;
       --clearButton_Blue: #3573DD;
       --equalButton_Green: #27D15E;
       --defaultButton_Grey: #767676;
       --text_and_line: #52514F;
   }

0.0.2 - Initial `< App />` Tests

1. Renders w/o crashing
2. queryByText => Hello World => toBeTruthy

0.0.1 - Create React App

• Cleaned out template CRA
• <App/> rendering 'Hello World'

---

Assets

name	source	author
plus	flaticon.com	srip
minus	flaticon.com	Pixel Perfect
multiply	flaticon.com	Freepik
divide	flaticon.com	Freepik
equal	flaticon.com	Freepik

---

Author: Reed Turgeon
Email: [e-mail]
LinkedIn: https://www.linkedin.com/in/reedturgeon/