🧑‍🎓 To do-app

En liten to do-app på under 20 steg!

Introduktion

Du kan använda denna uppgift för att "förankra" koncepten. Det är en steg-för-steg-guide för att skapa en liten to do-app.

Uppgiftsbeskrivning

I uppgiften ska vi skapa en att göra-lista. Följande "krav" finns:

Det ska gå att lägga till en uppgift i listan.
Det ska gå att markera en uppgift som klar/ej klar.

Steg-för-steg

1. Skapa filer

För uppgiften behöver vi två filer:

index.html där vi skriver vår HTML-kod och där vi länkar in vår JavaScript-fil
script.js där vi skriver vår JavaScript-kod.
Bonus: style.css om du vill göra sidan lite trevligare, men inget krav!

Skapa dessa två (tre) filer i samma mapp och koppla ihop dessa enl. praxis.

html

<!doctype html>
<html>
<head>
  <title>Att göra-listan</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- HTML-kod skrivs här -->
<script src="script.js"></script>
</body>
</html>

2. Skapa ett formulär för uppgifter

Nästa steg är att i HTML-filen skapa en input-ruta (för text) där man kan skriva uppgiftens "namn".

Ge input-rutan ett id-attribut, t.ex. id="taskName".

Skapa också en knapp och ge den ett id också, t.ex. createTaskBtn.

Din HTML kanske ser ut såhär:

html

<form>
  <label>
    <span>Uppgiftsbeskrivning</span>
    <input type="text" id="taskName">
  </label>
  <input type="button" value="Skapa uppgift" id="createTaskBtn">
</form>

3. Koppla event till DOM

Nu ska vi skapa en koppling mellan input-fältet, knappen och JavaScript. Först ska vi testa att det ens fungerar!

I script.js skriver vi:

javascript

// Vi skapar en funktion som i framtiden ska lägga till uppgifter
// i vår att göra-lista, men just nu kommer den bara skriva ut ett
// meddelande till konsolen. Vi vill testa att knapp-klick funkar som
// tänkt innan vi går vidare.
function createNewTask() {
  console.log('Create new task!');
}

// Vi letar reda på knappen i vårt HTML-dokument med querySelector
// och sparar det i en variabel så att vi snabbt kan "komma åt den"
const createTaskBtn = document.querySelector('#createTaskBtn');

// Sedan kopplar vi på en eventlyssnare som väntar på att användaren
// ska klicka på knappen
createTaskBtn.addEventListener('click', createNewTask);

Prova sedan att klicka på knappen, och öppna inspektorn och se om meddelandet dök upp där.

Om det gjorde det - toppen! Annars får du felsöka.

Kan du ha stavat någonting fel?
Är alla filer sammankopplade rätt?
Har du sparat alla filer efter att du gjort ändringar?

4. Ta reda på uppgiftsbeskrivningen

Nu vill vi modifiera vår kod så att vi även får information om vad det är för uppgift vi ska skapa.

Modifiera funktionen createNewTask så att den ser ut som nedan, och testa att det fungerar!

Vi förväntar oss att det som står i input-rutan nu ska synas i konsolen, när vi klickar på knappen.

javascript

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value; 
  console.log('Create new task:', newTaskDescription); 
}

const createTaskBtn = document.querySelector('#createTaskBtn');
createTaskBtn.addEventListener('click', createNewTask);

Om allt fungerar som det ska så kan vi gå vidare! 🎉

5. Skapa en variabel för alla våra uppgifter

Nu behöver vi någonstans att spara våra uppgifter… det ska vi göra i en array!

Högst upp i script.js, lägg till:

javascript

const tasks = [];  

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  console.log('Create new task:', newTaskDescription);
}

const createTaskBtn = document.querySelector('#createTaskBtn');
createTaskBtn.addEventListener('click', createNewTask);

6. Spara uppgiften till vår lista

En tom array gör vi inte mycket med! Nu ska vi få in den text som står i input-rutan in i arrayen!

För det behöver vi använda push till en array, så att den sparas i listan.

