{"id":27268817,"url":"https://github.com/shevchenkool/practic_for_js1","last_synced_at":"2025-09-01T12:42:02.936Z","repository":{"id":228012340,"uuid":"772920785","full_name":"ShevchenkoOl/practic_for_JS1","owner":"ShevchenkoOl","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-23T17:58:29.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-18T13:59:45.477Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ShevchenkoOl.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":"2024-03-16T08:39:48.000Z","updated_at":"2024-05-23T17:58:32.000Z","dependencies_parsed_at":"2025-04-11T11:39:35.669Z","dependency_job_id":"d620e2e9-bf3b-48a1-8258-497a47570198","html_url":"https://github.com/ShevchenkoOl/practic_for_JS1","commit_stats":null,"previous_names":["shevchenkool/practic_for_js1"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ShevchenkoOl/practic_for_JS1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fpractic_for_JS1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fpractic_for_JS1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fpractic_for_JS1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fpractic_for_JS1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShevchenkoOl","download_url":"https://codeload.github.com/ShevchenkoOl/practic_for_JS1/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Fpractic_for_JS1/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273125956,"owners_count":25050360,"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","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-04-11T11:33:06.433Z","updated_at":"2025-09-01T12:42:02.890Z","avatar_url":"https://github.com/ShevchenkoOl.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Toto úložiště bylo vytvořeno pro nácvik zpracování událostí JS. Připravené značky a připojené soubory skriptů pro každý úkol. Zkopírujte je do svého projektu.\n\n# Úkol 1\nPočítadlo se skládá z rozpětí a tlačítek, které by po kliknutí měly zvýšit a snížit svou hodnotu o jednu.\n\n```html\n\u003cdiv id=\"counter\"\u003e\n   \u003cbutton type=\"button\" data-action=\"decrement\"\u003e-1\u003c/button\u003e\n   \u003cspan id=\"value\"\u003e0\u003c/span\u003e\n   \u003cbutton type=\"button\" data-action=\"increment\"\u003e+1\u003c/button\u003e\n\u003c/div\u003e\n```\nVytvořte proměnnou counterValue, která bude ukládat aktuální hodnotu čítače a inicializuje ji na 0.\nK tlačítkům přidejte posluchače kliknutí, uvnitř kterých zvyšujete nebo snižujete hodnotu čítače.\nAktualizujte rozhraní novou hodnotou proměnné counterValue.\n\n# Úkol 2\nNapište skript, který změní barvy pozadí prvku ```\u003cbody\u003e``` pomocí vloženého stylu při kliknutí na ```button.change-color``` a vydá hodnotu barvy do ```span.color```.\n\n# Úkol 3\nNapište skript, který při psaní textu do input#name-input (vstupní událost) nahradí jeho aktuální hodnotu v span#name-output. Pokud je vstup prázdný, měl by se v rozsahu zobrazit řetězec „Anonymní“.\n```html\n\u003cinput type=\"text\" id=\"name-input\" placeholder=\"Zadejte prosím své jméno\" /\u003e\n\u003ch1\u003eDobrý den, \u003cspan id=\"name-output\"\u003eAnonymní\u003c/span\u003e!\u003c/h1\u003e\n```\n# Úkol 4\nNapište skript, který při ztrátě fokusu na vstupu (událost rozmazání) zkontroluje jeho obsah na správný počet zadaných znaků.\n```html\n\u003cinput\n   type=\"text\"\n   id=\"validation-input\"\n   data-length=\"6\"\n   placeholder=\"Zadejte prosím 6 symbolů\"\n/\u003e\n```\nKolik znaků by mělo být ve vstupu, je uvedeno v atributu data-length.\nPokud je zadán správný počet znaků, vstupní hranice se změní na zelenou, pokud je nesprávná, zčervená.\nPro přidání stylů použijte CSS třídy valid a invalid, které jsme již přidali do zdrojových souborů úlohy.\n```html\n#validation-input {\n   ohraničení: 3px solid #bdbdbd;\n}\n\n#validation-input.valid {\n   border-color: #4caf50;\n}\n\n#validation-input.invalid {\n   barva ohraničení: #f44336;\n}\n```\n# Úkol 5\nNapište skript, který bude reagovat na změny hodnoty input#font-size-control (událost vstupu) a změní vložený styl span#text aktualizací vlastnosti font-size. V důsledku toho přetažením posuvníku změníte velikost textu.\n```html\n\u003cinput id=\"font-size-control\" type=\"range\" min=\"16\" max=\"96\" /\u003e\n\u003cbr /\u003e\n\u003cspan id=\"text\"\u003eAbrakadabra!\u003c/span\u003e\n```\n# Úkol 6\nNapište skript pro správu přihlašovacího formuláře.\n```html\n\u003cform class=\"login-form\"\u003e\n   \u003cštítek\u003e\n     E-mailem\n     \u003cinput type=\"email\" name=\"email\" /\u003e\n   \u003c/label\u003e\n   \u003cštítek\u003e\n     Heslo\n     \u003cinput type=\"password\" name=\"password\" /\u003e\n   \u003c/label\u003e\n   \u003cbutton type=\"submit\"\u003ePřihlášení\u003c/button\u003e\n\u003c/form\u003e\n```\nZpracování formuláře odeslání formuláře.login-form by mělo být na události odeslání.\nPři odeslání formuláře by se stránka neměla znovu načítat.\nPokud má formulář prázdná pole, zobrazí se upozornění, že musí být vyplněna všechna pole.\nPokud uživatel vyplnil všechna pole a odeslal formulář, shromážděte hodnoty polí do objektu, kde název pole bude názvem vlastnosti a hodnota pole bude hodnotou vlastnosti. Pro přístup k prvkům formuláře použijte vlastnost elements.\nZobrazte objekt se zadanými daty v konzole a vymažte hodnoty polí formuláře pomocí metody reset.\n\n## Používání\nChcete-li použít toto úložiště, postupujte takto:\n1. Naklonujte úložiště do místního počítače;\n2. Přejděte do adresáře úložiště;\n3. Spusťte každou úlohu podle pokynů popsaných v příslušném souboru úlohy.\n\n## Autor\nToto úložiště vytvořil a spravuje [Oleksii Shevchenko](https://shevchenkool.github.io/portfolio/). Dotazy, návrhy a zpětnou vazbu lze směřovat na [email](uzlabini@gmail.com) or [linkedin profile](linkedin.com/in/oleksii-shevchenko-535ab61b8).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshevchenkool%2Fpractic_for_js1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshevchenkool%2Fpractic_for_js1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshevchenkool%2Fpractic_for_js1/lists"}