From ddb2ac6339cec6deb46ab5613717859f4909e772 Mon Sep 17 00:00:00 2001 From: gennyble Date: Sun, 18 Jun 2023 18:22:20 -0500 Subject: it worksish --- index.html | 23 +++++++++++++---------- script.js | 18 ++++++++++++++++++ style.css | 48 ++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 71 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 5f62f48..c05b97d 100644 --- a/index.html +++ b/index.html @@ -11,14 +11,16 @@

Wednesdayle

@@ -32,8 +34,9 @@
-
That's not the word..
-
That's the word!
+
😔 Not quite... ðŸ˜­
+
🎉 That's the word! 🎉
+
diff --git a/script.js b/script.js index ea4bd12..54a5151 100644 --- a/script.js +++ b/script.js @@ -22,6 +22,9 @@ class Wednesdayle { this.enter = document.getElementById('enter'); this.enter.addEventListener('click', this.submit.bind(this)); + this.resetBtn = document.getElementById('reset'); + this.resetBtn.addEventListener('click', this.reset.bind(this)); + this.dropdown = document.getElementById('dropdown'); document.getElementById('close-dropdown').addEventListener('click', this.closeDropdown.bind(this)); @@ -66,15 +69,30 @@ class Wednesdayle { for (let i = 0; i < this.boxes.length; ++i) { if (word[i].toUpperCase() != this.boxes[i].innerText.toUpperCase()) { this.notword.style.display = "block"; + this.resetBtn.style.display = "block"; this.active = false; return; } } this.theword.style.display = "block"; + this.resetBtn.style.display = "block"; this.active = false; } + reset() { + console.log("sfa"); + this.active = true; + for (let i = 0; i < this.boxes.length; ++i) { + this.boxes[i].innerText = ''; + } + this.nextBox = 0; + + this.theword.style.display = "none"; + this.notword.style.display = "none"; + this.resetBtn.style.display = "none"; + } + buttonPush(event) { if (!this.active) { return; diff --git a/style.css b/style.css index af0d5bb..d302c12 100644 --- a/style.css +++ b/style.css @@ -32,21 +32,31 @@ main { color: whitesmoke; background-color: slategray; border-bottom: 2px solid darkslategray; - padding: 2rem 2rem 5rem 4rem; + padding: 2rem; font-weight: 600; font-size: 1.2rem; z-index: 1; } #close-dropdown { + display: block; font-family: 'Times New Roman', Times, serif; color: whitesmoke; background-color: unset; border: none; - font-size: 3rem; - position: absolute; - bottom: 1rem; - left: 1rem; + font-size: 1rem; + padding: 0.5rem; + width: 3rem; + aspect-ratio: 1 / 1; + border-radius: 1rem; + border: 1px solid whitesmoke; +} + +#dropdown-container { + position: relative; + width: 30rem; + min-height: 25vh; + margin: 0 auto; } #dropdown h1 { @@ -54,11 +64,13 @@ main { font-size: 2rem; text-decoration: underline; margin-bottom: 1rem; + width: 100%; } #dropdown p { font-weight: inherit; - margin: 1rem 0; + margin: 1rem auto; + width: 100%; } main>h1 { @@ -110,7 +122,10 @@ main>h1 { justify-content: center; } -#msgbox>div { +#msgbox>div, +#reset { + border: none; + box-shadow: none; background-color: #000c; color: whitesmoke; font-weight: 600; @@ -120,9 +135,21 @@ main>h1 { margin: 0 auto; } +#reset { + padding: 0.5rem 1rem; + border: 3px solid black; + margin-top: 1rem; +} + +#reset:active { + background-color: slategray; +} + #theword, -#notword { +#notword, +#reset { display: none; + font-family: 'Barlow Condensed', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } /* @@ -173,6 +200,11 @@ asdn gap: 2vw; } + #msgbox>div, + #reset { + font-size: 1.75rem; + } + #game-area>div { font-size: 4rem; } -- cgit 1.4.1-3-g733a5