code refactoring

change class names to cupcakes and cupcake
This commit is contained in:
emma 2025-01-29 22:42:42 -05:00
parent df84316ad4
commit 025ed292fc
3 changed files with 16 additions and 5 deletions

View File

@ -9,7 +9,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="chocolates"></div> <div class="cupcakes"></div>
<img src="./img/sweets.jpg" alt="a box of chocolate cupcakes"> <img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
</div> </div>
<script src="./script/script.js" defer></script> <script src="./script/script.js" defer></script>

View File

@ -1,12 +1,23 @@
const chocolateContainer = document.querySelector(".chocolates"); const chocolateContainer = document.querySelector(".cupcakes");
const notesForEmma = { const notesForEmma = {
noteOne: "",
noteTwo: "",
noteThree: "",
noteFour: "",
noteFive: "",
noteSix: "",
noteSeven: "",
noteEight: "",
noteNine: "",
noteTen: "",
noteEleven: "",
noteTwelve: "",
}; };
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
for (let j = 0; j < 4; j++) { for (let j = 0; j < 4; j++) {
const tile = document.createElement("div"); const tile = document.createElement("div");
tile.classList.add("chocolate"); tile.classList.add("cupcake");
tile.style.height = "14vh"; tile.style.height = "14vh";
tile.style.width = "7vw"; tile.style.width = "7vw";
chocolateContainer.appendChild(tile); chocolateContainer.appendChild(tile);

View File

@ -24,7 +24,7 @@ body {
z-index: 0; z-index: 0;
} }
.chocolates { .cupcakes {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 44vh; height: 44vh;