<!DOCTYPE html>
<head></head>
<body>
<title>
LifeDots | The Game Of Life
</title>
<h1 id="lifeh1">
This is your life.
</h1>
<h5 id="vidah5">
Esta es tu vida.
</h1>
<div id="life">
</div>
<p id="explanation">
We've added green points to represent the time you'll spend studying.
</p>
<p id="explicación">
Los puntos verdes representan el tiempo que pasarás estudiando.
</p>
<a id="nextinstance" href="resume.html">
LET'S KEEP GOING.
</a>
<a id="próximainstancia" href="resume.html">
QUIERO SEGUIR.
</a>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
body {
margin-left: 4%;
margin-right: 4%;
font-family: Roboto, sans-serif;
background: white;
color: black;
}
h1 {
margin-bottom: 0%;
margin-top: 1%;
margin-left: 32%;
margin-right: 32%;
font-weight: 100;
font-size: 400%;
width: 100%;
float: center;
}
h5 {
margin-top: 0.7%;
margin-bottom: 1%;
margin-left: 43%;
margin-right: 43%;
display: inline-block;
font-weight: 300;
font-size: 150%;
width: 15%;
}
.year{
display: inline;
}
#line1, #line2, #line3, #line4, #line5, #line6, #line7, #line8, #line9, #line10 {
margin-left: 4%;
margin-right: 4%;
}
#circle1, #circle2, #circle3{
width: 37px;
height: 37px;
border-radius: 25px;
background: #CE2828;
margin-left: 0.4%;
margin-top: 0.4%;
margin-bottom: 0.4%;
margin-right: 0.4%;
display: inline-block;
}
#nextinstance {
float: left;
font-size: 100%;
font-weight: 100%;
color: black;
width: 20%;
margin-left: 15%;
margin-top: 1%;
margin-bottom: 2.5%;
border-style: solid;
border-color: black;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1.5%;
padding-right: 1.5%;
border-width: thin;
text-align: center;
text-decoration: none;
}
#nextinstance:hover {
color: white;
background: black;
}
#próximainstancia {
float: right;
width: 20%;
font-size: 100%;
font-weight: 100%;
margin-left: 20%;
margin-top: 1%;
margin-bottom: 2.5%;
margin-right: 15%;
color: black;
border-style: solid;
border-color: black;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1.5%;
padding-right: 1.5%;
border-width: thin;
text-align: center;
text-decoration: none;
}
#próximainstancia:hover {
color: white;
background: black;
}
#explanation {
float: left;
font-size: 150%;
width: 35%;
margin-left: 10%;
text-align: justify;
}
#explicación {
float: right;
font-size: 150%;
width: 35%;
margin-right: 10%;
text-align: justify;
} class Life extends React.Component {
constructor(props) {
super(props);
this.state = {
num: localStorage.getItem("lifeExpectancyValue"),
count: 0,
items: []
}
}
componentWillMount() {
let arr = []
const age = parseInt(localStorage.getItem("ageValue"))
const work = Math.round((50 - age) / 3)
const sleep = Math.round((this.state.num - age - work) / 3)
const study = Math.round((24 - age) / 4)
const socialMedia = Math.round((this.state.num - age) / 16)
for (let i = 0; i < this.state.num; i++) {
let style = {backgroundColor: this.state.count < age ? 'blue':
this.state.count < age + work + sleep + study + socialMedia ? 'green' : 'red'}
arr.push(<div className="year" key={i}>
<div style={style} id="circle1"></div>
<div style={style} id="circle2"></div>
<div style={style} id="circle3"></div>
</div>);
this.setState({count: this.state.count++, items: arr})
}
localStorage.setItem("redTime", this.state.num - (work + sleep + study + socialMedia))
localStorage.setItem("greenTime", work + sleep + study + socialMedia)
}
render() {
return (
<div>{this.state.items}</div>
);
}
}
ReactDOM.render(<Life/>, document.getElementById('life'));
External CSS
This Pen doesn't use any external CSS resources.