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.

Sign up for GitHub

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

Jump to bottom

This update adds functionality for coloring the page as well as temp saving to local storage. #90

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

This update adds functionality for coloring the page as well as temp saving to local storage. #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5cab0f8
creating files
AdamDanielJones Sep 2, 2022
f67e2c1
Adds a lot
AdamDanielJones Sep 2, 2022
06517a2
fix color selection capabilities
Segerlu Sep 3, 2022
d999068
all functionality for base requirements added. may need to adjust for…
Segerlu Sep 3, 2022
eb1fcb6
refactoring
Segerlu Sep 6, 2022
4cc7b92
refactoring
Segerlu Sep 6, 2022
9452966
refactoring
Segerlu Sep 6, 2022
a6c5702
fixes alignment issues
Segerlu Sep 6, 2022
13b2a63
added background
Segerlu Sep 6, 2022
88f4f06
adds drag functionality
AdamDanielJones Sep 6, 2022
ab821f2
impliments save and load
HAliUsm Sep 6, 2022
ed6e5a4
fixes clear
HAliUsm Sep 6, 2022
b8e52a3
format changes
HAliUsm Sep 6, 2022
41994f3
Adds async functionality to load/clear/generate. this improves functi…
Segerlu Sep 8, 2022
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
Binary file added Galaxy.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file added Galaxy.jpeg:Zone.Identifier
View file
Open in desktop
Empty file.
59 changes: 59 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
51 changes: 51 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<head>
<link rel="stylesheet" href="index.css">
<title>Pixel Art Creator!</title>
</head>
<header><h1>Pixel Art Creator!</h1></header>
<body>
<div><h3>Paint Away!</h3></div>
<div id="colorBoard">
<div class="color" style="background-color: aqua"></div>
<div class="color" style="background-color: beige"></div>
<div class="color" style="background-color: blueviolet"></div>
<div class="color" style="background-color: brown"></div>
<div class="color" style="background-color: chartreuse"></div>
<div class="color" style="background-color: coral"></div>
<div class="color" style="background-color: darkgoldenrod"></div>
<div class="color" style="background-color: darkkhaki"></div>
<div class="color" style="background-color: darkturquoise"></div>
<div class="color" style="background-color: deeppink"></div>
<div class="color" style="background-color: forestgreen"></div>
<div class="color" style="background-color: lightblue"></div>
<div class="color" style="background-color: lime"></div>
<div class="color" style="background-color: midnightblue"></div>
<div class="color" style="background-color: olivedrab"></div>
<div class="color" style="background-color: orchid"></div>
<div class="color" style="background-color: rebeccapurple"></div>
<div class="color" style="background-color: silver"></div>
<div class="color" style="background-color: snow"></div>
<div class="color" style="background-color: teal"></div>
</div>
<div id='canvas'>

</div>
<div >
<button type='button' onclick="save()">
Save
</button>
<button type="button" onclick="clearPage()">
Clear
</button>
<button type="button" onclick="load()">
Load
</button>
</div>

</body>
<script src='index.js'></script>

</html>
88 changes: 88 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
}