├── img
├── cat-0.jpg
├── cat-1.jpg
├── cat-2.jpg
├── cat-3.jpg
├── cat-4.jpg
├── cat-5.jpg
└── cat-yes.jpg
├── index.html
├── style.css
└── script.js
/img/cat-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/namdosanwannabe/be-my-valentine/HEAD/img/cat-0.jpg
--------------------------------------------------------------------------------
/img/cat-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/namdosanwannabe/be-my-valentine/HEAD/img/cat-1.jpg
--------------------------------------------------------------------------------
/img/cat-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/namdosanwannabe/be-my-valentine/HEAD/img/cat-2.jpg
--------------------------------------------------------------------------------
/img/cat-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/namdosanwannabe/be-my-valentine/HEAD/img/cat-3.jpg
--------------------------------------------------------------------------------
/img/cat-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/namdosanwannabe/be-my-valentine/HEAD/img/cat-4.jpg
--------------------------------------------------------------------------------
/img/cat-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/namdosanwannabe/be-my-valentine/HEAD/img/cat-5.jpg
--------------------------------------------------------------------------------
/img/cat-yes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/namdosanwannabe/be-my-valentine/HEAD/img/cat-yes.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 | Valentine
14 |
15 |
16 |
17 | 
18 | Will you be my Valentine?
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | html {
8 | font-size: 62.5%;
9 | }
10 |
11 | body {
12 | background-color: #fff0f6;
13 | font-family: "Protest Riot", sans-serif;
14 | }
15 |
16 | .container {
17 | height: 100vh;
18 | margin: 0 auto;
19 |
20 | display: flex;
21 | flex-direction: column;
22 | align-items: center;
23 | justify-content: center;
24 | }
25 |
26 | .cat-img {
27 | width: 30rem;
28 | height: 30rem;
29 | margin-bottom: 2rem;
30 | }
31 |
32 | .title {
33 | font-size: 3.6rem;
34 | color: #f53699;
35 | text-align: center;
36 | margin-bottom: 2rem;
37 | }
38 |
39 | .buttons {
40 | display: flex;
41 | flex-wrap: wrap;
42 | align-items: center;
43 | justify-content: center;
44 |
45 | gap: 1rem;
46 | }
47 |
48 | .btn {
49 | padding: 1.5rem 2.5rem;
50 | border: none;
51 | border-radius: 4px;
52 |
53 | color: white;
54 | font-size: 1.6rem;
55 | font-weight: 600;
56 | cursor: pointer;
57 | display: inline-block;
58 | }
59 |
60 | .btn--yes {
61 | background-color: #40c057;
62 | }
63 |
64 | .btn--no {
65 | background-color: #f03e3e;
66 | }
67 |
68 | .hidden {
69 | display: none;
70 | }
71 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const titleElement = document.querySelector(".title");
4 | const buttonsContainer = document.querySelector(".buttons");
5 | const yesButton = document.querySelector(".btn--yes");
6 | const noButton = document.querySelector(".btn--no");
7 | const catImg = document.querySelector(".cat-img");
8 |
9 | const MAX_IMAGES = 5;
10 |
11 | let play = true;
12 | let noCount = 0;
13 |
14 | yesButton.addEventListener("click", handleYesClick);
15 |
16 | noButton.addEventListener("click", function () {
17 | if (play) {
18 | noCount++;
19 | const imageIndex = Math.min(noCount, MAX_IMAGES);
20 | changeImage(imageIndex);
21 | resizeYesButton();
22 | updateNoButtonText();
23 | if (noCount === MAX_IMAGES) {
24 | play = false;
25 | }
26 | }
27 | });
28 |
29 | function handleYesClick() {
30 | titleElement.innerHTML = "Yayyy!! :3";
31 | buttonsContainer.classList.add("hidden");
32 | changeImage("yes");
33 | }
34 |
35 | function resizeYesButton() {
36 | const computedStyle = window.getComputedStyle(yesButton);
37 | const fontSize = parseFloat(computedStyle.getPropertyValue("font-size"));
38 | const newFontSize = fontSize * 1.6;
39 |
40 | yesButton.style.fontSize = `${newFontSize}px`;
41 | }
42 |
43 | function generateMessage(noCount) {
44 | const messages = [
45 | "No",
46 | "Are you sure?",
47 | "Pookie please",
48 | "Don't do this to me :(",
49 | "You're breaking my heart",
50 | "I'm gonna cry...",
51 | ];
52 |
53 | const messageIndex = Math.min(noCount, messages.length - 1);
54 | return messages[messageIndex];
55 | }
56 |
57 | function changeImage(image) {
58 | catImg.src = `img/cat-${image}.jpg`;
59 | }
60 |
61 | function updateNoButtonText() {
62 | noButton.innerHTML = generateMessage(noCount);
63 | }
64 |
--------------------------------------------------------------------------------