Welkom terug.
Dus nu hebben we stellen de mappenstructuur en we hebben onze bestanden die zijn gemaakt We gaan om wat tijd door te brengen in deze video het creëren van de werkelijke teamstructuur.
Zodat de elementen die we nodig hebben voor onze To Do lijst.
Laten we beginnen met het nemen van een blik op de definitieve versie die wij werken aan in de loop van dit toestel.
Dus hier is de uiteindelijke to do list.
En de grote elementen die we hier hebben we een post hier.
Je hebt een knop hier een soort element.
We hebben een tekstinvoer hier input type is gelijk aan de tekst en dan is dit een goed en elk van deze is een bondgenoot in die UL.
En dan elke knop hier is een spanwijdte dat we het weergeven en verbergen en het veranderen van de bij op.
En we moeten ook een soort van element om alles te bevatten en we zullen gewoon gebruik maken van een apparaat om dat te doen.
Dus we moeten een div binnen dat div we een H-1 een tekstinvoer een UL zal maken met een bos van bondgenoten en vervolgens een aantal overspanning in daar ook.
Dus we zullen beginnen met alleen het schrijven van een aantal jaar hem l geen echte C Ss en alleen maar om u te laten weten de manier waarop we gaan om te gaan over dit is door het creëren van een lelijk lijst die functies doen en dan terug te gaan en het toevoegen in de C S.
Dus ik wil het vlees van deze dat is de J-query en de logica van het maken van nieuwe to do's en ze te verwijderen te krijgen en dan gaan we terug te gaan en voeg wat van de mooie dingen aan het eind.
OK.
Dus laten we beginnen met de HD.
Ik ga een div te maken en laten we het een ID-container en we gaan alles te zetten binnenkant van die div en dan in plaats van die div zal een H1 hebben en het zal alleen maar zeggen to do list en dan zullen we hebben een tekstinvoer.
Dus input type is gelijk aan de tekst.
En laten we eens kijken hoe dat is de vormgeving.
Ik ga om zich te ontdoen van de paarse achtergrond te krijgen voor nu en laten we gaan hier.
En ik ben ook gaan om zich te ontdoen van deze waarschuwing.
Dus laten we dat nu doen.
Daar gaan we.
OK.
Dus hebben we onze inbreng hebben we onze tekst voor de H-1.
Ik denk dat we moeten maken om Dasht lijst te doen.
En dan is het volgende wat we doen is het toevoegen van de UL.
Dus laten we die veranderingen te Dasch lijst te doen.
En daarna zullen we aan onze UL en elke te doen is liegen binnenkant van daar.
En laten we beginnen met het toevoegen van drie of vier starter Tutu's.
Dus ga ik naar Toverdranken klasse nieuwe gewaden en we zullen ook toevoegen bezoeken Hagrid.
Okee.
Dus hebben we drie om dit te doen in onze lijst.
Zeer onopvallend lijst zo ver, maar we hebben onze H-1 van onze tekstinvoer en onze drie bondgenoten erin.
Nou laten we nu ga je gang en voeg in een delete-knop en we zijn niet van plan om deze prullenbak knop verwijderen met al de styling om te beginnen dat daarna zal komen te hebben.
We gaan gewoon een eenvoudiger knop en het is eigenlijk niet eens gaan op een knop te zijn.
Het gaat gewoon om te kijken als dit.
Dus de letter X die we kunnen klikken op en als we op dat X zal verwijderen dat te doen.
En dat is gewoon hoe we zullen beginnen in plaats van alleen met de brief deel van de leugen hoewel ik ga een overspanning te gebruiken, zodat overspannen met een letter X.
Dus laten kopiëren die naar beneden.
We hebben drie spand.
Elke kamer heeft een letter X daar vernieuwen.
Niets ziet er anders uit.
Maar nu kunnen we die spanwijdte apart te selecteren en we zullen het toevoegen van een snelle luisteraar.
Dus als we op die spanwijdte we wilt wissen dit te doen of dit hele leugen.
OK.
Dus dat is alle fundamentele markup die we nodig hebben.
Laten we een klein klein beetje styling.
Het eerste wat we doen is het centrum van deze div Dus de div is ID container.
Laten we gaan hier en selecteert u die in onze CSSA bestand te selecteren de nette container en laten we geven het een mooie achtergrond Gray gewoon te beginnen en zien wat we krijgen.
Je kunt zien dat de div gaat helemaal over.
Laten we gaan door en voeg in een met zodat het niet helemaal over hoeft te gaan.
En dan zullen we proberen te centreren in het midden van het scherm, zodat de breedte zal doen, is 366.
En als we behalve dat het is gewoon dezelfde breedte die ik heb met de definitieve versie.
Dus 360 pixels en dan is het volgende wat we willen doen is natuurlijk het centrum dat.
En de makkelijkste manier is om die marge truc gebruiken.
Dus zetten we de marge op de boven- en onderkant nul te zijn en links en rechts om Ahto zijn.
En als we nu frissen hebben we een gezellig centrum to do list.
Dus dat is de hele tijd out en te beoordelen wat we kunnen doen om hier te beginnen.
We zullen voegen in sommige dingen als we ze nodig hebben.
En dan als we eenmaal de basisfunctionaliteit naar beneden zullen we focussen op het maken van deze mooie en het krijgen van de juiste jij de animaties en de effecten van de fades en de dia's en het maken van dingen gewoon kijken en voel me een stuk mooier.