diff --git a/img/cat-0.jpg b/img/cat-0.jpg new file mode 100644 index 0000000..39828c6 Binary files /dev/null and b/img/cat-0.jpg differ diff --git a/img/cat-1.jpg b/img/cat-1.jpg new file mode 100644 index 0000000..b8c48f1 Binary files /dev/null and b/img/cat-1.jpg differ diff --git a/img/cat-2.jpg b/img/cat-2.jpg new file mode 100644 index 0000000..084af00 Binary files /dev/null and b/img/cat-2.jpg differ diff --git a/img/cat-3.jpg b/img/cat-3.jpg new file mode 100644 index 0000000..4463469 Binary files /dev/null and b/img/cat-3.jpg differ diff --git a/img/cat-4.jpg b/img/cat-4.jpg new file mode 100644 index 0000000..eba0fea Binary files /dev/null and b/img/cat-4.jpg differ diff --git a/img/cat-5.jpg b/img/cat-5.jpg new file mode 100644 index 0000000..8496c34 Binary files /dev/null and b/img/cat-5.jpg differ diff --git a/img/cat-yes.jpg b/img/cat-yes.jpg new file mode 100644 index 0000000..19edc09 Binary files /dev/null and b/img/cat-yes.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..38d5a5d --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + Valentine + + +
+ Picture of a cat +

Will you be my Valentine?

+
+ + +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..8303092 --- /dev/null +++ b/script.js @@ -0,0 +1,63 @@ +"use strict"; + +const titleElement = document.querySelector(".title"); +const buttonsContainer = document.querySelector(".buttons"); +const yesButton = document.querySelector(".btn--yes"); +const noButton = document.querySelector(".btn--no"); +const catImg = document.querySelector(".cat-img"); + +const MAX_IMAGES = 5; + +let play = true; +let noCount = 0; + +yesButton.addEventListener("click", handleYesClick); + +noButton.addEventListener("click", function () { + if (play) { + noCount++; + const imageIndex = Math.min(noCount, MAX_IMAGES); + changeImage(imageIndex); + resizeYesButton(); + updateNoButtonText(); + if (noCount === MAX_IMAGES) { + play = false; + } + } +}); + +function handleYesClick() { + titleElement.innerHTML = "Yayyy!! :3"; + buttonsContainer.classList.add("hidden"); + changeImage("yes"); +} + +function resizeYesButton() { + const computedStyle = window.getComputedStyle(yesButton); + const fontSize = parseFloat(computedStyle.getPropertyValue("font-size")); + const newFontSize = fontSize * 1.6; + + yesButton.style.fontSize = `${newFontSize}px`; +} + +function generateMessage(noCount) { + const messages = [ + "No", + "Are you sure?", + "Pookie please", + "Don't do this to me :(", + "You're breaking my heart", + "I'm gonna cry...", + ]; + + const messageIndex = Math.min(noCount, messages.length - 1); + return messages[messageIndex]; +} + +function changeImage(image) { + catImg.src = `img/cat-${image}.jpg`; +} + +function updateNoButtonText() { + noButton.innerHTML = generateMessage(noCount); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..a9b9e86 --- /dev/null +++ b/style.css @@ -0,0 +1,70 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + background-color: #fff0f6; + font-family: "Protest Riot", sans-serif; +} + +.container { + height: 100vh; + margin: 0 auto; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.cat-img { + width: 30rem; + height: 30rem; + margin-bottom: 2rem; +} + +.title { + font-size: 3.6rem; + color: #f53699; + text-align: center; + margin-bottom: 2rem; +} + +.buttons { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + + gap: 1rem; +} + +.btn { + padding: 1.5rem 2.5rem; + border: none; + border-radius: 4px; + + color: white; + font-size: 1.6rem; + font-weight: 600; + cursor: pointer; + display: inline-block; +} + +.btn--yes { + background-color: #40c057; +} + +.btn--no { + background-color: #f03e3e; +} + +.hidden { + display: none; +}