Skip to content
Open
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
c3211e9
Update .ignore: ignore IDE's '.idea/' directory
lovo-h Sep 7, 2025
36c2c1d
Add .nvmrc: v23.11.1
lovo-h Sep 7, 2025
5f81e23
Run 'npm init' and 'npm install' commands
lovo-h Sep 7, 2025
aa5380d
Install needed NPM packages for React
lovo-h Sep 7, 2025
9cd63d4
Setup Webpack + get a basic, working React app
lovo-h Sep 7, 2025
7f8afba
NPM: Add 'reset-css' package
lovo-h Sep 7, 2025
6e48b50
Setup Widget component's basic HTML layout
lovo-h Sep 7, 2025
0b39af3
Move fares.json into ./src/widgets/assets dir
lovo-h Sep 7, 2025
96d65ef
Add SEPTA.svg logo
lovo-h Sep 7, 2025
4704b88
Apply mobile design
lovo-h Sep 7, 2025
233c29e
Add Custom Input Components: Dropdown, RadioButton, InputBox
lovo-h Sep 8, 2025
5dd2889
NPM: Add 'axios' and 'dotenv' packages
lovo-h Sep 8, 2025
78cd005
Add Global Env Variables
lovo-h Sep 8, 2025
416e916
Use FareService To Populate Input Fields With Remote Data
lovo-h Sep 8, 2025
9bb70b8
DropDown: Resize Width Based On Content
lovo-h Sep 8, 2025
89d61cc
Bug Fix: Default To Empty String When InputBox's Value Is Empty
lovo-h Sep 9, 2025
5ad7084
Add Total Cost Calculations + Bulk Cost Breakdown And Savings
lovo-h Sep 9, 2025
8a3074c
Rename setZone to handleZoneChange
lovo-h Sep 9, 2025
19c947c
Rename setInputsHelper to handleInputsChange
lovo-h Sep 9, 2025
2b97240
Cleanup: Make Widget Markup Readable By Consolidating Inputs
lovo-h Sep 9, 2025
c21f7f5
Improve Readability: Move Cost UI Elements To Separate Cost Component
lovo-h Sep 9, 2025
cefe930
TODO: Remember to Test Total Cost Logic
lovo-h Sep 9, 2025
dbd7c94
Cleanup: Rename result.breakdown.remainder to result.breakdown.single
lovo-h Sep 9, 2025
9025f11
UI Adjustment: Spacing Between Divider & Inputs
lovo-h Sep 9, 2025
a73b288
Accessibility: Add Labels For Inputs & Add Header, Main, Footer
lovo-h Sep 9, 2025
059dbe1
Accessibility: Announce Total Price When Inputs Change
lovo-h Sep 9, 2025
7b5fd90
Rename result...pricePerRide to result...price
lovo-h Sep 9, 2025
1d5b1f2
TODO: Add Loading State For Slow Connections
lovo-h Sep 9, 2025
716d79a
TODO: Confirm Breakdown Section's UI/UX With Design
lovo-h Sep 9, 2025
c66cf00
Apply LightHouse Insights: Description Meta, CSS
lovo-h Sep 9, 2025
0e43eac
Accessibility: Read Helper Text Upon Dropdown Selection
lovo-h Sep 9, 2025
5ce22d9
Add Comments: Backend Integration Notes
lovo-h Sep 9, 2025
5d753c8
Add .gitignore: septa-fare-calculator/dist/ Directory
lovo-h Sep 9, 2025
09c1d6e
Add Loading States
lovo-h Sep 9, 2025
c15a22c
Fix: Add Horizontal Padding To Helper Text
lovo-h Sep 9, 2025
7b6e16b
Fix: Lowercase Word 'breakdown' in 'Fare Breakdown'
lovo-h Sep 9, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.idea/
septa-fare-calculator/node_modules/
6 changes: 6 additions & 0 deletions septa-fare-calculator/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
2 changes: 2 additions & 0 deletions septa-fare-calculator/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
BACKEND_URL=https://localhost:3000
IS_LOCAL_FARES=true
1 change: 1 addition & 0 deletions septa-fare-calculator/.nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
v23.11.1
2 changes: 1 addition & 1 deletion septa-fare-calculator/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ When you take regional rail in and out of the city, the fare price is affected b
* Visit our [careers page](https://www.thinkcompany.com/careers/) and apply for one of our open positions so we have your contact information along with your pull request.
* Develop the HTML and CSS for the widget seen in the screenshot above. Feel free to make this responsive, and keep accessibility in mind: screen readers should handle the form, helper text, and any other important content well.
* Assume that your code would be handed off to a back-end developer for integration. It could end up on a page with other content and widgets, so keep this in mind when you are making decisions about naming conventions.
* Write JavaScript to request [fares.json](fares.json) via AJAX and populate the widget with live data. End users should be able to see the fare total update when they use the widget controls. Think hard about the data format before starting - what does "anytime" mean, and what's the most elegant way to let users know about special pricing for items like 10-trip tickets?
* Write JavaScript to request [fares.json](src/widget/assets/fares.json) via AJAX and populate the widget with live data. End users should be able to see the fare total update when they use the widget controls. Think hard about the data format before starting - what does "anytime" mean, and what's the most elegant way to let users know about special pricing for items like 10-trip tickets?
* We plan on looking at the balance of your HTML, CSS, and JS, but we'd rather see a partially-styled working prototype than a pixel-perfect widget that isn't doing fare calculations. Try to balance your time appropriately!
* It should go without saying - please comment your code to state any assumptions or decisions you're making during this assignment -- or just to say hi. :-)

Expand Down
10 changes: 0 additions & 10 deletions septa-fare-calculator/index.html

This file was deleted.

Loading