Varje uppgift behöver också två egenskaper: dess namn och om den är klar eller inte. Ett objekt lämpar sig väl för detta.

javascript

const tasks = [];

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  // Skapa en ny uppgift & lägg till i listan
  const newTask = { 
    description: newTaskDescription, 
    done: false, 
  }; 
  tasks.push(newTask); 
  
  console.table(tasks); 
}

const createTaskBtn = document.querySelector('#createTaskBtn');
createTaskBtn.addEventListener('click', createNewTask);

Prova att lägga till 2-3 uppgifter och verifiera att du får ut dessa i konsolen i DevTools.

7. Recap

Vad har vi gjort hittills? Reflektera gärna själv en stund innan du läser vidare.

Vilka koncept har du nu provat på? Vad gjorde dessa? Hur hängde allt ihop? Vad var flödet?

Skulle du kunna återskapa detta från scratch på egen hand? Prova gärna!

Repetition är kunskapens moder!

8. Recap (facit)

Vi har (exempelvis):

Skapat en koppling mellan DOM och JavaScript
Lagt till en eventlyssnare på knappen
Skapat en variabel där vi kan spara våra uppgifter
Skapat en funktion som hanterar att lägga till uppgifter i listan
Skapat nya objekt (todos)

9. Visa uppgifterna i HTML, steg 1

Kul med virtuella uppgifter. Ännu roligare om vi faktiskt kunde se dessa i vårt HTML-dokument ju, i "realtid"!

I HTML, lägg till en <div> och ge den ett id, t.ex. tasklist:

html

<div id="tasklist"></div>

10. Visa uppgifterna i HTML, steg 2

Nu behöver vi uppdatera/ändra innehållet i div:en varje gång vi lägger till en ny uppgift i vår lista!

Vi vill gärna ha en "separation of concerns" när det gäller funktioner. En funktion ska göra en sak (och göra det bra).

Vi behöver en referens till vår "platshållare", där uppgifterna ska visas, och en ny funktion i vårt JavaScript-dokument som ansvarar för att skriva ut uppgifterna i HTML-dokumentet:

javascript

const tasks = [];

const tasklistDiv = document.querySelector('#tasklist');

function printTasks() {
  let htmlCode = '<ul>';
  // Loopa igenom alla uppgifter och skriv ut dessa
  tasks.forEach((task) => {
    htmlCode += `<li>${task.description} - Klar: ${task.done}</li>`;
  });
  
  htmlCode += '</ul>';
  
  tasklistDiv.innerHTML = htmlCode;
}

// Övrig kod som fanns sedan innan

Prova sedan om uppgifterna dyker upp i HTML-dokumentet när du lägger till en ny uppgift?

Nähä, inte? Vad tråkigt! Vad kan vi ha glömt? 😉

11. Visa uppgifterna i HTML, steg 3

Använder vi funktionen printTasks() någonstans? Eller har vi bara definierat den?

Var vore det rimligt att den anropades? Tänk själv innan du går vidare!

12. Visa uppgifterna i HTML, steg 4

Din kod borde nu se ut såhär i sin helhet, typ:

javascript

const tasks = [];

const tasklistDiv = document.querySelector('#tasklist');

function printTasks() {
  let htmlCode = '<ul>';
  // Loopa igenom alla uppgifter och skriv ut dessa
  tasks.forEach((task) => {
    htmlCode += `<li>${task.description} - Klar: ${task.done}</li>`;
  });
  
  htmlCode += '</ul>';
  
  tasklistDiv.innerHTML = htmlCode;
}

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  // Skapa en ny uppgift & lägg till i listan
  const newTask = {
    description: newTaskDescription,
    done: false,
  };
  tasks.push(newTask);

  console.table(tasks);
  
  printTasks();
}

const createTaskBtn = document.querySelector('#createTaskBtn');
createTaskBtn.addEventListener('click', createNewTask);

13. En knapp för att markera uppgiften färdig

Härnäst vore det väl kul om vi kunde "toggla" en uppgift som klar eller ofärdig?

Vi behöver modifiera utskriften så att vi får ut en knapp, istället för bara texten "false":

javascript

const tasks = [];

const tasklistDiv = document.querySelector('#tasklist');

function printTasks() {
  let htmlCode = '<ul>';
  // Loopa igenom alla uppgifter och skriv ut dessa
  tasks.forEach((task) => {
    htmlCode += `<li>
                    ${task.description}
                    <button>Klar</button>
                  </li>`;
  });
  
  htmlCode += '</ul>';
  
  tasklistDiv.innerHTML = htmlCode;
}

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  // Skapa en ny uppgift & lägg till i listan
  const newTask = {
    description: newTaskDescription,
    done: false,
  };
  tasks.push(newTask);

  console.table(tasks);
  
  printTasks();
}

const createTaskBtn = document.querySelector('#createTaskBtn');
createTaskBtn.addEventListener('click', createNewTask);

14. Gör något med klar-knappen

Kul med knapp, ännu roligare om den gjorde något när vi klickade på den…

Vi behöver koppla på en eventlyssnare på alla "Klar"-knappar. Men… hur ska vi göra det på ett effektivt sätt? Vi kan ju inte veta hur många uppgifter det finns i förväg.

Vi behöver alltså skapa eventlyssnarna dynamiskt, baserat på vilka uppgifter vi har i vår lista.

Tricket för att göra det är att, efter att knapparna har skapats, leta reda på dessa nu när de existerar i DOM:en, och lägga på en eventlyssnare.

För att vara effektiva behöver vi använda oss av en loop.

Och kom ihåg… en funktion = en uppgift. Typ såhär:

javascript

const tasks = [];

const tasklistDiv = document.querySelector('#tasklist');

function printTasks() {
  let htmlCode = '<ul>';
  // Loopa igenom alla uppgifter och skriv ut dessa
  tasks.forEach((task) => {
    htmlCode += `<li>
                    ${task.description}
                    <button>Klar</button>
                  </li>`;
  });
  
  tasklistDiv.innerHTML = htmlCode;

  addDoneBtnClickEvents();  
}

function addDoneBtnClickEvents() {
	const doneButtons = document.querySelectorAll('button');
	doneButtons.forEach((btn) => {
		btn.addEventListener('click', toggleTaskStatus);
	});
}

function toggleTaskStatus() {
	console.log('Task is done!');
}

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  // Skapa en ny uppgift & lägg till i listan
  const newTask = {
    description: newTaskDescription,
    done: false,
  };
  tasks.push(newTask);

  console.table(tasks);
  
  printTasks();
}

const createTaskBtn = document.querySelector('#createTaskBt

Prova nu att lägga till 2-3 uppgifter igen och testa att dessa skriver ut att uppgiften är klar i konsolen.

15. Vilken uppgift är klar?!

Men… hur ska vi få reda på vilken uppgift som är klar? Visst vore det praktiskt om alla uppgifterna blev klara bara för att man gjorde klart en, men så funkar det ju tyvärr inte IRL/AFK.

Ugh, vi behöver något sätt att skapa en distinktion mellan de olika uppgifterna. Klurigt!

Vi skulle kunna gå på uppgiftens beskrivning, men om man t.ex. lägger till "Köp mjölk" två gånger i listan, så kan vi inte särskilja dessa åt.

Det vi ska utnyttja är en feature i arrayen - nämligen dess index! Med hjälp av indexet kan vi skapa unika namn på våra uppgifter/knappar!

Vi modifierar koden lite!

javascript

const tasks = [];

const tasklistDiv = document.querySelector('#tasklist');

function printTasks() {
  let htmlCode = '<ul>';
  // Loopa igenom alla uppgifter och skriv ut dessa
  tasks.forEach((task, index) => { // Lägg till "index" här
    htmlCode += `<li>
                    ${task.description}
                    <button id="done-${index}">Klar</button> // Och id-attribut här
                  </li>`;
  });
  
  tasklistDiv.innerHTML = htmlCode;

  addDoneBtnClickEvents();
}

function addDoneBtnClickEvents() {
	const doneButtons = document.querySelectorAll('button');
	doneButtons.forEach((btn) => {
		btn.addEventListener('click', toggleTaskStatus);
	});
}

function toggleTaskStatus() {
	console.log('Task is done!');
}

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  // Skapa en ny uppgift & lägg till i listan
  const newTask = {
    description: newTaskDescription,
    done: false,
  };
  tasks.push(newTask);

  console.table(tasks);
  
  printTasks();
}

