https://github.com/shevchenkool/practic_for_js1
https://github.com/shevchenkool/practic_for_js1
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shevchenkool/practic_for_js1
- Owner: ShevchenkoOl
- Created: 2024-03-16T08:39:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-23T17:58:29.000Z (about 2 years ago)
- Last Synced: 2025-07-18T13:59:45.477Z (11 months ago)
- Language: HTML
- Size: 30.3 KB
- Stars: 0
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
# Úkol 1
Počí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.
```html
-1
0
+1
```
Vytvořte proměnnou counterValue, která bude ukládat aktuální hodnotu čítače a inicializuje ji na 0.
K tlačítkům přidejte posluchače kliknutí, uvnitř kterých zvyšujete nebo snižujete hodnotu čítače.
Aktualizujte rozhraní novou hodnotou proměnné counterValue.
# Úkol 2
Napište skript, který změní barvy pozadí prvku `````` pomocí vloženého stylu při kliknutí na ```button.change-color``` a vydá hodnotu barvy do ```span.color```.
# Úkol 3
Napiš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í“.
```html
Dobrý den, Anonymní!
```
# Úkol 4
Napiš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ů.
```html
```
Kolik znaků by mělo být ve vstupu, je uvedeno v atributu data-length.
Pokud je zadán správný počet znaků, vstupní hranice se změní na zelenou, pokud je nesprávná, zčervená.
Pro přidání stylů použijte CSS třídy valid a invalid, které jsme již přidali do zdrojových souborů úlohy.
```html
#validation-input {
ohraničení: 3px solid #bdbdbd;
}
#validation-input.valid {
border-color: #4caf50;
}
#validation-input.invalid {
barva ohraničení: #f44336;
}
```
# Úkol 5
Napiš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.
```html
Abrakadabra!
```
# Úkol 6
Napište skript pro správu přihlašovacího formuláře.
```html
<štítek>
E-mailem
<štítek>
Heslo
Přihlášení
```
Zpracování formuláře odeslání formuláře.login-form by mělo být na události odeslání.
Při odeslání formuláře by se stránka neměla znovu načítat.
Pokud má formulář prázdná pole, zobrazí se upozornění, že musí být vyplněna všechna pole.
Pokud 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.
Zobrazte objekt se zadanými daty v konzole a vymažte hodnoty polí formuláře pomocí metody reset.
## Používání
Chcete-li použít toto úložiště, postupujte takto:
1. Naklonujte úložiště do místního počítače;
2. Přejděte do adresáře úložiště;
3. Spusťte každou úlohu podle pokynů popsaných v příslušném souboru úlohy.
## Autor
Toto ú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).