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 💻
- Task: Build a Calculator with CSS Grid
- Problem Link - Scotch.io
- Design Spec:
0.2.1 - Testing Update
<ActionButton />
- Added data-testid:
ActionButton_${actionSymbol}
<Button />
- Added data-testid:
NumButton_${num}
- Calculator > index.js =>
<Calculator />
- Testing calculator functionality => all buttons clicked and the resulting
<History />
& <ResultScreen />
values confirmed.
<ActionButton />
- Added data-testid:
ActionButton_${actionSymbol}
- Added data-testid:
<Button />
- Added data-testid:
NumButton_${num}
- Added data-testid:
- Calculator > index.js =>
<Calculator />
- Testing calculator functionality => all buttons clicked and the resulting
<History />
&<ResultScreen />
values confirmed.
- Testing calculator functionality => all buttons clicked and the resulting
0.2.0 - Testing / Update History Logic Overhaul with Util Functions
<App />
- Tests:
- Renders w/o crashing
- Tests:
<History />
- Added:
data-testid
- Tests:
- Initial textContent ===
''
- Initial textContent ===
- Added:
<ResultScreen />
- Added:
data-testid
- Tests:
- Initial textContent ===
'0'
- Initial textContent ===
- Added:
- Util Functions
updateHistoryString
- Logic Overhaul
- Edge Cases extracted to own util functions (see below)
- Is now a pure function => returning a new (non mutated)
updatedHistoryString
orfalse
if no changes were made - 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: ✅
- Logic Overhaul
CHECK_backToBackOperators
- First edge case in
UpdateHistoryString
- returns
true
if user is trying to enter back to back operators - Tests: ✅
- First edge case in
CHECK_divideByZero
- Second edge case in
UpdateHistoryString
- returns
true
and throws an alert if user is trying to divide by zero - Tests: ✅
- Second edge case in
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!
-
Prior to the presentation I added a
netlify.toml
file and deployed a version of mydev
branch for people who were at the presentation to access -
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 differentJSX
with the correspondingHTML Entity
and pass the appropriate symbol into into theclick()
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 oneJSX
return.
- Previously: I was passing a
-
Dynamic class names
- While rendering the appropriate
HTML entity
and passing of the appropriatesymbol
to theclick()
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 the0
button so the CSS could have it span 3 columns ... UPDATED!
- While rendering the appropriate
-
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 acalculator
directory and myCalculator.js
file into anindex.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.
- Added
<History />
component to<ResultScreen />
- Tracks & displays button clicks through the
history
state prior to calculation
- Tracks & displays button clicks through the
<Calculator />
result
&history
state being passed to<ResultScreen />
result
,setResult
&history
,setHistory
state being passed to<ButtonContainer />
<ButtonContainer />
holds all calculation logicclear
=> Resetshistory
&result
stateclick
=> Updateshistory
state stringcalculate
=> uses Javascripteval()
to:- Calculate result from passed
history
state - Update
result
state - Reset
history
state
- Calculate result from passed
0.0.4 - CSS Grid Layout
Challenge Complete
<ButtonContainer/>
- holds main CSS grid
- imports
<Button/>
&<ActionButton>
<Button/>
is rendering a passsednum
prop<ActionButton/>
is passed a texttype
prop which is filtered through aswitch
statement to render the HTML Entities
- All components using project themes imported from
index.css
0.0.3 - CSS Reset & Color Variables
-
Meyer Reset: V2.0
/* reset.css */ http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
-
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
- Renders w/o crashing
- queryByText => Hello World => toBeTruthy
0.0.1 - Create React App
- Cleaned out template CRA
<App/>
rendering 'Hello World'
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: Turgeon.dev@gmail.com
LinkedIn: https://www.linkedin.com/in/reedturgeon/