Add exercise files

Macomi27 · Oct 16, 2020 · e4dea53 · e4dea53
1 parent 572c001
commit e4dea53
Show file tree

Hide file tree

Showing 197 changed files with 8,405 additions and 0 deletions.
diff --git a/01_01/Photo.js b/01_01/Photo.js
@@ -0,0 +1,78 @@
+/**
+ * Fragment from React Photo Gallery component.
+ * By Sandra Gonzales @neptunian
+ * @link https://github.com/neptunian/react-photo-gallery
+ * The MIT License (MIT)
+ * Copyright (c) 2015-2018 Sandra Gonzales
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+const imgWithClick = { cursor: "pointer" };
+
+const Photo = ({
+  index,
+  onClick,
+  photo,
+  margin,
+  direction,
+  top,
+  left,
+  key,
+}) => {
+  const imgStyle = { margin: margin, display: "block" };
+  if (direction === "column") {
+    imgStyle.position = "absolute";
+    imgStyle.left = left;
+    imgStyle.top = top;
+  }
+
+  const handleClick = (event) => {
+    onClick(event, { photo, index });
+  };
+
+  return (
+    <img
+      key={key}
+      style={onClick ? { ...imgStyle, ...imgWithClick } : imgStyle}
+      {...photo}
+      onClick={onClick ? handleClick : null}
+    />
+  );
+};
+
+export const photoPropType = PropTypes.shape({
+  key: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  alt: PropTypes.string,
+  title: PropTypes.string,
+  srcSet: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  sizes: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+});
+
+Photo.propTypes = {
+  index: PropTypes.number.isRequired,
+  onClick: PropTypes.func,
+  photo: photoPropType.isRequired,
+  margin: PropTypes.number,
+  top: (props) => {
+    if (props.direction === "column" && typeof props.top !== "number") {
+      return new Error(
+        "top is a required number when direction is set to `column`"
+      );
+    }
+  },
+  left: (props) => {
+    if (props.direction === "column" && typeof props.left !== "number") {
+      return new Error(
+        "left is a required number when direction is set to `column`"
+      );
+    }
+  },
+  direction: PropTypes.string,
+};
+
+export default Photo;
diff --git a/01_05/index.html b/01_05/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Console demo</title>
+    <script src="script.js" defer></script>
+  </head>
+  <body></body>
+</html>
diff --git a/01_05/script.js b/01_05/script.js
@@ -0,0 +1,51 @@
+/**
+ * Create a Backpack object, populate some HTML to display its properties.
+ */
+
+const updateBackpack = (update) => {
+  let main = document.querySelector("main");
+  main.innerHTML = markup(backpack);
+  console.info(update);
+};
+
+const backpack = {
+  name: "Everyday Backpack",
+  volume: 30,
+  color: "grey",
+  pocketNum: 15,
+  strapLength: {
+    left: 26,
+    right: 26,
+  },
+  lidOpen: false,
+  toggleLid: function (lidStatus) {
+    this.lidOpen = lidStatus;
+    updateBackpack(`Lid status changed.`);
+  },
+  newStrapLength: function (lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+    updateBackpack(`Strap lengths updated.`);
+  },
+};
+
+const markup = (backpack) => {
+  return `
+  <div>
+    <h3>${backpack.name}</h3>
+    <ul>
+      <li>Volume: ${backpack.volume}</li>
+      <li>Color: ${backpack.color}</li>
+      <li>Number of pockets: ${backpack.pocketNum}</li>
+      <li>Strap lengths: L: ${backpack.strapLength.left}, R: ${
+    backpack.strapLength.right
+  } </li>
+      <li>Top lid: ${backpack.lidOpen ? "Open" : "Closed"}</li>
+    </ul>
+  </div>
+`;
+};
+
+const main = document.createElement("main");
+main.innerHTML = markup(backpack);
+document.body.appendChild(main);
diff --git a/02_01/index.html b/02_01/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Inline JavaScript</title>
+    <style>
+      main {
+        display: flex;
+        width: 100%;
+        height: 100vh;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .info {
+        max-width: 50rem;
+        margin: 1rem;
+        padding: 0.5rem 2rem 1rem;
+        border: 3px solid black;
+        font-size: 1.4rem;
+        line-height: 1.3;
+        text-align: center;
+      }
+
+      code {
+        padding: 2px 4px;
+        border-radius: 4px;
+        background-color: hsl(251, 77%, 90%);
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="info">
+        <h1>Inline JavaScript</h1>
+        <p>
+          You can write JavaScript directly inside an HTML document using the
+          <code>script</code> element. The element can be added in the
+          <code>head</code> section or inside the <code>body</code> element.
+        </p>
+      </div>
+    </main>
+
+    <script>
+      const allCode = document.querySelectorAll("code");
+
+      for (let item of allCode) {
+        item.innerHTML = `&lt;${item.innerHTML}&gt;`;
+      }
+    </script>
+  </body>
+</html>
diff --git a/02_02/index.html b/02_02/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Module demo</title>
+  </head>
+  <body></body>
+  <script src="script.js"></script>
+</html>
diff --git a/02_02/script.js b/02_02/script.js
@@ -0,0 +1,50 @@
+/**
+ * Create a Backpack object, populate some HTML to display its properties.
+ */
+const updateBackpack = (update) => {
+  let main = document.querySelector("main");
+  main.innerHTML = markup(backpack);
+  console.info(update);
+};
+
+const backpack = {
+  name: "Everyday Backpack",
+  volume: 30,
+  color: "grey",
+  pocketNum: 15,
+  strapLength: {
+    left: 26,
+    right: 26,
+  },
+  lidOpen: false,
+  toggleLid: function (lidStatus) {
+    this.lidOpen = lidStatus;
+    updateBackpack(`Lid status changed.`);
+  },
+  newStrapLength: function (lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+    updateBackpack(`Strap lengths updated.`);
+  },
+};
+
+const markup = (backpack) => {
+  return `
+  <div>
+    <h3>${backpack.name}</h3>
+    <ul>
+      <li>Volume: ${backpack.volume}</li>
+      <li>Color: ${backpack.color}</li>
+      <li>Number of pockets: ${backpack.pocketNum}</li>
+      <li>Strap lengths: L: ${backpack.strapLength.left}, R: ${
+    backpack.strapLength.right
+  } </li>
+      <li>Top lid: ${backpack.lidOpen ? "Open" : "Closed"}</li>
+    </ul>
+  </div>
+`;
+};
+
+const main = document.createElement("main");
+main.innerHTML = markup(backpack);
+document.body.appendChild(main);
diff --git a/02_03/index.html b/02_03/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Module demo</title>
+    <script src="script.js" defer></script>
+  </head>
+  <body></body>
+</html>
diff --git a/02_03/script.js b/02_03/script.js
@@ -0,0 +1,50 @@
+/**
+ * Create a Backpack object, populate some HTML to display its properties.
+ */
+const updateBackpack = (update) => {
+  let main = document.querySelector("main");
+  main.innerHTML = markup(backpack);
+  console.info(update);
+};
+
+const backpack = {
+  name: "Everyday Backpack",
+  volume: 30,
+  color: "grey",
+  pocketNum: 15,
+  strapLength: {
+    left: 26,
+    right: 26,
+  },
+  lidOpen: false,
+  toggleLid: function (lidStatus) {
+    this.lidOpen = lidStatus;
+    updateBackpack(`Lid status changed.`);
+  },
+  newStrapLength: function (lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+    updateBackpack(`Strap lengths updated.`);
+  },
+};
+
+const markup = (backpack) => {
+  return `
+  <div>
+    <h3>${backpack.name}</h3>
+    <ul>
+      <li>Volume: ${backpack.volume}</li>
+      <li>Color: ${backpack.color}</li>
+      <li>Number of pockets: ${backpack.pocketNum}</li>
+      <li>Strap lengths: L: ${backpack.strapLength.left}, R: ${
+    backpack.strapLength.right
+  } </li>
+      <li>Top lid: ${backpack.lidOpen ? "Open" : "Closed"}</li>
+    </ul>
+  </div>
+`;
+};
+
+const main = document.createElement("main");
+main.innerHTML = markup(backpack);
+document.body.appendChild(main);
diff --git a/02_04/backpack.js b/02_04/backpack.js
@@ -0,0 +1,28 @@
+const updateBackpack = (update) => {
+  let main = document.querySelector("main");
+  main.innerHTML = markup(backpack);
+  console.info(update);
+};
+
+const backpack = {
+  name: "Everyday Backpack",
+  volume: 30,
+  color: "grey",
+  pocketNum: 15,
+  strapLength: {
+    left: 26,
+    right: 26,
+  },
+  lidOpen: false,
+  toggleLid: function (lidStatus) {
+    this.lidOpen = lidStatus;
+    updateBackpack(`Lid status changed.`);
+  },
+  newStrapLength: function (lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+    updateBackpack(`Strap lengths updated.`);
+  },
+};
+
+export default backpack;
diff --git a/02_04/index.html b/02_04/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Module demo</title>
+    <script type="module" src="backpack.js"></script>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/02_04/script.js b/02_04/script.js
@@ -0,0 +1,25 @@
+/**
+ * Create a Backpack object, populate some HTML to display its properties.
+ */
+import backpack from "./backpack.js";
+
+const markup = (backpack) => {
+  return `
+  <div>
+    <h3>${backpack.name}</h3>
+    <ul>
+      <li>Volume: ${backpack.volume}</li>
+      <li>Color: ${backpack.color}</li>
+      <li>Number of pockets: ${backpack.pocketNum}</li>
+      <li>Strap lengths: L: ${backpack.strapLength.left}, R: ${
+    backpack.strapLength.right
+  } </li>
+      <li>Top lid: ${backpack.lidOpen ? "Open" : "Closed"}</li>
+    </ul>
+  </div>
+`;
+};
+
+const main = document.createElement("main");
+main.innerHTML = markup(backpack);
+document.body.appendChild(main);
diff --git a/03_02/index.html b/03_02/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Building a JavaScript object from scratch</title>
+    <script src="script.js" defer></script>
+  </head>
+  <body></body>
+</html>