diff --git a/public/index.html b/public/index.html index ed0ebaf..55bdbdd 100644 --- a/public/index.html +++ b/public/index.html @@ -4,21 +4,16 @@ - + - + React App @@ -26,15 +21,6 @@ You need to enable JavaScript to run this app.
- + diff --git a/src/App.css b/src/App.css index c5c6e8a..e8fe519 100644 --- a/src/App.css +++ b/src/App.css @@ -22,6 +22,11 @@ font-size: large; } +.color{ + color: red; +} + + @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } diff --git a/src/App.js b/src/App.js index 203067e..997b4a1 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

-
- ); - } -} + +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 ( + + + + + TODAY + + + + + + + +
+ + +               + +       + + + this.setState({showModal2:false}),this.close}> + + +
+ + + + + + + + + + {this.state.emailerror} + + + + + + + + + + + + + {this.state.passworderror} + + + + + + + + +
+ + + + this.setState({showModal1:false}),this.close}> + + +
+ + + + + + + + + + {this.state.nameerror} + + + + + + + + + + + + + {this.state.emailerror} + + + + + + + + + + + + + + {this.state.phonenumbererror} + + + + + + + + + + + + + {this.state.passworderror} + + + + + + + + +
+ + +
+ + + + + + 1 + + Well Designed components & Templates + + + + + + 2 + + Great documentation & Organized Files + + + + + + 3 + + Save Hours of Dancing + + + + + + 4 + + Well Designed components & Templates + + + + + + + ); + } + }); + + //React.render (, document.getElementById('container')); export default App; +