Skip to content

Commit

Permalink
Merge pull request #4 from lalonggone/feat/saved-palettes
Browse files Browse the repository at this point in the history 
Feat/saved palettes
  • Loading branch information
@jeremypearson08
jeremypearson08 authored Nov 2, 2023
2 parents a8c3b34 + 53c6e2a commit 45dbc3b
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 80 deletions.
3 changes: 2 additions & 1 deletion data.js
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
var currentPalette = [];
var currentPalette = [];

var savedPalettes = [];
103 changes: 57 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,56 +10,67 @@

<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>COLORANDOM</h1>
<body>
<div class="left-side">
<h1>COLORANDOM</h1>

<section class="color-palette">
<container>
<div class="color-box" id="box1">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
<section class="color-palette">
<container>
<div class="color-box" id="box1">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#EA9999</p>
</container>

<container>
<div class="color-box" id="box2">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#FACB9C</p>
</container>

<container>
<div class="color-box" id="box3">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#FFE59A</p>
</container>

<container>
<div class="color-box" id="box4">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#B6D7A8</p>
</container>

<container>
<div class="color-box" id="box5">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#A4C4CA</p>
</container>
</section>

<div class="buttons">
<button class="new-palette-button">New Palette</button>
<button class="save-palette-button">Save Palette</button>
</div>
<p class="hex-code">#EA9999</p>
</container>

<container>
<div class="color-box" id="box2">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#FACB9C</p>
</container>

<!-- Add locked/unlocked icons and classes for the other boxes -->
<container>
<div class="color-box" id="box3">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#FFE59A</p>
</container>

<container>
<div class="color-box" id="box4">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#B6D7A8</p>
</container>

<container>
<div class="color-box" id="box5">
<img class="locked-icon hidden" src="assets/locked.png">
<img class="unlocked-icon" src="assets/unlocked.png">
</div>
<p class="hex-code">#A4C4CA</p>
</container>
</section>
</div>

<aside class="right-side">
<h2>Saved Palettes</h2>
<h3 class="no-saved-palette-message">No saved palettes yet!</h3>
<section class="saved-palettes">
</section>
</aside>

<button class="new-palette-button">
New Palette
</button>
</body>
<script src="data.js"></script>
<script src="main.js"></script>
</html>

76 changes: 53 additions & 23 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,11 @@ var paragraphsToChange = document.querySelectorAll(".hex-code");
var boxesToChange = document.querySelectorAll(".color-box");
var lockedIcon = document.querySelector(".locked-icon");
var unlockedIcon = document.querySelector(".unlocked-icon");
var colorBox = document.querySelectorAll(
".box-1, .box-2, .box-3, .box-4, .box-5"
);
var box1 = document.querySelector('#box1')
var box2 = document.querySelector('#box2')
var box3 = document.querySelector('#box3')
var box4 = document.querySelector('#box4')
var box5 = document.querySelector('#box5')
var colorBox = document.querySelectorAll(".box-1, .box-2, .box-3, .box-4, .box-5");
var savePaletteButton = document.querySelector('.save-palette-button');
var noSavedPaletteMessage = document.querySelector(".no-saved-palette-message");
var savedPalettesSection = document.querySelector('.saved-palettes');


//Event Listeners
body.addEventListener('click', function(event) {
Expand All @@ -23,6 +20,8 @@ body.addEventListener('click', function(event) {
}

toggleLock();
savePalette();
displaySavedPalette();
});

//Event Handlers and Functions
Expand All @@ -35,28 +34,58 @@ function toggleLock() {
var parentContainer = event.target.closest('container');

if (parentContainer) {
var lockedIcon = parentContainer.querySelector('.locked-icon');
var unlockedIcon = parentContainer.querySelector('.unlocked-icon');
var colorSwatch = parentContainer.querySelector('div')
var lockedIcon = parentContainer.querySelector('.locked-icon');
var unlockedIcon = parentContainer.querySelector('.unlocked-icon');
var colorSwatch = parentContainer.querySelector('div')

colorSwatch.classList.add('locked');
lockedIcon.classList.remove('hidden');
unlockedIcon.classList.add('hidden');
colorSwatch.classList.add('locked');
lockedIcon.classList.remove('hidden');
unlockedIcon.classList.add('hidden');
}
}
}

