Skip to content

W
Water Cycle
Commit 29732065 authored by Jaya Simha Reddy Nandyala's avatar Jaya Simha Reddy Nandyala
Browse files
Options

Added Phases as new Col

parent 54a7fa73
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 93 deletions
src/App.js
View file @ 29732065
......@@ -21,61 +21,74 @@ class App extends Component {
constructor(){
super();
this.state = {
childVisible: false
sun : true ,
cloud : false ,
rain : false
}
}
onClick() {
this.setState({childVisible: !this.state.childVisible});
Phase1() {
this.setState({sun: true});
this.setState({cloud : false});
this.setState({rain: false});
}
Phase2() {
this.setState({sun: true});
this.setState({cloud : true});
this.setState({rain: false});
}
Phase3() {
this.setState({sun: false});
this.setState({cloud : true});
this.setState({rain: true});
}
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Row>
<Col sm={10}>
<Container className='Container'>
<Row justify='start'>
<Col xs={4} >
<h1 className='Body'>aaaaaaaaaaaaaa</h1>
</Col>
<Col xs={4}>
<h1 className='Body'>aaaaaaaaaaaaaa</h1>
</Col>
<Col xs={4} >
<h1 className='Body'>aaaaaaaaaaaaaa</h1>
<ReactRain numDrops="1000"></ReactRain>
</Col>
{
this.state.rain ? <ReactRain numDrops="1000"></ReactRain> : null
}
</Row>
<Row>
<Col xs={0.4}>
<Col xs={0.4} sm={0.4}>
{
this.state.childVisible ? <Sun /> : null
this.state.sun ? <Sun /> : null
}
</Col>
<Col xs={2}>
<Cloud5 />
<Cloud2 />
<Col xs={2} sm={2}>
{
this.state.cloud ? <Cloud5 /> : null
}
{
this.state.cloud ? <Cloud2 /> : null
}
</Col>
<Col xs={1}>
<Cloud2 />
<Cloud />
<Col xs={1} sm={1}>
{
this.state.cloud ? <Cloud2 /> : null
}
{
this.state.cloud ? <Cloud /> : null
}
</Col>
<Col xs={4} >
<Cloud />
<Col xs={4} sm={4}>
{
this.state.cloud ? <Cloud /> : null
}
</Col>
</Row>
......@@ -89,70 +102,25 @@ onClick() {
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button onClick={() => this.onClick()} className="B2"> Hide/Show Sun </Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B2">PHASE 2</Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B2">PHASE 3</Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B2">PHASE 4</Button>
</Col>
</Row>
<Row>
<Col xs={8}>
</Col>
<Col>
<Button className="B2">PHASE-5</Button>
</Container>
</Col>
<Col sm={2}>
<Row>
<Col sm={12} xs={12}>
<Button onClick={() => this.Phase1()} className="B2"> PHASE 1 </Button>
</Col>
<Col sm={12} xs={12}>
<Button onClick={() => this.Phase2()} className="B2"> PHASE 2 </Button>
</Col>
</Row>
<Row>
<Col xs={8}> </Col>
<Col>
<Button className="B1"></Button>
<Col sm={12} xs={12}>
<Button onClick={() => this.Phase3()} className="B2"> PHASE 3 </Button>
</Col>
</Row>
</Container>
</Row>
</Col>
</Row>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment