Browse Source

Basic styles

main
Holly McFarland 1 year ago
parent
commit
95372f6943
3 changed files with 69 additions and 23 deletions
  1. +2
    -0
      index.html
  2. +30
    -23
      script.js
  3. +37
    -0
      style.css

+ 2
- 0
index.html View File

@ -8,6 +8,8 @@
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


+ 30
- 23
script.js View File

@ -4,7 +4,7 @@ class Die extends React.Component {
}
};
class Dice extends React.Component {
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -14,6 +14,24 @@ class Dice extends React.Component {
};
}
renderBody() {
if (this.state.numdice == 0) {
return <div>{this.getControlsObject(1, 6)}</div>;
} else {
return (
<div>
<div>
<h2>Your Dice:</h2>
<ul>
{this.renderDice()}
</ul>
</div>
{this.getControlsObject(this.state.numdice, this.state.sides)}
</div>
);
}
}
renderDie(num) {
return <Die key={this.state.numrendered++} num={num} />;
}
@ -22,9 +40,9 @@ class Dice extends React.Component {
const values = Array.from({ length: this.state.numdice }, () => Math.floor(Math.random() * this.state.sides + 1));
return values.map(this.renderDie.bind(this));
}
rollDice(numdice, sides) {
this.setState({numdice: numdice, sides: sides});
this.setState({ numdice: numdice, sides: sides });
}
getControlsObject(numdice, sides) {
@ -32,18 +50,7 @@ class Dice extends React.Component {
}
render() {
return (
this.state.numdice == 0 ? <div>{this.getControlsObject(1, 6)}</div> :
<div>
<div>
<h2>Your Dice:</h2>
<ul>
{this.renderDice()}
</ul>
</div>
{this.getControlsObject(this.state.numdice, this.state.sides)}
</div>
);
return this.renderBody();
}
}
@ -61,16 +68,16 @@ class Controls extends React.Component {
}
setNumDice(num) {
this.setState({numdice: num});
this.setState({ numdice: num });
}
setSides(num) {
this.setState({sides: num});
this.setState({ sides: num });
}
render() {
return (
<div>
<div class="controls">
<h2>Controls</h2>
<h4>Number of Dice</h4>
<NumberControl val={this.state.numdice} min="1" update={this.setNumDice.bind(this)} />
@ -96,15 +103,15 @@ class NumberControl extends React.Component {
}
render() {
return (<div>
<span onClick={this.increment.bind(this)}>🔼</span>
<span>{this.props.val}</span>
<span onClick={this.decrement.bind(this)}>🔽</span>
return (<div class="num-control">
<span class="number-control-button" onClick={this.increment.bind(this)}>🔼</span>
<span> {this.props.val} </span>
<span class="number-control-button" onClick={this.decrement.bind(this)}>🔽</span>
</div>)
}
}
ReactDOM.render(
<Dice numdice="0" sides="0" />,
<Main numdice="0" sides="0" />,
document.querySelector("#root")
);

+ 37
- 0
style.css View File

@ -0,0 +1,37 @@
body {
width: inherit;
margin: 0 22.5%;
font-family: Sans-Serif;
background-color: #D0D0D0;
font-size: 14pt;
color: #111111;
text-align: center;
}
ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
li {
display: block;
font-size: 2em;
margin: 0.25em;
padding: 1.5em;
border: 2px solid black;
border-radius: 10%;
background-color: white;
}
.number-control-button:hover {
cursor: pointer;
font-size: 1.1em;
}
button {
font-size: 2em;
margin: 1em;
padding: 1em;
}

Loading…
Cancel
Save