1
00:00:00,650 --> 00:00:02,670
OK we komen terug in deze video komen.

2
00:00:02,670 --> 00:00:05,040
We gaan om te werken aan een aantal nieuwe functies.

3
00:00:05,040 --> 00:00:08,190
De eerste is wanneer ik het spel te winnen.

4
00:00:08,460 --> 00:00:09,410
Het vertelt me ​​correct.

5
00:00:09,630 --> 00:00:15,440
En dan kan ik het spel opnieuw op om nieuwe kleuren te krijgen en als ik niet hebben gewonnen.

6
00:00:15,530 --> 00:00:19,460
Maar ik wil ook nieuwe kleuren, omdat een of andere reden Ik hou niet van de kleuren die ik heb.

7
00:00:19,680 --> 00:00:21,750
Ik kan ook op dat de nieuwe knop kleuren.

8
00:00:21,930 --> 00:00:32,770
Dus eigenlijk moeten we een knop die wordt gereset het spel pick nieuwe kleuren te kiezen een nieuwe willekeurige kleur verschijnen van de zes willekeurige kleuren en we komen terug naar de gemakkelijke en hard mode laatste komen.

9
00:00:32,940 --> 00:00:35,870
Dus deze knop doet hetzelfde.

10
00:00:36,040 --> 00:00:44,150
Verandert de tekst maar als we de wedstrijd hebben gewonnen en vroeg of we nog een keer wilt spelen, zodat we weer kunnen klik op spelen en dat zal het te resetten.

11
00:00:44,220 --> 00:00:48,540
Maar ik kan ook op nieuwe kleuren en dat zal ook resetten.

12
00:00:48,570 --> 00:00:49,840
Dus dat is wat we gaan richten op.

13
00:00:50,010 --> 00:01:00,290
En om te beginnen ga ik om verder te gaan en toe te voegen in de knop en voeg die streep, dat gaat over zodat de streep op deze knop zal bevatten voor een nieuwe kleur of om te spelen opnieuw.

14
00:01:00,870 --> 00:01:02,890
En het bevat de boodschap die we al hebben.

15
00:01:03,060 --> 00:01:04,970
En dan de twee knoppen die we later doen.

16
00:01:05,250 --> 00:01:14,240
Dus als we het eerste wat we moeten doen we al een div Ik ben gewoon gaan om het id van de streep te geven en dan kunnen we dat gebruiken.

17
00:01:14,550 --> 00:01:19,560
En dan hebben we al onze overspanning binnen dat zoiets als de juiste tonen of probeer het opnieuw.

18
00:01:19,590 --> 00:01:29,820
En binnen hier zijn we zullen gewoon toe te voegen onze knop en deze knop zal beginnen met te zeggen dat de nieuwe kleuren die we kunnen besparen we vernieuwen.

19
00:01:30,160 --> 00:01:33,140
OK, dat ziet er ongeveer net zo slecht als je zou verwachten.

20
00:01:33,330 --> 00:01:40,210
Laten we gaan door en voeg de witte achtergrond kleur en centreren alles in deze div Dus onze div heet streep.

21
00:01:40,590 --> 00:01:45,220
Laten we naar onze C Ss en we gaan Strype die een ID te selecteren.

22
00:01:45,360 --> 00:01:48,970
Dus moeten we streep te gebruiken met een bijzaak.

23
00:01:49,260 --> 00:01:54,580
En we gaan een achtergrondkleur achtergrond set wit te zijn.

24
00:01:54,660 --> 00:02:09,030
Ik ga de hoogte ingesteld op 30 pixels, zodat we een mooie en lange div zijn relatief hoog div en ik ga om tekst align ingesteld op Center zijn.

25
00:02:09,300 --> 00:02:13,330
En nu als ik refresh je een witte div gaat helemaal over.

26
00:02:13,350 --> 00:02:15,220
Het is een beetje groter dan het was.

27
00:02:15,240 --> 00:02:17,230
We hebben een knop in hier net iets.

28
00:02:17,400 --> 00:02:23,640
En als ik win of verlies of krijgen het verkeerde antwoord is er een overspanning je kan het gewoon niet zien.

29
00:02:23,640 --> 00:02:27,290
En dat komt omdat de tekst van die spanwijdte is wit.

