Ka siin töötoas on parimaks abivahendiks abilised, kellelt küsimusi küsida. Küsi julgelt abi :) Kui ei saa jõuga, siis saab nõuga! Kui abiõppejõud sind aidata ei oska, siis kindlasti on sinu küsimusele vastus ka Google'is või Stack Overflow'is. Samuti on meil varasemate töötubade jaoks loodud veebilehe tegemise abimaterjalid ja ülesannete näidislahendused on kättesaadaval kaustas "solutions".
Vaheajad on ühed oodatuimad tähtpäevad õpilaste elus. Küll aga on tüütu arvutada, millal järgmine vaheaeg tuleb. Selleks hakkasid sa koos sõbraga arendama veebilehte, mis näitab reaalajas, kui palju aega on vaheajani jäänud. Käes on aga eksamiperiood ja kahjuks peab su sõber õppima matemaatika järeleksamiks, sest ta kukkus eksami läbi. Seega tuleb sul üksinda töö lõpule viia!
Oleme sulle ette valmistanud pisikesed ülesanded ning juhtnöörid nende lahendamiseks. Saad kätt proovida nii HTMLi, CSSi kui JavaScriptiga. See tähendab, et saad soovi korral muuta ise veebisaidi paigutust, lisada või eemaldada elemente ning muuta selle välimust ja funktsionaalsust!
Oluline on, et sul oleks tore ja et saaksid natuke oma loovust valla lasta! Kui satud segadusse või vajad abi, siis tõsta julgelt käsi või guugelda :)
Nagu varasemalt mainitud sai, siis kogu HTML on üles ehitatud tag'ide peale. Iga HTMLi komponent on mingisugune tag!
Esiteks tuleks meil korrastada veidi faili index.html. Ava see fail ja otsi sealt üles lehekülje päis (<head>
tag). Siin tuleb sul taastada ühendus meie HTML struktuurifaili, CSS stiilifaili ja JavaScript skriptifaili vahel.
💡 Kuidas ühendada omavahel HTMLi ja CSSi?
CSSi faili ühendamiseks saame kasutada isesulguvat tagi <link>, ning panna talle külge märgendi rel="stylesheet", et
anda märku, et tegemist on lehekülje stiili sisaldava failiga. CSS faili nimi tuleb panna märgendis href=""
jutumärkide vahele.
Kui see kõik kokku panna, siis CSS faili ühendamine võiks välja näha umbes selline:
<link rel="stylesheet" href="style.css"/>💡 Kuidas ühendada omavahel HTMLi ja JavaScripti?
JavaScripti faili ühendamine käib väga sarnaselt kui CSSi ühendamine, aga seal tuleb kasutada tagi <script>. Skriptile
tuleb märgenditeks anda JavaScripti faili nimi src="failinimi.js" ja tüüp type="text/javascript". Kuna meie
JavaScripti skript hakkab muutma veebilehe sisu, siis peaks tema ühendamisega ootama kuni ülejäänud veebileht on ära
laadinud, ning selleks tuleb talle märgendina lisada veel defer. <script> tag ei ole isesulguv, seetõttu tuleb see
lõpuks ka sulgeda: </script>
Kui see kõik kokku panna, siis JavaScripti faili ühendamiseks kasutatav kood võiks olla näiteks selline:
<script src="script.js" type="text/javascript" defer></script>Pärast HTMLi, CSSi ja JavaScripti vahel ühenduse taastamist tuleks HTML-fail veel kriitilise pilguga üle käia. Äkki on veel mõni HTMLi tag jäänud korralikult lõpuni kirjutamata?
Selgub, et üks tag tuleks tõesti veel korda teha. HTMLis kasutatakse tähtsa teksti märgistamiseks tihti pealkirjasid
(heading). Kõige tähtsam tekst märgistatakse ära tag'iga <h1>, sellest järgnev tag'iga <h2> jne.
💡 Kuidas töötavad HTMLis pealkirjad?
<h1>Suur pealkiri</h1>
<h2>Alapealkiri</h2>
<h3>Veidi väiksem alapealkiri</h3>
<h4>Juba päris väike alapealkiri</h4>
<h5>No ikka tõesti väike alapealkiri</h5>
<h6>Peaaegu sama väike kui tavaline tekst</h6>Antud juhul piisab meil sellest, kui märgistame meie veebilehe kõige olulisema teksti, aja lugemise teksti, tag'iga
<h1>.
Nüüd kui HTMLi sisu parandatud sai, tuleks teha mõned korrektuurid ka veebisaidi välimusele. Sinu ülesandeks on veebisaidile puuduvad värvid lisada!
CSS koosneb selector'itest, millega valitakse elemente. Nende sees saab määrata elemendile erinevaid omadusi. Igale omadusele saab omakorda anda eri sorti väärtuseid. Omadused on näiteks:
color- teksti värvbackground-color- tausta värvfont-size- teksti suuruswidth- elemendi laiusheight- elemendi kõrgusmargin- elemendi veeris ehk ala valitud elemendi ja teiste elementide vahepadding- elemendi sees olev "puhver" (Näiteks kui mul on musta joonega kast, mille sees on tekst, siis tekst puutub algul kasti. Kui lisada padding, siis tekib vahe teksti ja kastiääre vahele.)- jne (Fun fact: CSSil on üle 200 erineva omaduse)
Mine faili style.css ja lisa puuduvad värvid kohtadesse, kus background-color või color väärtused on puudu. Need
kohad leiad ülesse "TODO" kommentaaride järgi. Et asi lihtsam oleks, oleme loonud värvidele muutujad (variable), mida
saab kasutada. Neid muutujaid näed sa style.css failis ridadel 67-75!
💡 Kuidas kasutada CSSis muutujaid?
Siin (ja style.css failis ridadel 67-75) saad sa neid väärtuseid ka näha - väärtused, mis algavad "--" ongi muutujad,
mida saab igal pool kasutada.
:root {
--color-background: #FDFFEC;
--text-color-blue: #2D3142;
--text-color-green: #81A880;
--text-color-orange: #FF8C42;
--color-blue: #2D3142;
--color-green: #81A880;
--color-orange: #FF8C42;
}Muutujate kasutamiseks on selline funktsioon nagu var(), mille sisse sa paned muutuja nime, et seda kasutada. Näide:
background-color: var(--color-background);
color: var(--color-orange);Nüüd on aeg vaadata JavaScripti poole. Su sõber lisas juba päris mitme sündmuse kuupäevad ise, kuid ta ei mäletanud, millal su sünni- ja nimepäev on. Seega pead sa need kuupäevad ise sisestama.
Failis script.js asub veebisaidi JavaScripti kood. Sisu võib tunduda küll hirmus, kuid ära muretse! Enamus tööst on
juba tehtud. Kohe faili alguses ongi sündmuste nimekiri (defineeritud kui timetable).
Nagu näha on, siis sünnipäeva ja nimepäeva kuupäevadesse on jäetud YYYY-MM-DD, sinu ülesanne ongi need asendada samas
formaadis numbritega (Ehk siis aasta-kuu-päev)! Õiget vormistust näed ka teiste ürituste pealt. Vaata, et lisaksid oma
kuupäevale nii alguse kui lõpu väärtuse, et kood toimiks õigesti (algus ja lõpp on samal päeval, lihtsalt algus on kell
00:00 ja lõpp kell 23:59).
Jätkame JavaScriptiga. Su sõber on kirjutanud valmis aja arvutamiseks funktsiooni updateCountdown();, kuid ta ei kutsu
seda kuskil välja ehk funktsioon ei käivitu. Lisaks sellele peab funktsiooni välja kutsuma iga 1 sekundi ehk 1000
millisekundi tagant, et see toimiks nagu õige kell toimima peaks.
Rida 182 läheduses peaksid leidma "TODO", mis käib selle ülesande kohta. Seal peadki sa sisestama õige funktsiooni nime,
et see alguses välja kutsuda. Nagu näha, siis funktsiooni välja kutsumiseks tuleb funktsiooni nime järgi panna (sulud).
Kohe pärast seda pead sa uuesti funktsiooni nime sisestama teise funktsiooni setInterval(FUNKTSIOONI_NIMI, 1000);,
sest seal hakatakse aja uuendamise funktsiooni välja kutsuma iga sekundi tagant. Pane tähele, et siin pole funktsiooni
nime järele enam (sulge) vaja!
Kui oled kõik õigesti teinud, siis nüüd peaks veebilehel asuv countdown toimima!
Nüüd kui kuupäevad on olemas, tuleks nende valik kajastada ka HTMLis, et neid üldse valida saaks. See pole õnneks raske!
Mine faili index.html ja selle faili lõpuridadelt leiad sa sellise tagi nagu <select name="event" id="event">. Sinna
sisse hakkadki sa valikuid lisama! Nagu näha on, siis seal on juba üks valik olemas. Jäänud on veel lisada valikud
teiste tähtpäevade jaoks.
Kõige lihtsam on teha copy-paste esimeselt realt ja asendada value="" väärtus tähtpäevale vastavaga. Et iga valik
saaks õige väärtuse, siis vaata script.js faili algust, kus on iga tähtpäeva nimi välja toodud.
💡 Kuidas lisada õige väärtus option tag'ile?
"kooli lõpp": [ // "kooli lõpp" on tähtpäeva nimi ja selle sama nime pead sa ka optioni väärtuseks panema
{
start: new Date("2025-06-18T00:00:00.000Z"),
end: new Date("2025-06-26T23:59:59.000Z"),
}
],<option value="kooli lõpp">kooli lõpuni</option> <!-- "kooli lõpp" tuleb niimoodi sisestada -->Nüüd on meie veebileht juba päris funktsionaalne! Ent tähelepanelik vaatleja märkab, et kui valida vaheaja asemel näiteks sünnipäevani aja lugemine, siis hakkab kell küll õige päevani aega lugema, aga tekst veebilehel teatab endiselt, et me loeme aega vaheajani! Kuidas seda küll parandada?
Õnneks on selle vea parandamine imelihtne! Ava fail script.js ja otsi sealt üles funktsioon updateEventTitle(). See
funktsioon peaks meie eest seda teksti uuendama, ent paistab, et koodi autor on unustanud määrata, millise ID-ga
HTML-elementi me siinkohal uuendama peaks.
Proovime sobiva elemendi ID üles leida! Ava fail index.html ja otsi sealt üles tekstielement, kus on kirjas "Vaheajani
on jäänud". Nüüd jäta selle elemendi ID meelde, mine tagasi script.js faili, ja kirjuta seesama ID funktsiooni
updateEventTitle() tühjade jutumärkide sisse. NB! ID tuleb ära muuta nii if kui ka else harudes!
Kui failis script.js on parandused tehtud, siis võiks meie leht uue kuupäeva valimisel õigesti näidata, mis päevani
meie countdown nüüd loeb!
Kõige ägedam asi on veel jäänud, et veebileht oleks lõpuks valmis! Nimelt tuleb korda teha teemalüliti (theme switcher). Siis saaksid silmad lõpuks puhata.
Lõpetame samuti JavaScriptiga. script.js failis on veel üks TODO, mis asub real 218 (umbes seal). Võib-olla märkad
isegi, et sealt on midagi puudu. Nimelt data-theme määramisel ei anta sellele väärtust, mis muudaks veebilehe
välimust. Tühjade jutumärkide sisse peab kirjutama vastavalt "light" või "dark", et koodijupp tööle hakkaks.
HINT: Vaata, kuidas kohe pärast seda pannakse localStorage'issee "theme" väärtus.
- 👑 Muuda veebilehe välimust enda maitse järgi. Võid lisada värve, muuta fonti ja paigutusi jne!
- 👑 Lisa sündmuste valikusse ka teisi sündmusi.
- 👑 Võid lisada mingid eriefektid, kui valitud sündmus kätte jõuab. Näiteks confetti!