Merge pull request #12 from howdyAnkit/RandomCOlor_Picker

howdyAnkit · web-flow · commit 2e19690e8f2d · 2021-01-17T21:10:46.000+05:30
RandomColor_Picker Updated
diff --git a/RandomColor_Picker/Button.js b/RandomColor_Picker/Button.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export class Button extends React.Component {
+	render() {
+		return (
+			<button 
+				className={ this.props.light ? 'light-button' : 'dark-button' }
+        onClick={this.props.onClick}>
+				Refresh
+			</button>
+		);
+	}
+}
diff --git a/RandomColor_Picker/Random.js b/RandomColor_Picker/Random.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Button} from './Button';
+
+class Random extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = { 
+      color:[255,0,0]
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  componentDidMount() {
+    this.applyColor();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.applyColor();
+  }
+
+  handleClick() {
+    this.setState({
+      color: this.chooseColor()
+    })
+  }
+
+  formatColor(ary) {
+    return 'rgb(' + ary.join(', ') + ')';
+  }
+
+  isLight() {
+    const rgb = this.state.color;
+    return rgb.reduce((a,b) => a+b) < 127 * 3;
+  }
+
+  applyColor() {
+    const color = this.formatColor(this.state.color);
+    document.body.style.background = color;
+  }
+
+  chooseColor() {
+    const random = [];
+    for (let i = 0; i < 3; i++) {
+      random.push(Math.floor(Math.random()*256));
+    }
+    return random;
+  }
+
+  render() {
+    return (
+      <div>
+        <h1 className={this.isLight() ? 'white' : 'black'}>
+        Your color is {this.formatColor(this.state.color)};
+        </h1>
+        <Button light={this.isLight()} onClick={this.handleClick} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Random />, 
+  document.getElementById('app')
+);
diff --git a/RandomColor_Picker/index.html b/RandomColor_Picker/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="./styles.css">
+	<title>Random Color</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script src="https://content.codecademy.com/courses/React/react-course-bundle.min.js"></script>
+	<script src="/Random.compiled.js"></script>
+</body>
+</html>
diff --git a/RandomColor_Picker/style.css b/RandomColor_Picker/style.css
@@ -0,0 +1,64 @@
+html, body {
+    margin: 0;
+    height: 100%;
+  }
+  
+  body {
+    background-color: #ffffff;
+    font-family: Helvetica, Arial, sans-serif;
+    text-align: center;
+  }
+  
+  #app {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    padding-top: 10px;
+  }
+  
+  #app div {
+    width: 100%;
+  }
+  
+  #app div div {
+    height: 100%;
+  }
+  
+  #app div div div {
+    position: relative;
+    height: auto;
+  }
+  
+  h1, h2 {
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+  
+  button {
+    border-radius: 8px;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    font-family: 'Oxygen', sans-serif;
+    letter-spacing: 2px;
+  }
+  
+  .black {
+      color: black;
+  }
+  
+  .white {
+      color: white;
+  }
+  
+  .light-button {
+    background-color: rgba(255,255,255,0.5);
+    color: rgb(0,0,0);
+  }
+  
+  .dark-button {
+    background-color: rgba(0,0,0,0.5);
+    color: rgb(255,255,255);
+  }
