Skip to content

Instantly share code, notes, and snippets.

@tnarla
Created February 2, 2024 20:35
Show Gist options
  • Save tnarla/0c09a11fea366145ba684fe6ebf578c5 to your computer and use it in GitHub Desktop.
Save tnarla/0c09a11fea366145ba684fe6ebf578c5 to your computer and use it in GitHub Desktop.
Valentine website
"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>
);
}
@tarunthedeveloper
Copy link

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

please help
same

@nithishp
Copy link

nithishp commented Feb 5, 2024

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.

@LOOFYGG
Copy link

LOOFYGG commented Feb 6, 2024

guys, drop the build, I beg you

@escapethematrix981
Copy link

how to import this code in my website?

@bahetyshyam
Copy link

bahetyshyam commented Feb 8, 2024

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

@livv19
Copy link

livv19 commented Feb 8, 2024

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

@hristianivanov
Copy link

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?

@belovedafolabi
Copy link

@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.

@saurabhnemade
Copy link

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

@kurt9999
Copy link

Nice

@senemk05
Copy link

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

@phannhatchanh
Copy link

@jijijiji787878
Copy link

pls step by step edited turotial

@Tynuche
Copy link

Tynuche commented Feb 13, 2024

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

@PANT3RA101
Copy link

Same as above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment