Valentine day - Ask your girlfriend out in a geeky way
Tags: react, tutorial, javascript, valentine
Published: 2024-02-12 16:41:28

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:**

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjRicTVtNjZ2cjdmOG01em5vYjc5bDNwZ2tuOWpyczAwZjB3dWtkYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/yar9Tt20swrwdxv0FS/giphy.gif">



**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:


![pnpm run dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nq2a1ia3dif64q370l2.png)


![browser preview dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exmf1kfqgkuj09sbtd6f.png)

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 🎉:

![final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa5xkopm4dll9kbnenwa.png)


Happy Coding!!