Completed React Event Handling Lab

src/App.css

@@ -0,0 +1,80 @@
+/* src/App.css */
+.App {
+  text-align: center;
+  padding: 20px;
+  font-family: sans-serif;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Basic styling for lab components */
+div {
+    margin-bottom: 20px;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    display: inline-block; /* To make them side-by-side if space allows */
+    margin-right: 10px;
+    vertical-align: top; /* Align tops */
+}
+
+h1, h2, h3 {
+    color: #333;
+}
+
+input[type="password"] {
+    padding: 8px;
+    margin-top: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 200px;
+}
+
+button {
+    padding: 10px 15px;
+    margin-top: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}

src/components/EyesOnMe.js

@@ -1 +1,28 @@
-// Code EyesOnMe Component Here
+// src/components/EyesOnMe.js
+import React from 'react';
+
+function EyesOnMe() {
+  // Event handler for the button's focus event
+  const handleFocus = () => {
+    console.log('Good!');
+  };
+
+  // Event handler for the button's blur event
+  const handleBlur = () => {
+    console.log('Hey! Eyes on me!');
+  };
+
+  return (
+    <div>
+      <h2>Attention Check</h2>
+      <button
+        onFocus={handleFocus} // Attach the focus event handler
+        onBlur={handleBlur}   // Attach the blur event handler
+      >
+        Eyes on me
+      </button>
+    </div>
+  );
+}
+
+export default EyesOnMe;

src/components/Keypad.js

@@ -1,9 +1,24 @@
-// Code Keypad Component Here
+// src/components/Keypad.js
+import React from 'react';
 
-function Keypad (){
-    return (
-        <div></div>
-    )
+function Keypad() {
+  // Event handler for the input's change event
+  const handleChange = (event) => {
+    console.log('Entering password...');
+    // You can also log the input value if you want to see it:
+    // console.log('Input value:', event.target.value);
+  };
+
+  return (
+    <div>
+      <h2>Nuclear Plant Keypad</h2>
+      <input
+        type="password"
+        onChange={handleChange} // Attach the event handler
+        placeholder="Enter password..."
+      />
+    </div>
+  );
 }
 
-export default Keypad;
+export default Keypad;