3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
21 const [noClicks, setNoClicks] = useState(0);
22 const [isValentine, setIsValentine] = useState(false);
23 const [showSecret, setShowSecret] = useState(false); // New state to control secret image visibility
24 const [showSayingNo, setShowSayingNo] = useState(false); // New state to control "saying no" image visibility
25 const [showSecretImage, setShowSecretImage] = useState(false); // New state for secret image visibility after button click
26 const yesButtonSize = (noClicks * 20) + 16;
27
39 const updatedNoClicks = prev + 1;
40 if (updatedNoClicks >= NO_PHRASES.length) {
41 setShowSayingNo(true); // Show "saying no" image when max clicks are reached
42 }
43 return updatedNoClicks;
50
51 const handleSurpriseClick = () => {
52 setShowSecretImage(true); // Show the secret image after clicking the surprise button
53 };
54
65 }}
66 >
67 {/* Only show content if user hasn't clicked the final "No" or secret image */}
68 {!showSayingNo && !showSecretImage
69 ? (
70 !isValentine
157 Click here for a surprise
158 </button>
159 {/* Conditionally render the secret image */}
160 {showSecret && <img src={secretImg} style={{ width: "80%", height: "auto" }} />}
161 </>
163 )
164 : (
165 // Only show the final saying no image or secret image
166 <img src={showSecretImage ? secretImg : sayingnoImg} style={{ width: "80%", height: "auto" }} />
167 )}
168 </div>
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
