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