diff --git a/Galaxy.jpeg b/Galaxy.jpeg
new file mode 100644
index 00000000..53d0a99e
Binary files /dev/null and b/Galaxy.jpeg differ
diff --git a/Galaxy.jpeg:Zone.Identifier b/Galaxy.jpeg:Zone.Identifier
new file mode 100644
index 00000000..e69de29b
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..ffc01f72
--- /dev/null
+++ b/index.css
@@ -0,0 +1,59 @@
+body {
+ background-image: url("Galaxy.jpeg");
+ background-repeat: no-repeat;
+ background-size:cover;
+}
+
+div {
+ text-align: center;
+
+}
+header {
+ width: 100%;
+ text-align: center;
+ color: beige;
+}
+h3 {
+ color: beige;
+}
+#colorBoard {
+ width: 81em;
+ justify-content: center;
+ height: 4em;
+ margin: 0 auto;
+ background-color: maroon;
+ border-radius: 15px;
+ align-content: flex-start;
+ display: flex;
+ padding-top: 0.5em;
+ padding-left: 0.5em;
+}
+.color {
+ height: 3.5em;
+ width: 3.5em;
+ margin-right: .5em;
+ border-radius: 50px;
+
+}
+
+#canvas {
+ width: 80em;
+ height: 40em;
+ margin: 0 auto;
+ background-color: tan;
+ border-radius: 25px;
+ border: 10px solid darkgreen;
+ display: grid;
+ grid-template-columns: repeat(128, 0fr);
+ justify-items: center;
+ padding-top: .5em;
+ padding-left: .5em;
+ padding-right: .5em;
+ padding-bottom: .5em;
+}
+.pixel {
+ width : .5em;
+ height : .5em;
+ border : 1px dotted #4713a3;
+ background-color : black;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e69de29b..e3d06d4f 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Pixel Art Creator!
+
+
+
+ Paint Away!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..de10d272
--- /dev/null
+++ b/index.js
@@ -0,0 +1,88 @@
+let canvas = document.getElementById('canvas');
+let clickedColor = 'white';
+let colorBoard = document.getElementById('colorBoard');
+let arrayOfColors = Object.values(colorBoard.getElementsByClassName('color'));
+let drag = false;
+let savedPainting = { };
+
+ function makeDivs(){
+ let pix = document.createElement('div');
+ pix.className = 'pixel';
+ return pix;
+}
+for (var i = 0; i < 8192; i++){
+
+ setTimeout(function () {
+ var makePix = makeDivs();
+ canvas.append(makePix);
+ }, 0);
+}
+document.addEventListener('click', (e) => {
+ if (e.target.className === 'color'){
+ clickedColor = e.target.style.backgroundColor;
+ arrayOfColors.forEach((i)=>{
+ if (clickedColor === i.style.backgroundColor){
+ i.style.border = '3px solid white';
+ } else {
+ i.style.border = '';
+ }
+ })
+ } else if (e.target.className === "pixel") {
+ e.target.style.backgroundColor = clickedColor;
+ }
+})
+canvas.addEventListener('mousedown', (e) => {
+ drag = true;
+})
+canvas.addEventListener('mouseup', (e) => {
+ drag = false;
+})
+document.addEventListener('mouseover', (e) => {
+ if (e.target.parentNode !== canvas){
+ drag = false;
+ }
+ if (drag && e.target.className === 'pixel'){
+ e.target.style.backgroundColor = clickedColor;
+ }
+})
+
+function save(){
+var children = canvas.children;
+var colors = [];
+ for(let i = 0; i < children.length; i++){
+ colors.push(children[i].style.backgroundColor);
+}
+console.log(colors.join(', '))
+localStorage.setItem('savedPainting', colors.join(','));
+}
+
+function clearPage(){
+ var children = canvas.children;
+ console.log('llll');
+ for(let i = 0; i < children.length; i++){
+ setTimeout(function () {
+ console.log(children[i].style.backgroundColor);
+ children[i].style.backgroundColor = 'black';
+ });
+ }
+}
+
+function load(){
+ var children = canvas.children;
+ var colors = localStorage.getItem('savedPainting');
+ console.log(colors);
+ colors = colors.split(',');
+
+ for(let i = 0; i < children.length; i++){
+ if (colors[i].length < 1){
+
+ }else {
+
+ setTimeout(function () {
+ children[i].style.backgroundColor = colors[i];
+ });
+ }
+console.log('loaded');
+}
+localStorage.removeItem('savedPainting');
+}
\ No newline at end of file