diff --git a/01_01/Photo.js b/01_01/Photo.js new file mode 100644 index 00000000..722467ce --- /dev/null +++ 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 ( + + ); +}; + +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 new file mode 100644 index 00000000..321b97c0 --- /dev/null +++ b/01_04/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/01_04/script.js b/01_04/script.js new file mode 100644 index 00000000..84fbede2 --- /dev/null +++ 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 ` +
+

${backpack.name}

+ +
+`; +}; + +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 index 98737d50..84fbede2 100755 --- 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 `
-

${backpack.name}

-
`; };