1
00:00:00,360 --> 00:00:01,140
Welkom terug.

2
00:00:01,320 --> 00:00:10,020
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.

3
00:00:10,020 --> 00:00:12,590
Zodat de elementen die we nodig hebben voor onze To Do lijst.

4
00:00:12,990 --> 00:00:19,270
Laten we beginnen met het nemen van een blik op de definitieve versie die wij werken aan in de loop van dit toestel.

5
00:00:19,650 --> 00:00:21,400
Dus hier is de uiteindelijke to do list.

6
00:00:21,600 --> 00:00:26,490
En de grote elementen die we hier hebben we een post hier.

7
00:00:26,570 --> 00:00:29,200
Je hebt een knop hier een soort element.

8
00:00:29,340 --> 00:00:38,580
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.

9
00:00:39,030 --> 00:00:44,960
En dan elke knop hier is een spanwijdte dat we het weergeven en verbergen en het veranderen van de bij op.

10
00:00:44,970 --> 00:00:50,000
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.

11
00:00:50,040 --> 00:01:01,230
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.

12
00:01:01,230 --> 00:01:14,590
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.

13
00:01:14,640 --> 00:01:24,380
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.

14
00:01:24,610 --> 00:01:24,860
OK.

15
00:01:24,870 --> 00:01:26,990
Dus laten we beginnen met de HD.

16
00:01:27,300 --> 00:01:46,640
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.

17
00:01:46,990 --> 00:01:50,580
Dus input type is gelijk aan de tekst.

18
00:01:50,580 --> 00:01:52,380
En laten we eens kijken hoe dat is de vormgeving.

19
00:01:52,680 --> 00:02:00,650
Ik ga om zich te ontdoen van de paarse achtergrond te krijgen voor nu en laten we gaan hier.

20
00:02:01,200 --> 00:02:04,230
En ik ben ook gaan om zich te ontdoen van deze waarschuwing.

21
00:02:04,230 --> 00:02:06,270
Dus laten we dat nu doen.

22
00:02:06,270 --> 00:02:07,240
Daar gaan we.

23
00:02:07,790 --> 00:02:08,140
OK.

24
00:02:08,190 --> 00:02:12,420
Dus hebben we onze inbreng hebben we onze tekst voor de H-1.

25
00:02:12,600 --> 00:02:15,450
Ik denk dat we moeten maken om Dasht lijst te doen.

26
00:02:15,690 --> 00:02:18,970
En dan is het volgende wat we doen is het toevoegen van de UL.

27
00:02:19,080 --> 00:02:24,240
Dus laten we die veranderingen te Dasch lijst te doen.

28
00:02:24,240 --> 00:02:30,660
En daarna zullen we aan onze UL en elke te doen is liegen binnenkant van daar.

29
00:02:30,660 --> 00:02:35,130
En laten we beginnen met het toevoegen van drie of vier starter Tutu's.

30
00:02:35,430 --> 00:02:48,350
Dus ga ik naar Toverdranken klasse nieuwe gewaden en we zullen ook toevoegen bezoeken Hagrid.

31
00:02:48,360 --> 00:02:48,630
Okee.

32
00:02:48,630 --> 00:02:51,740
Dus hebben we drie om dit te doen in onze lijst.

33
00:02:51,750 --> 00:02:59,630
Zeer onopvallend lijst zo ver, maar we hebben onze H-1 van onze tekstinvoer en onze drie bondgenoten erin.

34
00:02:59,680 --> 00:03:09,820
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.

35
00:03:09,840 --> 00:03:15,030
We gaan gewoon een eenvoudiger knop en het is eigenlijk niet eens gaan op een knop te zijn.

36
00:03:15,180 --> 00:03:16,460
Het gaat gewoon om te kijken als dit.

37
00:03:16,590 --> 00:03:23,400
Dus de letter X die we kunnen klikken op en als we op dat X zal verwijderen dat te doen.

38
00:03:23,460 --> 00:03:32,840
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.

39
00:03:33,330 --> 00:03:38,200
Dus laten kopiëren die naar beneden.

40
00:03:38,340 --> 00:03:39,810
We hebben drie spand.

41
00:03:39,990 --> 00:03:44,080
Elke kamer heeft een letter X daar vernieuwen.

42
00:03:44,100 --> 00:03:45,160
Niets ziet er anders uit.

43
00:03:45,450 --> 00:03:51,810
Maar nu kunnen we die spanwijdte apart te selecteren en we zullen het toevoegen van een snelle luisteraar.

44
00:03:51,840 --> 00:03:56,890
Dus als we op die spanwijdte we wilt wissen dit te doen of dit hele leugen.

45
00:03:57,290 --> 00:03:57,530
OK.

46
00:03:57,540 --> 00:03:59,820
Dus dat is alle fundamentele markup die we nodig hebben.

47
00:04:00,060 --> 00:04:02,750
Laten we een klein klein beetje styling.

48
00:04:02,790 --> 00:04:09,300
Het eerste wat we doen is het centrum van deze div Dus de div is ID container.

49
00:04:09,720 --> 00:04:26,430
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.

50
00:04:26,430 --> 00:04:28,670
Je kunt zien dat de div gaat helemaal over.

51
00:04:28,860 --> 00:04:32,590
Laten we gaan door en voeg in een met zodat het niet helemaal over hoeft te gaan.

52
00:04:32,820 --> 00:04:41,840
En dan zullen we proberen te centreren in het midden van het scherm, zodat de breedte zal doen, is 366.

53
00:04:42,120 --> 00:04:48,930
En als we behalve dat het is gewoon dezelfde breedte die ik heb met de definitieve versie.

54
00:04:48,930 --> 00:04:53,870
Dus 360 pixels en dan is het volgende wat we willen doen is natuurlijk het centrum dat.

55
00:04:54,210 --> 00:04:57,000
En de makkelijkste manier is om die marge truc gebruiken.

56
00:04:57,150 --> 00:05:02,760
Dus zetten we de marge op de boven- en onderkant nul te zijn en links en rechts om Ahto zijn.

57
00:05:03,570 --> 00:05:07,640
En als we nu frissen hebben we een gezellig centrum to do list.

58
00:05:07,680 --> 00:05:11,650
Dus dat is de hele tijd out en te beoordelen wat we kunnen doen om hier te beginnen.

59
00:05:11,700 --> 00:05:13,760
We zullen voegen in sommige dingen als we ze nodig hebben.

60
00:05:13,950 --> 00:05:26,470
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.