Skip to content

lmuntaner/dom_manipulation

Repository files navigation

DOM Manipulation Exercises

There are different exercises in this repo. Each of them has a .html files and a .js related. They all share grid.css. I'd say that they are in order of difficulty.

Take a look at the html for each exercise and try to replicate it using jquery.

Obviously the solutions are in the js files, but try to not look at them until you are completely and angrily frustrated.

1. Random

Open random.html. There is a grid that changes the color of it's cells randomly every half second.

2. Even

Open even.html. There is a grid that changes the color of it's even or odd cells every half second.

3. Move Square

Open move_square.html. You can click on one of the cells to make it active. Then you can move it around with the keyboard. Letters: a, s, d, w.

4. Poke Memory

Open poke_memory.html. You can click on one of the cells and it will make an ajax call to the API at pokeapi.co to retrieve a sprite for a Pokemon and display it in the cell.

5. Auto Snake

Open auto_snake.html. You will see a moving snake. You can't control it.

6. Snake

Open snake.html. A similar snake to the previous snake will appear. Now you can make it change directions with the keyboard. Letters: a, s, d, w.

Contribute

Please, feel free to fork and make Pull Requests and I will gladly merge those that are cooler than mine :)

Keep the code as simple as possible. For Object Oriented solutions, make more files snake_oo.html for example.