Thom Page
10 years ago
parent
e1d2317fa2
commit
635bddeb9f
@ -0,0 +1 @@
|
|||||||
|
#KEEP
|
||||||
@ -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.
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<title>i ♥ js</title>
|
||||||
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Pixel Art!</h1>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" id="color-field"></input>
|
||||||
|
<button id="set-color">Set Color</button>
|
||||||
|
<div class="brush"></div>
|
||||||
|
</div>
|
||||||
|
<script src="pixart.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
$(function() {
|
||||||
|
console.log('$$$ in the bank.');
|
||||||
|
|
||||||
|
var button = $('#set-color');
|
||||||
|
|
||||||
|
button.on('click', function() {
|
||||||
|
console.log('button clicked!')
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 100 B |
@ -0,0 +1,30 @@
|
|||||||
|
@import url(http://fonts.googleapis.com/css?family=Monoton);
|
||||||
|
|
||||||
|
.brush {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: black;
|
||||||
|
margin: 15px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
float: left;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #E7E5DB;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: Monoton;
|
||||||
|
font-size: 48px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-image: url('ps_neutral.png');
|
||||||
|
}
|
||||||
@ -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.
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<title>i ♥ js</title>
|
||||||
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Pixel Art!</h1>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" id="color-field"></input>
|
||||||
|
<button id="set-color">Set Color</button>
|
||||||
|
<div class="brush"></div>
|
||||||
|
</div>
|
||||||
|
<script src="pixart.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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 = $('<div>');
|
||||||
|
box.addClass("square");
|
||||||
|
box.on("mouseover", function() {
|
||||||
|
$(this).css('background', color);
|
||||||
|
});
|
||||||
|
// box.on('click', function() {
|
||||||
|
// $(this).css('background', green);
|
||||||
|
// });
|
||||||
|
$('body').append(box);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 100 B |
@ -0,0 +1,30 @@
|
|||||||
|
@import url(http://fonts.googleapis.com/css?family=Monoton);
|
||||||
|
|
||||||
|
.brush {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background: black;
|
||||||
|
margin: 15px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
float: left;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #E7E5DB;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: Monoton;
|
||||||
|
font-size: 48px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-image: url('ps_neutral.png');
|
||||||
|
}
|
||||||
Loading…
Reference in new issue