30
00:02:28,380 --> 00:02:38,690
Dus wat je zou kunnen denken over het doen is in te gaan op onze streep de div en zeggen dat de tekst kleur moet zwart zijn, maar helaas is dat niet werkt.

31
00:02:38,880 --> 00:02:59,710
En dit is een kwestie van de specificiteit omdat we zeggen dat met deze lijn hier alles binnen het ding met het idee van de streep zwarte tekst kleur zwart moeten zijn en je zou denken OK dat is snidey dat is super specifiek als je terug naar kunt bedenken onze vroege CSS specificiteit lezingen en ID is zeer specifiek.

32
00:02:59,790 --> 00:03:05,440
Het ding is maar dit is het instellen van de kleuren zwart op de div met ID streep te zijn.

33
00:03:05,970 --> 00:03:20,630
En dan zijn we het instellen van alle overspanningen, zodat je hier kunt zien aan de kleur wit zijn, zodat deze instelling op wit zijn en dat maakt het meer specifieke omdat we eigenlijk het element zelf in plaats van de ouder te richten en deze te laten erven de kleur.

34
00:03:21,090 --> 00:03:22,570
Dus we hebben een paar opties.

35
00:03:22,590 --> 00:03:25,960
Wat ik zal doen is eigenlijk alleen maar te ontdoen van dit voor nu.

36
00:03:26,040 --> 00:03:42,960
We gaan niet naar de kleur in te stellen niet meer wit zijn en we kunnen verfrissen en je zult zien dat dit niet van kleur verandert het is nog steeds een witte overspanning ook al kregen we ontdoen van de lijn die zei dat alle overspanningen zijn wit en dat is want het is de binnenkant van een H1 en erft de H1 tekstkleur die is wit.

37
00:03:42,990 --> 00:03:45,590
Op dezelfde manier dat deze overspanning hier is zwart.

38
00:03:45,600 --> 00:03:55,160
Hij erfde de tekstkleur van zwart of gewoon normale kleuren zwart uit de streep div dat is omheen die u hier kleur zwart ziet.

39
00:03:55,410 --> 00:03:56,770
En dat is onze striked het.

40
00:03:57,060 --> 00:03:57,660
OK.

41
00:03:57,810 --> 00:04:06,800
Dus laten we nu werken aan het krijgen van deze knop om het spel opnieuw in te stellen om zo te beginnen moeten we een event listener toe te voegen.

42
00:04:06,870 --> 00:04:09,750
En voordat we kunnen doen wat we nodig hebben om die knop te selecteren.

43
00:04:09,960 --> 00:04:21,000
Dus ga ik die knop en ID geven hier zullen we noemen het ID is gelijk aan reset en dan zullen we dat reset-knop in plaats van een Javascript selecteren.

44
00:04:21,000 --> 00:04:31,980
Dus var resetknop gelijk te documenteren die vraag selector met onze octaaf of resetten.

45
00:04:31,980 --> 00:04:37,120
En vervolgens als altijd Ik wil graag mijn eenvoudige test event listener toe te voegen.

46
00:04:37,140 --> 00:04:40,680
Dus resetknop voegt evenement luisteraar.

47
00:04:40,860 --> 00:04:52,820
Klik op en toen we op alles wat we doen is wel een eenvoudige waarschuwing snel resetknop zomaar te vernieuwen.

48
00:04:52,970 --> 00:04:57,590
En als ik op deze klik krijg ik mijn alert en dat betekent dat we goed om te gaan.

49
00:04:57,590 --> 00:05:01,030
Dus de volgende up kunnen we echt werken aan de logica om te resetten.

50
00:05:01,250 --> 00:05:03,890
Dus wat we moeten doen laten we schrijven de pseudo-code.

51
00:05:03,890 --> 00:05:10,030
Wanneer u klikt op die knop moet alle nieuwe kleuren te genereren.

52
00:05:10,040 --> 00:05:22,030
We moeten een nieuwe willekeurige kleur uit scala plukken en dan moeten we de kleuren van de vierkantjes op de pagina te veranderen.

53
00:05:22,280 --> 00:05:28,910
Dus om alle nieuwe kleuren genereren we eigenlijk al die functie bestaande genereren van willekeurige kleuren.

