Signup Page (Practise)

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.

Motivation

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.

Project Details

Used technologies

• HTML5
• CSS3
• JavaScript
• Dependencies
  • Webpack bundler
  • Loaders
  • Minifiers
  • Babel transpiler
  • ESLint linter
• React
• GitHub Actions

Functionality

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,

• Custom Form validation using the browser web APIs (setCustomValidity)
  • [x] Implemented Text validation
  • [x] Implemented Email validation
  • [x] Implemented Password validation (including repeat-password)
• Storing the data into browser storage APIs
  • [x] Stored the data within cookies after URI encoding
  • [x] Stored the data within local storage after hashing with the sha-256 algorithm.
• Storing the data into an external file within the browser environment

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.

Changelog

• 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)

Learning outcomes

Through this implementation, I was able to learn the following concept from this single practice project,

• HTML structuring (including the semantics, and common practices).
• Basic responsive design (CSS)
• JavaScript DOM manipulation
• Event Handling (event delegation, etc)
• Array methods
  • map
  • forEach
• Regex
• Form Handling
  • Custom validation
• Asynchronous programming
  • Promises
  • async & await
• Error Handling
• Web APIs
  • Storage APIs
  • cookies
  • local storage
  • Encoding APIs
  • TextEncoder
  • Web Crypto APIs
  • crypto.subtle
  • File System APIs
  • showSaveFilePicker
  • createWritable
  • FileSystemWritableFileStream.write
  • FileSystemWritableFileStream.close
• Functional Programming
• Object-oriented Programming
• Modular Programming
• Dependencies
• Bundler configuration
• Linter configuration
• React
  • Configuration
  • Hooks
• GitHub Action (CI/CD)

Output