Development Roadmap

notion.so

Version 1

Please run files locally from releases as v3 has a vastly different file systems

v1.01 shows the structure of the page with simple JS

v1.02 optimises v1.01 and works on minor functions

v1.03 focuses on array of records and input validation

v1.04 focuses on reset button and optimisation of the code, especially enforcing harsher validation

Version 2

Please run files locally from releases as v3 has a vastly different file systems

v2.01 focuses on changing all possible div to form which would be beneficial for future database implementation

v2.02 focuses on the floating side bar

v2.03 focuses on using checked attribute as a way to change buttons colours

Problems

Selecting text on a label
Resetting undefined variables

Floating point errors that appears when 2 toppings are added and removed are mitigated temporarily through an if condition. Find more about these errors here

An error that could not be resolved is related to the behaviour of checked attribute in checkbox. This error does not prove to be dangerous to the user experience and security. It will be patched if possible in future versions

v2.04 focuses on randomise pizza choice. The checked attribute bug is still persist

v2.05 focuses on datetime-local behaviour. The checked attribute is fixed

Other Changes

Change how price is calculated
Let checked attribute decided by native behaviour
Min and Max datetime-local changes
datetime-local box glowed when change is made
Update later time selection
Random button tooltip change when button is clicked

v2.06 focuses on code styling and optimisation of the code base

List of improvements

HTML
- Matching MDN HTML Guidelines
- Change sidebar container from span to a for native site linking
- Update quantity keystroke block from event.keycode (deprecated) to event.key
- Submit and Reset is now button instead of div
HTML & JS
- Trigger events on input instead of label to increase accessibility
- Move events to JS (remove all function call from HTML)
- Remove Credit Card readOnly
- Better regex validation
JS
- Matching Airbnb and MDN Guidelines
- ESLint used
- Different time input styling for Chrome
- More arrow function usage
- More ternary operator whenever possible
- Logistic Handling is shorten (20 lines to 15 lines)
- Dictionaries are used to replace if else if possible
- Intervals are global variables
- Let enforceTimeRestrictions() handle time update in when user chooses "Now"
- Submit button blurred when there are errors within the order
- textarea scroll to bottom when appending order
- input related errors in resetButton is fixed
CSS
- Matching MDN CSS Guidelines
- :focus-visible used to increase accessibility
- Remove unnecessary vendor prefixes, rules
- input display is not none, opacity: 0; margin: 0; is used instead to increase accessibility
- Smoother animation

v2.07 focuses on changing how CSS works fundamentally. alert() is replaced by a pop up notification. Minor accessibility improvements are included. A notable accessibility issues that will be mitigated in the future is the difficulty when selecting time without a mouse. datetime-local is going to be replaced by a better alternative in the near future.

Version 3

v3.01 restruture how the pizza ordering system works, spanning across pages through the help of localStorage and sessionStorage. The code could be more modularised, for instance pizza.js, side.js, drink.js has a fair bit of similarity regarding the function that inject the JSON into HTML DOM. Some modules are in menu.js

List of html files that has not been worked on

List of to be refined html files

More support for users is needed. Payment and time choice of delivery or pickup is the priority of the next version