sigonasr2
/
pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

merge into: sigonasr2:master
Branches Tags
sigonasr2:bangalore
sigonasr2:master
sigonasr2:solution
sigonasr2:solution_bangalore
...
pull from: sigonasr2:bangalore
Branches Tags
sigonasr2:bangalore
sigonasr2:master
sigonasr2:solution
sigonasr2:solution_bangalore

10 Commits
master ... bangalore

Author SHA1 Message Date
Brent Gardner 8ff9359c03 Add resources to readme
7 years ago
Rup Chitrak 73b95ca6b5 pallete done
7 years ago
Rup Chitrak 711d1e176a palette
7 years ago
Rup Chitrak 54b15a3003 2X2 grid features
7 years ago
Rup Chitrak 00629d2aef 2X2 grid
7 years ago
Brent Gardner 4fb2d6f017 Add resources
7 years ago
Brent Gardner 50da13d3ad Fix for InteliJ web server
7 years ago
Brent Gardner 08847e58e7 gitignore
7 years ago
rachel.koldenhoven 2c7a877685 Scaffolding
7 years ago
rachel.koldenhoven 50a40adc87 Hello world
7 years ago
4 changed files with 322 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats
  1. 17
      README.md
  2. 9
      index.html
  3. 43
      index.js
  4. 253
      style.css

17
README.md
Unescape View File

@ -43,6 +43,15 @@ Research [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage
Create a fill tool that will [flood fill](https://en.wikipedia.org/wiki/Flood_fill) boundaries with a chosen paint color. Create a fill tool that will [flood fill](https://en.wikipedia.org/wiki/Flood_fill) boundaries with a chosen paint color.
### Bonus 5
Load a PNG file directly onto the canvas using these resources:
- [FileReader.readAsDataUrl](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)
- [Canvas.drawImage](https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
- [Image.onload](https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
- [FileReader example](https://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and-binary?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
- [Get pixel color from Canvas](https://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
### Deployment ### Deployment
@ -52,3 +61,11 @@ Read over the following articles to learn how to deploy this web site to Surge.
- [Remembering a domain](http://surge.sh/help/remembering-a-domain) - [Remembering a domain](http://surge.sh/help/remembering-a-domain)
A good domain name for this project is `USERNAME-pixel-art-maker.surge.sh` where `USERNAME` is your GitHub username in all **lowercase** letters. Once deployed and everything works as you expect, copy your Surge URL and paste it at the top of your GitHub repository's page. A good domain name for this project is `USERNAME-pixel-art-maker.surge.sh` where `USERNAME` is your GitHub username in all **lowercase** letters. Once deployed and everything works as you expect, copy your Surge URL and paste it at the top of your GitHub repository's page.
### Resources
- [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
- [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
- [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
- [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
- [appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)

9
index.html
Unescape View File

@ -0,0 +1,9 @@
<html>
<title>Pixel Art Maker</title>
<head>
<link rel="stylesheet" href="style.css">
<script defer type="module" src="index.js"></script>
</head>
<body>
</body>
</html>

43
index.js
Unescape View File

@ -0,0 +1,43 @@
// document.body.innerHTML = "Hello world!";
let main = document.createElement('div');
main.className = 'divContainer';
document.body.appendChild(main);
let className;
for(let i=0;i<50;i++) {
const rowDiv=document.createElement('div');
rowDiv.className = 'rowDivContainer';
main.appendChild(rowDiv);
for(let j=0;j<50;j++) {
const div=document.createElement('div');
div.className='divElem';
div.addEventListener("click",(e)=>{
e.target.className='colorChange';
if(typeof className !=='undefined'){
e.target.className=className;
e.target.style="border-radius:0"
}
});
rowDiv.appendChild(div);
}
}
const colorArray=['red','blue','green','black','purple','aqua','pink','lightcoral','gold',
'brown','blueviolet','olivedrab','blanchedalmond','darkorange','yellow','plum','cadetblue',
'paleturquoise','tomato','turquoise','peachpuff','silver','lightseagreen','slateblue',
'lavender','greenyellow','rebeccapurple'];
let palette = document.createElement('div');
palette.className = 'Pal';
document.body.appendChild(palette);
for(let i=0;i<33;i++) {
const color = document.createElement('div');
color.className = 'palColor'+i;
//color.style="background-color: blue"
palette.appendChild(color);
color.addEventListener("click",(e)=>{
className = e.target.className;
})
}

253
style.css
Unescape View File

@ -0,0 +1,253 @@
.divContainer{
display: flex;
flex-direction: column;
}
.rowDivContainer{
display: flex;
border: 1px solid grey;
width: 500px;
justify-content: flex-start;
}
.divElem{
height: 13px;
width: 13px;
border: 1px solid grey;
}
.colorChange{
background-color: red;
border: 1px solid grey;
height: 13px;
width: 13px;
}
.Pal{
display: flex;
flex-flow: wrap;
width: 500px;
}
.palColor0{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: red;
border-radius: 50%;
}
.palColor1{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: blue;
border-radius: 50%;
}
.palColor2{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: green;
border-radius: 50%;
}
.palColor3{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: black;
border-radius: 50%;
}
.palColor4{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: purple;
border-radius: 50%;
}
.palColor5{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: aqua;
border-radius: 50%;
}
.palColor6{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: pink;
border-radius: 50%;
}
.palColor7{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: lightcoral;
border-radius: 50%;
}
.palColor8 {
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: gold;
border-radius: 50%;
}
.palColor9{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: brown;
border-radius: 50%;
}
.palColor10{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: blueviolet;
border-radius: 50%;
}
.palColor11{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: olivedrab;
border-radius: 50%;
}
.palColor12{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: blanchedalmond;
border-radius: 50%;
}
.palColor13{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: darkorange;
border-radius: 50%;
}
.palColor14{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: yellow;
border-radius: 50%;
}
.palColor15{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: plum;
border-radius: 50%;
}
.palColor16{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: cadetblue;
border-radius: 50%;
}
.palColor17{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: paleturquoise;
border-radius: 50%;
}
.palColor18{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: tomato;
border-radius: 50%;
}
.palColor19{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: turquoise;
border-radius: 50%;
}
.palColor20{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: peachpuff;
border-radius: 50%;
}
.palColor21{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: silver;
border-radius: 50%;
}
.palColor22{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: lightseagreen;
border-radius: 50%;
}
.palColor23{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: slateblue;
border-radius: 50%;
}
.palColor24{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: lavender;
border-radius: 50%;
}
.palColor25{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: greenyellow;
border-radius: 50%;
}
.palColor26{
display: flex;
height: 13px;
width: 13px;
border: 1px solid black;
background-color: rebeccapurple;
border-radius: 50%;
}
Write Preview
Loading…
Cancel
Save