JS part 2
Tälle sivulle on koottu lista erilaisia JavaScript esimerkkejä, joista voit valita mieluisesi implementoitavaksi omille portfoliosivuillesi A+ tehtävänannon mukaiseksi.
Esimerkkien koodin löydät kätevästi Pekan GitHubista, josta voit vihreästä nappulasta ladata repositorion ZIP-tiedostona.
Pura ZIP-tiedosto ja avaa kansio koodieditorissa. Kierroksen materiaalti löytyy kansiosta js2.
2. Aukeava modaali
14p
Modaali on sivuston päälle avautuva ikkuna, johon usein laitetaan tietoa, joka ei syystä tai toisesta mahdu sivuston muuhun rakenteeseen. Alla olevista napeista voit avata erilaisia modaalielementtejä.
Vaatimukset
- Luo väh yksi elementti, jota klikatessa aukeaa sivuston päälle ikkuna.
- Jos, ikkuna ei täytä koko ruutua luo elementti, joka edes osittain peittää sivun muun sisällön (esim, blurraus, overlay aka läpikuultava tausta)
- Modaalin pitää pystyä sulkea nappulasta
Toteutuksen tiedostot
- index.html
- modal.js
- modal.css
3. Haitarielementti
14p
Haitarielementti on sivuston osa, joka avautuu ja sulkeutuu klikatessa. Tämä on hyödyllinen esimerkiksi silloin, kun sivustolla on paljon tekstiä, jota ei haluta näyttää heti alkuun. Tässä esimerkissä on kolme haitarielementtiä, joista viimeistä ei voi avata.
Vaatimukset
- Haitarielementin otsikkoa klikatessa alapuolelle pitää ilmestyä sisältöä
- Sisältö ilmestyy ja häviää transitiolla
- Useampi haitarielementti ei voi olla auki samaan aikaan
Toteutuksen tiedostot
- index.html
- accordion.js
- accordion.css
Tämä on haitarielementti. Painamalla nappia avautuu lisätietoa. Painamalla uudestaan sulkeutuu.
Tämä on haitarielementti. Painamalla nappia avautuu lisätietoa. Painamalla uudestaan sulkeutuu.
4. Elementtien filtteröinti
18p
Todennäköisesti sivuillasi on projekteja joita haluaisit kenties järjestellä sen mukaan, mitä tägejä niihin liittyy, tai mihin kategorioihin projekti kuuluu? Anna käyttäjälle selkeä vinkki siitä, mitä elementtiä tulee painaa. Miten viestität filtterien resetöinnin?
Vaatimukset
- Luo nappulat, joista voi valita näytettävät elementit
- Vähintään kaksi eri filtteriä
- Filtterin olessa aktiivinen sitä vastaavan nappulan kuuluu indikoida olevansa aktiivinen
- Luo reset nappula, joka tyhjentää filtteröintivalinnat
- Voit valita: vain yksi filtteri aktiivinen kerrallaan tai usempi
Toteutuksen tiedostot
- index.html
- filter.js
- filter.css
Pekan projektit
Filtterit:
Nettisivut
#koodi
Nettikauppa
#koodi
Luettavuus
#ui
UX
#ux
Koodi
#koodi
Rautalankamalli
#ui
Estetiikka
#ui
Visuaalisen ilmeen suunnittelu
#ui
5. Avaa kuva koko ruudulle
22p
Usein sivustolla on kuvia, joita käyttäjä haluaa tarkastella lähemmin. Yleinen tapa tähän on avata kuva isompana erilliseen modaaliin klikatessa. Tässä esimerkissä kuvat avautuvat koko ruudun kokoisina, ja käyttäjä voi sulkea kuvan klikkaamalla X:ää.
Vaatimukset
- Pientä kuvaa klikatessa saman kuvan täytyy avautua koko ruudun kokoiseen ikkunaan
- Kuvat pitää pystyä sulkea nappulasta
- Avautuvia kuvia pitää olla vähintään 2kpl
- Näytä suurempi kuva vaihtamalla sen 'src'-attribuuttia
- Luo tapahtumakuuntelijat jokaiselle pikkukuvalle käyttäen for-looppia (esim. forEach)
Toteutuksen tiedostot
- index.html
- fullScreen.js
- fullScreen.css
6. Vertikaalit osio-indikaattorit
26p
Sivustolla on usein pitkiä sivuja, joissa on paljon sisältöä. Tässä esimerkissä on toteutettu vertikaaliset osio-indikaattorit vasempaan reunaan, jotka kertovat käyttäjälle, missä kohdassa sivua hän on. Klikkaamalla indikaattoria käyttäjä siirtyy kyseiseen osioon.
Vaatimukset
- Osiota pitää olla vähintään 4
- Indikaattoreiden pitää olla ankkurilinkkejä osioihin (href="#osion-id")
- Indikaattorin tyylin tulee näyttää aktiivinen osio
- Indikaattorin aktiivisuuden voit laskea haluamallasi tavalla, esimerkissä elementti on aktiivinen ollessa näytön keskialueaalla
- Inkitaattorien tyyli on vapaavalintainen (esim. logo, laatikko, osion nimi)
- Luo indikaattori-elementit JS:llä eli ÄLÄ kirjoita niitä suoraan HTML:ääm (kts. esimerkki: 'appendChild')
Toteutuksen tiedostot
- index.html
- scrollDots.js
- scrollDots.css
7. Dark/Light mode
14p
Tässä esimerkissä on toteutettu dark mode -toiminto, joka vaihtaa sivuston värimaailman tummaksi ja vaaleaksi nappulaa painamalla.
Vaatimukset
- Luo nappula, jonka tyyli muuttuu klikatessa
- Klikatessa sivuston tyylii muuttuu. Sivuston käytettävyys ei saa hajota.
Toteutuksen tiedostot
- index.html
- darkMode.js
- darkMode.css
8. Ajastettu tervehdys, jossa aikaan sidottua tietoa
12p
Sivuilla käyttäjälle voi kertoa ajankohtaisia asioita, kuten päivämäärän tai kellonajan. Tässä esimerkissä käyttäjälle kerrotaan päivämäärä ja tervehditään häntä. Tervehdys on näkyvissä vain 10 sekuntia.
Vaatimukset
- Luo ajastettu viesti, joka katoaa x sekunnin kulutta. Käytä 'setTimeout'-funktiota
- Viestin pitää kertoa, jotain sen hetkiseen aikaan liittyvää esim. päivämäärä. Käytä 'Date'-objektia ja lokaalia aikavyöhykettä (kts. esimerkki)
- Indikoi käyttäjää viestin näkymisen kestosta reaaliajassa (kts. CSS animation)
- Piilota viesti ajan kuluttua loppuun
Toteutuksen tiedostot
- index.html
- tellTime.js
- tellTime.css
Paina nappia ja saat tervehdyksen, joka poistuu 10 sekunnin kuluttua
9. Hiirtä seuraava elementti
12p
Tässä esimerkissä on sidottu hiiren positio sivulla silmän pupilli-elementtien margin-top ja margin-left -arvoihin
Vaatimukset
- Seuraa hiiren sijaintia valitsemassasi elementissä (Esimerkissä body)
- Liikuta jotain elementtiä hiiren sijainnin mukaisesti
Toteutuksen tiedostot
- naama.js
- naama.css