React Scoreboard
How do I make an react scoreboard?
What is a react scoreboard? How do you make a react scoreboard? This script and codes were developed by Kevin on 13 October 2022, Thursday.
React Scoreboard - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Scoreboard</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <title>Scoreboard</title> <div id="container">Loading...</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
React Scoreboard - Script Codes CSS Codes
body { background: #d5d5d5; font-family: arial; color: #FAFAFA; text-transform: uppercase;
}
.scoreboard { background: #333; width: 700px; margin: 70px auto; box-shadow: 0 4px 0px #333; border-radius: 15px;
}
.header { padding: 5px 10px; text-align: center; display: flex; align-items: center; background-color: #222; border-radius: 15px 15px 0 0; border-bottom: solid 2px #444;
}
.header h1 { flex-grow: 1; font-size: 1.5em; letter-spacing: 3px; font-weight: normal;
}
.header .stats,
.header .stopwatch { width: 170px;
}
.stats { margin-top: 0; font-weight: normal;
}
.stats td:first-child { text-align: right; font-weight: normal; letter-spacing: 2px; color: #666; font-size: .7em;
}
.stats td:last-child { text-align: left;
}
.stopwatch { padding: 15px 10px 5px 10px; margin: -5px -10px -5px 10px; background: #2f2f2f; border-radius: 0 15px 0 0;
}
.stopwatch-time { font-family: monospace; font-size: 2em;
}
.stopwatch button { margin: 8px 5px; background-color: #222; border-radius: 5px; padding: 7px 8px; border: none; color: #999; letter-spacing: 2px; font-weight: bold; text-shadow: none; text-transform: uppercase;
}
.stopwatch button:hover { background: #4b71b5; color: #fafafa; cursor: pointer;
}
.stopwatch h2 { font-size: .6em; margin: 0; font-weight: normal; letter-spacing: 2px; color: #666;
}
.player { display: flex; font-size: 1.2em; border-bottom: solid 2px #444; letter-spacing: 2px;
}
.remove-player { visibility: hidden; margin-right: 10px; color: #e57373; cursor: pointer;
}
.player-name:hover .remove-player { visibility: visible;
}
.player-name { flex-grow: 1; padding: 20px 10px 10px 10px;
}
.player-score { width: 190px; background: blue;
}
.counter { display: flex;
}
.counter-action { border: none; font-weight: bold; color: #FAFAFA; display: block; padding: 20px 20px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.counter-action.increment { background: #66BB6A;
}
.counter-action.increment:hover { background: #549d59; cursor: pointer;
}
.counter-action.decrement { background: #ef5350;
}
.counter-action.decrement:hover { background: #c44442; cursor: pointer;
}
.counter-score { flex-grow: 1; background: #2b2b2b; color: #FAFAFA; text-align: center; font-family: monospace; padding: 10px; font-size: 2em;
}
.add-player-form form { display: flex; background-color: #222; border-radius: 0 0 20px 20px
}
.add-player-form input[type=text] { flex-grow: 1; border-width: 0 0 1px 0; margin: 15px 10px 15px 15px; padding: 10px; border-radius: 5px; background-color: #333; border-style: none; text-shadow: none; text-transform: uppercase; color: #999; letter-spacing: 2px; outline: none;
}
.add-player-form input[type=text]::-webkit-input-placeholder { color: #666; letter-spacing: 2px;
}
.add-player-form input[type=text]:focus { background-color: #444;
}
.add-player-form input[type=submit] { display: block; font-size: .6em; margin: 15px 15px 15px 0; padding: 10px; background-color: #333; border-radius: 5px; border: none; color: #999; letter-spacing: 2px; font-weight: bold; text-shadow: none; text-transform: uppercase;
}
.add-player-form input[type=submit]:hover { background: #4b71b5; color: #fafafa; cursor: pointer;
}
React Scoreboard - Script Codes JS Codes
"use strict";
var PLAYERS = [{ name: "Michael Jordan", score: 23, id: 1
}, { name: "Scottie Pippen", score: 33, id: 2
}, { name: "Dennis Rodman", score: 91, id: 3
}];
function Header(props) { return React.createElement( "div", { className: "header" }, React.createElement( "h1", null, props.title ) );
}
Header.propTypes = { title: React.PropTypes.string.isRequired
};
function Counter(props) { return React.createElement( "div", { className: "counter" }, React.createElement( "button", { className: "counter-action decrement" }, " - " ), React.createElement( "div", { className: "counter-score" }, props.score ), React.createElement( "button", { className: "counter-action increment" }, " + " ) );
}
Counter.propTypes = { score: React.PropTypes.number.isRequired, onChange: React.PropTypes.func.isRequired
};
function Player(props) { return React.createElement( "div", { className: "player" }, React.createElement( "div", { className: "player-name" }, props.name ), React.createElement( "div", { className: "player-score" }, React.createElement(Counter, { score: props.score }) ) );
}
Player.proTypes = { name: React.PropTypes.string.isRequired, score: React.PropTypes.number.isRequired
};
var Application = React.createClass({ displayName: "Application", propTypes: { title: React.PropTypes.string, intialPlayers: React.PropTypes.arrayOf(React.PropTypes.shape({ name: React.PropTypes.string.isRequired, score: React.PropTypes.number.isRequired, id: React.PropTypes.number.isRequired })).isRequired }, getDefaultProps: function getDefaultProps() { return { title: "Scoreboard" }; }, getInitialState: function getInitialState() { return { players: this.props.initialPlayers }; }, render: function render() { return React.createElement( "div", { className: "scoreboard" }, React.createElement(Header, { title: this.props.title }), React.createElement( "div", { className: "players" }, this.state.players.map(function (player) { return React.createElement(Player, { name: player.name, score: player.score, id: player.id }); }) ) ); }
});
ReactDOM.render(React.createElement(Application, { initialPlayers: PLAYERS }), document.getElementById('container'));
Developer | Kevin |
Username | gnarfugh |
Uploaded | October 13, 2022 |
Rating | 3 |
Size | 3,912 Kb |
Views | 22,264 |
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!
Name | Size |
Understanding closures | 2,170 Kb |
Mess svg logo | 2,249 Kb |
Highlight table | 90,049 Kb |
Slider | 5,806 Kb |
Image slider | 3,393 Kb |
Ajax Flickr Search | 7,084 Kb |
Recommended class | 2,640 Kb |
Vertical rhythm less mixin | 2,318 Kb |
Fluid Typography | 2,797 Kb |
Responsive Table | 2,303 Kb |
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!
Name | Username | Size |
Loading animation with css | Icebob | 2,947 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
About Us | Francescaedits | 1,902 Kb |
RSW | JordanC | 3,726 Kb |
Map Controls | Iliadraznin | 3,721 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!