54
00:05:29,030 --> 00:05:33,940
Dus we gewoon zeggen kleuren is nu gelijk aan willekeurige kleuren van zes genereren.

55
00:05:34,580 --> 00:05:42,860
En dan zullen we halen een nieuwe willekeurige kleur dus kies de kleur is nu gelijk te halen de kleur van de methode of de functie die we gedefinieerd.

56
00:05:42,860 --> 00:05:49,540
Er is één ding dat we eigenlijk moeten doen wat veranderen dit scherm kleur om de nieuwe picks kleur overeenkomen.

57
00:05:49,850 --> 00:06:01,090
Dus we zullen gewoon zeggen kleur veranderen display geplukt kleur overeenkomen, zodat men is eenvoudig.

58
00:06:01,160 --> 00:06:23,110
Alles wat we moeten doen is zeggen kleurenscherm dot tekstinhoud gelijk geplukt kleur en als we vernieuwen onze pagina en we proberen te klikken nieuwe kleuren wat het doet is het genereren van zes nieuwe kleuren.

59
00:06:23,120 --> 00:06:25,400
We zijn ze nog niet zien omdat we niet dat de code te hebben.

60
00:06:25,580 --> 00:06:31,410
En dan is het plukken van een van die zo geplukt kleur en dan het veranderen van wat we hier zien te picta kleur aan te passen.

61
00:06:31,730 --> 00:06:36,220
Dus het geeft ons een nieuwe willekeurige kleur daarboven en zes willekeurige kleuren achter de schermen.

62
00:06:36,230 --> 00:06:42,230
Dus het laatste stuk is om die zes nieuwe kleuren op de pagina weer te geven en we hebben dat eerder gedaan.

63
00:06:42,260 --> 00:06:50,440
Hierna zijn we een lus door alle pleinen en we veranderen kwadraat up stijl die achtergrond kleuren zijn.

64
00:06:50,450 --> 00:06:56,060
Ik dus ik ga om te beginnen door gewoon dupliceren dat alles hier en we zullen dit refactorizar.

65
00:06:56,350 --> 00:06:58,340
Maar om te beginnen met het allemaal hier te zetten.

66
00:06:58,370 --> 00:07:12,600
Dus loop door alle pleinen pleinen overvleugelen I plus plus en dan alles wat we moeten doen, is zeggen pleinen ik stijl die achtergrond is gelijk aan kleuren.

67
00:07:13,020 --> 00:07:15,820
Ik zal redden.

68
00:07:16,070 --> 00:07:21,660
En als we vernieuwen en klikken we op de nieuwe kleuren die het genereert 60 willekeurige kleuren.

69
00:07:21,740 --> 00:07:22,820
Hij ontvangt een.

70
00:07:22,820 --> 00:07:30,360
Het werkt het display om het beeld kleur weer te geven en het verandert alle zes vierkanten naar de nieuwe zes kleuren passen.

71
00:07:30,710 --> 00:07:34,730
Dus laten we het uit te proberen en zien als onze vorige logica houdt ook.

72
00:07:35,240 --> 00:07:35,850
OK.

73
00:07:36,290 --> 00:07:39,130
Dus is dit een behoorlijke hoeveelheid rood.

74
00:07:39,140 --> 00:07:41,460
Zeer weinig groen en een fatsoenlijk bedrag van blauw.

75
00:07:41,840 --> 00:07:45,280
Laten we proberen te klikken op een aantal dat we niet denken dat ze gelijk.

76
00:07:46,160 --> 00:07:48,880
En nu laten we gaan voor een van de paars.

77
00:07:49,070 --> 00:07:50,940
Dus het lijkt erop dat een beetje meer rood op de blauwe.

78
00:07:50,960 --> 00:07:56,510
Dus ik ga deze raden en we hebben gelijk en het lijkt erop dat de dingen werken nog steeds prima.

79
00:07:56,540 --> 00:07:58,470
Snel nieuwe kleuren weer.

80
00:07:58,610 --> 00:08:00,320
We willen dit opnieuw in te stellen.

81
00:08:00,320 --> 00:08:01,960
Dat is echt een kleine cosmetische zaak.

82
00:08:02,030 --> 00:08:11,000
Maar toen we op nieuwe kleuren moeten we het display hier te resetten, zodat het terug gaat naar zwart of naar deze donkergrijze kleur.

