Created
February 2, 2024 20:35
-
-
Save tnarla/0c09a11fea366145ba684fe6ebf578c5 to your computer and use it in GitHub Desktop.
Valentine website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"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> | |
); | |
} |
phannhatchanh
commented
Feb 12, 2024
- Demo: https://valentine.phannhatchanh.com
- Built with: Next.js, TailwindCSS and Vercel
- Full code: https://github.com/phannhatchanh/valentine
pls step by step edited turotial
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
Same as above
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment