Checking my webDev knowledge in 2021.
Instructions:
HTML 5 form with fields:
- text
- dropdown
- checkbox
- radio button
JavaScript functionality:
- Submit (with submit button becoming inactive + send the data)
- Live Validation
- Regex Validation
- CNP Validation
- Form Validation
- popup on Submit (HTML)
- on popup approval - countdown popup with close button
Clean code + documentation
STEPS TAKEN:
- Create Repo
- Update Readme
- Clone Repo under my BitBucket/Git Repo main folder
- Add steps taken (and think about automatically adding commit description in this readme under
Steps Taken) - Look up "proper HTML5 + CSS + JavaScript folder structure"
- Long time to research best folder structure for this simple-yet-expandable project
- Considering in using NPM. Have used it before in vue.js. Makes life too easy (or too hard - depending on the level of focus)
- Decided to go simple and scratch the project or branch it if I change my mind later
- Creating HTML5 Form. Some resources used:
- https://htmlreference.io/forms/
- https://code.tutsplus.com/tutorials/form-input-validation-using-only-html5-and-regex--cms-33095
- https://www.google.com/search?q=longest+name+in+history&rlz=1C1GCEU_enRO969RO969&oq=longest+name+in+history&aqs=chrome..69i57.3663j0j7&sourceid=chrome&ie=UTF-8
- https://github.com/bfuerea/fmvbRepo
- https://github.com/bfuerea/teamElements
- https://www.google.com/search?q=titles+before+names&rlz=1C1GCEU_enRO969RO969&oq=titles+before+names&aqs=chrome..69i57.14414j0j7&sourceid=chrome&ie=UTF-8
- https://code.tutsplus.com/tutorials/a-simple-regex-cheat-sheet--cms-31278
- https://freefrontend.com/css-forms/
- A bunch of CSS - research for dark mode. Time wasted.
- Researching and reminding myself of generating DOM objects trough javascript
- Paused work. Did some https://www.freecodecamp.org/learn/responsive-web-design/
- I've got a project to do to complete the course - https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
- New info on dark mode CSS (still wasting time)
- personal note: why most examples use SVG instead of Google Icons to show pass/fail ??? why do they complicate things so much?
- https://www.javatpoint.com/how-to-call-a-javascript-function-in-html
- misc links:
- https://www.w3schools.com/cssref/pr_pos_top.asp
- https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_top
- https://stackoverflow.com/questions/4876749/move-up-character-displayed-inline
- https://www.javascripttutorial.net/dom/css/add-styles-to-an-element/
- https://www.w3schools.com/jsref/prop_element_nextelementsibling.asp
- https://stackoverflow.com/questions/41764061/adding-text-to-an-existing-text-element-in-javascript-via-dom
- https://htmldog.com/guides/javascript/advanced/creatingelements/
- https://bitsofco.de/realtime-form-validation/
- https://regex101.com/library/bpaE5K -- validare CNP
Latest Lighthouse Response (pre-css overhaul)
-
more links:
- https://css-tricks.com/snippets/html/html5-page-structure/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
- https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#forms
- https://www.nngroup.com/articles/errors-forms-design-guidelines/
- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
- https://getbootstrap.com/docs/3.4/css/
- https://javisperez.github.io/tailwindcolorshades
- https://codepen.io/ananyaneogi/pen/zXZyMP
-
Reading up on UX best practices
Lightouse result after UI change
--- mobile - white theme
--- browser - dark theme
- min + max char for username research