情人节——用极客的方式约女朋友出去
最近我偶然看到一个#tiktok视频，里面展示了一个很有创意的概念：创建一个网站来约女朋友出去。于是我决定自己也做一个，那个#tiktok视频下面有很多关于如何制作的评论。
最终预览：
Git： https://github.com/saurabhnemade/will-you-be-my-valentine
演示链接： https://saurabhnemade.github.io/will-you-be-my-valentine/
先决条件
npm install -g pnpm
让我们一起建造它🚀
首先，我们来创建一个使用 Tailwind CSS 的 React 项目：
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
现在，当您访问如下所示的 URL 时，应用程序即可运行。请访问该 URL：
更新tailwinds.config.ts
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
前往src/index.css并将所有内容替换为
@tailwind base;
@tailwind components;
@tailwind utilities;
现在src/App.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?",
"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>
);
}
说明：我们在屏幕上只创建了两个按钮。当没有按钮被点击时，我们会调用handleNoClick一个函数来更新noCount状态计数。我们根据这个noCount计数来计算“是”按钮的大小。const yesButtonSize = noCount * 20 + 16;
想深入了解 Tailwind CSS 并快速调整样式，请访问：https://tailwindcss.com/docs/installation
你应该像这样🎉：
祝您编程愉快！
文章来源：https://dev.to/saurabhnemade/valentine-day-ask-your-girlfriend-out-in-a-geeky-way-m61