const createTaskBtn = document.querySelector('#createTaskBtn');
createTaskBtn.addEventListener('click', createNewTask);

Om du nu granskar DOM:en när du har lagt till en uppgift, så kommer du se att dessa har unika ID:n på Klar-knapparna.

16. Ta reda på vilken knapp vi klickade på

Nu ska vi ta reda på vilken Klar-knapp det var vi klickade på! Det gör vi såhär:

javascript

const tasks = [];

const tasklistDiv = document.querySelector('#tasklist');

function printTasks() {
  let htmlCode = '<ul>';
  // Loopa igenom alla uppgifter och skriv ut dessa
  tasks.forEach((task, index) => {
    htmlCode += `<li>
                    ${task.description}
                    <button id="done-${index}">Klar</button>
                  </li>`;
  });
  
  tasklistDiv.innerHTML = htmlCode;

  addDoneBtnClickEvents();
}

function addDoneBtnClickEvents() {
	const doneButtons = document.querySelectorAll('button');
	doneButtons.forEach((btn) => {
		btn.addEventListener('click', toggleTaskStatus);
	});
}

// Ändra funktionen nedan
function toggleTaskStatus(evt) { // Lägg till en "event-parameter" i funktionen
  const whichDoneBtn = evt.currentTarget.id; 
	console.log('Task is done:', whichDoneBtn); 
}

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  // Skapa en ny uppgift & lägg till i listan
  const newTask = {
    description: newTaskDescription,
    done: false,
  };
  tasks.push(newTask);

  console.table(tasks);
  
  printTasks();
}

const createTaskBtn = document.querySelector('#createTaskBtn');
createTaskBtn.addEventListener('click', createNewTask);

I funktionen toggleTaskStatus lägger vi till en parameter. Den kommer att innehålla information om själva klicket. Vanligt är att förkorta eventet till e eller evt. Detta "event" skapas automatiskt och innehåller info om t.ex. var någonstans på skärmen vi klickade, på vad, och en massa annat. Men just nu är vi intresserade av VAD vi klickade på.

Det får vi fram via currentTarget, som är en referens till HTML-element vi klickade på - knappen i detta fallet.

Och genom att läsa av .id, så borde vi i konsolen få ut knappens ID.

Testa om det fungerar! Får du ut olika done-0, done-1, osv.?

17. Markera rätt uppgift som klar

Bra, nu vet vi vilken uppgiftsknapp vi klickade på. Då ska vi "toggla" statusen för den uppgiften.

Vi har ju nu en koppling mellan uppgiftens "plats" i arrayen, och knappens namn. Vi behöver få ut siffran från knappens id. Det kan vi använda för att markera rätt uppgift som klar i arrayen.

Enklast är att radera done- från t.ex. done-0. Då får vi bara kvar siffran 0, som vi kan använda för att kolla upp platsen.

Det gör vi såhär (modda funktionen så att den ser ut som nedan):

javascript

// Övrig kod…

function toggleTaskStatus(evt) {
  const whichDoneBtn = evt.currentTarget.id;

  // Ta fram uppgiftens plats i arrayen (t.ex. 0)
  const index = whichDoneBtn.replace('done-', '');
  // Använd siffran (index) från ovan, och markera uppgiftens status som klar
  tasks[index].done = true;

  console.table(tasks);
}

// Övrig kod…

Nu borde du i konsolen se att uppgiften är klar när du klickar på den (även om inget händer i DOM).

Vi behöver göra en ny utskrift av våra uppgifter med den uppdaterade statusen, och en annan text på knappen!

18. Skriv ut uppgifterna med ny status

Det gör du genom att anropa funktionen printTasks igen!

javascript

// Övrig kod…

