Basic ReactJs Form

Developer
Ajala Comfort
Size
5,214 Kb
Views
6,072
  1. Basic ReactJs Form Previews
  2. Basic ReactJs Form HTML Codes
  3. Basic ReactJs Form CSS Codes
  4. Basic ReactJs Form JS Codes

How do I make an basic reactjs form?

A Simple Form created with ReactJs. What is a basic reactjs form? How do you make a basic reactjs form? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

Basic ReactJs Form Previews
IQ Test

Basic ReactJs Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic ReactJs Form</title> <link href="https://animate.css/3.5.2/animate.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div> <div id="space"> </div> </div>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic ReactJs Form - Script Codes CSS Codes

body{font-family: 'Raleway', sans-serif;width:100%;height:700px;background:#3498db;}
body > div{ width:400px;height:300px;background-color:rgba(236, 240, 241,0.5);border-radius:0;margin:auto;margin-top:200px;
}
#parent{position:absolute;background-color:white;border-radius:0f%;}
.fa{color:#34495e;font-size:90px;width:100%;height:50%;text-align:center;padding-top:15%;}
.cards{width:100%;height:100%;z-index:2;}
.cards > div{width:100%;}
.icons{height:150px;}
.headings{height:50px;}
.headings > p{text-align:center;font-size:25px;letter-spacing:2px;}
.inputs{height:200px;margin-top:30px;}
.inputs > input{margin-top:10px;width:80%;margin-left:7%;height:40px;border:none;}
.green > input{border-bottom:2px solid #27ae60;}
.yellow > input{border-bottom:2px solid #f1c40f;}
input:invalid {border-bottom: 1px solid rgba(211, 84, 0,1.0);}
input:valid {border-bottom: 5px solid rgba(39, 174, 96,1.0);}
#endmessage > p{width:100%;height:50px;text-align:center;padding-top:100px;font-size:20px;} .pointer > .fa{color:rgba(231, 76, 60,0.6);}
#picked{color:orange}

Basic ReactJs Form - Script Codes JS Codes

"use strict";
function sweepRight() { $("#parent").animate({ marginLeft: "300px" }).fadeOut(100, function () { sweepBack(); });
}
function sweepBack() { $("#parent").fadeIn(100).animate({ marginLeft: "50px" });
}
var BasicDetails = React.createClass({ displayName: "BasicDetails", getInitialState: function getInitialState() { return { done: false, first: "", last: "" }; }, check: function check(e) { var id = e.target.id, word = e.target.value; id == "first" ? this.setState({ first: word }) : this.setState({ last: word }); return this.complete() ? this.setDone() : true; }, complete: function complete() { return this.state.first.length > 0 && this.state.last.length > 0; }, setDone: function setDone() { var packaged = { name: this.state.first + " " + this.state.last }; this.props.next("basic", packaged); return this.setState({ done: true }); }, render: function render() { var self = this; return React.createElement( "div", { id: "basicdetails", className: "cards" }, React.createElement( "div", { className: "icons" }, React.createElement("i", { className: "fa fa-user", "aria-hidden": "true" }) ), React.createElement( "div", { className: "headings" }, React.createElement( "p", null, "Basic Details" ) ), React.createElement( "div", { className: "inputs" }, React.createElement("input", { type: "text", id: "first", placeholder: "First Name", onBlur: self.check }), React.createElement("input", { type: "text", id: "last", placeholder: "Last Name", onBlur: self.check }) ) ); }
});
/////////////////////////////CONTACTS
var ContactDetails = React.createClass({ displayName: "ContactDetails", getInitialState: function getInitialState() { return { done: false, phone: "", email: "" }; }, check: function check(e) { var word = e.target.value, id = e.target.id; id == "email" ? this.setState({ email: word }) : this.setState({ phone: word }); return this.complete() ? this.next() : true; }, complete: function complete() { return this.state.phone.length > 0 && this.state.email.length > 0; }, next: function next() { return this.props.next("contact"); }, render: function render() { var self = this; return React.createElement( "div", { id: "contactdetails", className: "cards" }, React.createElement( "div", { className: "icons" }, React.createElement("i", { className: "fa fa-envelope-o", "aria-hidden": "true" }) ), React.createElement( "div", { className: "headings" }, React.createElement( "p", null, "Contact Details" ) ), React.createElement( "div", { className: "inputs" }, React.createElement("input", { type: "email", id: "email", placeholder: "Email", onBlur: self.check }), React.createElement("input", { type: "number", id: "phone", placeholder: "Phone Number", onBlur: self.check }) ) ); }
});
/////////////////////////////// Password
var PasswordDetails = React.createClass({ displayName: "PasswordDetails", getInitialState: function getInitialState() { return { done: false, password: "", confirm: "" }; }, check: function check(e) { var word = e.target.value, id = e.target.id; id == "password" ? this.setState({ password: word }) : this.setState({ confirm: word }); return this.complete() ? this.next() : true; }, complete: function complete() { return this.state.password.length > 0 && this.state.confirm.length > 0; }, next: function next() { return this.props.next("password"); }, render: function render() { var self = this; return React.createElement( "div", { id: "passwordDetails", className: "cards" }, React.createElement( "div", { className: "icons" }, React.createElement("i", { className: "fa fa-key", "aria-hidden": "true" }) ), React.createElement( "div", { className: "headings" }, React.createElement( "p", null, "Password Details" ) ), React.createElement( "div", { className: "inputs" }, React.createElement("input", { type: "password", id: "password", placeholder: "Password", onBlur: self.check }), React.createElement("input", { type: "password", id: "ocnfirm", placeholder: "Confirm Password", onBlur: self.check }) ) ); }
});
//////////////////////GENDER
var GenderDetails = React.createClass({ displayName: "GenderDetails", getInitialState: function getInitialState() { return { done: false, female: false, male: false }; }, click: function click(sex) { if (sex == "female") { this.setState({ female: true }); } else { this.setState({ male: true }); } return this.props.next("gender"); }, render: function render() { var self = this; return React.createElement( "div", { id: "genderdetails", className: "cards" }, React.createElement( "div", { className: "headings" }, React.createElement( "p", null, "Password Details" ) ), React.createElement( "div", { className: "icons" }, React.createElement("i", { className: "fa fa-female", "aria-hidden": "true", id: self.state.female ? "picked" : null, onClick: self.click.bind(null, "female") }) ), React.createElement( "div", { className: "icons" }, React.createElement("i", { className: "fa fa-male", "aria-hidden": "true", id: self.state.male ? "picked" : null, onClick: self.click.bind(null, "male") }) ) ); }
});
///////////////////////////END MESSAGE
var EndMessage = React.createClass({ displayName: "EndMessage", getInitialState: function getInitialState() { return { done: false }; }, render: function render() { var self = this; return React.createElement( "div", { id: "endmessage", className: "cards" }, React.createElement( "p", null, "Registered ", self.props.name, "... " ), React.createElement( "p", { className: "pointer" }, "Continue ", React.createElement("i", { className: "fa fa-arrow-right", "aria-hidden": "true" }) ) ); }
});
///////////////////////////////////////////////////PARENT
var Parent = React.createClass({ displayName: "Parent", getInitialState: function getInitialState() { return { basic: true, contact: false, password: false, gender: false, end: false }; }, updateStates: function updateStates(state) { switch (state) { case "basic": this.setState({ basic: false, contact: true }); break; case "contact": this.setState({ contact: false, password: true }); break; case "password": this.setState({ password: false, gender: true }); break; case "gender": this.setState({ gender: false, end: true }); break; } return true; }, next: function next(s) { if (arguments.length > 1) { var packaged = arguments[1]; this.setState({ name: packaged.name }); } sweepRight(); return this.updateStates(s); }, render: function render() { var style = { width: 300, height: 500, marginTop: -100, marginLeft: 50 }, self = this; return React.createElement( "div", { id: "parent", style: style }, self.state.basic ? React.createElement(BasicDetails, { next: self.next }) : null, self.state.contact ? React.createElement(ContactDetails, { next: self.next }) : null, self.state.password ? React.createElement(PasswordDetails, { next: self.next }) : null, self.state.gender ? React.createElement(GenderDetails, { next: self.next }) : null, self.state.end ? React.createElement(EndMessage, { next: self.next, name: self.state.name }) : null ); }
});
ReactDOM.render(React.createElement(Parent, null), document.getElementById("space"));
Basic ReactJs Form - Script Codes
Basic ReactJs Form - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 5,214 Kb
Views 6,072
Do you need developer help for Basic ReactJs Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
COLOR PICKER
Tic-Tac-Toe Free Code Camp Challenge
My Porfolio
Hashtables
Intermediate Todo List with React.js
SVG Clock Practice
Calculator with ReactJs
Recipe Book
Material Chat app Interface with ReactJS
Palindrome Word
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!