From 6d197c41eaec133cd392ac434af7d4480a33f835 Mon Sep 17 00:00:00 2001 From: Andrej Rasevic <andrej@rasevicengineering.com> Date: Wed, 16 Jan 2019 18:31:13 -0500 Subject: [PATCH] adding color swatch example for 388s --- cmsc388a/code_examples/color_swatch.html | 83 ++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 cmsc388a/code_examples/color_swatch.html diff --git a/cmsc388a/code_examples/color_swatch.html b/cmsc388a/code_examples/color_swatch.html new file mode 100644 index 0000000..12eebab --- /dev/null +++ b/cmsc388a/code_examples/color_swatch.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Complex Component Example</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"/> + <Card color="#214d4d"/> + <Card color="#004c4a"/> + </div>, + document.querySelector("#container") + ); + </script> +</body> + +</html> -- GitLab