Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8ff9359c03 | ||
|
73b95ca6b5 | ||
|
|
711d1e176a | ||
|
|
54b15a3003 | ||
|
|
00629d2aef | ||
|
|
4fb2d6f017 | ||
|
|
50da13d3ad | ||
|
|
08847e58e7 | ||
|
2c7a877685 | ||
|
|
50a40adc87 |
17
README.md
17
README.md
@ -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)
|
||||||
|
|||||||
@ -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
Normal file
43
index.js
Normal 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
Normal file
253
style.css
Normal 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%;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user