{"id":15021363,"url":"https://github.com/iamwatchdogs/signup-form-practice","last_synced_at":"2026-01-24T13:13:37.388Z","repository":{"id":253439993,"uuid":"843505803","full_name":"iamwatchdogs/Signup-Form-Practice","owner":"iamwatchdogs","description":"A simple signup form for practising various concepts.","archived":false,"fork":false,"pushed_at":"2024-08-17T11:03:20.000Z","size":305,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T16:22:50.043Z","etag":null,"topics":["babel","css3","eslint","html5","javascript","reactjs","webpack"],"latest_commit_sha":null,"homepage":"https://iamwatchdogs.github.io/Signup-Form-Practice/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamwatchdogs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-16T17:02:02.000Z","updated_at":"2024-08-17T11:05:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"a8422e1a-2c73-4cb3-8371-ee76054e6d90","html_url":"https://github.com/iamwatchdogs/Signup-Form-Practice","commit_stats":{"total_commits":75,"total_committers":2,"mean_commits":37.5,"dds":"0.19999999999999996","last_synced_commit":"4ec10dd191d3eb3bdee4a110c8094a318fcdaa79"},"previous_names":["iamwatchdogs/signup-form-practice"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamwatchdogs%2FSignup-Form-Practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamwatchdogs%2FSignup-Form-Practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamwatchdogs%2FSignup-Form-Practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamwatchdogs%2FSignup-Form-Practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamwatchdogs","download_url":"https://codeload.github.com/iamwatchdogs/Signup-Form-Practice/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238680708,"owners_count":19512628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","css3","eslint","html5","javascript","reactjs","webpack"],"created_at":"2024-09-24T19:56:30.073Z","updated_at":"2026-01-24T13:13:37.352Z","avatar_url":"https://github.com/iamwatchdogs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Signup Page (Practise) \u003cimg src=\"https://github.com/iamwatchdogs/Signup-Form-Practice/actions/workflows/static.yml/badge.svg\" alt=\"deployment status\" align=\"right\"/\u003e\u003cimg src=\"https://github.com/iamwatchdogs/Signup-Form-Practice/actions/workflows/linter.yml/badge.svg\" alt=\"linting status\" align=\"right\"/\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cbr /\u003e\n\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge\u0026logo=webpack\u0026logoColor=black)\n![Babel](https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge\u0026logo=babel\u0026logoColor=black)\n![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge\u0026logo=eslint\u0026logoColor=white)\n\n\u003cbr /\u003e\n\n![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge\u0026logo=git\u0026logoColor=white)\n![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white)\n![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge\u0026logo=githubactions\u0026logoColor=white)\n![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)\n\n\u003cbr /\u003e\n\u003c/div\u003e\n\nA 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.\n\n## Motivation\n\nThis 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.\n\n## Project Details\n\n### Used technologies\n\n- HTML5\n- CSS3\n- JavaScript\n- Dependencies\n  - Webpack bundler\n  - Loaders\n  - Minifiers\n  - Babel transpiler\n  - ESLint linter\n- React\n- GitHub Actions\n\n### Functionality\n\nThe 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,\n\n- Custom Form validation using the browser web APIs _(`setCustomValidity`)_\n  - [x] Implemented Text validation\n  - [x] Implemented Email validation\n  - [x] Implemented Password validation _(including `repeat-password`)_\n- Storing the data into browser storage APIs\n  - [x] Stored the data within cookies after URI encoding\n  - [x] Stored the data within local storage after hashing with the `sha-256` algorithm.\n- Storing the data into an external file within the browser environment\n\nNote 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.\n\n### Changelog\n\n- [`v0.0.0`](https://github.com/iamwatchdogs/Signup-Form-Practice/releases/tag/v0.0.0 \"goto releases\") - Basic implementation of signup page with HTML, CSS and JavaScript.\n- [`v1.0.0`](https://github.com/iamwatchdogs/Signup-Form-Practice/releases/tag/v1.0.0 \"goto releases\") - More sophisticated implementation to overcome some of the edge cases and concerns. _(visually and functionally no diff for output)_\n- [`v2.0.0`](https://github.com/iamwatchdogs/Signup-Form-Practice/release/tag/v2.0.0 \"goto releases\") - Migration of Javascript application into React application. Less concerned about edge cases, focused more on migration. _(visually and functionally no diff for output)_\n\n## Learning outcomes\n\nThrough this implementation, I was able to learn the following concept from this single practice project,\n\n- HTML structuring _(including the semantics, and common practices)_.\n- Basic responsive design _(CSS)_\n- JavaScript DOM manipulation\n- Event Handling _(event delegation, etc)_\n- Array methods\n  - `map`\n  - `forEach`\n- Regex\n- Form Handling\n  - Custom validation\n- Asynchronous programming\n  - Promises\n  - `async` \u0026 `await`\n- Error Handling\n- Web APIs\n  - Storage APIs\n    - cookies\n    - local storage\n  - Encoding APIs\n    - `TextEncoder`\n  - Web Crypto APIs\n    - `crypto.subtle`\n  - File System APIs\n    - `showSaveFilePicker`\n    - `createWritable`\n    - `FileSystemWritableFileStream.write`\n    - `FileSystemWritableFileStream.close`\n- Functional Programming\n- Object-oriented Programming\n- Modular Programming\n- Dependencies\n- Bundler configuration\n- Linter configuration\n- React\n  - Configuration\n  - Hooks\n- GitHub Action _(CI/CD)_\n\n## Output\n\n![output](https://github.com/user-attachments/assets/406a570f-891a-4aa4-b524-0201cea09b0b)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamwatchdogs%2Fsignup-form-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamwatchdogs%2Fsignup-form-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamwatchdogs%2Fsignup-form-practice/lists"}