EC2 website & project proposal init

docker/color-buttons/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+.git
+.DS_Store

docker/color-buttons/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install --omit=dev
+
+COPY server.js ./
+COPY public ./public
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

docker/color-buttons/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ssw590-group-buttons",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2"
+  }
+}

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>

docker/color-buttons/server.js

@@ -0,0 +1,13 @@
+import express from "express";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const directory = path.dirname(fileURLToPath(import.meta.url));
+const app = express();
+const port = process.env.PORT || 3000;
+
+app.use(express.static(path.join(directory, "public")));
+
+app.listen(port, "0.0.0.0", () => {
+  console.log(`Group buttons website listening on port ${port}`);
+});