Valentine website

page.tsx

"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>
  );
}

😍😍

how do i create a website for my crush out if this ??

please help

I agree.. how can I make this a website

You need React and Tailwind. I created a react app using create-react-app. Updated my App.tsx to below:

import './App.css';
import Page from './page'; // Make sure this path is correct

function App() {
  return (
    <div className="App">
      <Page />
    </div>
  );
}

export default App;

I followed this to set up tailwind: https://tailwindcss.com/docs/guides/create-react-app. Make sure you also set up postcss:
npm install -D postcss postcss-cli
Once all setup is complete, use npm start.
Also: https://x.com/trunarla/status/1753544163189227650

how do i create a website for my crush out if this ??

please help

I think you can just copy the code and customize it, move a few code pieces around, change th gif to a picture of her maybe and add her name somewhere in there.

how do i create a website for my crush out if this ??

please help
same

how do i create a website for my crush out if this ??
please help
same

It's easy bro follow these steps

1. create newfolder and open it in Vscode code editor.

2. open terminal in vs code and enter the following commands npx create-react-app my-project and press enter.

3. Then type cd my-project and press enter.

4. type npm install -D tailwindcss and press enter.

5. Type npx tailwindcss init and press enter.

6. after these steps you will find a file named "tailwind.config.js", open it.

7. delete everything within the folder and paste this /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } and save it.

8. Now open "App.js" and paste the code provided above.

9. only change the line 4 by replacing "Page" with "App" and then save it.

10. also delete line 1 it is not needed.

11. after this type npm start to execute the program.

12. deploying to the website is also easy.

13. ctrl+c to stop the running program and type npm run build to build the react app.

14. you will find a directory named "Build" within your folder search for it.

15. create an account on any hosting platform. I prefer "netlify".

16. in your hosting platform to deploy it upload the Build folder to the hosting platform.

17. they will provide you an url which can be used to access the website.

guys, drop the build, I beg you

how to import this code in my website?

Here you go guys. You can find the build files here!! Just add all the files to your root directory and deploy. Happy valentines week y'all! ❤️
https://gist.github.com/bahetyshyam/6dafaa4d6201fd56d673fbe3d2c969a7

Personal preference to deploy - https://netlify.com

@bahetyshyam How can i make another website using my own code? I mean can you help me to do with my code ? Thanks a lot!

how do i create a website for my crush out if this ??
please help
same

It's easy bro follow these steps

1. create newfolder and open it in Vscode code editor.

2. open terminal in vs code and enter the following commands `npx create-react-app my-project` and press enter.

3. Then type `cd my-project` and press enter.

4. type `npm install -D tailwindcss` and press enter.

5. Type `npx tailwindcss init` and press enter.

6. after these steps you will find a file named "tailwind.config.js", open it.

7. delete everything within the folder and paste this `/** @type {import('tailwindcss').Config} */ module.exports = {   content: [ "./src/**/*.{js,jsx,ts,tsx}",   ],   theme: { extend: {},   },   plugins: [], }` and save it.

8. Now open "App.js" and paste the code provided above.

9. only change the line 4 by replacing "Page" with "App" and then save it.

10. also delete line 1 it is not needed.

11. after this type `npm start` to execute the program.

12. deploying to the website is also easy.

13. `ctrl+c` to stop the running program and type `npm run build` to build the react app.

14. you will find a directory named "Build" within your folder search for it.

15. create an account on any hosting platform. I prefer "netlify".

16. in your hosting platform to deploy it upload the Build folder to the hosting platform.

17. they will provide you an url which can be used to access the website.

bro the css don't work why?

@nithishp helped me out a whole lot. I just had to add the tailwindcss css config files as required to ./src/index.css .

1. after following @nithishp steps up till step 7, copy and paste :
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

into ./src/index.css (to be the first three lines in this file).

Then carry on with @nithishp steps.

To all those who are looking for this:
https://saurabhnemade.github.io/will-you-be-my-valentine/

Vite + Tailwindcss + Github Pages

Here is full code:
https://github.com/saurabhnemade/will-you-be-my-valentine

Nice

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

• 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