React UI - 03 - CardList

Developer
Xavier Martínez
Size
8,219 Kb
Views
24,288
  1. React UI - 03 - CardList Previews
  2. React UI - 03 - CardList HTML Codes
  3. React UI - 03 - CardList CSS Codes
  4. React UI - 03 - CardList JS Codes

How do I make an react ui - 03 - cardlist?

What is a react ui - 03 - cardlist? How do you make a react ui - 03 - cardlist? This script and codes were developed by Xavier Martínez on 04 October 2022, Tuesday.

React UI - 03 - CardList Previews
IQ Test

React UI - 03 - CardList - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React UI - 03 - CardList</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app"><div style={this.state.selected ? { backgroundColor: ColorLuminance(this.props.color, 0.5), boxShadow: `inset 0 0 0 5px ${this.props.color}`} : {backgroundColor : this.props.color }} onClick={this.selectCard} className='card' >
<p className='card-name'>{this.props.name}</p>
</div>
</div> <script src='https://npmcdn.com/[email protected]/dist/react.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React UI - 03 - CardList - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans");
body { margin: 0;
}
.cards-list { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%;
}
.card-close { font-family: "Josefin Sans", sans-serif; font-size: 30px; font-weight: bold; display: none; position: absolute; right: 0; top: 0; height: 40px; width: 40px; line-height: 40px; text-align: center; background-color: white;
}
.card-close:hover { cursor: pointer;
}
.card { display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.card.closed { max-height: 60px; height: 60px; flex: 1; padding: 10px 0 10px 0;
}
.card.opened { justify-content: space-between; background-color: white !important; height: 100%; width: 100%; position: absolute; z-index: 2; transition: height 0.6s ease;
}
.card.opened .card-title { min-height: initial; position: absolute; top: 0; pointer-events: none;
}
.card.opened .card-title.circular:hover .card-shape { stroke: none;
}
.card .card-title { min-height: 100%; transition: all 1s ease;
}
.card .card-title:hover { cursor: pointer;
}
.card .card-title .card-name { position: absolute; top: 0; left: 0; font-family: "Josefin Sans", sans-serif; fill: white; font-size: 16px; letter-spacing: 2px; text-transform: uppercase;
}
.card .card-title.circular:hover .card-shape { -webkit-animation: 0.5s circular linear forwards; animation: 0.5s circular linear forwards; fill: #40C4FF; stroke: #FAFAFA;
}
.card .card-image { width: 220px; height: 220px; margin-top: 60px; animation: fadeIn 1.5s;
}
.card .btn-accept { width: 80px; height: 40px; background-color: green; color: white; border: none; animation: fadeIn 4s; border-radius: 20px; outline: 0;
}
.card .btn-accept:hover { cursor: pointer; background-color: lightgreen;
}
.card .btn-cancel { width: 80px; height: 40px; background-color: red; color: white; border: none; animation: fadeIn 4s; border-radius: 20px; outline: 0;
}
.card .btn-cancel:hover { cursor: pointer; background-color: orangered;
}
.card .choice-controls { display: flex; justify-content: space-around; align-items: center; width: 220px; height: 100px;
}
#app { display: flex; flex-flow: column; background-color: lightgrey; width: 350px; height: 580px; margin: 100px auto; border-radius: 20px;
}
.card-shape { transition: all 1.0s ease;
}
.app-viewport { position: relative; top: 50px; left: 15px; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; background-color: grey; width: 320px; height: 480px;
}
.order-list { position: absolute; bottom: 0; width: 100%; background-color: white; font-family: "Josefin Sans", sans-serif; color: black; text-align: center; padding: 0; margin: 0;
}
.order-list li { padding: 10px; list-style-type: none; border-top: 1px solid lightgrey;
}
.order-list p { margin: 0; padding: 10px 0; color: white; background-color: black;
}
@keyframes circular { from { stroke-dasharray: 0 940; stroke-dashoffset: 0; stroke-width: 10px; } to { stroke-dasharray: 760; stroke-dashoffset: 0; stroke-width: 8px; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}

React UI - 03 - CardList - 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 food = { base: [{ name: "noodles", color: "#4E342E", img: "http://xmpdesign.com/img/codepen/noodles.jpg" }, { name: "rice", color: "#FBC02D", img: "http://xmpdesign.com/img/codepen/rice.jpg" }]
};
var order_items = [];
var CardList = function (_React$Component) { _inherits(CardList, _React$Component); function CardList(props) { _classCallCheck(this, CardList); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { order: [] }; _this.handleOrder = _this.handleOrder.bind(_this); _this.removeOrder = _this.removeOrder.bind(_this); return _this; } CardList.prototype.handleOrder = function handleOrder(name) { //first time adding items to order var new_items = { name: name, qtty: 1 }; //let's see if the new item is currently in the orderlist //prepare name list var namelist = order_items.map(function (names) { return names.name; }); //Adding +qtty to the same item if (contains(namelist, name)) {} else { order_items.push(new_items); } this.setState({ order: order_items }); }; CardList.prototype.removeOrder = function removeOrder(name) { //let's remove completely the item //prepare name list var namelist = order_items.map(function (names) { return names.name; }); var index = namelist.indexOf(name); if (index >= 0) order_items.splice(index, 1); this.setState({ order: order_items }); console.log(this.state.order); }; CardList.prototype.render = function render() { var _this2 = this; return React.createElement( "div", { className: "cards-list" }, this.props.list.map(function (item) { return React.createElement(Card, { name: item.name, key: item.name, color: item.color, image: item.img, qtty: "0", onAddToOrder: _this2.handleOrder, onRemoveToOrder: _this2.removeOrder }); }), React.createElement( "ul", { className: "order-list" }, React.createElement( "p", null, "Current order:" ), this.state.order.map(function (items) { return React.createElement( "li", null, items.name ); }) ) ); }; return CardList;
}(React.Component);
var Card = function (_React$Component2) { _inherits(Card, _React$Component2); function Card(props) { _classCallCheck(this, Card); var _this3 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this3.state = { selected: false, opened: false, qtty: 0 }; _this3.selectCard = _this3.selectCard.bind(_this3); _this3.cancelCard = _this3.cancelCard.bind(_this3); _this3.openCard = _this3.openCard.bind(_this3); _this3.closeCard = _this3.closeCard.bind(_this3); return _this3; } Card.prototype.selectCard = function selectCard() { this.setState(function () { return { selected: true }; }); this.props.onAddToOrder(this.props.name); }; Card.prototype.cancelCard = function cancelCard() { this.setState(function () { return { selected: false }; }); this.props.onRemoveToOrder(this.props.name); }; Card.prototype.openCard = function openCard() { this.setState(function () { return { opened: true }; }); }; Card.prototype.closeCard = function closeCard() { this.setState(function () { return { opened: false }; }); }; Card.prototype.render = function render() { var _this4 = this; var card_img = null; var choice_accept = null; var choice_cancel = null; if (this.state.opened) { card_img = React.createElement("img", { className: "card-image", src: this.props.image }); choice_accept = React.createElement( "button", { onClick: function onClick(event) { _this4.closeCard(); _this4.selectCard(); }, className: "btn-accept" }, "✔" ); choice_cancel = React.createElement( "button", { onClick: function onClick(event) { _this4.closeCard(); _this4.cancelCard(); }, className: "btn-cancel" }, "✘" ); } return React.createElement( "div", { className: "card " + (this.state.opened ? "opened" : "closed") }, React.createElement( "div", { onClick: this.closeCard, style: this.state.opened ? { display: "block" } : null, className: "card-close" }, "x" ), React.createElement( "svg", { onClick: this.openCard, className: "card-title circular", height: "60", width: "220", viewBox: "0 0 220 60" }, React.createElement("rect", { className: "card-shape", fill: this.state.selected ? this.props.color : null, x: "0", y: "0", height: "60", width: "220" }), React.createElement( "text", { textAnchor: "middle", alignmentBaseline: "central", x: "50%", y: "50%", className: "card-name" }, this.props.name ) ), card_img, React.createElement( "div", { className: "choice-controls" }, choice_accept, choice_cancel ) ); }; return Card;
}(React.Component);
var App = function (_React$Component3) { _inherits(App, _React$Component3); function App(props) { _classCallCheck(this, App); var _this5 = _possibleConstructorReturn(this, _React$Component3.call(this, props)); _this5.state = {}; return _this5; } App.prototype.render = function render() { return React.createElement( "div", { className: "app-viewport" }, React.createElement(CardList, { list: food.base }) ); }; return App;
}(React.Component);
ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
function ColorLuminance(hex, lum) { // validate hex string hex = String(hex).replace(/[^0-9a-f]/gi, ""); if (hex.length < 6) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } lum = lum || 0; // convert to decimal and change luminosity var rgb = "#", c, i; for (i = 0; i < 3; i++) { c = parseInt(hex.substr(i * 2, 2), 16); c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16); rgb += ("00" + c).substr(c.length); } return rgb;
}
function contains(arr, x) { return arr.filter(function (elem) { return elem == x; }).length > 0;
}
React UI - 03 - CardList - Script Codes
React UI - 03 - CardList - Script Codes
Home Page Home
Developer Xavier Martínez
Username xmjol
Uploaded October 04, 2022
Rating 3
Size 8,219 Kb
Views 24,288
Do you need developer help for React UI - 03 - CardList?

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!

Xavier Martínez (xmjol) Script Codes
Name
ReactJS Arrays
Locatifs-Info
A beautiful day
Flex2x2
Background Styles
ReactJS Simple Component
THRWidgets OldLib
React UI - 05 - Draggable SVG Path Generator
4-block-flex Round
Locations-6-Block-Flex
Create amazing video scripts 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!