EC2 website & project proposal init

docker/color-buttons/public/app.js

@@ -0,0 +1,27 @@
+class ColorButtonsApp {
+  constructor(backgroundElement, statusElement) {
+    this.backgroundElement = backgroundElement;
+    this.statusElement = statusElement;
+  }
+
+  setColor(color) {
+    this.backgroundElement.style.backgroundColor = color;
+    this.statusElement.textContent = `Current background: ${color}`;
+  }
+
+  connectButton(button, color) {
+    button.addEventListener("click", () => this.setColor(color));
+  }
+
+  initialize() {
+    this.connectButton(document.getElementById("blueBtn"), "blue");
+    this.connectButton(document.getElementById("redBtn"), "red");
+  }
+}
+
+const application = new ColorButtonsApp(
+  document.body,
+  document.getElementById("status"),
+);
+
+application.initialize();

docker/color-buttons/public/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SSW590 Group — Color Buttons</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background-color: white;
+        font-family: Arial, sans-serif;
+        transition: background-color 0.3s ease;
+      }
+
+      main {
+        max-width: 600px;
+        margin: 50px auto;
+        padding: 24px;
+        text-align: center;
+        background-color: white;
+        border-radius: 12px;
+      }
+
+      button {
+        padding: 12px 24px;
+        margin: 10px;
+        font-size: 18px;
+        cursor: pointer;
+      }
+    </style>
+    <script src="app.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <h1>Color Buttons</h1>
+      <p>Victor Del Rio Foces and Payton Bates — SSW590</p>
+      <button id="blueBtn" type="button">Blue</button>
+      <button id="redBtn" type="button">Red</button>
+      <p id="status" aria-live="polite">Current background: white</p>
+    </main>
+  </body>
+</html>