diff --git a/cmsc388a/code_along/add_card_component.html b/cmsc388a/code_along/add_card_component.html new file mode 100644 index 0000000000000000000000000000000000000000..9c40932aaebf157ac553e0592eb7ae0ea0300cd1 --- /dev/null +++ b/cmsc388a/code_along/add_card_component.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>More Components</title> + <script src="https://unpkg.com/react@16/umd/react.development.js"></script> + <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> + <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> + + <style> + #container { + padding: 50px; + background-color: #FFF; + } + </style> +</head> + +<body> + <div id="container"></div> + + <script type="text/babel"> + + class Square extends React.Component { + render() { + return( + <br/> + ); + } + } + + class Label extends React.Component { + render() { + return ( + <br/> + ); + } + } + + class Card extends React.Component { + render() { + var cardStyle = { + height: 200, + width: 150, + padding: 0, + backgroundColor: "#FFF", + boxShadow: "0px 0px 5px #666" + }; + return ( + <div style={cardStyle}> + + </div> + ); + } + } + + ReactDOM.render( + <div> + <Card/> + </div>, + document.querySelector("#container") + ); + </script> +</body> + +</html> \ No newline at end of file diff --git a/cmsc388a/code_along/add_label_component.html b/cmsc388a/code_along/add_label_component.html new file mode 100644 index 0000000000000000000000000000000000000000..3f5ff2da058cb462ca3695a5f0d2a4b937ef827c --- /dev/null +++ b/cmsc388a/code_along/add_label_component.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>More Components</title> + <script src="https://unpkg.com/react@16/umd/react.development.js"></script> + <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> + <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> + + <style> + #container { + padding: 50px; + background-color: #FFF; + } + </style> +</head> + +<body> + <div id="container"></div> + + <script type="text/babel"> + + class Square extends React.Component { + render() { + var squareStyle = { + height: 150, + backgroundColor: "#FF6663" + }; + return( + <div style={squareStyle}> + </div> + ); + } + } + + class Label extends React.Component { + render() { + var labelStyle = { + fontFamily: "sans-serif", + fontWeight: "bold", + padding: 13, + margin: 0 + }; + + return ( + <p style={labelStyle}>#FF6663</p> + ); + } + } + + class Card extends React.Component { + render() { + var cardStyle = { + height: 200, + width: 150, + padding: 0, + backgroundColor: "#FFF", + boxShadow: "0px 0px 5px #666" + }; + return ( + <div style={cardStyle}> + <Square /> + <Label /> + </div> + ); + } + } + + ReactDOM.render( + <div> + <Card /> + </div>, + document.querySelector("#container") + ); + </script> +</body> + +</html> \ No newline at end of file diff --git a/cmsc388a/code_along/add_square_component.html b/cmsc388a/code_along/add_square_component.html new file mode 100644 index 0000000000000000000000000000000000000000..1b83dc9fbb0d6aa3f51ca6b6e402412d67b438a4 --- /dev/null +++ b/cmsc388a/code_along/add_square_component.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>More Components</title> + <script src="https://unpkg.com/react@16/umd/react.development.js"></script> + <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> + <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> + + <style> + #container { + padding: 50px; + background-color: #FFF; + } + </style> +</head> + +<body> + <div id="container"></div> + + <script type="text/babel"> + + class Square extends React.Component { + render() { + var squareStyle = { + height: 150, + backgroundColor: "#FF6663" + }; + return( + <div style={squareStyle}> + </div> + ); + } + } + + class Label extends React.Component { + render() { + return ( + <br/> + ); + } + } + + class Card extends React.Component { + render() { + var cardStyle = { + height: 200, + width: 150, + padding: 0, + backgroundColor: "#FFF", + boxShadow: "0px 0px 5px #666" + }; + return ( + <div style={cardStyle}> + <Square /> + </div> + ); + } + } + + ReactDOM.render( + <div> + <Card/> + </div>, + document.querySelector("#container") + ); + </script> +</body> + +</html> \ No newline at end of file diff --git a/cmsc388a/code_along/component_skeletons.html b/cmsc388a/code_along/component_skeletons.html new file mode 100644 index 0000000000000000000000000000000000000000..0790a6b29e89e9dd04af1d74137794e449231ce5 --- /dev/null +++ b/cmsc388a/code_along/component_skeletons.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>More Components</title> + <script src="https://unpkg.com/react@16/umd/react.development.js"></script> + <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> + <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> + + <style> + #container { + padding: 50px; + background-color: #FFF; + } + </style> +</head> + +<body> + <div id="container"></div> + + <script type="text/babel"> + // why are we returning the <br/> ?? + class Square extends React.Component { + render() { + return( + <br/> + ); + } + } + + class Label extends React.Component { + render() { + return ( + <br/> + ); + } + } + + class Card extends React.Component { + render() { + return ( + <br/> + ); + } + } + + ReactDOM.render( + <div> + + </div>, + document.querySelector("#container") + ); + </script> +</body> + +</html> \ No newline at end of file diff --git a/cmsc388a/code_along/skeleton.html b/cmsc388a/code_along/skeleton.html new file mode 100644 index 0000000000000000000000000000000000000000..465eee91a57376423d5402b11635e78058a75c44 --- /dev/null +++ b/cmsc388a/code_along/skeleton.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>More Components</title> + <script src="https://unpkg.com/react@16/umd/react.development.js"></script> + <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> + <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> + + <style> + #container { + padding: 50px; + background-color: #FFF; + } + </style> +</head> + +<body> + <div id="container"></div> + + <script type="text/babel"> + ReactDOM.render( + <div> + + </div>, + document.querySelector("#container") + ); + </script> +</body> + +</html> \ No newline at end of file diff --git a/cmsc388a/code_along/with_properties.html b/cmsc388a/code_along/with_properties.html new file mode 100644 index 0000000000000000000000000000000000000000..64de5167e35b82d2e5bf11cfe4741f54257bfdd9 --- /dev/null +++ b/cmsc388a/code_along/with_properties.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>More Components</title> + <script src="https://unpkg.com/react@16/umd/react.development.js"></script> + <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> + <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> + + <style> + #container { + padding: 50px; + background-color: #FFF; + } + </style> +</head> + +<body> + <div id="container"></div> + + <script type="text/babel"> + + class Square extends React.Component { + render() { + var squareStyle = { + height: 150, + backgroundColor: this.props.color + }; + return( + <div style={squareStyle}> + </div> + ); + } + } + + class Label extends React.Component { + render() { + var labelStyle = { + fontFamily: "sans-serif", + fontWeight: "bold", + padding: 13, + margin: 0 + }; + + return ( + <p style={labelStyle}>{this.props.color}</p> + ); + } + } + + class Card extends React.Component { + render() { + var cardStyle = { + height: 200, + width: 150, + padding: 0, + backgroundColor: "#FFF", + boxShadow: "0px 0px 5px #666" + }; + return ( + <div style={cardStyle}> + <Square color={this.props.color} /> + <Label color={this.props.color} /> + </div> + ); + } + } + + ReactDOM.render( + <div> + <Card color="#004D4D" /> + </div>, + document.querySelector("#container") + ); + </script> +</body> + +</html> \ No newline at end of file