Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Thank you for reviewing this. It was a fun exercise.
I coded this in vanilla JS, about as ES6 as you can get (hope fetch() is okay for the AJAX call!). Sometimes it's fun to break out of the routine of frameworks. Also, it allows the small widget to load as fast as possible for a better user experience.
Speaking of, once I had the code mostly done, I imaged myself as a customer using the app, invented scenarios such as 3 friends riding, a guy who is touring and wants to see the whole city, etc and made sure that those customer characters could navigate the app well for their purchasing needs. Before I got into tech, I was an ops manager in hospitality for way too long and this is one of the carry overs.
I was hitting the four hour mark so stopped, but given more time I'd expand on the bug-fixes.
For handling the anytime problem, I made the app just fix it for the customer and set it to anytime. Sometime the best way to fix it is to not let them know there's a problem at all.
Because anytime tickets start at 10 rides, if it is above 10, it will default to anytime for customer convenience. Given more time, I would have made a pop up or something to alert the customer to that fact, but that will go down as a "nice to have" for the scope of this project.
The following was considered for a11y / 508 standards:
-Very limited use of divs
-Where selectables were presented, used "value" attributes that lined up with what would be intelligible to the user rather than the code; the code handled what needed to be done on without effecting the communication to the user - for instance, the "value" sections for each Weekend, Weekday Evening, and Holiday are all read as different, but the code quietly treats them as the same price while still giving the user intelligible options/information.
-Used aria-labels and roles where necessary, but tried to lean more into semantic HTML
-labels for all inputs
-alt tags on images
A final tuning would have been to add tab indexes for keyboard only users. I had the structure but did not have the time to test it all out.
Thank you for your consideration and I look forward to next steps.