Jannis/valentine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished Project <3

Browse Source
This commit is contained in:
Jannis Heydemann
2025-02-11 19:11:12 +01:00
parent 25b968612c
commit 38cbe19d01
4 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/Cookiemonster-gv11.ttf Normal file
View File

Binary file not shown.

19
index.html
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine Letter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div><img src="" alt="haha fuck you" class="gif"></div>
<div class="text">Ya wanna be my valentine????</div>
<div id="buttons">
<button class="yes">Yes</button>
<button class="no">No</button>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

25
script.js
View File

@@ -0,0 +1,25 @@
const yesButton = document.querySelector('.yes');
const noButton = document.querySelector('.no');
const gif = document.querySelector('.gif');
const text = document.querySelector('.text');
const happy = "https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExdWc4c2dhc2ZobzdqMmMwYTU1NGYwd3h2bDVsdTlwMGMxdWx2b2oxNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/MDJ9IbxxvDUQM/giphy.gif";
const sad = "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExMzJ3MjN5eGQ3ejh4bXVuMWQ2dWRvbDF2czV5cG53OW96MjdrNmxxNyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/OPU6wzx8JrHna/giphy.gif";
const question = "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXFoNjJvZmU1ZXE0eDJyeHdtOXBocXB4Zm82ZHVpeHBhM3g2eGtnZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xT0xeuOy2Fcl9vDGiA/giphy.gif";
gif.src=question;
yesButton.addEventListener('click', () => {
gif.src = happy;
text.innerHTML = "Yay! You're my valentine! Love you <3";
noButton.style.display = "none";
yesButton.style.display = "none";
});
noButton.addEventListener('click', () => {
gif.src = sad;
text.innerHTML = "Noooooo! You're not my valentine! I hate you!!!!!";
noButton.style.display = "none";
yesButton.innerHTML = "Im sorry Pookie! I changed my mind!";
});

42
style.css
View File

@@ -0,0 +1,42 @@
@font-face {
font-family: 'Cookiemonster'; /*a name to be used later*/
src: url('/assets/Cookiemonster-gv11.ttf'); /*URL to font*/
}
body {
background-color:black;
font-family: Cookiemonster;
color: white;
text-align: center;
}
.yes {
color: white;
background-color: green;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.no {
color: white;
background-color: red;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.yes:hover {
background-color: darkgreen;
}
.no:hover {
background-color: darkred;
}
.text {
font-size: 30px;
margin-top: 100px;
}