if (event.target.classList.contains('locked-icon')) {
if (event.target.classList.contains('locked-icon')) {
var parentContainer = event.target.closest('container');
if (parentContainer) {
var lockedIcon = parentContainer.querySelector('.locked-icon');
var unlockedIcon = parentContainer.querySelector('.unlocked-icon');
var colorSwatch = parentContainer.querySelector('div')

colorSwatch.classList.remove('locked')
lockedIcon.classList.add('hidden');
unlockedIcon.classList.remove('hidden');
var lockedIcon = parentContainer.querySelector('.locked-icon');
var unlockedIcon = parentContainer.querySelector('.unlocked-icon');
var colorSwatch = parentContainer.querySelector('div')
colorSwatch.classList.remove('locked')
lockedIcon.classList.add('hidden');
unlockedIcon.classList.remove('hidden');
}
}
}

function savePalette() {
if (event.target.classList.contains('save-palette-button')){
savedPalettes.push(currentPalette);
}
}

function displaySavedPalette() {
if (event.target.classList.contains('save-palette-button')){
noSavedPaletteMessage.classList.add('hidden');

// create container
var paletteContainer = document.createElement('container');

for (var i = 0; i < savedPalettes.length; i++) {
var individualPalette = savedPalettes[i]
paletteContainer.innerHTML = "";

for (var j = 0; j < individualPalette.length; j++) {
var colorBox = document.createElement('div');
colorBox.style.backgroundColor = individualPalette[j];
colorBox.classList.add('savedSwatch');
paletteContainer.appendChild(colorBox);
}
}

// append containers to section
savedPalettesSection.appendChild(paletteContainer);
}
}

function displayHexCode() {
Expand Down Expand Up @@ -110,3 +139,4 @@ function generateHexCode() {
// Starting Conditions
displayHexCode();
displayColor();

72 changes: 62 additions & 10 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,88 @@
body {
font-family: "Poppins", sans-serif;
background-color: #e7f1f1;
display: flex;
margin: 0;
overflow: hidden;
}

.left-side {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 60px;
padding-top: 60px;
height: 100vh;
width: 70%;
border-right: 6px solid black
}

.right-side {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 30%;
}

.right-side h2 {
margin-top: 100px;
font-size: 3vw;
}

container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

h1 {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-size: 60px;
font-size: 6vw;
}

.color-palette {
display: flex;
width: 66%;
height: 200px;
width: 85%;
aspect-ratio: 6 / 1;
justify-content: space-evenly;
}

.color-box {
width: 100px;
height: 100px;
width: 80%;
aspect-ratio: 1 / 1;
border: 4px solid black;
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
}

p {
font-size: 1.5vw;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}

.new-palette-button {
.new-palette-button, .save-palette-button {
color: white;
font-size: large;
font-size: 1.5vw;
font-weight: 200;
font-family: "Poppins", sans-serif;
padding: 3px;
height: 40px;
width: 200px;
aspect-ratio: 5 / 1;
width: 16vw;
border-radius: 1px 50px;
background-color: black;
border: none;
margin-left: 40px;
margin-right: 40px;

}

.buttons {
margin-top: 8%;
}


Expand Down Expand Up @@ -76,7 +111,24 @@ h1 {
margin: 4px;
}

.saved-palettes {
width: 70%;
}

.saved-palettes > container {
display: flex;
flex-direction: row;
margin: 20px 0;
}

.savedSwatch {
width: 20%;
aspect-ratio: 1 / 1;
border: 4px solid black;
margin: 0 3px;
}

.hidden {
display: none;
}

0 comments on commit 45dbc3b

Please sign in to comment.