React Betting App

Developer
Adam
Size
6,005 Kb
Views
6,072
  1. React Betting App Previews
  2. React Betting App HTML Codes
  3. React Betting App CSS Codes
  4. React Betting App JS Codes

How do I make an react betting app?

First attempt at making a project using React. . What is a react betting app? How do you make a react betting app? This script and codes were developed by Adam on 28 November 2022, Monday.

React Betting App Previews
IQ Test

React Betting App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Betting App</title> <link href="https://fonts.googleapis.com/css?family=Cabin|Roboto" rel="stylesheet"> <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 class="app"></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 Betting App - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box; border: 0px solid red;
}
html { font-size: 20px; font-family: 'Cabin', sans-serif; color: #191919; text-align: center;
}
@media (max-width: 350px) { html { font-size: 18px; }
}
h1 { font-family: 'Roboto', sans-serif; background-color: #06C5E9; color: white; padding: 10px; border-radius: 10px 10px 0 0;
}
.app { overflow: auto; position: relative; top: -10px; left: 0px;
}
.app:before { content: ""; position: fixed; left: -10px; right: 0; z-index: -1; display: block; background-color: #1a2930; background-image: url("https://images.unsplash.com/photo-1475539175801-4f770d7d1a49?dpr=1&auto=format&fit=crop&w=1500&h=801&q=80&cs=tinysrgb&crop="); background-blend-mode: multiply; background-size: cover; width: 110%; height: 110%; filter: blur(5px);
}
.container { max-width: 600px; margin: 50px auto; background: #191919; border-radius: 30px;
}
.bet-container { width: 95%; padding: 10px; margin: 20px auto 0; display: flex; flex-direction: column;
}
.horse { display: flex; align-items: center; background: #06C5E9; border-radius: 10px; margin: 5px 0;
}
.name { width: 50%;
}
.odds { width: 15%;
}
.betting { display: flex; align-items: center; width: 35%; justify-content: space-around;
}
.choice { display: flex; flex-direction: column;
}
.choice > button { width: 50px; color: white; cursor: pointer;
}
.choice .up { background: green;
}
.choice .up:hover { background: #00b300;
}
.choice .down { background: #ff0000;
}
.choice .down:hover { background: #ff6666;
}
.amount { width: 50px;
}
.submit { max-width: 550px; display: flex; padding: 10px; margin: 10px auto 50px;
}
@media (max-width: 450px) { .submit { font-size: 0.8rem; }
}
.options { width: 100%; float: right; display: flex; justify-content: space-around; align-items: flex-end; flex-direction: column; color: white;
}
.options > div,
.options button { display: flex; justify-content: flex-end;
}
.options .max { margin: 0 0 0 10px;
}
.options .total { margin: 0 0 0 10px;
}
.options button { color: white; border-radius: 5px; width: 100px; background: green; float: right; padding: 5px; cursor: pointer;
}
.logo { display: flex; color: white; padding: 0; margin: 0; float: left; flex-direction: column; align-items: flex-end; font-size: 2rem;
}
@media (max-width: 450px) { .logo { font-size: 1.5rem; }
}
@media (max-width: 350px) { .logo { font-size: 1.2rem; }
}
.logo span { color: #06C5E9;
}

React Betting App - Script Codes JS Codes

'use strict';
/*Started to learn React so this is my first attempt at a project.*/
var horses = [{ name: 'Red Room', odds: '1/5', id: 1, amount: 0
}, { name: 'TeaBiscuit', odds: '2/1', id: 2, amount: 0
}, { name: 'Black Betty', odds: '5/2', id: 3, amount: 0
}, { name: 'Sher-Khan', odds: '6/1', id: 4, amount: 0
}, { name: "L'il Sebastian", odds: '50/1', id: 5, amount: 0
}];
Horse.propTypes = { name: React.PropTypes.string.isRequired, color: React.PropTypes.string.isRequired, odds: React.PropTypes.string.isRequired, amount: React.PropTypes.number.isRequired
};
function Horse(props) { return React.createElement( 'div', { className: 'horse' }, React.createElement( 'div', { className: 'name' }, props.name ), React.createElement( 'div', { className: 'odds' }, props.odds ), React.createElement(Counter, { amount: props.amount, onChange: props.onBetChange }) );
}
function Counter(props) { return React.createElement( 'section', { className: 'betting' }, React.createElement( 'div', { className: 'choice' }, React.createElement( 'button', { className: 'up', onClick: function onClick() { props.onChange(5); } }, '+' ), React.createElement( 'button', { className: 'down', onClick: function onClick() { if (props.amount >= 5) { props.onChange(-5); } } }, '-' ) ), React.createElement( 'div', { className: 'amount' }, '£', props.amount ) );
}
Counter.Proptypes = { onChange: React.PropTypes.func.isRequired
};
function calcProfit(props) { var profitArray = []; var betArray = []; props.horses.forEach(function (horse) { profitArray.push(eval(horse.odds) * horse.amount + horse.amount); betArray.push(horse.amount); }); var highestReturn = Math.max.apply(null, profitArray); var highestReturnIndex = profitArray.indexOf(highestReturn); var outlay = betArray.reduce(function (total, bet) { return total + bet; }, 0); var profit = highestReturn - outlay + props.horses[highestReturnIndex].amount; return Math.round(profit);
}
function calcBet(props) { var totalBet = 0; props.horses.forEach(function (horse) { totalBet += horse.amount; }); return totalBet;
}
function Footer(props) { var profit = calcProfit(props); var totalBet = calcBet(props); return React.createElement( 'div', { className: 'submit' }, React.createElement( 'div', { className: 'logo' }, React.createElement( 'p', null, 'Bet', React.createElement( 'span', null, '2017' ) ) ), React.createElement( 'div', { className: 'options' }, React.createElement( 'div', null, React.createElement( 'div', null, 'Max Potential Return' ), React.createElement( 'div', { className: 'max' }, '£', profit ) ), React.createElement( 'div', null, React.createElement( 'div', null, 'Total Bet Amount' ), React.createElement( 'div', { className: 'total' }, '£', totalBet ) ), React.createElement( 'button', null, 'Place Bet' ) ) );
}
var App = React.createClass({ displayName: 'App', getInitialState: function getInitialState() { return { horses: this.props.startHorses }; }, onBetChange: function onBetChange(index, change) { this.state.horses[index].amount += change; this.setState(this.state); }, render: function render() { var _this = this; return React.createElement( 'div', { className: 'container' }, React.createElement( 'h1', null, 'Place your Bets' ), React.createElement( 'div', { className: 'bet-container' }, this.state.horses.map(function (horse, index) { return React.createElement(Horse, { name: horse.name, odds: horse.odds, amount: horse.amount, onBetChange: function onBetChange(change) { _this.onBetChange(index, change); }, key: horse.id }); }), ';' ), React.createElement(Footer, { horses: this.state.horses }) ); }
});
ReactDOM.render(React.createElement(App, { startHorses: horses }), document.querySelector('.app'));
React Betting App - Script Codes
React Betting App - Script Codes
Home Page Home
Developer Adam
Username rzencoder
Uploaded November 28, 2022
Rating 3
Size 6,005 Kb
Views 6,072
Do you need developer help for React Betting App?

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!

Adam (rzencoder) Script Codes
Name
Random Movie Quote Generator
Whack-a-Mole and Simon Game
Wikipedia Viewer
Calculator
Scatterplot Graph D3
Countdown Anagram Game
Scrolling Effects Practice
Playable Piano Keyboard with Demos
The Crystal Maze
HTML Canvas Paint App
Create amazing marketing copy 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!