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