A sample sign-up page was created while practicing a few concepts in HTML, CSS and JavaScript. This is a typical submission form that has minimum responsiveness with totally different functionality.
This project was created to practice HTML, CSS and JavaScript concepts while following good and standard practices. Instead of standard making API requests upon form submission, I have used JavaScript to implement some of the storage APIs present within the browser environment.
The sign-up form has been implemented in such a way while following some common practices of designing the DOM structure and basic CSS for the required responsiveness. The page consists of the following post-submission functionalities,
setCustomValidity
)
repeat-password
)
sha-256
algorithm.Note that the whole JavaScript source code is implemented within an anonymous callback that gets executed when the window
object is completed loading. This avoids access to the functions that are binded with events or other helper functions that can be manipulated through the console.
v0.0.0
- Basic implementation of signup page with HTML, CSS and JavaScript.v1.0.0
- More sophisticated implementation to overcome some of the edge cases and concerns. (visually and functionally no diff for output)
v2.0.0
- Migration of Javascript application into React application. Less concerned about edge cases, focused more on migration. (visually and functionally no diff for output)
Through this implementation, I was able to learn the following concept from this single practice project,
map
forEach
async
& await
TextEncoder
crypto.subtle
showSaveFilePicker
createWritable
FileSystemWritableFileStream.write
FileSystemWritableFileStream.close