First commit

2025-09-10 14:42:57 -04:00
commit 1d12903e4e
65 changed files with 3587 additions and 0 deletions
--- a/5/flex.js
+++ b/5/flex.js
@@ -0,0 +1,47 @@
+const picsumBase = "https://picsum.photos/200";
+
+let mainElement;
+
+let addButton;
+let spreadButton;
+let rotateButton;
+
+function spacing() {
+  spreadButton.classList.toggle("active");
+  mainElement.classList.toggle("spread");
+}
+
+function rotate() {
+  rotateButton.classList.toggle("active");
+  mainElement.classList.toggle("vert");
+}
+
+function addImg() {
+  const randomNumber = document.getElementsByTagName("img").length + 1;
+
+  const newImg = document.createElement("img");
+  newImg.src = `${picsumBase}?random=${randomNumber}`;
+  newImg.alt = "random square image";
+  newImg.addEventListener("click", removeImg.bind(null, newImg));
+  mainElement.appendChild(newImg);
+}
+
+function removeImg(element) {
+  element.remove();
+}
+
+(function () {
+  mainElement = document.querySelector("main");
+
+  addButton = document.querySelector("#add");
+  spreadButton = document.querySelector("#spread");
+  rotateButton = document.querySelector("#rotate");
+
+  addButton.addEventListener("click", addImg);
+  spreadButton.addEventListener("click", spacing);
+  rotateButton.addEventListener("click", rotate);
+
+  document
+    .querySelectorAll("img")
+    .forEach((img) => img.addEventListener("click", removeImg.bind(null, img)));
+})();
--- a/5/index.html
+++ b/5/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Flexbox Layout</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><button id="add">Add Image</button></li>
+        <li><button id="spread">Spread Out</button></li>
+        <li><button id="rotate">Rotate Direction</button></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <img src="https://picsum.photos/200?random=1" alt="random square image" />
+    <img src="https://picsum.photos/200?random=2" alt="random square image" />
+  </main>
+  <script src="flex.js"></script>
+</body>
+
+</html>
--- a/5/styles.css
+++ b/5/styles.css
@@ -0,0 +1,79 @@
+:root {
+  --foreground-color: #343a40;
+  --background-color: #f8f9fa;
+  --nav-background-color: #ced4da;
+}
+
+body {
+  /* Do not change: <body> includes vertical margin only */
+  margin: 2vh 0vw;
+  padding: 0;
+}
+
+header {
+  background-color: var(--nav-background-color);
+  top: 0;
+  width: 100vw;
+  display: flex;
+  justify-content: flex-end;
+  position: fixed;
+}
+
+main {
+  height: 96vh;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+main.spread {
+  justify-content: space-around;
+}
+
+main.vert {
+  flex-direction: column;
+}
+
+nav > ul {
+  list-style: none;
+  margin-right: 5vw;
+}
+
+nav > ul > li {
+  display: inline;
+}
+
+nav > ul > li > button {
+  padding: 1vh 2vw;
+  font-size: 1.2em;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--background-color);
+  color: var(--foreground-color);
+}
+
+nav > ul > li > button:hover {
+  outline: 3px solid var(--foreground-color);
+}
+
+nav > ul > li > button.active {
+  background-color: var(--foreground-color);
+  color: var(--background-color);
+}
+
+/* TODO: Define rules for the nav buttons:
+
+ * The coloring will be controlled dynamically:
+ *
+ *   Start with the default background and foreground colors
+ *   If the mouse is hovering, add an outline using the foreground color
+ *   If the "active" class is present, reverse the colors
+ */
+
+/* TODO: Define rules for the main flexbox:
+ *
+ *   If the "spread" class is present, use space-around to space the images out
+ *   If the "vert" class is present, make the flexbox a column
+ */
+
+/* BONUS: Make <img> tags show up in front of the header bar */