[x] Clone _your_ copy of the repo. The terminal command will look like git clone https://github.com/your-username/dom-applying-classes. Replace your-username with your GitHub username.
[x] Load the index.html file contained in that repo in your browser. You'll see a row of three empty divs. They should all be grey.
[x] Uncomment the one() function call inside start. Reload the page in your browser. Hey! Blue dot.
[x] Go study the one function for a moment. Notice that, like the event listeners we wrote in the last assignment, first it goes looking for the div by its id attribute, then it modifies the classList property using the add() function on the object that is returned.
[x] This is a really common pattern in JavaScript programming when interacting with the DOM. First we go and find the element we want to change, then we change it using CSS classes.
[x] Take a look at the style.css file. Notice that there's a class in there called .blue whose only job is to alter the background-color of whatever element it is applied to.
[x] Ready to get started? Add another class to style.css. Call it .green, and have it alter the background-color to green.
[x] Now go back to the classes.js file. Write a new function called two underneath one. Remember:
[x] First, find the element you want to change using getElementById.
[x] Next, add 'green' to its classList property. You can use the add() or toggle() functions.
[x] Just like the previous assignment, you'll need to call the function. Add a two() underneath one() inside the start function.
[x] Reload the browser. Did the second div change colour?
[x] Once you have both divs altered, don't forget to git commit!
[x] Round three! Pick a colour and follow the previous steps:
[x] Add a class to style.css.
[x] Write a three function.
[x] Call it from start.
[x] Reload the browser to confirm the changes.
[x] Commit!
[ ] Ok, now things are getting serious. Notice that the fourth div in index.html has a class already: invisible. It's also not on the screen in the browser. There's no id attribute, so we can't find it using getElementById.
[x] Write a new function called makeVisible.
[x] To find things by class, we need to use getElementsByClassName (note the 's'). getElementsByClassName returns an array, because there could be many DOM elements with the class invisible. The MDN documentation on getElementsByClassName might be useful here.
[x] Because there's only one invisible div, we know it must be element [0] in the array that comes back from getElementsByClassName.
[x] Add the 'visible' class to the div's classList property using the same method as the previous examples.
[x] Call the makeVisible function from start.
[x] Reload the browser. If all has gone well, you should see a fourth div. If not, spend a little time troubleshooting, then reach out to your cohort for advice.
[x] Commit your changes.
[x] Push your commits back to GitHub with git push, and post a link to your copy of classes.js in the Waffle comments below.
JasmineGWT
commented
8 years ago
5.3 Altering the DOM ~ 2 hours
The next step towards making your game is being able to apply changes to the Document Object Model using JavaScript.
git clone https://github.com/your-username/dom-applying-classes. Replaceyour-usernamewith your GitHub username.index.htmlfile contained in that repo in your browser. You'll see a row of three empty divs. They should all be grey.one()function call insidestart. Reload the page in your browser. Hey! Blue dot.onefunction for a moment. Notice that, like the event listeners we wrote in the last assignment, first it goes looking for the div by itsidattribute, then it modifies theclassListproperty using theadd()function on the object that is returned.style.cssfile. Notice that there's a class in there called.bluewhose only job is to alter thebackground-colorof whatever element it is applied to.style.css. Call it.green, and have it alter thebackground-colorto green.classes.jsfile. Write a new function calledtwounderneathone. Remember:getElementById.'green'to itsclassListproperty. You can use theadd()ortoggle()functions.two()underneathone()inside thestartfunction.git commit!style.css.threefunction.start.index.htmlhas a class already:invisible. It's also not on the screen in the browser. There's noidattribute, so we can't find it usinggetElementById.makeVisible.getElementsByClassName(note the 's').getElementsByClassNamereturns an array, because there could be many DOM elements with the classinvisible. The MDN documentation ongetElementsByClassNamemight be useful here.[0]in the array that comes back fromgetElementsByClassName.'visible'class to the div'sclassListproperty using the same method as the previous examples.makeVisiblefunction fromstart.git push, and post a link to your copy ofclasses.jsin the Waffle comments below.