{"id":17437089,"url":"https://github.com/prantomollick/accessible-registration-form","last_synced_at":"2026-05-02T09:32:19.770Z","repository":{"id":257994192,"uuid":"873250068","full_name":"prantomollick/accessible-registration-form","owner":"prantomollick","description":"An accessible and responsive registration form built with HTML, CSS, and JavaScript, ensuring a fully keyboard-navigable and screen reader-friendly experience, with client-side validation for improved user interactions.","archived":false,"fork":false,"pushed_at":"2024-10-17T15:19:33.000Z","size":150,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-19T13:45:22.030Z","etag":null,"topics":["accessibility","best-practices","css","form-validation","frontend","grade-calculation","html","html5","javascript","marksvalidation","php","pranto","prantomollick","registration-forms","responsive-design","student-results","wcag","web-development"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/prantomollick.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-10-15T21:08:10.000Z","updated_at":"2024-10-17T15:19:37.000Z","dependencies_parsed_at":"2024-10-18T03:08:29.017Z","dependency_job_id":null,"html_url":"https://github.com/prantomollick/accessible-registration-form","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"60c2d6764253f8ef27e6e747d27834ed6ae33966"},"previous_names":["prantomollick/accessible-registration-form"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantomollick%2Faccessible-registration-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantomollick%2Faccessible-registration-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantomollick%2Faccessible-registration-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prantomollick%2Faccessible-registration-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prantomollick","download_url":"https://codeload.github.com/prantomollick/accessible-registration-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245955167,"owners_count":20699889,"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":["accessibility","best-practices","css","form-validation","frontend","grade-calculation","html","html5","javascript","marksvalidation","php","pranto","prantomollick","registration-forms","responsive-design","student-results","wcag","web-development"],"created_at":"2024-10-17T11:05:41.948Z","updated_at":"2026-05-02T09:32:19.734Z","avatar_url":"https://github.com/prantomollick.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# accessible-registration-form\n\nTo create documentation for your GitHub repository regarding the **Registration Form** project, here’s an outline you can follow for the `README.md` file, which will serve as the documentation. It explains the purpose, setup, usage, and other relevant details for developers and users.\n\n---\n\n# Table of Contents\n\n1. ⬇️ [Installation](#installation)\n2. 📂 [Folder Structure](#folder-structure)\n3. 📄 [registration_card](#registration-card)\n4. 📊 [Student Results Calculator](#student-result-calculator)`\n5. 🐘 [Features](#features)\n6. 🤝 [Connect With me](#contact)\n7. 📜 [License](#License)\n8. 🧾 [Credit](#credit)\n\n## \u003ca name=\"installation\"\u003e⬇️ Installation\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n**Prerequisites**\nMake sure you have the following installed on your machine:\n\n-   [Git](https://git-scm.com/)\n-   [VS-Code](https://code.visualstudio.com/)\n-   [PHP Server VS Code Extension](https://marketplace.visualstudio.com/items?itemName=brapifra.phpserver)\n\n**Cloning the Repository**\n\n```bash\n$ git clone https://github.com/prantomollick/accessible-registration-form.git\n$ cd accessible-registration-form\n```\n\n## \u003ca name=\"folder-structure\"\u003e📂 Folder Structure\u003c/a\u003e\n\n```\n.\n├── README.md\n├── registration_card\n│   ├── registration_form.html\n│   ├── script.js\n│   └── styles.css\n├── student_result\n│   └── result.php\n└── task-1 html and css.png\n\n```\n\n## \u003ca name=\"registration-card\"\u003e📄 **Registration Form**\u003c/a\u003e\n\n-   🚀 [Project Overview](#project-overview)\n-   🛠️ [Features](#features)\n-   📁 [Repository Structure](#repository-structure)\n-   📝 [Form Fields \u0026 Validation Rules](#form-field-validation-rules)\n-   💻 [Installation \u0026 Setup](#installation-setup)\n-   🧑‍💻 [usage](#usage)\n-   🧪 [Test Cases](#test-cases)\n-   🛠️ [Built With](#build-with)\n\n### \u003ca name=\"project-overview\"\u003e🚀 **Project Overview**\u003c/a\u003e\n\nThis project is a simple **Registration Form** built using HTML, CSS, and JavaScript. It includes form validation, accessibility features, and can send form data via a POST request to a server using the Fetch API.\n\nThe form collects user information, such as:\n\n-   Full Name\n-   Username\n-   Email\n-   Phone Number\n-   Password \u0026 Confirm Password\n-   Gender (Male, Female, Other)\n\n### \u003ca name=\"features\"\u003e🛠️ **Features**\u003c/a\u003e\n\n-   **Client-side validation**: Validates form fields, ensuring data integrity (e.g., checking email format, matching passwords, etc.).\n-   **Accessible form design**: Ensures that screen readers and keyboard navigation are properly supported.\n-   **Real-time feedback**: Provides instant validation feedback, highlighting errors as users fill in the form.\n-   **Fetch API Integration**: Sends form data via `fetch()` POST request when submitted.\n\n---\n\n### \u003ca name=\"repository-structure\"\u003e📁 **Repository Structure**\u003c/a\u003e\n\n```bash\n.\n├── index.html          # HTML structure of the registration form\n├── style.css           # CSS styling for the form and page layout\n├── script.js           # JavaScript for form validation and sending data via Fetch API\n\n```\n\n### \u003ca name=\"form-field-validation-rules\"\u003e📝 **Form Fields \u0026 Validation Rules**\u003c/a\u003e\n\n1. **Full Name**: Must contain only letters (at least 2 characters).\n2. **Username**: Should be alphanumeric and at least 3 characters long.\n3. **Email**: Must follow a valid email format (e.g., `user@example.com`).\n4. **Phone Number**: Validates phone number format (only digits allowed).\n5. **Password**: Must be at least 8 characters long.\n6. **Confirm Password**: Must match the password entered.\n7. **Gender**: One of Male, Female, or Other must be selected.\n\n---\n\n### 💻 **Installation \u0026 Setup**\n\nTo run this project locally, follow these steps:\n\n1. **Clone the repository**:\n\n    ```bash\n    git clone https://github.com/prantomollick/accessible-registration-form.git\n    cd accessible-registration-form/registration_card\n    ```\n\n2. **Open the project**:\n\n    - Simply open `index.html` in your browser to view the form.\n    - Use any local server to serve the form, such as `Live Server` (VS Code extension) or using Python’s Simple HTTP server:\n        ```bash\n        python3 -m http.server\n        ```\n\n3. **Fetch API Setup**:\n    - You can modify the Fetch API URL inside the `script.js` file to point to your own server for testing:\n        ```javascript\n        fetch(\"https://example.com/api/register\", {\n            method: \"POST\",\n            headers: {\n                \"Content-Type\": \"application/json\"\n            },\n            body: JSON.stringify(formObject)\n        });\n        ```\n\n---\n\n### \u003ca name=\"usage\"\u003e 🧑‍💻 **Usage** \u003c/a\u003e\n\n1. **Fill in the form**: Provide the required information (name, username, email, etc.).\n2. **Validation Feedback**: The form will validate fields in real-time. If any field is invalid, it will display an error message under the input field.\n3. **Submit**: After filling in all the fields correctly, submit the form. The form data will be sent to the server endpoint via the Fetch API.\n\n---\n\n### \u003ca name=\"test-cases\"\u003e🧪 **Test Cases** \u003c/a\u003e\n\n1. **Submit Valid Data**:\n    - Fill in all fields with valid data.\n    - Expected Result: The form should submit successfully and send the data to the server.\n2. **Submit Invalid Data**:\n\n    - Leave one or more fields empty or provide invalid values (e.g., invalid email format, non-matching passwords).\n    - Expected Result: The form should show appropriate error messages for the invalid fields.\n\n3. **Real-Time Validation**:\n    - Focus on an input field and type invalid data.\n    - Expected Result: Error message should appear when the data doesn't match validation rules.\n\n---\n\n### \u003ca name=\"build-with\"\u003e🛠️ **Built With**\u003c/a\u003e\n\n-   HTML5\n-   CSS3\n-   JavaScript (ES6+)\n-   Fetch API\n\n---\n\n## \u003ca name=\"student-result-calculator\"\u003e📊 **Student Results Calculator**\u003c/a\u003e\n\nThis project is a **PHP program** designed to calculate student results based on marks obtained in five subjects. It validates the marks, checks for fail conditions, calculates total marks, average marks, and assigns a grade based on the average.\n\n---\n\n### 📑 **Table of Contents**\n\n-   [Project Overview](#student-project-overview)\n-   [Features](#student-features)\n-   [Repository Structure](#student-repository-structure)\n-   [Installation \u0026 Setup](#installation--setup)\n-   [Usage](#student-usage)\n-   [Test Cases](#student-test-cases)\n-   [License](#license)\n\n---\n\n### \u003ca name=\"student-project-overview\"\u003e🚀 **Project Overview**\u003c/a\u003e\n\nThis project calculates the student result based on five subjects. The program includes the following:\n\n-   **Mark Range Validation**: Ensures marks are between 0 and 100.\n-   **Fail Condition**: A student fails if any subject has a score below 33.\n-   **Grade Calculation**: Grades are assigned based on the average marks as follows:\n    -   A+ : 80 to 100\n    -   A : 70 to 79\n    -   A- : 60 to 69\n    -   B : 50 to 59\n    -   C : 40 to 49\n    -   D : 33 to 39\n    -   F : Below 33\n\nThe program checks for mark validity, calculates total marks, average marks, and assigns grades based on the conditions described above.\n\n---\n\n### \u003ca name=\"student-features\"\u003e🛠️ **Features**\u003c/a\u003e\n\n-   **Mark Validation**: Marks should be between 0-100.\n-   **Fail Condition**: Marks below 33 result in a failing grade.\n-   **Grade Calculation**: Based on average marks.\n-   **Modular Design**: Functions for each task for reusability and clean code.\n\n---\n\n### \u003ca name=\"student-repository-structure\"\u003e📁 **Repository Structure**\u003c/a\u003e\n\n```bash\n.\n├── result.php    # Main PHP program with functions and test cases\n├── README.md                # Documentation (this file)\n```\n\n---\n\n### \u003ca name=\"installation--setup\"\u003e💻 **Installation \u0026 Setup**\u003c/a\u003e\n\nTo run this project locally:\n\n1. **Clone the repository**:\n\n    ```bash\n    git clone https://github.com/prantomollick/accessible-registration-form.git\n    cd accessible-registration-form/student_result\n    ```\n\n2. **Run the PHP file**:\n\n    - Use a local PHP server or any server like XAMPP, MAMP, or WAMP to run the `result.php` file.\n\n    Or run it from the terminal:\n\n    ```bash\n    php result.php\n    ```\n\n---\n\n### \u003ca name=\"student-usage\"\u003e 📝 **Usage** \u003c/a\u003e\n\n1. **Marks Input**: You can provide an array of marks for five subjects, where each subject has a mark between 0 and 100.\n2. **Mark Validation**: The program checks if all marks are within the valid range.\n3. **Fail Condition**: It checks if any subject has a failing mark (below 33).\n4. **Grade Assignment**: Based on the average marks, a grade is calculated and displayed along with the total and average.\n\n---\n\n### \u003ca name=\"student-test-cases\"\u003e🧪 **Test Cases** \u003c/a\u003e\n\n#### **Case 1: Normal Pass with Grade B**\n\n```php\n$studentMarks1 = [\n    'Math' =\u003e 45,\n    'English' =\u003e 55,\n    'Science' =\u003e 60,\n    'History' =\u003e 70,\n    'Geography' =\u003e 50\n];\n```\n\n**Output**:\n\n```\nTotal Marks: 280\nAverage Marks: 56\nGrade: B\n```\n\n#### **Case 2: Student Fails in One Subject**\n\n```php\n$studentMarks2 = [\n    'Math' =\u003e 25,  // Below 33\n    'English' =\u003e 55,\n    'Science' =\u003e 60,\n    'History' =\u003e 70,\n    'Geography' =\u003e 50\n];\n```\n\n**Output**:\n\n```\nFailing mark found in Math with mark 25.\n```\n\n#### **Case 3: Invalid Marks (Out of Range)**\n\n```php\n$studentMarks3 = [\n    'Math' =\u003e 105,  // Invalid mark (\u003e100)\n    'English' =\u003e 55,\n    'Science' =\u003e 60,\n    'History' =\u003e 70,\n    'Geography' =\u003e 50\n];\n```\n\n**Output**:\n\n```\nMark range is invalid for Math.\n```\n\n#### **Case 4: High Marks, Grade A+**\n\n```php\n$studentMarks4 = [\n    'Math' =\u003e 90,\n    'English' =\u003e 95,\n    'Science' =\u003e 85,\n    'History' =\u003e 80,\n    'Geography' =\u003e 92\n];\n```\n\n**Output**:\n\n```\nTotal Marks: 442\nAverage Marks: 88.4\nGrade: A+\n```\n\n#### **Case 5: Low Marks, Grade D**\n\n```php\n$studentMarks5 = [\n    'Math' =\u003e 33,\n    'English' =\u003e 35,\n    'Science' =\u003e 38,\n    'History' =\u003e 34,\n    'Geography' =\u003e 36\n];\n```\n\n**Output**:\n\n```\nTotal Marks: 176\nAverage Marks: 35.2\nGrade: D\n```\n\n#### **Case 6: All Subjects with Perfect Marks**\n\n```php\n$studentMarks6 = [\n    'Math' =\u003e 100,\n    'English' =\u003e 100,\n    'Science' =\u003e 100,\n    'History' =\u003e 100,\n    'Geography' =\u003e 100\n];\n```\n\n**Output**:\n\n```\nTotal Marks: 500\nAverage Marks: 100\nGrade: A+\n```\n\n---\n\n## \u003ca name=\"license\"\u003e📜 **License** \u003c/a\u003e\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## \u003ca name=\"contact\"\u003e🤝 Connect With me\u003c/a\u003e\n\n👥 [@prantomollick](https://www.linkedin.com/in/prantomollick/)\n❌ [@prantomollick55](https://x.com/prantomollick55)\n✉️ [prantomollick01@gmail.com](mailto:prantomollick01@gmail.com)\n🌎 https://prantomollick.com\n\n## \u003ca name=\"credit\"\u003e🧾 Credit\u003c/a\u003e\n\n\u003cem\u003e\u003csamll\u003eThis project is develope by me to complete assignment project[Pranto Mollick](https://prantomollick.com)\u003c/samll\u003e\u003c/em\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantomollick%2Faccessible-registration-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprantomollick%2Faccessible-registration-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprantomollick%2Faccessible-registration-form/lists"}