u06-trello-clone

Uppgiften

I denna uppgift ska du bygga en applikation som fungerar som ett "kanban-board", likt t.ex. Trello.com. För denna uppgift är det endast frontend och ingen backend som ska implementeras.

Se trello.com för att få grepp om hur det ska fungera.

Tanken är att du ska applicera det du har lärt dig angående jQuery, jQuery UI i JS och kombinera den kunskapen med tidigare inlärning i JS för att färdigställa denna uppgift.

Inlämning

Uppgiften ska lämnas in via classroom.github.com i rätt projekt, länk till detta projekt kommer annonseras av läraren i samband med projektets början.

Uppgiften skall också produktionssättas på binero via din studentdomän på förnamn.efternamn.chas.academy/05-trello-clone. Lägg till länken i din README i samband med inlämning för att underlätta vid rättning.

Vänligen notera

Observera att du inte bedöms på estetik eller design. Lägg därför minimalt med tid på detta för att hinna klart i tid. Du bedöms endast på koden och implementation av denna.

Mål

Som användare ska man kunna göra följande:

• Kunna dra "kort" mellan tre olika "kolumner" (todo, doing, done)

• Kunna klicka på ett kort för att se dess information (dialog)

• Kunna titta i olika flikar inom ett kort för att få mer information om det (tabs)

• Kunna sätta en deadline på varje kort (datepicker)

Krav

Den färdiga lösningen måste implementera:

• JQuery UI datepicker

• JQuery UI draggable och droppable (eller sortable)

• JQuery UI dialog

• JQuery UI tabs

• Minst två valfria effekter från JQuery UI

• Minst en egenskapad enkel JQuery UI Widget

• Layout/disposition helt skapad från Bootstrap (valfritt)

• Design/färg & form helt utifrån Bootstraps "standardtema" (valfritt)

Extra utmaning

Om du vill påvisa djupare förståelse och kompetens inom jQuery, jQuery UI och Bootstrap kan du även bygga till några eller alla av följande funktioner:

• Användaren kan skapa nya kort

• Användaren kan skapa nya kolumner som också funkar att dra över kort till

• Användaren kan byta färg på korten med en colorpicker

• Användaren kan arkivera kort så att de hamnar i ett separat arkiv

• Användaren ska kunna "spara" sitt kanban board, förslagsvis i localStorage eller som en JSON-fil, vilken sedan laddas in vid nästa besök

Betygsättning

Den här inlämningen ger underlag för följande kursmål. Där inlämningen helt motsvarar och går att bedöma för de mål som står med svart text och bara delvis de som står med brun text.

1. Kunskaper

• HC 1.1 HTML & CSS

• HC 1.4 Aktuella webbstandarder (gällande och kommande standarder)

• HC 1.5 CSS preprocessorer (ex SASS/LESS)

• JS 1.1 JavaScript / ECMAScript

• JS 1.2 JavaScript-ramverk och -bibliotek

• JS 1.3 Promises

• JS 1.7 Lexical scope

• JS 1.7 Event handling

• BE 1.13 Webbservrar

2. Färdigheter

• HC 2.1 Webbutveckla responsivt och browseranpassat med HTML och CSS enligt aktuella webbstandarder

• JS 2.1 Utveckla webblösningar med JavaScript

• JS 2.2 Använda JavaScript-ramverk och -bibliotek

• BE 2.1 Webbutveckla med objektorienterad PHP

• BE 2.2 Skapa webblösningar med ett MVC-ramverk

• BE 2.4 Sätta upp och utveckla enklare Wordpress-lösningar

3. Kompetenser

• JS 3.1 Arbeta som Fullstack-webbutvecklare med JavaScript

Utöver denna inlämning kan det även finnas fler examinationsmoment som ligger till underlag för samma kriterier.

Förkunskaper från tidigare kurser

Följande relaterade förkunskaper har de studerande från tidigare moment

• Utveckla med JavaScript (promises, lexical scope, event handling)

• HTML & CSS (responsivt, Sass/Less, webbstandarder)

Betygsnivåer

Icke godkänt, Godkänt och Väl godkänt

Godkänd

För att nå Godkänd som betyg på denna inlämning ska du:

• Den studerande kan tillämpa och utveckla enklare lösningar med objekt-orienterad PHP och kan tillämpa de grundläggande principerna för det arkitektoniska mönstret MVC

Väl godkänd

För att få betyget väl godkänt ska du:

• Utöver kriterierna för att erhålla betyget godkänd ska den studerande med mycket gott handlag, utan ytterligare instruktioner från utbildare, kunna vidareutveckla sin lösning på uppgiften och täcka upp en eller flera av de olika extra utmaningskraven.

Förtydligande av betygskriterierna

Betygsnivåerna för samtliga mål är på G-nivå med gott handlag och på VG-nivå med mycket gott handlag. Detta innebär att lösningar/implementationer som är byggda på ett bra sätt utan större fel eller brister och att du som studerande förstår det du byggt är på en G-nivå och för en VG-nivå krävs att lösningen är i stort sätt felfri, byggd på ett bra sätt och att du som studerande förstår för och nackdelar med hur du implementerat teknikerna.

För att få betyg G på kursen ska samtliga betygskriterier för G-nivå vara uppfyllda. För betyg VG ska samtliga kriterier för VG-nivå vara uppfyllda.