Giter VIP home page Giter VIP logo

dom_manipulation's Introduction

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.

dom_manipulation's People

Stargazers

Jordan avatar Dave Woodall avatar  avatar Maia avatar bex avatar Alberto Betella avatar

Watchers

James Cloos avatar Llorenç Muntaner avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.