From dcbc568aa5d324bad29750a30de604d1618cfc3a Mon Sep 17 00:00:00 2001 From: Nathan King Date: Tue, 6 Jun 2023 15:17:57 +0100 Subject: [PATCH 1/2] add buttons for genres --- index.html | 6 ++++++ style.css | 24 ++++++++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/index.html b/index.html index 1a0969c..7ec79b3 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,12 @@

ChatVenture

Hello PLAYER! Welcome to the text adventure game where the story is made up by GPT :)

+ +
+ + + +
diff --git a/style.css b/style.css index 1902de4..ffdf0ce 100644 --- a/style.css +++ b/style.css @@ -28,3 +28,27 @@ header { color: #e9f45b; padding: 32px; } + +.genres { + display: grid; + grid-template-columns: repeat(3, 100px); + justify-content: center; + gap: 10px; +} + +.genre { + background-color: transparent; + width: 100px; + height: 100px; + overflow: hidden; + font-size: 40px; + text-align: center; + line-height: 2.4; + border: 4px solid #a1d2ff; + cursor: pointer; +} + +.genre:hover { + background-color: rgba(255,255,255,0.7); + border: 4px solid #f1c82d; +} From 3429f4c2b703c774a876572f6707ef349a799304 Mon Sep 17 00:00:00 2001 From: Julian Ng Date: Thu, 22 Jun 2023 11:52:11 +0100 Subject: [PATCH 2/2] Add event listeners to genre buttons --- index.html | 2 ++ main.js | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/index.html b/index.html index 7ec79b3..503e1c4 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,8 @@ + + diff --git a/main.js b/main.js index e69de29..67b0f50 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,9 @@ +const init = () => { + const genres = document.querySelectorAll('.genre'); + genres.forEach((button) => button.addEventListener( + 'click', + () => alert(`You selected the genre: ${button.dataset.genre}`)) + ) +} + +init()