How to fix this
Archiviert 2 years ago
H
OneFella
```js
import { useState } from "react";
import "./App.css";
const phrases = [
"No",
"Are you sure?",
"Really sure?",
"Pookie please",
"Don't do this to me",
"You're breaking my heart :(",
];
function App() {
const [noCount, setNoCount] = useState(0);
const [yesPressed, setYesPressed] = useState(false);
const yesButtonSize = noCount * 20 + 16;
function handleNoClick() {
setNoCount(noCount + 1);
}
function getNoButtonText() {
return phrases [Math.min(noCount, phrases.length - 1)];
}
return (
<div ClassName="valentine-container">
{yesPressed ? (
<>
<img>
alt="bears kissing"
src="https://media1.tenor.com/m/tl4tMev7ICEAAAAC/instagram-zefexwoo-shaurya.gif"
/>
<div ClassName="text">Yay!!!!</div>
</img>
) : (
<>
<img
alt="bears with hearts"
src="https://media1.tenor.com/m/583ELpFX1uEAAAAC/bear-running.gif"
/>
<div ClassName="text">Will you be my valentine?</div>
<div>
<button
className="yesButton"
style={{ fontSize: yesButtonSize}}
onClick={() => setYesPressed(true)}
>
Yes
</button>
<button onClick={handleNoClick} className="noButton">
{getNoButtonText()}
</button>
</div>
</>
)}
</div>
);
}
export default App;
```
