https://github.com/teotimepacreau/interactive-form-day-14-of-100daysofcode
Interactive Form built with VanillaJS, CSS, HTML
https://github.com/teotimepacreau/interactive-form-day-14-of-100daysofcode
100daysofcode css dall-e errors form form-control form-validation forms forms-best-practice html javascript rocket space ui-design ui-form vanillajs
Last synced: about 1 month ago
JSON representation
Interactive Form built with VanillaJS, CSS, HTML
- Host: GitHub
- URL: https://github.com/teotimepacreau/interactive-form-day-14-of-100daysofcode
- Owner: teotimepacreau
- Created: 2023-04-12T15:16:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T15:59:07.000Z (about 3 years ago)
- Last Synced: 2025-01-15T10:32:42.595Z (over 1 year ago)
- Topics: 100daysofcode, css, dall-e, errors, form, form-control, form-validation, forms, forms-best-practice, html, javascript, rocket, space, ui-design, ui-form, vanillajs
- Language: CSS
- Homepage: https://teotimepacreau.github.io/Interactive-Form-Day-14-of-100DaysOfCode/
- Size: 5.94 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive form with error alerts
# Project goals
- learning input, forms and radio buttons UI best practices
- add a confirmation message when a plan is selected with addEventListener('change') and template Strings method in order to adapt the messsage following the choosen plan. insertAdjacentHTML testing
- see password on click by switching from password to text input status and toggle the icon accordingly
- collect input values and display dynamic error alerts accordingly
- prevent form submit if errors, only allow of all errors dismissed
- checking for best practices to control email, passwords
- CSS styling inputs with focus and hover states with the outline properties (outline: ridge in order to avoid white pixels)
# 🛠️
VanillaJS, CSS, HTML