OK we komen terug in deze video komen.
We gaan om te werken aan een aantal nieuwe functies.
De eerste is wanneer ik het spel te winnen.
Het vertelt me ​​correct.
En dan kan ik het spel opnieuw op om nieuwe kleuren te krijgen en als ik niet hebben gewonnen.
Maar ik wil ook nieuwe kleuren, omdat een of andere reden Ik hou niet van de kleuren die ik heb.
Ik kan ook op dat de nieuwe knop kleuren.
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.
Dus deze knop doet hetzelfde.
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.
Maar ik kan ook op nieuwe kleuren en dat zal ook resetten.
Dus dat is wat we gaan richten op.
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.
En het bevat de boodschap die we al hebben.
En dan de twee knoppen die we later doen.
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.
En dan hebben we al onze overspanning binnen dat zoiets als de juiste tonen of probeer het opnieuw.
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.
OK, dat ziet er ongeveer net zo slecht als je zou verwachten.
Laten we gaan door en voeg de witte achtergrond kleur en centreren alles in deze div Dus onze div heet streep.
Laten we naar onze C Ss en we gaan Strype die een ID te selecteren.
Dus moeten we streep te gebruiken met een bijzaak.
En we gaan een achtergrondkleur achtergrond set wit te zijn.
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.
En nu als ik refresh je een witte div gaat helemaal over.
Het is een beetje groter dan het was.
We hebben een knop in hier net iets.
En als ik win of verlies of krijgen het verkeerde antwoord is er een overspanning je kan het gewoon niet zien.
En dat komt omdat de tekst van die spanwijdte is wit.
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.
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.
Het ding is maar dit is het instellen van de kleuren zwart op de div met ID streep te zijn.
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.
Dus we hebben een paar opties.
Wat ik zal doen is eigenlijk alleen maar te ontdoen van dit voor nu.
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.
Op dezelfde manier dat deze overspanning hier is zwart.
Hij erfde de tekstkleur van zwart of gewoon normale kleuren zwart uit de streep div dat is omheen die u hier kleur zwart ziet.
En dat is onze striked het.
OK.
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.
En voordat we kunnen doen wat we nodig hebben om die knop te selecteren.
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.
Dus var resetknop gelijk te documenteren die vraag selector met onze octaaf of resetten.
En vervolgens als altijd Ik wil graag mijn eenvoudige test event listener toe te voegen.
Dus resetknop voegt evenement luisteraar.
Klik op en toen we op alles wat we doen is wel een eenvoudige waarschuwing snel resetknop zomaar te vernieuwen.
En als ik op deze klik krijg ik mijn alert en dat betekent dat we goed om te gaan.
Dus de volgende up kunnen we echt werken aan de logica om te resetten.
Dus wat we moeten doen laten we schrijven de pseudo-code.
Wanneer u klikt op die knop moet alle nieuwe kleuren te genereren.
We moeten een nieuwe willekeurige kleur uit scala plukken en dan moeten we de kleuren van de vierkantjes op de pagina te veranderen.
Dus om alle nieuwe kleuren genereren we eigenlijk al die functie bestaande genereren van willekeurige kleuren.
Dus we gewoon zeggen kleuren is nu gelijk aan willekeurige kleuren van zes genereren.
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.
Er is één ding dat we eigenlijk moeten doen wat veranderen dit scherm kleur om de nieuwe picks kleur overeenkomen.
Dus we zullen gewoon zeggen kleur veranderen display geplukt kleur overeenkomen, zodat men is eenvoudig.
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.
We zijn ze nog niet zien omdat we niet dat de code te hebben.
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.
Dus het geeft ons een nieuwe willekeurige kleur daarboven en zes willekeurige kleuren achter de schermen.
Dus het laatste stuk is om die zes nieuwe kleuren op de pagina weer te geven en we hebben dat eerder gedaan.
Hierna zijn we een lus door alle pleinen en we veranderen kwadraat up stijl die achtergrond kleuren zijn.
Ik dus ik ga om te beginnen door gewoon dupliceren dat alles hier en we zullen dit refactorizar.
Maar om te beginnen met het allemaal hier te zetten.
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.
Ik zal redden.
En als we vernieuwen en klikken we op de nieuwe kleuren die het genereert 60 willekeurige kleuren.
Hij ontvangt een.
Het werkt het display om het beeld kleur weer te geven en het verandert alle zes vierkanten naar de nieuwe zes kleuren passen.
Dus laten we het uit te proberen en zien als onze vorige logica houdt ook.
OK.
Dus is dit een behoorlijke hoeveelheid rood.
Zeer weinig groen en een fatsoenlijk bedrag van blauw.
Laten we proberen te klikken op een aantal dat we niet denken dat ze gelijk.
En nu laten we gaan voor een van de paars.
Dus het lijkt erop dat een beetje meer rood op de blauwe.
Dus ik ga deze raden en we hebben gelijk en het lijkt erop dat de dingen werken nog steeds prima.
Snel nieuwe kleuren weer.
We willen dit opnieuw in te stellen.
Dat is echt een kleine cosmetische zaak.
Maar toen we op nieuwe kleuren moeten we het display hier te resetten, zodat het terug gaat naar zwart of naar deze donkergrijze kleur.
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.
Deze is veel groen.
Ik win en het vertelt me ​​opnieuw te spelen en het doet het zelfde ding.
Functioneel het niet echt veranderen het is gewoon ons en andere tekst.
Dus dat is eenvoudig te doen.
Alles wat we moeten doen is het vinden waar de code is om te controleren als je wint.
Dat klopt hier.
En toen we willen gewoon de tekst inhoud van die toets.
Zodat de knop werd resetknop genoemd.
Dus reset knop die tekstinhoud gelijk opnieuw te spelen met een vraagteken vernieuwen zegt het nieuwe kleuren.
Laten we nu proberen het spelen van een van deze.
Dus dit is een veel rode en veel groen en een beetje van blauw.
Dus veel van rode en veel groen gaat ons een gele kleur te geven.
Dus laten we een beperking van een aantal van hen.
En dan een beetje van blauw gaat om het lichter en helderder te maken.
Dus als we een van deze, zoals deze te proberen of dit degene die je zult zien dat ze niet helemaal goed.
En dit is ons antwoord hier en het vertelt ons opnieuw te spelen.
En echt snel en het doet precies hetzelfde.
Het laatste wat zoals ik al zei is het veranderen van de achtergrond kleur terug.
Dus hier kunnen we alleen maar doen dat aan het eind van de reset-knop.
We gaan gewoon naar die H-1 te selecteren.
Het is een punt waar we hier geselecteerd.
Dat is dial-up achtergrond.
UPS gelijk.
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.
Of we zetten het neer hier toen we te elimineren een van de kleuren als je de verkeerde kleur te kiezen.
We veranderen de achtergrondkleur hetzelfde te zijn als het lichaam.
OK laten we nieuwe kleuren te vernieuwen.
Laten we nu winnen.
Gewoon snel willekeurig enkel omwille van de tijd klikken we op spel opnieuw en verandert naar een zwarte achtergrond.
Of de donkergrijze achtergrond.
OK dus dat is alles voor deze video.
Next up gaan we aan de knoppen toe te voegen op te halen tussen gemakkelijke en hard mode.