Text now zooms in and out

emilyhuangml · Feb 2, 2023 · 4b0666f · 4b0666f
1 parent 881d34e
commit 4b0666f
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/pages/jack.js b/pages/jack.js
@@ -6,6 +6,8 @@ import React, { useState, useEffect } from "react";
 export default function Jack() {
     const [colorIndex, setColorIndex] = useState(0);
     const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
+    const [fontSize, setFontSize] = useState(20);
+    const [fontDirection, setFontDirection] = useState(1);
 
     useEffect(() => {
         const intervalId = setInterval(() => {
@@ -14,6 +16,18 @@ export default function Jack() {
         return () => clearInterval(intervalId);
     }, [colorIndex]);
 
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            if (fontSize >= 40) {
+                setFontDirection(-1);
+            } else if (fontSize <= 10) {
+                setFontDirection(1);
+            }
+            setFontSize(fontSize + fontDirection);
+        }, 50);
+        return () => clearInterval(intervalId);
+    }, [fontSize]);
+
     return (
         <div className={styles.container} style={{ backgroundColor: colors[colorIndex] }}>
             <Head>
@@ -27,14 +41,15 @@ export default function Jack() {
                     style={{
                         fontFamily: "Comic Sans",
                         fontWeight: 550,
-                        fontSize: "20px",
+                        fontSize: `${fontSize}px`,
                     }}
                 >
                     I'm Jack and I really hope you don't have epilepsy
                 </div>
             </main>
         </div>
     );
+
 }
 
 // Written using a trained version of ChatGPT