zepp
/
my-cafe-events
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code refactoring 

change class names to camelCase
update html and css to reflect this
javascript can now use querySelectorAll and grab
note from object via first class in list of
classes for tile
This commit is contained in:
emma 2025-01-30 20:15:40 -05:00
parent b926571620
commit 9647d9e9b0
3 changed files with 42 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
cafe-events/valentines-day-25/index.html
View File

@ -11,18 +11,18 @@
<header>for you, emma &lt;3</header>
<div class="container">
<div class="tile-one tile"></div>
<div class="tile-two tile"></div>
<div class="tile-three tile"></div>
<div class="tile-four tile"></div>
<div class="tile-five tile"></div>
<div class="tile-six tile"></div>
<div class="tile-seven tile"></div>
<div class="tile-eight tile"></div>
<div class="tile-nine tile"></div>
<div class="tile-ten tile"></div>
<div class="tile-eleven tile"></div>
<div class="tile-twelve tile"></div>
<div class="tileOne tile"></div>
<div class="tileTwo tile"></div>
<div class="tileThree tile"></div>
<div class="tileFour tile"></div>
<div class="tileFive tile"></div>
<div class="tileSix tile"></div>
<div class="tileSeven tile"></div>
<div class="tileEight tile"></div>
<div class="tileNine tile"></div>
<div class="tileTen tile"></div>
<div class="tileEleven tile"></div>
<div class="tileTwelve tile"></div>
<img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
</div>

85
cafe-events/valentines-day-25/script/script.js
View File

@ -1,75 +1,22 @@
const notesForEmma = {
noteOne: "hello",
noteTwo: "emma",
noteThree: "how",
noteFour: "are",
noteFive: "you",
noteSix: "i",
noteSeven: "think",
noteEight: "you",
noteNine: "are",
noteTen: "a",
noteEleven: "great",
noteTwelve: "person",
tileOne: "hello",
tileTwo: "emma",
tileThree: "how",
tileFour: "are",
tileFive: "you",
tileSix: "i",
tileSeven: "think",
tileEight: "you",
tileNine: "are",
tileTen: "a",
tileEleven: "great",
tileTwelve: "person",
};
const tileOne = document.querySelector(".tile-one");
const tileTwo = document.querySelector(".tile-two");
const tileThree = document.querySelector(".tile-three");
const tileFour = document.querySelector(".tile-four");
const tileFive = document.querySelector(".tile-five");
const tileSix = document.querySelector(".tile-six");
const tileSeven = document.querySelector(".tile-seven");
const tileEight = document.querySelector(".tile-eight");
const tileNine = document.querySelector(".tile-nine");
const tileTen = document.querySelector(".tile-ten");
const tileEleven = document.querySelector(".tile-eleven");
const tileTwelve = document.querySelector(".tile-twelve");
const tiles = document.querySelectorAll(".tile");
tileOne.addEventListener("click", () => {
console.log(notesForEmma["noteOne"]);
tiles.forEach((el) => {
el.addEventListener("click", () => {
console.log(`${notesForEmma[el.className.split(' ')[0]]}`);
});
tileTwo.addEventListener("click", () => {
console.log(notesForEmma["noteTwo"]);
});
tileThree.addEventListener("click", () => {
console.log(notesForEmma["noteThree"]);
});
tileFour.addEventListener("click", () => {
console.log(notesForEmma["noteFour"]);
});
tileFive.addEventListener("click", () => {
console.log(notesForEmma["noteFive"]);
});
tileSix.addEventListener("click", () => {
console.log(notesForEmma["noteSix"]);
});
tileSeven.addEventListener("click", () => {
console.log(notesForEmma["noteSeven"]);
});
tileEight.addEventListener("click", () => {
console.log(notesForEmma["noteEight"]);
});
tileNine.addEventListener("click", () => {
console.log(notesForEmma["noteNine"]);
});
tileTen.addEventListener("click", () => {
console.log(notesForEmma["noteTen"]);
});
tileEleven.addEventListener("click", () => {
console.log(notesForEmma["noteEleven"]);
});
tileTwelve.addEventListener("click", () => {
console.log(notesForEmma["noteTwelve"]);
});

24
cafe-events/valentines-day-25/style/style.css
View File

@ -60,7 +60,7 @@ footer {
cursor: pointer;
}
.tile-one {
.tileOne {
position: absolute;
left: 26.61%;
top: 25.78%;
@ -69,7 +69,7 @@ footer {
z-index: 2;
}
.tile-two {
.tileTwo {
position: absolute;
left: 38.39%;
top: 25.94%;
@ -78,7 +78,7 @@ footer {
z-index: 2;
}
.tile-three {
.tileThree {
position: absolute;
left: 50.52%;
top: 25.78%;
@ -87,7 +87,7 @@ footer {
z-index: 2;
}
.tile-four {
.tileFour {
position: absolute;
left: 63.44%;
top: 25.94%;
@ -96,7 +96,7 @@ footer {
z-index: 2;
}
.tile-five {
.tileFive {
position: absolute;
left: 25.68%;
top: 43.05%;
@ -105,7 +105,7 @@ footer {
z-index: 2;
}
.tile-six {
.tileSix {
position: absolute;
left: 37.81%;
top: 43.59%;
@ -114,7 +114,7 @@ footer {
z-index: 2;
}
.tile-seven {
.tileSeven {
position: absolute;
left: 49.74%;
top: 43.44%;
@ -123,7 +123,7 @@ footer {
z-index: 2;
}
.tile-eight {
.tileEight {
position: absolute;
left: 62.76%;
top: 43.52%;
@ -132,7 +132,7 @@ footer {
z-index: 2;
}
.tile-nine {
.tileNine {
position: absolute;
left: 24.74%;
top: 60.94%;
@ -141,7 +141,7 @@ footer {
z-index: 2;
}
.tile-ten {
.tileTen {
position: absolute;
left: 37.03%;
top: 61.33%;
@ -150,7 +150,7 @@ footer {
z-index: 2;
}
.tile-eleven {
.tileEleven {
position: absolute;
left: 49.64%;
top: 61.64%;
@ -159,7 +159,7 @@ footer {
z-index: 2;
}
.tile-twelve {
.tileTwelve {
position: absolute;
left: 62.55%;
top: 61.8%;