Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Justin Lendle #406

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions pixart.js
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
var $form = $("#form");
var $button = $("#set-color");
var $brush = $(".brush");
var $input = $("#color-field");

//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. (Hint: You will need to use event.preventDefault() somewhere in your code.)

$form.on("submit", function(event){
event.preventDefault();
$brush.css('background-color', $input.val());
})
for(var i = 0; i < 8000; i++){
var $square = $("<div class='square'/>");
$("body").append($square);
}

$(".square").on("mouseover", function(){
$(this).css('background', $input.val());
})
22 changes: 22 additions & 0 deletions pixart_js/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
The MIT License (MIT)

Copyright (c) 2015 GA_DC Campus

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

48 changes: 48 additions & 0 deletions pixart_js/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) SOFTWARE ENGINEERING IMMERSIVE

# Pixart

For this assignment you'll be creating a Javascript painting app. When you're done, [it should display this functionality](http://ga-wdi-exercises.github.io/pixart_js/).

Use the starter code and commit each step of the exercise.
## Set up
1. Fork into your account
1. Create a feature branch
1. Clone to your machine
1. Pull Request when done

### Commit 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.
* You can use `document.querySelector` (or another document method) to select the element, then add an event listener.

> **HINT:** You will notice that the page refreshes whenever you click the button. You need to prevent this from happening using a method you have not used before. Google "javascript event prevent default". You can also reference [this portion](https://github.com/ga-wdi-lessons/js-events-callbacks#event-defaults-405---410-5-minutes) of the Events & Callbacks lesson plan.

### Commit 2

* The same thing should happen when I press the enter key from inside the input field

### Commit 3

* Create 20 divs of the "square" class and append them to the body
* **Hint**: use `.appendChild()`

### Commit 4

* Add functionality so that when I click on each "square", it changes the color of that individual square to "green"
* **Hint**: either add the event listener while creating the squares, or listen for events on the `body` element

### Commit 5

* Modify your code so that when I click on each "square", it changes to the color I set using my input instead of "green" every time.

### Commit 6

* Modify the CSS so that the "square" class has a height and width of 10px and a margin of 0.
* 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.
19 changes: 19 additions & 0 deletions pixart_js/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>i &hearts; js</title>
</head>
<body>
<h1>Pixel Art!</h1>
<div class="controls">
<form id="form">
<input type="text" id="color-field"></input>
<button id="set-color">Set Color</button>
</form>
<div class="brush"></div>
</div>
<script src="pixart.js"></script>
</body>
</html>
40 changes: 40 additions & 0 deletions pixart_js/pixart.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
let setColors = document.querySelector('#set-color')
//setColor.addEventListener('click', changeBrushColor)
let brush = document.querySelector('.brush')
let newColor = document.getElementById('color-field')
let changeSqrs = document.querySelector('.square')

const changeBrushColor = function(e) {
e.preventDefault()
brush.style.backgroundColor = newColor.value
}

const changeSqrCol = function() {
this.style.backgroundColor = newColor.value
}

const addDivs = function() {
for (i=0; i < 8000; i++) {
let newDivs = document.createElement('div')
newDivs.classList.add('square')
document.getElementsByTagName('body')[0].appendChild(newDivs)
let newSqr = document.body.appendChild(newDivs)
newSqr.addEventListener('mouseover', changeSqrCol)
}
}
addDivs()



setColors.addEventListener('click', changeBrushColor)
setColors.addEventListener('keyup', changeBrushColor)
//changeSqrs.addEventListener('click', changeSqrCol)



//youll use preventDefault
//background.style.backgroundColor
//key up
//event.keycode
//event.target matches
//test
Binary file added pixart_js/ps_neutral.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions pixart_js/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
@import url(http://fonts.googleapis.com/css?family=Monoton);

.brush {
width: 100px;
height: 100px;
background: #1B4370;
margin: 15px auto;
}

.square {
float: left;
width: 10px;
height: 10px;
background: #E7E5DB;
margin: 0;
}

h1 {
font-family: Monoton;
font-size: 48px;
text-align: center;
}

.controls {
text-align: center;
}

body {
background-image: url('ps_neutral.png');
}