add missing files

LinkedInLearning · Oct 20, 2020 · 65bcad3 · sahakash-dev · Nov 10, 2023 · 65bcad3
1 parent a757a8f
commit 65bcad3
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 9 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_04/index.html b/01_04/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_04/script.js b/01_04/script.js
@@ -0,0 +1,56 @@
+/**
+ * Create a Backpack object, populate some HTML to display its properties.
+ */
+
+// Single line comment
+
+/* Multi-line comment
+See! this line is also commented out! */
+
+const updateBackpack = (update) => {
+  let main = document.querySelector("main"); // main is an element
+  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/01_05/script.js b/01_05/script.js
@@ -2,8 +2,13 @@
  * Create a Backpack object, populate some HTML to display its properties.
  */
 
+// Single line comment
+
+/* Multi-line comment
+See! this line is also commented out! */
+
 const updateBackpack = (update) => {
-  let main = document.querySelector("main");
+  let main = document.querySelector("main"); // main is an element
   main.innerHTML = markup(backpack);
   console.info(update);
 };
@@ -32,16 +37,16 @@ const backpack = {
 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: ${
+	<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>
+	  <li>Top lid: ${backpack.lidOpen ? "Open" : "Closed"}</li>
+	</ul>
   </div>
 `;
 };