📦 YoussefRabeiii / willyoubemyvalentine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87"use client";

import Image from "next/image";
import { useState } from "react";

import styles from "./page.module.css";

import { begging, happy, sad } from "@assets";

export default function Home() {
	const [state, setState] = useState(undefined);

	const moveNo = () => {
		const button = document.querySelector("#no");

		button.style.transform = `translateX(${Math.random() * 50 - 50}vw)`;
		button.style.transform += `translateY(${Math.random() * 50 - 50}vh)`;
	};

	return (
		<main className={styles.main}>
			<div className={styles.container}>
				<div className={styles.gif}>
					{state === undefined && (
						<Image
							priority={true}
							src={begging}
							alt="Begging"
							width={250}
							height={250}
						/>
					)}

					{state && (
						<Image
							src={happy}
							priority={true}
							alt="Happy"
							width={250}
							height={250}
						/>
					)}

					{state === false && (
						<Image
							src={sad}
							priority={true}
							alt="Sad"
							width={250}
							height={250}
						/>
					)}
				</div>

				<h1 className={styles.title}>Angel Will You Be My Valentine ?</h1>

				<div className={styles.buttons}>
					<h3
						onClick={() => setState(true)}
						className={`${styles.button} ${styles.yes}`}
					>
						Yes
					</h3>
					<h3
						onClick={() => {
							setState(false);
							moveNo();
						}}
						className={`${styles.button} ${styles.no}`}
						id="no"
					>
						No
					</h3>
				</div>

				<div className={styles.answerBox}>
					{state !== undefined && (
						<p className={styles.answer}>
							{state ? "Yaaaaaay I love you more" : "What About Now ?"}
						</p>
					)}
				</div>
			</div>
		</main>
	);
}