Add resources to readme

pallete done
palette
4 changed files with 322 additions and 0 deletions
--- a/README.md
+++ b/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. 

+### 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

@ -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)

 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)
--- a/index.html
+++ b/index.html
@ -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>
--- a/index.js
+++ b/index.js
@ -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;
+     })
+}
--- a/style.css
+++ b/style.css
@ -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%;
+}
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