Skip to content
Snippets Groups Projects
Commit 6d197c41 authored by Andrej Rasevic's avatar Andrej Rasevic
Browse files

adding color swatch example for 388s

parent ddade52b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cmsc388a/code_examples/color_swatch.html 0 → 100644
+ 83
− 0
View file @ 6d197c41
<!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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment