Recently I came across a #tiktok where they've shown an innovative concept of building a website to ask your girlfriend out on a date. So I decided to build it myself immediately a lot of comments were present on that #tiktok on how to create it.
Final Preview:
Git: https://github.com/saurabhnemade/will-you-be-my-valentine
Demo link: https://saurabhnemade.github.io/will-you-be-my-valentine/
Prerequisits
npm install -g pnpm
Let's Build this 🚀
First let's just create a react project with tailwindcss:
pnpm create vite will-you-be-my-valentine --template react-ts
cd will-you-be-my-valentine
pnpm install
pnpm install -D tailwindcss postcss autoprefixer
pnpm tailwindcss init -p
pnpm run dev
Now when you go the url generated like below where application is running. Visit it:
Update tailwinds.config.ts with
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Go to src/index.css and replace everything with
@tailwind base;
@tailwind components;
@tailwind utilities;
Now update src/App.tsx with
"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?",
"What if I asked really nicely?",
"Pretty please",
"With a chocolate rice cake on top",
"What about a matcha frostie",
"PLEASE POOKIE",
"But :*(",
"I am going to die",
"Yep im dead",
"ok ur talking to nathan's ghost",
"please babe",
":((((",
"PRETTY PLEASE",
"Estoy muerto",
"No :(",
];
return phrases[Math.min(noCount, phrases.length - 1)];
};
return (
<div className="-mt-16 flex h-screen flex-col items-center justify-center">
{yesPressed ? (
<>
<img src="https://media.tenor.com/gUiu1zyxfzYAAAAi/bear-kiss-bear-kisses.gif" />
<div className="my-4 text-4xl font-bold">WOOOOOO!!! I love you pookie!! ;))</div>
</>
) : (
<>
<img
className="h-[200px]"
src="https://gifdb.com/images/high/cute-love-bear-roses-ou7zho5oosxnpo6k.gif"
/>
<h1 className="my-4 text-4xl">Will you be my Valentine?</h1>
<div className="flex items-center">
<button
className={`mr-4 rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700`}
style={{ fontSize: yesButtonSize }}
onClick={() => setYesPressed(true)}
>
Yes
</button>
<button
onClick={handleNoClick}
className="rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700"
>
{noCount === 0 ? "No" : getNoButtonText()}
</button>
</div>
</>
)}
</div>
);
}
Explaination: We are creating just two buttons on screen. When no button is clicked we invoke handleNoClick which updates count of noCount state. We calculate yes button size based on this noCount as const yesButtonSize = noCount * 20 + 16;
To know more about tailwindcss in depth and adjust styling quickly you can learn here: https://tailwindcss.com/docs/installation
You should have it like 🎉:
Happy Coding!!
Top comments (0)