Ste se kdaj vprašali, kako narediti svojo aplikacijo za naloge v JavaScriptu? Mogoče ste že preizkusili nekaj preprostih projektov, vendar želite narediti nekaj več, nekaj uporabnega in zabavnega. No, danes vam bom pokazal, kako ustvariti svojo lastno "todo" aplikacijo v JavaScriptu. In naj vas ne skrbi, to ni tako zapleteno, kot se zdi! Če boste sledili tem preprostim korakom, boste kmalu imeli svojo prvo popolno aplikacijo za naloge. Pripravite se na začetek!

Zakaj narediti aplikacijo za naloge?

App za naloge ali "todo app" je ena izmed najbolj priljubljenih začetniških aplikacij, ki jih programerji gradijo, ko se učijo novih tehnologij. Je preprosta, vendar zelo uporabna. Omogoča vam, da spremljate naloge, jih označite kot opravljene, jih brišete ali pa preprosto pregledujete seznam svojih obveznosti. Pomaga vam izboljšati produktivnost in je pravzaprav zelo primerna za učenje osnov JavaScript, HTML in CSS. Tako lahko obvladaš osnovne funkcije JavaScript ter upravljanje z dogodki, DOM manipulacijo in druge uporabne tehnike!

Osnovna struktura aplikacije

Preden začnemo s pisanjem kode, je pomembno, da si predstavljamo osnovno strukturo naše aplikacije. Naša aplikacija bo sestavljena iz treh glavnih delov:

• HTML: Za strukturo aplikacije, ki vsebuje vhodna polja, seznam nalog in gumbe za interakcijo.
• CSS: Za oblikovanje aplikacije, da bo lepa in uporabniku prijazna.
• JavaScript: Za logiko aplikacije, da bodo naloge shranjene, odstranjene ali označene kot opravljene.

Začnimo s strukturo HTML

Začnimo z osnovno HTML strukturo, ki bo vsebovala naslov, polje za vnos naloge in gumb za dodajanje nalog. Prav tako bomo ustvarili prostor za seznam nalog. Tukaj je osnovna koda:

    
    
    
    


    

        
Moja Todo Aplikacija
        
        Dodaj nalogo
        

    
    

V tem primeru imamo osnovni HTML, ki vsebuje:

• Polje za vnos naloge (input),
• Gumb za dodajanje naloge (button),
• Seznam nalog (ul), kjer bodo prikazane naše naloge.

Oblikovanje s CSS

Zdaj, ko imamo osnovno strukturo, potrebujemo nekaj preprostega oblikovanja s CSS, da bo naša aplikacija lepa. Tukaj je nekaj osnovnih stilov:

/* style.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

.todo-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

input[type="text"] {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    margin: 5px 0;
    background-color: #e2e2e2;
    border-radius: 5px;
}

Ta CSS bo naredil aplikacijo vizualno privlačno, saj bo omogočil, da bodo naloge prikazane lepo in da bo vnos naloge preprost in eleganten. Sedaj pa smo pripravljeni na dodajanje funkcionalnosti z JavaScriptom!

Logika aplikacije z JavaScriptom

Zdaj pa preidimo k logiki aplikacije. Tukaj bomo potrebovali JavaScript, da bomo lahko dodali naloge na seznam, jih odstranili ali označili kot opravljene. Tukaj je nekaj osnovnih funkcionalnosti, ki jih bomo uporabili:

• Dodajanje naloge na seznam,
• Odstranjevanje naloge,
• Označevanje naloge kot opravljene.

Začnimo z osnovno funkcionalnostjo za dodajanje nalog:

// script.js

document.getElementById('add-task-btn').addEventListener('click', function() {
    let taskInput = document.getElementById('task-input');
    let taskText = taskInput.value;
    
    if (taskText !== "") {
        let li = document.createElement('li');
        li.textContent = taskText;
        
        let deleteButton = document.createElement('button');
        deleteButton.textContent = 'Izbriši';
        deleteButton.addEventListener('click', function() {
            li.remove();
        });
        
        li.appendChild(deleteButton);
        document.getElementById('task-list').appendChild(li);
        
        taskInput.value = ""; // Počisti vnosno polje
    }
});

Ta koda omogoča, da ko kliknemo gumb "Dodaj nalogo", se naloga doda v seznam. Prav tako omogoča, da nalogo izbrišemo s klikom na gumb "Izbriši".

Zaključek

In to je to! S tem preprostim vodičem ste se naučili, kako narediti svojo aplikacijo za naloge v JavaScriptu. Seveda, to je šele začetek. Ko boste obvladali osnovne funkcionalnosti, lahko začnete dodajati naprednejše možnosti, kot so shranjevanje nalog v lokalni pomnilnik, označevanje nalog kot opravljene, filtriranje nalog in še več. Po tej poti boste postali pravi mojster JavaScript programiranja!