Para ihop er i grupp om 3 - ni väljer själva vem ni jobbar med. Läs noga igenom hela uppgiftsbeskrivningen tillsammans och börja sedan med att planera och dela upp arbetet.
När ni har läst hela uppgiftsbeskrivningen är det dags att strukturera ert arbete. Börja med att skapa ett repo på någons GitHub och bjud in de andra från gruppen. Lägg även upp alla ärenden (se lista nedan) som issues på GitHub och planera tillsammans vem som ska göra vad. För att få en bra och gemensam struktur kan det vara bra att göra skisser och/eller flödesdiagram över systemet så ni får en gemensam bild över vad som skall skapas. Allt förarbete ni gör med skisser eller annan diskussion bör läggas till i berörande ärende på GitHub. När det är dags att för er att börja bygga verktyget skall ni använda GitHub flow principen: 1 issue - 1 branch - 1 pull request.Det är rekommenderat att ni gör det första ärendet tillsammans för att undvika merge konflikter. Innan ni påbörjar arbetet och tar egna ärende bör ni fundera på hur ni ska strukturera ert projekt och vilka filer som skall finnas. Exempelvis kan det vara bra att skapa en javascript fil för verktygets olika delar (todos.js, calendar.js och today.js). För att få till ett tydligare flöde i koden bör ni även skapa en huvudfil (main.js) där programmet börjar.
Det ni skall skapa är ett verktyg för att lägga till och ta bort todos. Dessa todos skall visas i en lista till vänster i det grafiska gränssnittet. Till höger skall det finnas en kalender som är länkad till de todos som har skapats. Men andra ord ska todos vara kopplade till en viss dag och visas i kalendern med en siffra som representerar hur många todos som ska göras den dagen. Ni får själva ta fram en egen grafisk profil för verktyget.Skiss att utgå ifrån till er layout (vissa delar så som väder och bilder behöver ni inte göra)
- Välkomstsegment: data-cy="welcome-segment"
- Lista över alla todo: data-cy="todo-list”
- Div:n som innehåller alla dagarna i en månad: data-cy="calendar-body"
- Input-fältet för datumet till en ny todo: data-cy="todo-date-input"
- Input-fältet för todo detalj: data-cy="todo-task-input"
- Knappen för att spara en ny todo: data-cy="save-todo"
- Knappen för att ta bort en todo: data-cy="delete-todo-button”
- Knappen för att ändra en todo: data-cy="edit-todo-button”
- Knappen för att ändra månad till tidigare månaden: data-cy="prev-month"
- Knappen för att ändra månad till nästa månaden: data-cy="next-month"
- Den filtrerade todolistan utifrån vald dag: data-cy="filtered-todo-list"
- Skapa den övergripande layouten enligt skissen ovan. (G)
- Det skall gå att använda verktyget på alla skärmstorlekar ner till 360px i bredd. (G)
- Skapa och designa välkomstsegmentet (delen ovanför todo-listan) med tid, veckodag och datum presenteras. (G)
- Användaren skall kunna lägga till en todo. (G)
- Användaren skall kunna ta bort en todo. (G)
- Skapa och designa kalendervyn med en månadsvy över aktuell månad. (G)
- Kalendern ska visa hur många todos som är schemladaga för varje dag. (G)
- Spara todos i local storage och visa dessa vid omladdning av sidan. (VG)
- Användaren skall kunna ändra en todo. (VG)
- Användaren skall kunna växla till andra månader i kalendervyn. (VG)
- Svenska helgdagar visas i kalendern. (VG)
- Filtrera todolistan utifrån vald dag i kalendern, det ska gå avmarkera vald dag. (VG)
- Uppgiften lämnas in i tid!
- Verktyget fungerar enligt beskrivning.
- Ärenden för godkänt är gjorda.
- Git och GitHub har används enligt beskrivning.
- Alla punkter för godkänt är uppfyllda.
- Ärenden för väl godkänt är gjorda.
![github-classroom[bot] avatar](https://avatars.githubusercontent.com/in/68187?v=4 "github-classroom[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent