React Palette Picker

Developer
Josh Bivens
Size
4,004 Kb
Views
48,576
  1. React Palette Picker Previews
  2. React Palette Picker HTML Codes
  3. React Palette Picker CSS Codes
  4. React Palette Picker JS Codes

How do I make an react palette picker?

Made with Mark (http://codepen.io/iheartkode/). What is a react palette picker? How do you make a react palette picker? This script and codes were developed by Josh Bivens on 01 October 2022, Saturday.

React Palette Picker Previews
IQ Test

React Palette Picker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Palette Picker</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Palette Picker - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Abel);
body { height: 100vh; font-family: 'Abel', sans-serif;
}
h1 { font-size: 40px;
}
.card { width: 100%; margin: 0; padding: 0;
}
.card h2 { margin: 0; padding: 15px; opacity: .5; float: right;
}
.card div { width: 40px; padding-top: 12px; float: left;
}
.card div span { cursor: pointer; font-size: 25px; opacity: .5; padding: 12px;
}
input[type=color] { -webkit-appearance: none; outline: none; border: none; width: 100px; height: 100px; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 35px;
}
input[type=color]:hover { -webkit-transform: scale(1.08); transform: scale(1.08);
}
.header { text-align: center;
}

React Palette Picker - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var App = function (_React$Component) { _inherits(App, _React$Component); function App() { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { colors: ["#3c9099", "#ffdead", "#ff8080", "#f0efe2"] }; return _this; } App.prototype.setColor = function setColor(e) { this.state.colors.push(e.target.value); this.forceUpdate(); }; App.prototype.removeColor = function removeColor(card) { this.state.colors.splice(card, 1); this.forceUpdate(); }; App.prototype.render = function render() { var _this2 = this; var palette = this.state.colors.map(function (color, card) { var styles = { background: color, height: 90 / _this2.state.colors.length + "vh" }; return React.createElement( "div", { className: "card", style: styles }, React.createElement( "div", null, React.createElement( "span", { key: card, onClick: _this2.removeColor.bind(_this2, card) }, "✘" ) ), React.createElement( "h2", null, color ) ); }); return React.createElement( "div", null, React.createElement( "div", { className: "header" }, React.createElement( "h1", null, "React Palette Picker" ), React.createElement("input", { type: "color", onChange: this.setColor.bind(this) }) ), palette ); }; return App;
}(React.Component);
var mountNode = document.getElementById('app');
ReactDOM.render(React.createElement(App, null), mountNode);
React Palette Picker - Script Codes
React Palette Picker - Script Codes
Home Page Home
Developer Josh Bivens
Username joshbivens
Uploaded October 01, 2022
Rating 3.5
Size 4,004 Kb
Views 48,576
Do you need developer help for React Palette Picker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Bivens (joshbivens) Script Codes
Name
The Conciliator
Vue Progress Bar
React Show and Hide
Vue Habit Tracker
Android Logo
Fun Facts
Todos in Vue.js
Vue Shopping Cart
React Progress Bar
Hours
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!