In this project, you'll get a chance to actually build a pretty nifty tool to flex your Javascript and jQuery muscles. Up until now, you've had your hand held quite a bit by Codecademy. Now it's time to do it on your own. You're going to build a browser version of something between a sketchpad and an Etch-A-Sketch.

This should NOT be trivially easy for you. You'll probably have to Google frequently to get the right jQuery methods or CSS to use. In fact, that's the point! You CAN build this, and the resources are out there. We'll walk through the basic steps but it'll be up to you to find out how to actually implement them. For instance, where does a `hover`

effect come from?

The key is to break it down into little manageable steps and then figure out how to solve each step in turn.

If you get totally stuck, solutions from other students are listed below. I'd encourage you to struggle for a bit on your own before checking them out.

- Follow the instructions atop the Google Homepage project to set up a Github repository for this project (of course you'll need to change the title).
- Create a web page (or use JSFiddle) with a 16x16 grid of square divs.
- Create your divs using Javascript/jQuery... don't try making them by hand with copy-pasting!
- Best to put your grid squares inside another "container" div.
- If you need to add jQuery to your file, you can grab it directly in your HTML by adding
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>`

inside your`<head>`

tag above any other JS files. - There are several different ways to make the divs appear as a grid (versus just one on each line) --
`float`

/`clear`

, using a`table`

, and`inline-block`

displays. Play with each of them. - Careful with your border or margins... they'll add size to the squares!
- "OMFG, Why isn't my grid being created???"
- Open your browser's developer tools
- Check if there are any errors in the Javascript console
- Check your "elements" pane to see if the elements have actually shown up but are somehow hidden.
- Go willy-nilly and add
`console.log`

statements in your javascript to see if it's actually being loaded.

- Set up a hover effect so it changes the color of the square when your mouse passes over it, leaving a (pixelated) trail through your grid like a pen would.
- What happens when you hover? Well, you're
*hover*ing, you need to*enter*the div with your mouse and you need to*leave*the div. Any of those events should be a useful place to start. - There are again several ways to change the color -- adding a new class (
`addClass()`

), changing that div's background color individually, etc.

- What happens when you hover? Well, you're
- Add a button to the top of the screen which will clear the current grid and send the user a popup asking for how many squares per side to make the new grid. Once entered, the new grid should be generated
*in the same total space as before*(e.g. 960px wide) and now you've got a new sketch pad.- Research
`button`

tags in HTML and how you can make a javascript function run when one is clicked. - You'll also want to check out
`prompt`

s. - You should be able to enter
`64`

and have a new 64x64 grid pop up in front of you without changing the total amount of pixels used. - Why is it so slow?? Remember that when you call a jQuery selector like
`$(".square")`

, it actually returns you ALL the elements that fit the description. So if you're doing those types of operations hundreds of times inside a loop, it can get very time consuming... try pulling those outside your loops. - See how many grid squares you can get before it becomes unusably slow.

- Research
- (Optional): Instead of just changing the color of your grid from black to white (for example), have each pass through it with the mouse change to a completely random RGB value. Then try having each pass just add another 10% of black to it, so only after 10 passes is the square completely black.
- Push your project to Github

*Submit a link below to the github repo with your files in it by using a pull request. See the section on Contributing for how. Please include your partner's github handle somewhere in the description if you had one and they would like attribution.*

- Nate Bennett's solution | View in browser
- RebootJeff's solution | View in browser
- Afshinator's solution | View in browser
- Paul Dariye's solution | View in browser
- Lamberto Diwa's solution | View in browser
- Marina Sergeyeva's solution | View in browser
- Jamie's solution | View in browser
- Angel Vargas' solution | View in browser
- Peter Zberg's solution
- Abrar Hussain's solution | View in browser
- Sahil Agarwal's solution | View in browser
- Trevor Mahoney's solution | View in browser
- Chris Oldakowski's solution | View in browser
- Joe Barratt's solution | View in browser
- Jack Doyle's solution | View in browser
- Arman Ghassemi's solution | View in browser
- Arturo Coronel's solution | View in browser
- NerdDiffer's solution
- Mark Westfall's solution | View in browser
- Donald's solution | View in browser
- Paul's solution | View in browser
- Jason Ellis's solution | View in browser
- Mazin Power's solution | View in browser
- Yeon Seo's solution | View in browser
- Mateusz's solution | View in browser
- Cedric Charly's solution | View in browser
- Lisa S's solution | View in browser
- Bitvala's solution | View in browser
- Michael Alexander's solution | View in browser
- Steve Mitchell's solution | View in browser
- Benjamin Ratiarisolo's solution | View in browser
- Ingi Kim's solution | View in browser
- Tomislav's solution | View in browser
- Cameron Kingsbury's solution
- Ruben Mendez's solution | View in browser
- Megan Betz's solution | View in browser
- John Miller's solution | View in browser
- Farkhod Karimov's solution | View in browser
- Jorge Acosta's solution | View in browser
- James MacIvor's solution | View in browser
- David Ford's solution | View in browser
- Vincent's solution | View in browser
- Lezou Dali's solution | View in browser
- RomanADavis's solution
- Julie De Lorenzo's solution | View in browser
- Shouvik Roy's solution | View in browser
- Andrej Dragojevic's solution | View in browser
- Mike Over's solution | View in browser
- John Quarles' solution | View in browser
- Artur Janik's solution | View in browser
- Drew Price's solution
- Antonio Augusto's solution | View in browser
- Chasmani's solution | View in browser
- Lara Finnegan's solution | View in browser
- Rik's solution | View in browser
- TReiff's solution | View in browser
- Vidul's solution | View in browser
- Jatin's solution | View in browser
- Corien's solution | View in browser
- Panagiotis Karatakis' solution
- tkbyte's solution | View in browser
- Andy Linteau's solution | View in browser
- Alex's solution
- Eric Liu's solution | View in browser
- insomniacode's solution | View in browser
- Chris Dziewa's solution | View in browser
- Scott's solution | View in browser
- Stevelikesmusic's solution | View in browser
- Michael Robinson's solution | View in browser
- ido lichtenstein's solution
- Alice Rhomieux's solution | View in browser
- Syed Aslam's solution | View in browser
- Asish Prabhakar's solution | View in browser
- Eleanor Weigert's solution | View in browser
- Brandon Eichler's solution | View in browser
- Tyler Travers' solution | View in browser
- Sami Bashraheel's solution | View in browser
- Andrea Kulbaba's solution | View in browser
- Dominik Stodolny's solution | View in browser
- Richard Stewart's solution | View in browser
- Chris Hall's solution | View in browser
- Kate McFaul's solution | View in browser
- Kevin Weir's solution
- Muhammad Salman's solution | View in browser
- Ricardo Villegas' solution | View in browser
- Aryan Jabbari's solution | View in browser
- Kevin Mulhern's solution | View in browser
- Tommy Rodriguez's solution | View in browser
- John Kotz's solution | View in browser
- Josh Naughton's solution | View in browser
- Jeremy Faith's solution | View in browser
- Greg Park's solution | View in browser
- Meher Chandan's solution | View in browser
- Benjamin Wilhelm's solution | View in browser
- Jason Matthews' solution | View in browser
- Zane Bilous' solution | View in browser
- Adam Lecuyer's solution | View in browser
- Gabi O'Connor's solution | View in browser
- Dorian Iacobescu's solution | View in browser
- Nick Kessler's solution | View in browser
- Psidium's solution | View in browser
- Thomas Vaeth's solution | View in browser
- Matias Pan's solution | View in browser
- Ryan Jordan's solution | View in browser
- Tom Faber's solution | View in browser
- Taylor Buchheit's solution | View in browser
- Eddie's solution | View in browser
- omokoro's solution | View in browser
- Steve Dolinsky's solution| View In browser
- Adrian Kelly's solution | View in browser
- YuJer's solution | View in browser
- Josh Klein's solution | View in browser
- Kxxvc's solution | View in browser
- Rob Pennington's solution | View in browser
- Alex Perez's solution | View in browser
- Gb69010p's solution | View in browser
- wellj's solution | View in browser
- Rafael Ruiz's solution | View in browser
- Chris McIntyre's solution | View in browser
- Swati Kumar's solution
- Dan Hoying's solution | View in browser
- Micah Obal's solution | View in browser
- Pedro Amaral's solution | View in browser
- Prashanth Chandra's solution | View in browser
- Maia Petee's solution
- Shkrt's solution | View in browser
- Mateusz Staszczyk's solution | View in browser
- Steven Zerneri's solution | View in browser
- Joshua Weiler's solution | View in browser
- Kyle Lutes' solution | View in browser
- Glenn Crosby's solution | View in browser
- Bob Blake's solution | View in browser
- Cody Gipson's solution | View in browser
- Arthur Vieira's solution | View in browser
- Nikhil Surana' solution | View in browser
- AtActionPark's solution | View in browser
- Pugsiman's solution
- Matt's solution | View in browser
- Jason Symons' solution | View in browser
- Tim Rosezin's solution | View in browser
- A.Caroline's solution
- Shawn Stovall's solution | View in browser
- Tarun Johnson's solution | View in browser
- Sean Johnston's solution | View in browser
- Mark Viola's solution | View in browser
- Nathan's solution | View in browser
- Imiszkusz's solution | View in browser
- Kristupas Savickas's solution | View in browser
- Joe Balsamo's solution | View in browser
- Tony Vumbaca's solution | View in browser
- hiendinhngoc's solution | View in browser
- M. Edgar Joel's solution | View in browser
- W Cope's solution | View in browser
- ninja-ml's solution | View in browser
- Xavier Reid's solution | View in browser
- Thulasi Arasu's solution | View in browser
- Alex Tsiras' solution | View in browser
- QdB's solution | View in Browser
- Patrick Doane's solution | View in browser
- Ricardo Monteiro's solution | View in browser
- Joseph McConnell's solution | View in browser
- Ethan Nevidomsky's solution | View in browser
- Ho Won Cheng's solution | View in browser
- Gerard Jorgensen's solution | View in browser
- Piotr Aleksander's solution | View in browser
- Rohit Gohri's solution | View in browser
- Chris Chi's solution | View in browser
- Matt Leininger's solution | View in browser
- Brian Burke's solution | View in browser
- Aleksandre Clapin-Pépin's solution | View in browser
- Siddharth Gupta's solution | View in browser
- Florian Mainguy's solution | View in browser
- Max Platt's solution | View in browser
- Purnima Gupta's solution | View in browser
- djhart's solution | view in browser
- Sarkoshark's solution | View in browser
- Slurmz-Mckeznie's Solution | View in browser
- Hubert F's Solution | View in browser
- Davis Campbell's Solution | View in browser
- Brian's solution | View in browser
- Songbird's solution | View in browser
- Pratheeksha's solution | View in browser
- Spekachu's solution | View in browser
- JMurphy's solution | View in browser
- Francis Ngo's solution | View in browser
- Amir Aminfar's solution | View in browser
- Matt Brothen's solution | View in browser
- dchen71's solution | View in browser
- John Tobillo's solution
- John Tobillo's solution
- Chris Watland's solution | View in browser
- Noah Prescott's solution | View in browser
- Chris Swanson's solution | View in browser
- Parker Boyes' solution | View in browser
- Chris Swanson's solution
- Jeffrey Bartels' solution
- Adrian Manteza's solution | View in browser
- Paweł Cichoń solution | View in browser
- Moiz Hasan's solution | View in browser
- Harvey Singh's Solution | View in browser
- Patrick Li's Solution | View in browser
- Shady's Solution | View in browser
- Calandra Zellner's solution
- Corey Cunningham's Solution | View in browser
- Jasmine Batchellor-Sequeira's solution | View in browser
- Ashley Lewis's solution | View in browser
- Novneet's Solution | View in browser
- Kelvin Stone's solution | View in browser
- Austin Mason's solution | View in browser
- Kirk D. Shelton's solution | View in browser
- Pablo Bordons Estrada's solution | View in browser
- Alo Tauaese's solution | View in browser
- Joe Pfohl's Solution | View in Browser:
- Nisarg Rawal's solution | View in browser
- Dmitry Filina's solution | View in browser
- Jim Lin's Solution | View in browser
- Dustin Ury's Solution | View in browser
- Chase Clark's Solution | View in browser
- Mitch Conquer's Solution | View in browser
- Simon Kraus' Solution | View in browser
- Dush's Solution | View in browser
- Corey Kazaks' Solution | View in browser
- Petros Kalogiannakis's solution | View in browser
- Andrea L's Solution | View in browser
- Ryan Chang's solution | View in browser
- James Brooks's solution | View in browser
- Jason Harris' solution | View in browser
- Toby Aurelius' solution | View in browser
- Kar C's solution | View in browser
- Giorgos Mitsis's solution | View in browser
- Chethan Bhat's solution | View in browser
- Karol Wójcik's solution View in Browser
- Francisco Carlos's solution View in browser
- Rich Keyzor's solution View in browser
- Michael Sotkin's solution View in browser
- Sarabeth's solution | View in browser
- arocketman's solution
- Andrew Park's solution | View in browser
- Angel A. Martinez's A. | View in browser
- Bas Langenberg's Solution | View in browser
- David Atcheson's solution | View in browser
- Skye Free's solution | View in browser
- Amr Bakry's solution | View in browser
- Abeer Morssy's solution | View in browser
- Lee Parham's solution | View in browser
- Jerrell Bryant's solution | View in browser
- John Smalley's solution | View in browser
- Raphael N's solution | View in browser
- DV's solution | View in browser
- Kelly Downes' solution | View in browser
- Falk Schwiefert's solution
- Luke Walker's solution | View in browser
- Viacheslav Bogomazov's solution | View in browser
- Oleh Ziniak's' solution | View in browser
- Andrew Johnsons' solution | View in browser
- Dominik Chomicki's solution | View in browser
- Andrea Marongiu's Solution | View in browser
- Mewtch's solution | View in browser
- Marina C's solution
- Wenchuan Lin's solution | View in browser
- Cody Cooper's solution | View in browser
- Miguel Herrera's solution | View in browser
- Matt Velez's Solution|View in browser
- Mitesh Athia's solution | View in browser
- Jack Deegan's solution | View in browser
- Joshua Berry's Solution | View in browser
- Jack Wilde's Solution
- Cal Colson's Solution | View in browser
- Hale's Solution | View in browser
- Mitchell Bartolo's Solution | View in browser
- Jean Merlet's Solution | View in browser
- Rellbows' Solution
- Finnishmiko's solution | View in browser
- Colin Thorpe's solution | View in browser
- Earth35's solution | View in browser
- YogAzathoth's solution | View in browser
- Jess Farley's solution | View in browser
- Michael Tran's solution | View in browser
- Brian Flatt's Solution | View in browser
- Pauline Judge's solution | View in browser
- Albert's solution | View in browser
- Bryan's solution | View in browser
- Andrew Wilson's solution | View in browser
- Gabriel Perez's solution | View in browser
- Marie Sheridan's solution | View in browser
- Michael W's solution|View in browser
- Paulo Silva's solution | View in browser
- Sean Snyder's solution | View in browser
- Kevin Biddle's solution | View in browser
- SEGH's solution | View in browser
- Zac Conner's solution | View in browser
- Matt James' solution
- Leo Soai-Van's solution
- Linh Le Tuan's solution | View in browser
- Peter Taggart's solution | View in browser
- ryanpaixao's solution | View in browser
- Ramon Reyes's solution | View in browser
- Cody Buffaloe's solution | View in Browser
- Armin Zierlinger's solution View in Browser
- Zach Blake's Solution | View in Browser
- Max Gallant's solution | View in browser
- Tahmid's solution | View in Browser
- Brandon Phillips's solution | View in Browser
- Thiswillhavetodo's solution | View in Browser
- Frances Morrison's Solution
- Tom Westerhout's solution | View in browser
- Oscar Y's solution | View in Browser
- Arkhans's solution | View in Browser
- John's solution | View in Browser
- Derek Scace's solution | View in Browser
- Greg Pritchard's solution | View in browser
- John Sawyer's solution | View in browser
- * Javeed Ishaq's solution | View in browser
- Piotr Ejsmont's solution | View in Browser
- Nathan Minchow's solution | View in Browser
- Nijastan Kirupa's solution | View in Browser
- Robert Harkness's solution | View in Browser (codepen.io)
- Huw Diprose's solution | View in Browser (codepen.io)
- John Gerakaris's solution | View in Browser
- Johnny Rasnic's solution | View in browser
- gbhmt's solution | View in Browser
- Fabricio Carrara's solution | View in browser
- James Harder's solution
- Singh Satnam's solution | View in browser
- Filip Zelenika's solution | View in browser
- Krzysztof's solution | View in browser
- Josh Cummings' solution | View in browser
- wSlitz's solution | View in browser
- phjoker's solution | View in browser
- Giorgos poly solution | View in browser
- At0micr3d's solution| View in browser
- Ryan Clarkes solution | View in browser
- Mada's Solution | View in browser
- A3P's Solution | View in browser
- * Dckwong's solution| View in browser
- Paul Macias' solution | View in browser
- Deepak's solution | View in browser
- belalik's solution | View in browser
- Tyler K's solution | View in browser
- Zberggren's solution | View in browser
- Cornelius Edward's Solution | View in browser
- Murray Berkowitz's solution | View in browser
- Roy Manninen's solution | View in browser
- Taekyung Kwan's solution | View in browser
- Alexander Amirov solution | View in browser
- Spoon & Birdcage's solution | View in browser
- Sergey Badulin's solution | View in browser
- Matt Dillon's solution | View in browser
- Odeson's solution | View in browser
- John Connor's solution | View in browser
- Matt Dillon's solution | View in browser
- Shala's Solution | View in Browser (Best viewed on Google Chrome)
- Lani Huang's Solution | View in Browser
- Monika Dutka's solution | Preview
- Mason Embry's Solution | View in browser
- Jason Keeney's Solution | View in browser
- Luján Fernaud's Solution | View in browser
- Ricardo Ferreira's Solution | View in browser
- Norman Chan's Solution | View in browser
- Pete Lambro's Solution | View in browser
- Jessica Gillan's Solution | View in browser
- Garrison Shea's Solution | View in browser
- Bryan Giglio's Solution | View in browser
- Matthew White's Solution | View in browser
- Bruno Nascimento's Solution | View in browser
- Veselin Ivanov's Solution | View in browser
- Salomon Paluch's Solution | View in browser
- jqguess's Solution | View in browser
- Ace Cassidy's Solution | View in browser

From the creators of The Odin Project...

The Viking Code School