diff options
| -rw-r--r-- | index.html | 23 | ||||
| -rw-r--r-- | script.js | 18 | ||||
| -rw-r--r-- | 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 @@ <body> <main> <section id="dropdown"> - <button id="close-dropdown">X</button> - <h1>Wednesdayle</h1> - <p> - It's one word, nine letters long! - </p> - <p> - You have one guess. Goodluck! - </p> + <div id="dropdown-container"> + <h1>Wednesdayle</h1> + <p> + It's one word, nine letters long! + </p> + <p> + You have one guess. Goodluck! + </p> + <button id="close-dropdown">X</button> + </div> </section> <h1>Wednesdayle</h1> <section id="game-area"> @@ -32,8 +34,9 @@ <div id="box7"></div> <div id="box8"></div> <section id="msgbox"> - <div id="notword">That's not the word..</div> - <div id="theword">That's the word!</div> + <div id="notword">😔 Not quite... ðŸ˜</div> + <div id="theword">🎉 That's the word! 🎉</div> + <button id="reset">again?</button> </section> </section> <section id="keyboard"> 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; } |