function toggleTaskStatus(evt) {
  const whichDoneBtn = evt.currentTarget.id;

  // Ta fram uppgiftens plats i arrayen (t.ex. 0)
  const index = whichDoneBtn.replace('done-', '');
  // Använd siffran (index) från ovan, och markera uppgiftens status som klar
  tasks[index].done = true;

  console.table(tasks);
  
  printTasks();
}

// Övrig kod…

Men vi behöver också en visuell indikator att statusen ändrats! Modifiera funktionen printTasks enl. nedan:

javascript

function printTasks() {
  let htmlCode = '<ul>';
  // Loopa igenom alla uppgifter och skriv ut dessa
  tasks.forEach((task, index) => { // Lägg till "index" här
  	if (task.done) {
  		htmlCode += `<li>
                    ${task.description}
                    <button id="done-${index}">Ej klar</button>
                  </li>`;
  	} else {
  		htmlCode += `<li>
                    ${task.description}
                    <button id="done-${index}">Klar</button>
                  </li>`;
  	}
  });
  
  tasklistDiv.innerHTML = htmlCode;

  addDoneBtnClickEvents();
}

Vi skriver alltså ut olika knapptext beroende på om uppgiften är klar, eller inte klar.

Men… en sista grej. Det vore kul om vi kunde markera uppgiften igen som ej klar, och det kan vi göra med en liten, liten modifiering av vår kod…

19. Toggla statusen

I funktionen toggleTaskStatus kan vi ändra raden enl. nedan:

javascript

function toggleTaskStatus(evt) {
  const whichDoneBtn = evt.currentTarget.id;

  // Ta fram uppgiftens plats i arrayen (t.ex. 0)
  const index = whichDoneBtn.replace('done-', '');
  // Använd siffran (index) från ovan, och markera uppgiftens status som klar
  tasks[index].done = !tasks[index].done;

  console.table(tasks);

  printTasks();
}

Det som händer nu är att vi säger att statusen ska vara MOTSATSEN till nuvarande status.

Dvs. om statusen är true (klar), så blir den motsatsen false (ej klar). Är den false, så blir den true.

Booleans har en "nifty" funktion att vi kan sätta den till dess motsatsvärde med hjälp av att skriva ett utropstecken framför.

Så i princip:

javascript

let status = !status;

Prova att allt funkar som det ska, gå och ta en paus, fundera på vad som hände och prova gärna att återskapa detta en eller två gånger så att du känner dig någorlunda bekväm med vad som sker!

(Det är en fördel att göra samma uppgift 2-3 gånger för du kommer själv att märka att "jajaja, det där kan jag redan, fy vad tråkigt att göra det igen")

Gå vidare

Om du vill utmana dig själv lite, så skulle du kunna:

Lägga till olika CSS-klasser beroende på statusen på uppgiften
Lägga till ett fält för deadline/datum
Sortera uppgifterna beroende på deras status (men då kommer index-principen vi använde ovan inte att fungera, och du behöver istället skapa unika id:n för uppgifterna). Du kan t.ex. använda en räknare för det, se nedan.
Skapa en knapp för att radera en uppgift

Ett unikt id (räknare)

Skapa en variabel, t.ex. let uniqueId = 0; och låt den börja på 0.

Varje gång du lägger till en uppgift, så plussar du på räknaren med 1. På så vis ökar "index"/räknaren varje gång.

javascript

let uniqueId = 0;  

// Övrig kod…

function createNewTask() {
  const newTaskDescription = document.querySelector('#taskName').value;
  const newTask = {
    description: newTaskDescription,
    done: false,
    id: uniqueId,  
  };
  tasks.push(newTask);

  console.table(tasks);

  printTasks();
  
  uniqueId += 1;  
}

Och i utskriften (printTasks) behöver du, istället för loopens index, byta ut knappens ID mot task.id.

🧑‍🎓 To do-app ​

Introduktion ​

Uppgiftsbeskrivning ​

Steg-för-steg ​

Gå vidare ​

🧑‍🎓 To do-app

Introduktion

Uppgiftsbeskrivning

Steg-för-steg

Gå vidare