Skip to content

Instantly share code, notes, and snippets.

@tnarla
Created February 2, 2024 20:35
Show Gist options
  • Save tnarla/0c09a11fea366145ba684fe6ebf578c5 to your computer and use it in GitHub Desktop.
Save tnarla/0c09a11fea366145ba684fe6ebf578c5 to your computer and use it in GitHub Desktop.
Valentine website
"use client";
import { useState } from "react";
export default function Page() {
const [noCount, setNoCount] = useState(0);
const [yesPressed, setYesPressed] = useState(false);
const yesButtonSize = noCount * 20 + 16;
const handleNoClick = () => {
setNoCount(noCount + 1);
};
const getNoButtonText = () => {
const phrases = [
"No",
"Are you sure?",
"Really sure?",
"Think again!",
"Last chance!",
"Surely not?",
"You might regret this!",
"Give it another thought!",
"Are you absolutely certain?",
"This could be a mistake!",
"Have a heart!",
"Don't be so cold!",
"Change of heart?",
"Wouldn't you reconsider?",
"Is that your final answer?",
"You're breaking my heart ;(",
];
return phrases[Math.min(noCount, phrases.length - 1)];
};
return (
<div className="flex flex-col items-center justify-center h-screen -mt-16">
{yesPressed ? (
<>
<img src="https://media.tenor.com/gUiu1zyxfzYAAAAi/bear-kiss-bear-kisses.gif" />
<div className="text-4xl font-bold my-4">Ok yay!!!</div>
</>
) : (
<>
<img className="h-[200px]" src="https://gifdb.com/images/high/cute-love-bear-roses-ou7zho5oosxnpo6k.gif" />
<h1 className="text-4xl my-4">Will you be my Valentine?</h1>
<div>
<button
className={`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4`}
style={{ fontSize: yesButtonSize }}
onClick={() => setYesPressed(true)}
>
Yes
</button>
<button
onClick={handleNoClick}
className=" bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
>
{noCount === 0 ? "No" : getNoButtonText()}
</button>
</div>
</>
)}
</div>
);
}
@kurt9999
Copy link

Nice

@senemk05
Copy link

i only want to change sentence and the gif but how does it work? can someone please explain it to me

@phannhatchanh
Copy link

@jijijiji787878
Copy link

pls step by step edited turotial

@Tynuche
Copy link

Tynuche commented Feb 13, 2024

I manage to build the app and everything else. After I uploaded it to Netlify and deployed it the link I got isn't working. Help

@PANT3RA101
Copy link

Same as above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment