Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
namdosanwannabe committed Feb 3, 2024
0 parents commit bec4a9f
Show file tree
Hide file tree
Showing 10 changed files with 160 additions and 0 deletions.
Binary file added img/cat-0.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/cat-1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/cat-2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/cat-3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/cat-4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/cat-5.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/cat-yes.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Valentine</title>
</head>
<body>
<main class="container">
<img class="cat-img" src="img/cat-0.jpg" alt="Picture of a cat" />
<p class="title">Will you be my Valentine?</p>
<div class="buttons">
<button type="button" class="btn btn--yes">Yes</button>
<button type="button" class="btn btn--no">No</button>
</div>
</main>

<script type="module" src="script.js"></script>
</body>
</html>
63 changes: 63 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -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);
}
70 changes: 70 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -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 {

This comment has been minimized.

Copy link
@zore836

zore836 Feb 9, 2024

jhvl

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;
}

4 comments on commit bec4a9f

@Kiaraaexa
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Te amo :3

@Kiaraaexa
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ailovu 🥉

@Kiaraaexa
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Te amo

@Kiaraaexa
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Te amo

Please sign in to comment.