\n {images.map((src, i) => (\n \n ))}\n

\n );\n}\n\nfunction ConfettiBackground() {\n const pieces = Array.from({ length: 40 });\n\n return (\n

\n {pieces.map((_, i) => (\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg =\n \"https://tenor.com/en-GB/view/i-wuv-you-i-luv-u-loves-ya-heart-it-hey-i-love-you-gif-10378108104842377379.gif\";\n const secondImg =\n \"https://tenor.com/en-GB/view/tom-and-jerry-heart-in-love-cartoon-tom-gif-17270659.gif\";\n\n return (\n \n {/* Background images only after Yes */}\n {isValentine && }\n {isValentine && }\n\n {!isValentine ? (\n <>\n

Will you be my Valentine? 💘

\n setIsValentine(true)}\n style={{\n fontSize: `${yesButtonSize}px`,\n margin: \"10px\",\n padding: \"10px 20px\",\n backgroundColor: \"blue\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n Yes\n \n setNoClicks((p) => p + 1)}\n style={{\n fontSize: \"16px\",\n margin: \"10px\",\n padding: \"10px 20px\",\n backgroundColor: \"pink\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n \n ) : (\n <>\n

\n \n Yay!!! 💖🎉\n \n \n )}\n\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[100],"permalink","https://www.val.town/x/tylerfrederick1005/valentine/code/main.tsx","extension","actionData","errors"]