4e Solution

SuperSimpleDev · SuperSimpleDev · commit b0a27ff732a0 · 2024-11-20T11:29:03.000-05:00
diff --git a/1-exercise-solutions/lesson-04/4d.html b/1-exercise-solutions/lesson-04/4d.html
@@ -29,6 +29,10 @@
         cursor: pointer;
         margin-top: 10px;
       }
+
+      .show-button {
+        margin-left: 10px;
+      }
     </style>
   </head>
   <body>
@@ -40,6 +44,20 @@
     <script src="https://unpkg.com/supersimpledev/babel.js"></script>
     <script type="text/babel">
       function App() {
+        const [showPassword, setShowPassword] = React.useState(false);
+
+        function toggleShowPassword() {
+          setShowPassword(!showPassword);
+          /*
+            Another solution is:
+            if (showPassword) {
+              setShowPassword(false);
+            } else {
+              setShowPassword(true);
+            }
+          */
+        }
+
         return (
           <>
             <p className="title">Hello, welcome to my website</p>
@@ -52,9 +70,15 @@
             <div>
               <input
                 placeholder="Password"
-                type="password"
+                type={showPassword ? 'text' : 'password'}
                 className="login-input"
               />
+              <button
+                className="show-button"
+                onClick={toggleShowPassword}
+              >
+                {showPassword ? 'Hide' : 'Show'}
+              </button>
             </div>
             <button className="login-button">Login</button>
             <button className="login-button">Sign up</button>
