{"id":27700967,"url":"https://github.com/seb-rm/javascript_html_css-shake-on-invalid-input","last_synced_at":"2026-04-26T22:31:28.909Z","repository":{"id":285460894,"uuid":"940817923","full_name":"Seb-RM/Javascript_Html_Css-Shake-on-Invalid-Input","owner":"Seb-RM","description":"Este proyecto consiste en un formulario simple que valida la entrada del usuario. Si el campo de texto está vacío al enviar el formulario, se activa una animación de \"shake\" (sacudida) y se muestra un mensaje de error.","archived":false,"fork":false,"pushed_at":"2025-03-31T20:55:50.000Z","size":8,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-25T19:14:43.310Z","etag":null,"topics":["animation-css","css3","form-validation","html5","javascript"],"latest_commit_sha":null,"homepage":"https://seb-rm.github.io/Javascript_Html_Css-Shake-on-Invalid-Input/","language":"CSS","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/Seb-RM.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,"zenodo":null}},"created_at":"2025-02-28T21:11:43.000Z","updated_at":"2025-03-31T20:55:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"46fce610-b643-4ef7-8aeb-c68c0ebe746d","html_url":"https://github.com/Seb-RM/Javascript_Html_Css-Shake-on-Invalid-Input","commit_stats":null,"previous_names":["seb-rm/javascript_html_css-shake-on-invalid-input"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Seb-RM/Javascript_Html_Css-Shake-on-Invalid-Input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavascript_Html_Css-Shake-on-Invalid-Input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavascript_Html_Css-Shake-on-Invalid-Input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavascript_Html_Css-Shake-on-Invalid-Input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavascript_Html_Css-Shake-on-Invalid-Input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Seb-RM","download_url":"https://codeload.github.com/Seb-RM/Javascript_Html_Css-Shake-on-Invalid-Input/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Seb-RM%2FJavascript_Html_Css-Shake-on-Invalid-Input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32315711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T21:09:39.134Z","status":"ssl_error","status_checked_at":"2026-04-26T21:09:21.240Z","response_time":129,"last_error":"SSL_read: 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":["animation-css","css3","form-validation","html5","javascript"],"created_at":"2025-04-25T19:14:41.363Z","updated_at":"2026-04-26T22:31:28.904Z","avatar_url":"https://github.com/Seb-RM.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎯 Formulario con Animación de Validación en JavaScript\n\n¡Bienvenido al repositorio del proyecto **Formulario con Animación de Validación en JavaScript**! Este proyecto fue desarrollado con el objetivo de practicar y reforzar conceptos básicos de JavaScript, CSS y HTML. A continuación, te explico en detalle cómo funciona y cómo puedes utilizarlo.\n\n---\n\n## 🚀 Descripción del Proyecto\n\nEste proyecto consiste en un formulario simple que valida la entrada del usuario. Si el campo de texto está vacío al enviar el formulario, se activa una animación de \"shake\" (sacudida) y se muestra un mensaje de error. Si la entrada es válida, se muestra una alerta indicando que los datos son correctos.\n\n### Características principales:\n- **Validación de entrada**: Verifica si el campo de texto está vacío.\n- **Animación de \"shake\"**: Una animación CSS que sacude el campo de texto cuando la entrada es inválida.\n- **Mensaje de error**: Un mensaje de error que aparece temporalmente cuando la validación falla.\n- **Diseño responsive**: El formulario está diseñado para verse bien en cualquier dispositivo.\n\n---\n\n## 🛠️ Tecnologías Utilizadas\n\n- **HTML**: Estructura básica del formulario.\n- **CSS**: Estilos y animaciones para el formulario y la validación.\n- **JavaScript**: Lógica de validación y manipulación del DOM.\n\n---\n\n## 📂 Estructura del Proyecto\n\nEl proyecto consta de tres archivos principales:\n\n1. **`index.html`**: Contiene la estructura del formulario.\n2. **`style.css`**: Define los estilos y la animación de \"shake\".\n3. **`script.js`**: Implementa la lógica de validación del formulario.\n\n---\n\n## 🎨 Diseño y Animación\n\nEl diseño del formulario es minimalista y moderno, con un enfoque en la usabilidad. La animación de \"shake\" se activa cuando el usuario intenta enviar el formulario sin ingresar datos. Esta animación se logra mediante keyframes en CSS:\n\n```css\n@keyframes shake {\n    0% { transform: translateX(0); }\n    25% { transform: translateX(-5px); }\n    50% { transform: translateX(5px); }\n    75% { transform: translateX(-5px); }\n    100% { transform: translateX(0); }\n}\n````\nAdemás, el mensaje de error aparece con una transición suave y desaparece después de 0.5 segundos.\n\n---\n\n## 🖥️ Cómo Usar el Proyecto\n\n1. **Clona el repositorio** :\n\n```bash\ngit clone https://github.com/Seb-RM/Javascript_Html_Css-Shake-on-Invalid-Input.git`\n```\n2. **Abre el archivo** **`index.html`** en tu navegador.\n\n3. **Prueba el formulario** :\n\n- Deja el campo de texto vacío y haz clic en \"Submit\" para ver la animación de \"shake\" y el mensaje de error.\n\n- Ingresa algún texto y haz clic en \"Submit\" para ver la alerta de entrada válida.\n\n---\n\n## 📝 Código Destacado\n\n### HTML\nEl formulario tiene un campo de texto y un botón de envío. También incluye un mensaje de error oculto.\n\n```html\n\u003cform action=\"\" id=\"myForm\"\u003e\n    \u003cdiv id=\"errorMessage\" class=\"error-message\"\u003eInvalid Input\u003c/div\u003e\n    \u003cinput type=\"text\" id=\"inputField\" placeholder=\"Enter your text\" required\u003e\n    \u003cbutton onclick=\"validateInput()\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n### CSS\nLos estilos definen la apariencia del formulario y la animación de \"shake\".\n\n```css\n.shake {\n    animation: shake 0.5s ease-in-out;\n}\n```\n### JavaScript\nLa función **`validateInput()`** valida la entrada y controla la animación y el mensaje de error.\n\n```javascript\n\nfunction validateInput() {\n    let inputField = document.getElementById(\"inputField\");\n    let inputValue = inputField.value.trim();\n    const errorMessage = document.getElementById(\"errorMessage\");\n\n    if (inputValue === \"\") {\n        inputField.classList.add(\"shake\");\n        errorMessage.style.visibility = \"visible\";\n\n        setTimeout(() =\u003e {\n            inputField.classList.remove(\"shake\");\n            errorMessage.style.visibility = \"hidden\";\n        }, 500);\n    } else {\n        alert(\"Valid Inputs\");\n    }\n}\n```\n\n---\n\n## 🧠 Conceptos Trabajados\n* Manipulación del DOM con JavaScript.\n\n+ Uso de eventos y funciones en JavaScript.\n\n- Animaciones CSS con @keyframes.\n\n- Diseño responsive con unidades relativas como em y min().\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-rm%2Fjavascript_html_css-shake-on-invalid-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseb-rm%2Fjavascript_html_css-shake-on-invalid-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseb-rm%2Fjavascript_html_css-shake-on-invalid-input/lists"}