{"id":18792355,"url":"https://github.com/kplanisphere/web-dev-exam","last_synced_at":"2026-05-05T23:31:28.175Z","repository":{"id":243309409,"uuid":"812073120","full_name":"KPlanisphere/web-dev-exam","owner":"KPlanisphere","description":"Examen 2 - Desarrollo de Aplicaciones Web","archived":false,"fork":false,"pushed_at":"2024-06-07T22:51:52.000Z","size":1067,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-21T15:14:54.678Z","etag":null,"topics":["bootstrap","calculator-application","css","educational-project","form-validation","html","javascript","responsive-design","user-input","web-development"],"latest_commit_sha":null,"homepage":"https://linktr.ee/planisphere.kgz","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/KPlanisphere.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-06-07T22:40:13.000Z","updated_at":"2024-06-07T22:51:54.000Z","dependencies_parsed_at":"2024-06-07T23:48:09.111Z","dependency_job_id":"4d3a2703-1e78-4528-b99b-8d9e7d376d0a","html_url":"https://github.com/KPlanisphere/web-dev-exam","commit_stats":null,"previous_names":["kplanisphere/web-dev-exam"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KPlanisphere/web-dev-exam","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KPlanisphere","download_url":"https://codeload.github.com/KPlanisphere/web-dev-exam/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exam/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32672518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-05T11:29:49.557Z","status":"ssl_error","status_checked_at":"2026-05-05T11:29:48.587Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bootstrap","calculator-application","css","educational-project","form-validation","html","javascript","responsive-design","user-input","web-development"],"created_at":"2024-11-07T21:19:37.441Z","updated_at":"2026-05-05T23:31:28.151Z","avatar_url":"https://github.com/KPlanisphere.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Development Exam\n\n### Description\n\nThis repository contains two web development problems focused on form validation and a simple calculator application. The exercises demonstrate the use of HTML, CSS, JavaScript, and Bootstrap to create interactive and responsive web pages.\n\n\n#### Problem 1: Form Validation\n- **Files:**\n  - `Formulario/index.html`: The main HTML file containing the form.\n  - `Formulario/style.css`: Custom CSS styles for the form.\n  - `Formulario/script.js`: JavaScript file for form validation.\n\n- **Description:**\n  - This exercise includes a form with fields for username, email, and password. The form validates input using JavaScript and provides visual feedback using CSS classes for valid and invalid inputs. Submitted data is displayed on the same page if validation is successful.\n \n\u003cp align= \"center\"\u003e\n    \u003cimg src=\"https://github.com/KPlanisphere/web-dev-exam/assets/60454942/1bdbe1b2-3972-41b7-855f-8d2c8cdf2d4d\" style=\"width: 70%; height: auto;\"\u003e\n\u003c/p\u003e\n\n- **Instructions:**\n  1. Perform form validation to ensure that the fields (Username, Email, and Password) are not left blank.\n  2. Highlight the field in red and display an icon and message if a field is left blank.\n  3. Highlight the field in green and display an icon if the validation is correct.\n  4. Display the entered data on the right side once all fields are validated and not empty.\n\n- **Code Snippets:**\n\n\t**Form structure with fields for username, email, and password:**\n\t\n    ```html\n\t  \u003cform id=\"miFormulario\"\u003e\n\t      \u003ch1\u003eLogin\u003c/h1\u003e\n\t      \u003cdiv class=\"form-group\"\u003e\n\t          \u003clabel for=\"usuario\"\u003eNombre de Usuario:\u003c/label\u003e\n\t          \u003cinput type=\"text\" class=\"form-control\" id=\"usuario\" name=\"usuario\"\u003e\n\t      \u003c/div\u003e\n\t      \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eEnviar\u003c/button\u003e\n\t  \u003c/form\u003e\n    ```\n\n\t**CSS for valid and invalid input fields:**\n\n\t```css\n\t/* Formulario/style.css */\n\t.valido {\n\t    border: 2px solid green;\n\t}\n\n\t.invalido {\n\t    border: 2px solid red;\n\t}\n\t```\n\t \n\t**JavaScript to validate form fields and display results:**\n\n\t```js\n\t// Formulario/script.js\n\t// JavaScript to validate form fields and display results\n\tdocument.getElementById('miFormulario').addEventListener('submit', function(event) {\n\t    event.preventDefault();\n\t    var usuario = document.getElementById('usuario');\n\t    var esValido = true;\n\t    if (usuario.value.trim() === '') {\n\t        usuario.classList.add('invalido');\n\t        esValido = false;\n\t    } else {\n\t        usuario.classList.remove('invalido');\n\t        usuario.classList.add('valido');\n\t    }\n\t});\n\t```\n#### Problem 2: HTML Calculator\n\n-   **Files:**\n    \n    -   `Calculadora/index.html`: The main HTML file containing the calculator.\n    -   `Calculadora/style.css`: Custom CSS styles for the calculator.\n    -   `Calculadora/script.js`: JavaScript file for calculator functionality.\n-   **Description:**\n    \n    -   This exercise includes a simple calculator application that performs basic arithmetic operations. The calculator interface is built using HTML and styled with CSS. JavaScript functions handle the operations and display the results.\n \n\u003cp align= \"center\"\u003e\n    \u003cimg src=\"https://github.com/KPlanisphere/web-dev-exam/assets/60454942/bed0d612-e3e8-4aba-8058-a167b7ca6a8e\" style=\"width: 30%; height: auto;\"\u003e\n\u003c/p\u003e\n\n-   **Instructions:**\n    \n    1.  Create a calculator that performs addition, subtraction, multiplication, and division.\n    2.  Ensure a number cannot start with 0 and only one decimal point can be entered.\n-   **Code Snippets:**\n    \n    **Calculator layout with buttons and display:**\n    \n    ```html\n    \u003c!-- Calculadora/index.html --\u003e\n    \u003cdiv class=\"calculator\"\u003e\n        \u003cinput type=\"text\" class=\"form-control calc-display\" id=\"calc-display\" disabled\u003e\n        \u003cdiv class=\"row\"\u003e\n            \u003cbutton class=\"btn btn-secondary col\" onclick=\"appendNumber('7')\"\u003e7\u003c/button\u003e\n            \u003cbutton class=\"btn btn-secondary col\" onclick=\"appendNumber('8')\"\u003e8\u003c/button\u003e\n            \u003cbutton class=\"btn btn-primary col\" onclick=\"setOperation('/')\"\u003e/\u003c/button\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    ```\n    \n    **CSS for calculator layout and buttons:**\n    \n    ```css\n    /* Calculadora/style.css */\n    .calculator {\n        width: 300px;\n        margin: 50px auto;\n        padding: 10px;\n    }\n    \n    .button {\n        height: 60px;\n        font-size: 24px;\n    }\n    ```\n    \n    **JavaScript functions for calculator operations:**\n    \n    ```javascript\n    // Calculadora/script.js\n    let valorActual = '';\n    function appendNumber(number) {\n        if (number === '.' \u0026\u0026 valorActual.includes('.')) return;\n        valorActual += number;\n        document.getElementById('calc-display').value = valorActual;\n    }\n    \n    function setOperation(operator) {\n        if (valorActual === '') return;\n        valorAnterior = valorActual;\n        valorActual = '';\n        operacionActual = operator;\n    }\n    ```\n    \n\n### Setup and Usage\n\n1.  **Clone the Repository:**\n    \n    ```sh\n    git clone https://github.com/KPlanisphere/web-dev-exam.git\n    cd web-dev-exam\n    ```\n    \n2.  **Open the HTML Files:**\n    \n    -   Open `Formulario/index.html` to view the form validation exercise.\n    -   Open `Calculadora/index.html` to view the calculator exercise.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkplanisphere%2Fweb-dev-exam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkplanisphere%2Fweb-dev-exam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkplanisphere%2Fweb-dev-exam/lists"}