From 635bddeb9f038e6b183f24a41cc454e01e86e7f8 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Thu, 23 Jun 2016 18:41:54 -0400 Subject: [PATCH] pixart --- js_resources_unused/pixart/README.md | 1 + .../pixart/d04_pixart_dom/README.md | 47 ++++++++++++++++++ .../pixart/d04_pixart_dom/index.html | 18 +++++++ .../pixart/d04_pixart_dom/pixart.js | 10 ++++ .../pixart/d04_pixart_dom/ps_neutral.png | Bin 0 -> 100 bytes .../pixart/d04_pixart_dom/style.css | 30 +++++++++++ .../pixart/d04_pixart_dom_solution/README.md | 47 ++++++++++++++++++ .../pixart/d04_pixart_dom_solution/index.html | 18 +++++++ .../pixart/d04_pixart_dom_solution/pixart.js | 39 +++++++++++++++ .../d04_pixart_dom_solution/ps_neutral.png | Bin 0 -> 100 bytes .../pixart/d04_pixart_dom_solution/style.css | 30 +++++++++++ 11 files changed, 240 insertions(+) create mode 100644 js_resources_unused/pixart/README.md create mode 100644 js_resources_unused/pixart/d04_pixart_dom/README.md create mode 100644 js_resources_unused/pixart/d04_pixart_dom/index.html create mode 100644 js_resources_unused/pixart/d04_pixart_dom/pixart.js create mode 100644 js_resources_unused/pixart/d04_pixart_dom/ps_neutral.png create mode 100644 js_resources_unused/pixart/d04_pixart_dom/style.css create mode 100644 js_resources_unused/pixart/d04_pixart_dom_solution/README.md create mode 100644 js_resources_unused/pixart/d04_pixart_dom_solution/index.html create mode 100644 js_resources_unused/pixart/d04_pixart_dom_solution/pixart.js create mode 100644 js_resources_unused/pixart/d04_pixart_dom_solution/ps_neutral.png create mode 100644 js_resources_unused/pixart/d04_pixart_dom_solution/style.css diff --git a/js_resources_unused/pixart/README.md b/js_resources_unused/pixart/README.md new file mode 100644 index 0000000..36c0340 --- /dev/null +++ b/js_resources_unused/pixart/README.md @@ -0,0 +1 @@ + #KEEP diff --git a/js_resources_unused/pixart/d04_pixart_dom/README.md b/js_resources_unused/pixart/d04_pixart_dom/README.md new file mode 100644 index 0000000..377f027 --- /dev/null +++ b/js_resources_unused/pixart/d04_pixart_dom/README.md @@ -0,0 +1,47 @@ +#Pixart + +##Objectives +- Use jQuery to create an interactive web interface. +- Reps using jQuery event listeners. + +###Step 1 + +When I click the "Set Color" button, it should change the color of the "brush" box to the color I specify in the input field. + +- Create an event that listens for a click on 'set color'. +- When this event is fired, it should take the value from the color input field and make the brush swatch that color. + +###Step 2 + +The same thing should happen when I press the enter key from inside the input field. + +- Create an event that listens for a click on enter. +- This listener should also take the value from the color input field and make the brush swatch that color. + + +###Step 3 + +Using jQuery, create 20 divs of the "square" class and append them to the body. + +- Make the a div. +- Add a class of "square" to this div. +- Add an event to this div so that it changes color on mouseover to the color of the brush swatch. +- Append this div to the body. +- Repeat this 20 times. + +###Step 4 + +Add functionality so that when I click on each "square", it changes the color of that individual square to "green" +- Add this event to the divs that we created in Step 3. + + +###Step 5 + +- Modify the CSS of your "square" class to change the size of the "square" divs. +- Modify your code so that you are creating 8000 divs instead of 20. +- Change the event that changes your box colors from 'click' to 'mouseover'. +- Paint a picture! + +## Bonus + +- Add a color swatch. You should have 3 boxes with the most recent 3 colors used. When you click on each of those boxes, it should set the current brush color back to that color. \ No newline at end of file diff --git a/js_resources_unused/pixart/d04_pixart_dom/index.html b/js_resources_unused/pixart/d04_pixart_dom/index.html new file mode 100644 index 0000000..4672980 --- /dev/null +++ b/js_resources_unused/pixart/d04_pixart_dom/index.html @@ -0,0 +1,18 @@ + + + + + + i ♥ js + + + +

Pixel Art!

+
+ + +
+
+ + + \ No newline at end of file diff --git a/js_resources_unused/pixart/d04_pixart_dom/pixart.js b/js_resources_unused/pixart/d04_pixart_dom/pixart.js new file mode 100644 index 0000000..50d5338 --- /dev/null +++ b/js_resources_unused/pixart/d04_pixart_dom/pixart.js @@ -0,0 +1,10 @@ +$(function() { + console.log('$$$ in the bank.'); + + var button = $('#set-color'); + + button.on('click', function() { + console.log('button clicked!') + }); + +}); \ No newline at end of file diff --git a/js_resources_unused/pixart/d04_pixart_dom/ps_neutral.png b/js_resources_unused/pixart/d04_pixart_dom/ps_neutral.png new file mode 100644 index 0000000000000000000000000000000000000000..c3a53acd0b7665266db14f50fb246a70cbbe055e GIT binary patch literal 100 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;TYyi9>yIBlzI^#2|M%Q|popZW vi(^PdT + + + + + i ♥ js + + + +

Pixel Art!

+
+ + +
+
+ + + \ No newline at end of file diff --git a/js_resources_unused/pixart/d04_pixart_dom_solution/pixart.js b/js_resources_unused/pixart/d04_pixart_dom_solution/pixart.js new file mode 100644 index 0000000..a7a9f40 --- /dev/null +++ b/js_resources_unused/pixart/d04_pixart_dom_solution/pixart.js @@ -0,0 +1,39 @@ +$(function() { + console.log('$$$ in the bank.'); + + var inputField = $('#color-field'); + var button = $('#set-color'); + var brush = $('.brush'); + var color = 'black'; + + var setColor = function() { + color = inputField.val(); + brush.css('background', color); + } + + button.on('click', function() { + setColor(); + }); + + inputField.on('keypress', function(e) { + // e is commonly used for a key. + // e.which and e.keycode both are used to capture the ASCII + // keycode of an individual key. + var key = e.which || e.keycode + if (key === 13) { + setColor(); + } + }); + + for (var i = 0; i < 8000; i++) { + var box = $('
'); + box.addClass("square"); + box.on("mouseover", function() { + $(this).css('background', color); + }); + // box.on('click', function() { + // $(this).css('background', green); + // }); + $('body').append(box); + }; +}); diff --git a/js_resources_unused/pixart/d04_pixart_dom_solution/ps_neutral.png b/js_resources_unused/pixart/d04_pixart_dom_solution/ps_neutral.png new file mode 100644 index 0000000000000000000000000000000000000000..c3a53acd0b7665266db14f50fb246a70cbbe055e GIT binary patch literal 100 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!D3?x-;bCrM;TYyi9>yIBlzI^#2|M%Q|popZW vi(^PdT