Skip to content

Commit 2950c49

Browse files
yashincontrolyashincontrol
committed
Added Checkout Form
1 parent 6f414a6 commit 2950c49

File tree

4 files changed

+176
-0
lines changed

4 files changed

+176
-0
lines changed

‎vbit_marketplace_fe/src/App.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from 'react';
22
import Profile from './Profile';
3+
import Checkout from './Checkout';
34

45
import './style.css';
56

‎vbit_marketplace_fe/src/Checkout.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.row {
2+
display: -ms-flexbox; /* IE10 */
3+
display: flex;
4+
-ms-flex-wrap: wrap; /* IE10 */
5+
flex-wrap: wrap;
6+
margin: 0 -16px;
7+
}
8+
9+
.col-25 {
10+
-ms-flex: 25%; /* IE10 */
11+
flex: 25%;
12+
}
13+
14+
.col-50 {
15+
-ms-flex: 50%; /* IE10 */
16+
flex: 50%;
17+
}
18+
19+
.col-75 {
20+
-ms-flex: 75%; /* IE10 */
21+
flex: 75%;
22+
}
23+
24+
.col-25,
25+
.col-50,
26+
.col-75 {
27+
padding: 0 16px;
28+
}
29+
30+
.container {
31+
background-color: #f2f2f2;
32+
padding: 5px 20px 15px 20px;
33+
border: 1px solid lightgrey;
34+
border-radius: 3px;
35+
}
36+
37+
input[type=text] {
38+
width: 100%;
39+
margin-bottom: 20px;
40+
padding: 12px;
41+
border: 1px solid #ccc;
42+
border-radius: 3px;
43+
}
44+
45+
label {
46+
margin-bottom: 10px;
47+
display: block;
48+
}
49+
50+
.icon-container {
51+
margin-bottom: 20px;
52+
padding: 7px 0;
53+
font-size: 24px;
54+
}
55+
56+
.btn {
57+
background-color: #4CAF50;
58+
color: white;
59+
padding: 12px;
60+
margin: 10px 0;
61+
border: none;
62+
width: 100%;
63+
border-radius: 3px;
64+
cursor: pointer;
65+
font-size: 17px;
66+
}
67+
68+
.btn:hover {
69+
background-color: #45a049;
70+
}
71+
72+
span.price {
73+
float: right;
74+
color: grey;
75+
}
76+
77+
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
78+
@media (max-width: 800px) {
79+
.row {
80+
flex-direction: column-reverse;
81+
}
82+
.col-25 {
83+
margin-bottom: 20px;
84+
}
85+
}

‎vbit_marketplace_fe/src/Checkout.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from 'react';
2+
3+
4+
5+
const Checkout = () => {
6+
return (
7+
8+
<div className="row">
9+
<div className="col-75">
10+
<div className="container">
11+
<form action="/action_page.php">
12+
<div className="row">
13+
<div className="col-50">
14+
<h3>Billing Address</h3>
15+
<label htmlFor="fname"><i className="fa fa-user" /> Full Name</label>
16+
<input type="text" id="fname" name="firstname" placeholder="John M. Doe" />
17+
<label htmlFor="email"><i className="fa fa-envelope" /> Email</label>
18+
<input type="text" id="email" name="email" placeholder="[email protected]" />
19+
<label htmlFor="adr"><i className="fa fa-address-card-o" /> Address</label>
20+
<input type="text" id="adr" name="address" placeholder="542 W. 15th Street" />
21+
<label htmlFor="city"><i className="fa fa-institution" /> City</label>
22+
<input type="text" id="city" name="city" placeholder="New York" />
23+
<div className="row">
24+
<div className="col-50">
25+
<label htmlFor="state">State</label>
26+
<input type="text" id="state" name="state" placeholder="NY" />
27+
</div>
28+
<div className="col-50">
29+
<label htmlFor="zip">Zip</label>
30+
<input type="text" id="zip" name="zip" placeholder={10001} />
31+
</div>
32+
</div>
33+
</div>
34+
<div className="col-50">
35+
<h3>Payment</h3>
36+
<label htmlFor="fname">Accepted Cards</label>
37+
<div className="icon-container">
38+
<i className="fa fa-cc-visa" style={{color: 'navy'}} />
39+
<i className="fa fa-cc-amex" style={{color: 'blue'}} />
40+
<i className="fa fa-cc-mastercard" style={{color: 'red'}} />
41+
<i className="fa fa-cc-discover" style={{color: 'orange'}} />
42+
</div>
43+
<label htmlFor="cname">Name on Card</label>
44+
<input type="text" id="cname" name="cardname" placeholder="John More Doe" />
45+
<label htmlFor="ccnum">Credit card number</label>
46+
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444" />
47+
<label htmlFor="expmonth">Exp Month</label>
48+
<input type="text" id="expmonth" name="expmonth" placeholder="September" />
49+
<div className="row">
50+
<div className="col-50">
51+
<label htmlFor="expyear">Exp Year</label>
52+
<input type="text" id="expyear" name="expyear" placeholder={2018} />
53+
</div>
54+
<div className="col-50">
55+
<label htmlFor="cvv">CVV</label>
56+
<input type="text" id="cvv" name="cvv" placeholder={352} />
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
<label>
62+
<input type="checkbox" defaultChecked="checked" name="sameadr" /> Shipping address same as billing
63+
</label>
64+
<input type="submit" defaultValue="Continue to checkout" className="btn" />
65+
</form>
66+
</div>
67+
</div>
68+
<div className="col-25">
69+
<div className="container">
70+
<h4>Cart
71+
<span className="price" style={{color: 'black'}}>
72+
<i className="fa fa-shopping-cart" />
73+
<b>4</b>
74+
</span>
75+
</h4>
76+
<p><a href="#">Product 1</a> <span className="price">$15</span></p>
77+
<p><a href="#">Product 2</a> <span className="price">$5</span></p>
78+
<p><a href="#">Product 3</a> <span className="price">$8</span></p>
79+
<p><a href="#">Product 4</a> <span className="price">$2</span></p>
80+
<hr />
81+
<p>Total <span className="price" style={{color: 'black'}}><b>$30</b></span></p>
82+
</div>
83+
</div>
84+
</div>
85+
86+
);
87+
}
88+
89+
export default Checkout;

‎vbit_marketplace_fe/src/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './index.css';
4+
import './Checkout.css';
45
import './style.css';
56
import App from './App';
67
import * as serviceWorker from './serviceWorker';

0 commit comments

Comments
 (0)