Go Back

isotope - masonry layout



    Getting Started
  1. read the notes section on jacobhoffman.tk/lessons on arrays, for loops, and getElementByClassName.
  2. make a new repl html, css, js project
  3. copy the lesson 3 index.html, script.js, and style.css code into the repl
  4. hit run on the repl, you should see a grid of squares coming on the screen
  5. feel free to delete the directions in the index.html file, since they are already on this page.
  6. go to the bottom of the code, where it says var "gridChoice = 3"
  7. try changing the variable from 1 to 5, what happens for each one?
    Grid Changes
  1. set gridchoice = 1
  2. go to the grid1() function
  3. change "red" in the array to "blue"
  4. hit run on the repl, what happens?
  5. try adding some additional colors you like.
  6. set gridchoice = 2
  7. go to the grid2() function
  8. change "(-i + j)" to "(i+j)" . what happens? how about "(2*i + j)"?
  9. set gridchoice = 3 and go to grid3(). this is a very simple grid function
  10. challenge : set gridchoice = 4 and try writing your own grid4() function
  11. set gridchoice = 5 and try hitting the wasd keys. look through the code in the grid game section.