Skip to content

Sundharrajan react js task #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ASUNDHARRAJAN wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Sundharrajan react js task #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec77190
task code(App.js) file
ASUNDHARRAJAN Oct 4, 2019
92583c2
Task Css file(App.css)
ASUNDHARRAJAN Oct 4, 2019
a71f5f4
Task HTML file(index.html)
ASUNDHARRAJAN Oct 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 8 additions & 22 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,23 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

5 changes: 5 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
font-size: large;
}

.color{
color: red;
}


@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
Expand Down
336 changes: 320 additions & 16 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,325 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import {Form,Button,InputGroup,Col, Row,Image,FormControl,Modal,Card,Nav,Navbar,CardGroup,NavItem} from 'react-bootstrap';
import {FaUserAlt,FaExpeditedssl,FaRegEnvelope,IoMdCall,FaAngleRight, GiOrange} from 'react-icons/all';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}

var createReactClass = require('create-react-class');

const App = createReactClass({

getInitialState() {
return { showModal1: false,showModal2:false,
email:'',emailerror:'',
password:'',passworderror:'',
phonenumber:'',phonenumbererror:'',
name:'',nameerror:''};
},

close(event) {

let Email = this.state.email;
let EmailError = "";
let Password = this.state.password;
let PasswordError = "";
let PhoneNumber = this.state.phonenumber;
let PhoneNumberError = "";
let Name = this.state.name;
let NameError = "";

if(Email === "")
{
EmailError = "Email is Required";
this.setState({emailerror:EmailError});
}
if(Email !== ""){
EmailError = "";
this.setState({emailerror:EmailError});
}

if(Password === "")
{
PasswordError = "Password is Required";
this.setState({passworderror:PasswordError});
}
if(Password !== ""){
PasswordError = "";
this.setState({passworderror:PasswordError});
}
if(PhoneNumber === "")
{
PhoneNumberError = "Phone Number is Required";
this.setState({phonenumbererror:PhoneNumberError});
}
if(PhoneNumber !== ""){
PhoneNumberError = "";
this.setState({phonenumbererror:PhoneNumberError});
}
if(Name === "")
{
NameError = "Name is Required";
this.setState({nameerror:NameError});
}
if(Name !== ""){
NameError = "";
this.setState({nameerror:NameError});
}
else
{
this.setState({ showModal1: false });
this.setState({ showModal2: false });
}
},

onChange(event)
{
let Email="";
let Password="";
let Name="";
let PhoneNumber="";

if(event.target.name === 'Email')
{
Email = event.target.value;
}
this.setState({email:Email},function(){
console.log(this.state.email);
});

if(event.target.name === 'Password'){
Password = event.target.value;
}
this.setState({password:Password},function(){
console.log(this.state.password);
});

if(event.target.name === 'PhoneNumber'){
PhoneNumber = event.target.value;
}
this.setState({phonenumber:PhoneNumber},function(){
console.log(this.state.phonenumber);
});

if(event.target.name === 'Name'){
Name = event.target.value;
}
this.setState({name:Name},function(){
console.log(this.state.name);
});
},

open() {
this.setState({ showModal1: true });
this.setState({ showModal2: true });
},

render() {
return (
<Card>
<Card.Header>

<Navbar collapseOnSelect expand="lg" bg="grey">
<Navbar.Brand href="#home" style={{color: 'lightblue'}}>TODAY</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="#Features" style={{color: 'lightblack'}}>Features</Nav.Link>
<Nav.Link href="#Work" style={{color: 'lightblack'}}>How it Works</Nav.Link>
<Nav.Link href="#Touch" style={{color: 'lightblack' }}>Get in touch</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</Card.Header>
<Card.Body>
<div>
<Card.Img src="https://www.thebridgepe.co.za/wp-content/uploads/2018/05/fashionworld_logo.png"/>
<Row>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Button variant="outline-info" onClick={()=>this.setState({showModal1:true,showModal2:false})}>
LogIn Now<FaAngleRight/>
</Button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Button variant="outline-info" onClick={()=>this.setState({showModal1:false,showModal2:true})}>
SignUp <FaAngleRight/>
</Button>
</Row>
<Modal show={this.state.showModal1} onHide={()=>this.setState({showModal2:false}),this.close}>

<Modal.Body>
<Form noValidate>
<Row>
<Col md="12">
<Form.Group controlId="EmailID">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="Email"><FaRegEnvelope/></InputGroup.Text>
</InputGroup.Prepend>
<FormControl type="Email" placeholder="Email" aria-describedby="Email" name="Email" onChange={this.onChange}/>
</InputGroup>
<span className="color">{this.state.emailerror}</span>
</Form.Group>
</Col>
</Row>
<Row>
<Col md="12">
<Form.Group controlId="Password">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="Password"><FaExpeditedssl/></InputGroup.Text>
</InputGroup.Prepend>
<FormControl type="Password" placeholder="Password" aria-describedby="Password" name="Password" onChange={this.onChange}/>
</InputGroup>
<span className="color">{this.state.passworderror}</span>
</Form.Group>
</Col>
</Row>
<Row>
<Col md="12">
<Button type="submit" size="lg" onClick={this.close}>LogIn Now</Button>
</Col>
</Row>
</Form>
</Modal.Body>
</Modal>

<Modal show={this.state.showModal2} onHide={()=>this.setState({showModal1:false}),this.close}>

<Modal.Body>
<Form noValidate>
<Row>
<Col md="12">
<Form.Group controlId="Name">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="Name"><FaUserAlt/></InputGroup.Text>
</InputGroup.Prepend>
<FormControl type="Text" placeholder="Name" aria-describedby="Name" name="Name" onChange={this.onChange}/>
</InputGroup>
<span className="color">{this.state.nameerror}</span>
</Form.Group>
</Col>
</Row>
<Row>
<Col md="12">
<Form.Group controlId="EmailID">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="Email"><FaRegEnvelope/></InputGroup.Text>
</InputGroup.Prepend>
<FormControl type="Email" placeholder="Email" aria-describedby="Email" name="Email" onChange={this.onChange}/>
</InputGroup>
<span className="color">{this.state.emailerror}</span>
</Form.Group>
</Col>
</Row>

<Row>
<Col md="12">
<Form.Group controlId="PhoneNumber">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="PhoneNumber"><IoMdCall/></InputGroup.Text>
</InputGroup.Prepend>
<FormControl type="text" placeholder="PhoneNumber" aria-describedby="PhoneNumber" name="PhoneNumber" onChange={this.onChange}/>
</InputGroup>
<span className="color">{this.state.phonenumbererror}</span>
</Form.Group>
</Col>
</Row>
<Row>
<Col md="12">
<Form.Group controlId="Password">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="Password"><FaExpeditedssl/></InputGroup.Text>
</InputGroup.Prepend>
<FormControl type="Password" placeholder="Password" aria-describedby="Password" name="Password" onChange={this.onChange}/>
</InputGroup>
<span className="color">{this.state.passworderror}</span>
</Form.Group>
</Col>
</Row>
<Row>
<Col md="12">
<Button variant="primary" size="lg" onClick={this.close}>SignUp Now</Button>
</Col>
</Row>
</Form>
</Modal.Body>
</Modal>
</div>
</Card.Body>
<Card.Footer style={{backgroundColor:'Blue'}}>
<CardGroup>
<Card style={{backgroundColor:'lightgrey'}}>
<Card.Body>
<Card.Title style={{padding:5,
paddingLeft:8,
margin:10,
display:"inline-block",
borderRadius: "50%",
backgroundColor:"orange",
width:30,
height:30}}>1</Card.Title>
<Card.Text>
Well Designed components & Templates
</Card.Text>
</Card.Body>
</Card>
<Card style={{backgroundColor:'lightgrey'}}>
<Card.Body>
<Card.Title style={{padding:5,
paddingLeft:8,
margin:10,
display:"inline-block",
borderRadius: "50%",
backgroundColor:"orange",
width:30,
height:30}}>2</Card.Title>
<Card.Text>
Great documentation & Organized Files
</Card.Text>
</Card.Body>
</Card>
<Card style={{backgroundColor:'lightgrey'}}>
<Card.Body>
<Card.Title style={{padding:5,
paddingLeft:8,
margin:10,
display:"inline-block",
borderRadius: "50%",
backgroundColor:"orange",
width:30,
height:30}}>3</Card.Title>
<Card.Text>
Save Hours of Dancing
</Card.Text>
</Card.Body>
</Card>
<Card style={{backgroundColor:'lightgrey'}}>
<Card.Body>
<Card.Title style={{padding:5,
paddingLeft:8,
margin:10,
display:"inline-block",
borderRadius: "50%",
backgroundColor:"orange",
width:30,
height:30}}>4</Card.Title>
<Card.Text>
Well Designed components & Templates
</Card.Text>
</Card.Body>
</Card>
</CardGroup>
</Card.Footer>
</Card>
);
}
});

//React.render (<App />, document.getElementById('container'));

export default App;