83
00:08:11,000 --> 00:08:18,480
Het andere wat we willen doen is dat wanneer we als we willen dat het spel nog een keer zeggen zoals je hier kunt zien, dus ik hier zal winnen.

84
00:08:18,530 --> 00:08:20,350
Deze is veel groen.

85
00:08:20,540 --> 00:08:24,980
Ik win en het vertelt me ​​opnieuw te spelen en het doet het zelfde ding.

86
00:08:24,980 --> 00:08:29,260
Functioneel het niet echt veranderen het is gewoon ons en andere tekst.

87
00:08:29,300 --> 00:08:31,060
Dus dat is eenvoudig te doen.

88
00:08:31,100 --> 00:08:35,150
Alles wat we moeten doen is het vinden waar de code is om te controleren als je wint.

89
00:08:35,180 --> 00:08:36,240
Dat klopt hier.

90
00:08:36,620 --> 00:08:39,500
En toen we willen gewoon de tekst inhoud van die toets.

91
00:08:39,740 --> 00:08:41,820
Zodat de knop werd resetknop genoemd.

92
00:08:41,930 --> 00:08:52,700
Dus reset knop die tekstinhoud gelijk opnieuw te spelen met een vraagteken vernieuwen zegt het nieuwe kleuren.

93
00:08:52,790 --> 00:08:54,560
Laten we nu proberen het spelen van een van deze.

94
00:08:54,740 --> 00:08:58,750
Dus dit is een veel rode en veel groen en een beetje van blauw.

95
00:08:58,790 --> 00:09:02,070
Dus veel van rode en veel groen gaat ons een gele kleur te geven.

96
00:09:02,210 --> 00:09:04,100
Dus laten we een beperking van een aantal van hen.

97
00:09:04,100 --> 00:09:08,180
En dan een beetje van blauw gaat om het lichter en helderder te maken.

98
00:09:08,480 --> 00:09:13,590
Dus als we een van deze, zoals deze te proberen of dit degene die je zult zien dat ze niet helemaal goed.

99
00:09:13,880 --> 00:09:17,230
En dit is ons antwoord hier en het vertelt ons opnieuw te spelen.

100
00:09:17,300 --> 00:09:20,120
En echt snel en het doet precies hetzelfde.

101
00:09:20,180 --> 00:09:23,570
Het laatste wat zoals ik al zei is het veranderen van de achtergrond kleur terug.

102
00:09:23,570 --> 00:09:28,430
Dus hier kunnen we alleen maar doen dat aan het eind van de reset-knop.

103
00:09:28,520 --> 00:09:30,950
We gaan gewoon naar die H-1 te selecteren.

104
00:09:31,200 --> 00:09:34,610
Het is een punt waar we hier geselecteerd.

105
00:09:34,670 --> 00:09:37,090
Dat is dial-up achtergrond.

106
00:09:37,160 --> 00:09:40,600
UPS gelijk.

107
00:09:40,640 --> 00:09:49,560
En het is dat hexadecimale 2 3 2 3 2 3, dat is als je vergeten dat je zou kunnen gaan kijken in SEE beoordelen het lichaam achtergrondkleur.

108
00:09:49,800 --> 00:09:55,410
Of we zetten het neer hier toen we te elimineren een van de kleuren als je de verkeerde kleur te kiezen.

109
00:09:55,580 --> 00:09:58,680
We veranderen de achtergrondkleur hetzelfde te zijn als het lichaam.

110
00:09:59,150 --> 00:10:02,130
OK laten we nieuwe kleuren te vernieuwen.

111
00:10:02,330 --> 00:10:03,820
Laten we nu winnen.

112
00:10:04,010 --> 00:10:11,300
Gewoon snel willekeurig enkel omwille van de tijd klikken we op spel opnieuw en verandert naar een zwarte achtergrond.

113
00:10:11,310 --> 00:10:13,060
Of de donkergrijze achtergrond.

114
00:10:13,570 --> 00:10:15,530
OK dus dat is alles voor deze video.

115
00:10:15,530 --> 00:10:19,790
Next up gaan we aan de knoppen toe te voegen op te halen tussen gemakkelijke en hard mode.