4. Projekti (palauta myös tänne)

Tee websivu, jonka avulla on mahdollisuus tehdä tehtävälista (Kts. liitetiedosto)

Tässä tehtävässä tarvitsemme seuraavanlaista JacaScriptiä:

document.getElementByID("id:n nimi"), jolla haetaan syötettävä tieto sekä Enterin painallus. Ideana ko. komennolla on, että jos olemme antaneet jollekin tägille id:n, se ko. tägi voidaan hakea ko. id:n avulla. (https://www.w3schools.com/jsref/met_document_getelementbyid.asp)

document.getElementsByTag("tägname"), jolla haetaan kaikki jo listalla olevat tehtävät. Ideana sama kuin edellä, mutta erona tässä on, että Elements-sanassa on s-kirjain, eli silloin haetaan kaikki ko. tägin sisältämät muuttujat. (https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp)

document.querySelector("tägnimi") palauttaa ensimmäisen elementin, joka vastaa määritettyä täginimeä, ryhmää tai valitsimia. Tällä valitaan listajoukko. (https://www.w3schools.com/jsref/met_document_queryselector.asp)

Kaikki edelliset tallennetaan muuttujiin, eli esim. var enterPainike = document.getElement....

sitten kannattaa tehdä kaksi funktiota lisää oletusfunktion lisäksi, joissa katsotaan, kuinka pitkä ko. syöttöarvo on tai onko listalla tehtäviä. Tämä tapahtuu seuraavasti:

function funktionNimi()
{
       return syotto.value.length; // palauttaa syotetyn arvon pituuden
}

function funktionNimi()
{
        return lista.length; // palauttaa listalla olevien tehtävien määrän
}

Tämän lisäksi meidän pitää luoda lista, jolloin käytämme document.createElement("li"), joka tietenkin taas syötetään jollekin muuttujalle. Ja muuttujanNimi.appendChild(document.createTextNode(syotto.value)), jolla syötetään listalle käyttäjän syöttämä tehtävä. Sekä myös listamuuttuja.appendChild(muuttujanNimi), joka lisää listalle lista elementin. Kaikissa edellisissä tämän kappaleen muuttujissa muuttujanNimi on sama. Lopuksi nollataan syöttoarvo komennolla syotto.value = "";

kts. https://www.w3schools.com/jsref/met_document_createelement.asp

kts. https://www.w3schools.com/jsref/met_document_createtextnode.asp

kts. www.w3schools.com/jsref/met_node_appendchild.asp

Sitten teemme funktion, joka tarkastaa, onko syöttöarvolla pituutta:

function lisaaListallePainalluksenJalkeen()
{
    if(syottopituus() > 0) // tarkistetaan, onko edellä luotu funktion pituus > 0
    {
       teeListaElementti(); // jos on, käynnistetään oletusfunktio
    }
}

Tämän jälkeen tarkastamme, onko mitään syötetty ja onko Enteriä painettu funktion avulla:
function lisaaListaEnterinJalkeen()
{
    if(syottopituus() > 0 && event.which == 13) // event.which == 13 (enterin painallus)
    {
         teeListaElementti(); //käynnistetään oletusfunktio
    }
}

kts. https://www.w3schools.com/jsref/event_key_which.asp

Lopuksi käytetään noita funktioita seuraavasti:

enterButton.addEventListener("click", lisaaListallePainalluksenJalkeen);
listamuuttuja.addEventListener("keypress", lisaaListaEnterinJalkeen);

kts. https://www.w3schools.com/jsref/met_element_addeventlistener.asp

/* HUOM!! tehkää ensin toimiva versio, jonne voi lisätä tehtäviä, ja jatkakaa vasta sen jälkeen tästä */

Jotta saamme värjättyä valitun li-elementin, meidän pitää tehdä funktio, joka lisää ko. li-elementtiin luokan, jossa värjäys tehdään (siis CSS luokka, ja värjäys tehdään CSS:n puolella). Tämä tapahtuu seuraavasti:
function funktionNimi()
{
    li.classlist.toggle("luokanNimi"); // kts. https://www.w3schools.com/jsref/prop_element_classlist.asp
}

ja CSS:ssä kerromme tuossa luokassa, että taustaväri ja tekstinväri on jokin muu.
oletusfunktion sisälle pitää tämän jälkeen lisätä kutsu: li.addEventListener("click",funktionNimi);
kts. https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Jotta saamme lisättyä x-kirjaimen li-elementtien loppuun, teemme oletusfunktion sisälle seuraavat komennot:

var muuttujaX = document.createElement("button"); // https://www.w3schools.com/jsref/met_document_createelement.asp
muuttujaX.appendChild(document.createTextNode("X"));
// https://www.w3schools.com/jsref/met_document_createtextnode.asp

li.appendChild(muuttujaX);
// https://www.w3schools.com/jsref/met_node_appendchild.asp
muuttujaX.addEventListener("click", deleteListItem);
// https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Ja samalla tavalla kuin edellä, kun varjasimme elementin, jos haluamme poistaa, lisäämme luokan funktiossa:

function funktionNimi()
{
    li.classlist.add("luokanNimi"); // kts. https://www.w3schools.com/jsref/prop_element_classlist.asp
}

ja luokassa kerromme, että näkyvyys on nolla: display: none;

  • 13. helmikuuta 2020, 08:32