Commit 066fc949 authored by Boni Guptam Kumar Rao's avatar Boni Guptam Kumar Rao

added bird component to the phase 4

parent ac36334d
Pipeline #19993 passed with stage
in 2 minutes and 30 seconds
......@@ -10,7 +10,7 @@ import Cloud5 from './components/Cloud5';
import Hill from './components/images/bcollection.png';
import Mountain from './components/Mountain';
import Sun from './components/Sun';
import Bird from './components/images/Bird.gif';
import Bird from './components/Bird.js';
import A1up from './components/A1up';
import A2Down from './components/A2Down';
import A2Left from './components/A2Left';
......@@ -33,6 +33,7 @@ class App extends Component {
rain : false,
arrow : false,
arrow2 : false,
bird : false,
}
}
Phase1() {
......@@ -42,6 +43,7 @@ Phase1() {
this.setState({rain: false});
this.setState({arrow: true});
this.setState({arrow2 : false});
this.setState({bird : false});
}
Phase2() {
......@@ -51,6 +53,7 @@ Phase2() {
this.setState({rain: false});
this.setState({arrow: false});
this.setState({arroe22: false})
this.setState({bird : false});
}
Phase3() {
this.setState({sun: false});
......@@ -59,6 +62,7 @@ Phase3() {
this.setState({rain: true});
this.setState({arrow: false});
this.setState({arrow2: false});
this.setState({bird : false});
}
Phase4() {
......@@ -68,27 +72,31 @@ Phase4() {
this.setState({rain: false});
this.setState({arrow: false });
this.setState({arrow2: true});
this.setState({bird : true});
}
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<Row>
<Col sm={10}>
<Container className='Container'>
<Row justify='start'>
<Col xs={5.5}></Col>
<Row >
<Col xs={8}></Col>
<Col>
<Col xs={2}>
{
this.state.rain ? <ReactRain numDrops="2000"></ReactRain> : null
this.state.rain ? <ReactRain numDrops="1000" />: null
}
</Col>
</Row>
<Row>
<Col xs ={12}>{this.state.bird ?<Bird /> : null}</Col>
</Row>
<Row>
<Col xs={0} sm={0} > { this.state.sun ? <Sun /> : null } </Col>
......@@ -121,11 +129,11 @@ Phase4() {
</Row>
<Row>
<Col xs={7}>
<Col xs={8}>
</Col>
<Col xs={0}>
<Col xs={0}>
{this.state.arrow2 ? <A2Down /> : null }
</Col>
......@@ -133,6 +141,7 @@ Phase4() {
<Row>
<Col xs={7}>
{this.state.arrow2 ? <Delay wait={1500}> <A2Left /> </Delay> : null }
</Col>
......@@ -162,7 +171,7 @@ Phase4() {
<img src={P1} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> DATA </BackSide>
<BackSide style={{ backgroundColor: '#175852'}}> EVAPORATION </BackSide>
</Flippy>
</Button>
......@@ -185,7 +194,7 @@ Phase4() {
<img src={P2} style={{maxWidth:'100%' ,maxHeight:'100%'}} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> DATA </BackSide>
<BackSide style={{ backgroundColor: '#175852'}}> CONDENSATION </BackSide>
</Flippy>
</Button>
......@@ -198,8 +207,8 @@ Phase4() {
<Button onClick={() => this.Phase3()} className="B2">
<Flippy
style={{ width: '290px', height: '238px' }}
flipOnHover={true}
flipOnClick={false}
flipOnHover={false}
flipOnClick={true}
flipDirection="horizontal"
>
......@@ -207,7 +216,7 @@ Phase4() {
<img src={P3} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> EVAPORATION </BackSide>
<BackSide style={{ backgroundColor: '#175852'}}> PRECIPITATION </BackSide>
</Flippy>
</Button>
......@@ -231,7 +240,7 @@ Phase4() {
<img src={P4} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</FrontSide>
<BackSide style={{ backgroundColor: '#175852'}}> DATA </BackSide>
<BackSide style={{ backgroundColor: '#175852'}}> COLLECTION </BackSide>
</Flippy>
</Button>
......
import React, { Component } from 'react';
import bird from './images/Bird.gif';
import './App.css';
import 'react-marquee';
class Bird extends Component {
render() {
return (
<marquee behavior={"slide"} direction={"left"} scrollamount={"25"}>
<img src={bird}/>
<img src={bird}/>
</marquee>
);
}
}
export default Bird;
\ No newline at end of file
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