Valentine day - Ask your girlfriend out in a geeky way

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!!