Ĉu vi iam pensis pri kreo de via propra Todo-apliko? Eble vi volas ĝustigi vian taskliston aŭ serĉas projekton por ekzameni JavaScript-enajn teknikojn. Hodiaŭ mi montros al vi kiel krei bazan Todo-aplikon uzante nur JavaScript, HTML kaj CSS. Tiu ĉi projekto estos ne nur amuza, sed ankaŭ tre edukiga por komencantoj, kiuj volas plibonigi siajn programadkapablojn en JavaScript!

Kial Krei Todo-Aplikon?

Todo-aplikoj estas inter la plej simplaj, sed ankaŭ plej uzataj aplikoj en la moderna mondo. Ili helpas nin organizi niajn taskojn, memorigante pri ĉio, kion ni devas fari. Kiam vi kreas Todo-aplikon, vi lernas fundamentajn programadajn teknikojn, kiuj estas utilaj por multaj aliaj projektoj. Ĉu vi estas komencanto aŭ jam havas sperton en JavaScript, kreado de Todo-apliko estas la perfekta maniero por praktiki.

La Bazaj Elementoj de Todo-Aplikoj

Todo-apliko konsistas el kelkaj bazaj funkcioj:

• Listo de Taskoj: Vi bezonas lokon por stoki la taskojn, kiujn vi volas plenumi.
• Tasko Aldono: Uzo de interfaco, kie uzantoj povas aldoni novajn taskojn.
• Tasko Markado: Uzo de metodo por marki taskon kiel plenumita.
• Tasko Forigo: Permesi al uzantoj forigi nebezonatajn aŭ plenumitajn taskojn.

La Teknologioj, kiujn Ni Uzigos

Por ĉi tiu projekto, ni uzos la jenajn teknologiojn:

• HTML: Por strukturi la enhavon de la apliko.
• CSS: Por stili la elementojn de la apliko kaj igi ĝin belan.
• JavaScript: Por aldonaj funkcioj kiel tasko aldono, markado kaj forigo.

La Komenca Kodo de HTML

Unue, ni komencu per la HTML-kodo. Ĉi tiu kodo difinas la strukturon de nia Todo-apliko, inkluzive de la loko por afiŝi taskojn, formon por aldoni novajn taskojn, kaj butonojn por marki kaj forigi taskojn. Jen la baza HTML:

    
    
    
    


    

        
Todo-apliko
        
        Aldoni Taskon
        

    
    

Kreante la CSS por Stilo

Nun, ni aldonu kelkajn stilojn uzante CSS por fari nian aplikon pli alloga. Jen la baza stilo:

#todo-app {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
}

input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

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

button:hover {
    background-color: #4cae4c;
}

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

li {
    background-color: #fff;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

JavaScript: Funkcioj por Aldoni, Marki, kaj Forigi Taskojn

Nun, ni aldonos JavaScript por igi nian Todo-aplikon funkcii. La sekvaj funkcioj donos al ni la kapablon aldoni novajn taskojn, marki ilin kiel plenumitajn, kaj forigi ilin.

const addTaskBtn = document.getElementById('add-task-btn');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

addTaskBtn.addEventListener('click', function() {
    const taskText = taskInput.value.trim();
    if (taskText === '') return;

    const li = document.createElement('li');
    li.textContent = taskText;

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Forigi';
    deleteBtn.addEventListener('click', function() {
        taskList.removeChild(li);
    });

    li.appendChild(deleteBtn);
    taskList.appendChild(li);
    taskInput.value = '';
});

taskList.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        e.target.classList.toggle('completed');
    }
});

Ĉu la Todo-Aplikon Jam Funkcias?

Nun, vi havas bazan Todo-aplikon, kiu permesas al uzantoj aldoni taskojn, forigi ilin kaj marki ilin kiel plenumitaj. Sed kio se ni volas aldoni stilon por taskoj, kiuj estas markitaj kiel plenumitaj? Ni povas fari tion per aldono de kelkaj simplaj stiloj en nia CSS:

.completed {
    text-decoration: line-through;
    color: #888;
}

Testado de la Todo-Aplikon

Post kiam vi aldonis la HTML, CSS kaj JavaScript, estas tempo testi vian Todo-aplikon. Malfermu la HTML-dosieron en via retejo kaj provo aldoni taskojn, marki ilin kiel plenumitajn kaj forigi ilin. Ĉu ĝi funkcias? Se jes, gratulon, vi sukcese kreis vian propran Todo-aplikon en JavaScript!

Ekzemploj de Kiam Uzi Todo-Aplikon

Se vi pensas, ke Todo-apliko estas simpla, vi eraras! Ĉi tiuj aplikoj povas esti uzataj por multajn celojn, kiel ekzemple:

• Studado: Tenado de listo de taskoj por via lernado aŭ eksamenoj.
• Laboro: Organizi viajn laborajn taskojn kaj projektojn.
• Personaj Projektoj: Tenado de taskoj por via ĉiutaga vivo.

Plibonigi la Todo-Aplikon

Post kiam vi komencis uzi la Todo-aplikon, vi povas aldoni pliajn funkciojn por plibonigi ĝin:

• Aldoni la eblecon stoki taskojn en la retumilo uzante LocalStorage.
• Permesi al uzantoj redakti taskojn.
• Aldoni kategoriojn aŭ etikedo por taskoj.

Konkludo

Kreado de Todo-apliko en JavaScript estas ne nur amuza kaj edukiga projekto, sed ankaŭ granda maniero por praktiki kaj plibonigi viajn programadajn kapablojn. Nun kiam vi scias kiel krei Todo-aplikon, vi povas eksperimenti kaj aldoni viajn proprajn funkciojn. Ĉu vi pretas por la sekva paŝo en via JavaScript-vojaĝo? Bonŝancon kaj ĝuu la programadon!