Document Object Model

1. Novinky

Stáhněte is připravenou webovou stránku, která zobrazuje několik zajímavých zpráv, a zobrazte ji v prohlížeči. Veškeré úkoly z tohoto cvičení proveďte v JavaScriptové konzoli.

Pomocí document.querySelector vyberte element body a uložte si jej do proměnné bodyElm. Pomocí této proměnné nastavte barvu pozadí elementu na hodnotu #e9e9e9.
Do jiné proměnné vyberte element s třídou news a nastavte mu barvu pozadí na bílou a maximální šířku na 60rem.
Vyberte element h1 a nastavte mu třídu na news__title. Nadpis by měl změnit styl. Nastavte také obsah nadpisu na text Aktuální novinky.
Pomocí atributu id vyberte element obsahující první zprávu. Přidejte do jeho atributu class třídu post--main. První zpráva by tak měla mírně změnit svůj styl. Dejte pozor, aby na elementu zůstala i původní třída post.
Vyberte obrázek v poslední zprávě a změnte jeho atribut src na obrázek img/zprava3-novy.jpg.

Řešení

index.js

'use strict';

// 1
const bodyElm = document.querySelector('body');
bodyElm.style.backgroundColor = '#e9e9e9';

// 2

const newsElm = document.querySelector('.news');
newsElm.style.backgroundColor = 'white';
newsElm.style.maxWidth = '60rem';

// 3
const headingElm = document.querySelector('h1');
headingElm.className = 'news__title';
headingElm.textContent = 'Aktuální novinky';

// 4
const firstPostElm = document.getElementById('zprava1');
firstPostElm.className = `${firstPostElm.className} post--main`;

//5
const lastPostImgElm = document.querySelector('#zprava3 img');
lastPostImgElm.src = 'img/zprava3-novy.jpg';

2. Kvíz

Stáhněte si připravenou stránku. Napište JavaScriptový program, který vybere element s třídou question a nastaví jeho obsah na nějakou kvízovou otázku, například

Uveďte příjmení amerického vynálezce, který v roce 1876 jako první úspěšně podal patent na zařízení, které je dnes považováno za první telefon.

Použijte funkci prompt a zeptejte se uživatele na správnou odpověď. Vyberte element s třídou answer__text a nastavte obsah elementu na odpověď od uživatele. Vyberte element s třidou answer. Pokud je odpověď příjmení Bell, přidejte k tomuto elementu třídu answer--correct. V opačném případě přidejte třídu answer--wrong. Dejte pozor, abyste nesmazali původní třídu answer.

Řešení

index.js

'use strict';

const questionElm = document.querySelector('.question');
const question =
  'Uveďte příjmení amerického vynálezce, který v roce 1876 jako první úspěšně podal patent na zařízení, které je dnes považováno za první telefon.';

questionElm.textContent = question;

const userAnswer = prompt(question);

const answerTextElm = document.querySelector('.answer__text');
answerTextElm.textContent = userAnswer;

const answerElm = document.querySelector('.answer');

if (userAnswer === 'Bell') {
  answerElm.className = `${answerElm.className} answer--correct`;
} else {
  answerElm.className = `${answerElm.className} answer--wrong`;
}

3. Na doma | Dovednosti

Stáhněte si webovou stránku, na které najdete připravené tři posuvníky, které ukazují úroveň dovedností v různých oblastech.

Doplňte do stránky JavaScriptový program, který pomocí funkce prompt požádá uživatele aby vyjářil svoji úroveň postupně ve všech zobrazených dovednostech jako číslo 0 - 100. Program pak nastaví posuvníky na stránce na odpovídající délku a hodnoty u posuvníků na uživatelem zadaná čísla.
Na samém začátku vašeho programu vytvořte funkci updateSkill, která bere dva vstupy: textový řetězec představující id elementu a číslo mezi 0 - 100. Tato funkce při zavolání nastaví posuvník se zadaným id na správnou hodnotu. Použijte tuto funkci ve vašem kódu, abyste nemuseli při nastavování posuvníků psát třikrát po sobě téměř stejný kód.

Řešení

index.js

'use strict';

// 1
const htmlSkill = prompt('Zadejte vaší úroveň HTML (0-100):');
const cssSkill = prompt('Zadejte vaší úroveň CSS (0-100):');
const jsSkill = prompt('Zadejte vaší úroveň JS (0-100):');

const htmlProgressBarEml = document.querySelector('#skill1 .skill__progress');
const htmlValueEml = document.querySelector('#skill1 .skill__value');
const cssProgressBarEml = document.querySelector('#skill2 .skill__progress');
const cssValueEml = document.querySelector('#skill2 .skill__value');
const jsProgressBarEml = document.querySelector('#skill3 .skill__progress');
const jsValueEml = document.querySelector('#skill3 .skill__value');

htmlProgressBarEml.style.width = `${htmlSkill}%`;
htmlValueEml.textContent = `${htmlSkill} / 100`;

cssProgressBarEml.style.width = `${cssSkill}%`;
cssValueEml.textContent = `${cssSkill} / 100`;

jsProgressBarEml.style.width = `${jsSkill}%`;
jsValueEml.textContent = `${jsSkill} / 100`;