Skip to content

Commit 453cf14

Browse files
author
Mc-D Lonell
committed
form-input-validation
1 parent e2d1d01 commit 453cf14

File tree

11 files changed

+719
-26
lines changed

11 files changed

+719
-26
lines changed

‎package-lock.json‎

Lines changed: 265 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@
66
"@testing-library/jest-dom": "^5.14.1",
77
"@testing-library/react": "^11.2.7",
88
"@testing-library/user-event": "^12.8.3",
9+
"axios": "^0.21.1",
910
"react": "^17.0.2",
1011
"react-dom": "^17.0.2",
12+
"react-google-location": "^1.2.2",
13+
"react-router-dom": "^5.2.0",
1114
"react-scripts": "4.0.3",
15+
"validator": "^13.6.0",
1216
"web-vitals": "^1.1.2"
1317
},
1418
"scripts": {

‎src/App.js‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import "./App.css";
2+
import Navbar from "./component/Navbar";
3+
import HomePage from "./pages/HomePage";
4+
import { BrowserRouter, Switch, Route } from "react-router-dom";
5+
import PostPage from "./pages/PostPage";
6+
import CreatePostPage from "./pages/CreatePostPage";
7+
import LoginPage from "./pages/LoginPage";
8+
import ProfilePage from "./pages/ProfilePage";
9+
import RegisterPage from "./pages/RegisterPage";
310

411
function App() {
512
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
13+
<BrowserRouter>
14+
<div className="container">
15+
<Navbar />
16+
<Switch>
17+
<Route path="/register">
18+
<RegisterPage />
19+
</Route>
20+
<Route path="/login">
21+
<LoginPage />
22+
</Route>
23+
<Route path="/profile">
24+
<ProfilePage />
25+
</Route>
26+
<Route path="/create">
27+
<CreatePostPage />
28+
</Route>
29+
<Route path="/page">
30+
<PostPage />
31+
</Route>
32+
<Route path="/">
33+
<HomePage />
34+
</Route>
35+
</Switch>
36+
</div>
37+
</BrowserRouter>
2238
);
2339
}
2440

‎src/component/Navbar.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
4+
export default function Navbar() {
5+
return (
6+
<div className="header">
7+
<div className="header-item">
8+
<Link to="/" exact={true}>
9+
<strong>Awesome Blog</strong>
10+
</Link>
11+
</div>
12+
<div className="header-item">
13+
<form>
14+
<input placeholder="search post" type="text" />
15+
<button>Search</button>
16+
</form>
17+
</div>
18+
<div className="header-item">
19+
<Link to="/login" exact={true}>
20+
<strong>Login</strong>
21+
</Link>
22+
<button>Theme</button>
23+
</div>
24+
</div>
25+
);
26+
}

‎src/index.css‎

Lines changed: 156 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,161 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
15
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
6+
margin: 0;
7+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
8+
-webkit-font-smoothing: antialiased;
9+
-moz-osx-font-smoothing: grayscale;
10+
}
11+
12+
input,
13+
button {
14+
font-size: 16px;
15+
padding: 5px;
816
}
917

1018
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
19+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
20+
}
21+
22+
ul {
23+
padding: 0;
24+
list-style: none;
25+
}
26+
27+
li {
28+
margin-top: 10px;
29+
}
30+
31+
h2 {
32+
margin-bottom: 0;
33+
}
34+
35+
#root {
36+
height: 100vh;
37+
}
38+
39+
.light {
40+
background-color: #e0e0e0;
41+
color: #202020;
42+
}
43+
44+
.dark {
45+
background-color: #202020;
46+
color: #e0e0e0;
47+
}
48+
49+
button {
50+
cursor: pointer;
51+
padding: 5px;
52+
border: 1px solid #c0c0c0;
53+
}
54+
55+
.dark button {
56+
cursor: pointer;
57+
padding: 5px;
58+
background-color: #202020;
59+
color: #e0e0e0;
60+
}
61+
62+
a {
63+
color: #305090;
64+
text-decoration: none;
65+
}
66+
67+
.dark a {
68+
color: #40c0f0;
69+
}
70+
71+
a:hover {
72+
color: #f08040;
73+
}
74+
75+
.active {
76+
font-weight: bold;
77+
}
78+
79+
.container {
80+
display: flex;
81+
flex-direction: column;
82+
min-height: 100vh;
83+
}
84+
85+
.header {
86+
padding: 10px;
87+
padding-bottom: 0;
88+
min-height: 50px;
89+
border-bottom: 1px #404040 solid;
90+
display: flex;
91+
flex-wrap: wrap;
92+
justify-content: space-between;
93+
align-items: center;
94+
}
95+
96+
.header-item {
97+
padding-bottom: 10px;
98+
}
99+
100+
.main {
101+
padding: 10px;
102+
flex: auto;
103+
}
104+
105+
.footer {
106+
border-top: 1px #808080 solid;
107+
padding: 10px;
108+
height: 50px;
109+
display: flex;
110+
justify-content: center;
111+
align-items: center;
112+
}
113+
114+
.blog {
115+
display: flex;
116+
width: 100%;
117+
flex-wrap: wrap;
118+
}
119+
120+
.content {
121+
flex: 1 75%;
122+
padding: 10px;
123+
}
124+
125+
.sidebar {
126+
flex: 1 25%;
127+
padding: 10px;
128+
}
129+
130+
.form {
131+
max-width: 800px;
132+
}
133+
134+
.form-item {
135+
display: flex;
136+
flex-wrap: wrap;
137+
margin: 10px;
138+
}
139+
140+
.form-item > label {
141+
flex: 1 1 100px;
142+
}
143+
144+
.form-item > input,
145+
.form-item > textarea,
146+
.form-item > span,
147+
.form-item > button {
148+
flex: 3 1 300px;
149+
}
150+
151+
.error {
152+
color: #c04040;
153+
}
154+
155+
.success {
156+
color: #40c040;
157+
}
158+
159+
textarea {
160+
min-height: 200px;
13161
}

‎src/pages/CreatePostPage.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
import axios from "axios";
3+
4+
export default class CreatePostPage extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
countryName: "",
9+
countryCode: ""
10+
};
11+
}
12+
getGeoInfo = () => {
13+
axios
14+
.get("https://extreme-ip-lookup.com/json/")
15+
.then(response => {
16+
let data = response.data;
17+
this.setState({
18+
countryName: data.country_name,
19+
countryCode: data.country_calling_code
20+
});
21+
})
22+
.catch(error => {
23+
console.log(error);
24+
});
25+
};
26+
componentDidMount() {
27+
this.getGeoInfo();
28+
}
29+
render() {
30+
return (
31+
<div>
32+
<p>Country Name: {this.state.countryName}</p>
33+
<p>Country Code: {this.state.countryCode}</p>
34+
</div>
35+
);
36+
}
37+
}

‎src/pages/HomePage.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
export default function HomePage() {
4+
return (<div className="blog">
5+
<div className="content">
6+
<h1>Posts</h1>
7+
<ul><li><h2>Title</h2><p>content</p></li></ul>
8+
</div>
9+
<div className="sidebar"><div><h2>User Profile</h2><ul><li>Email:</li><li>Phone:</li><li>Website</li></ul></div><div><h2>Authors</h2></div></div>
10+
</div>)
11+
}

‎src/pages/LoginPage.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
4+
export default function LoginPage() {
5+
return (
6+
<div>
7+
<h1>Login User</h1>
8+
<form className="form">
9+
<div className="form-item">
10+
<label>Email: </label>
11+
<input name="email" type="email" required autoFocus />
12+
</div>
13+
<div className="form-item">
14+
<label>Password: </label>
15+
<input name="password" type="password" required />
16+
</div>
17+
<div className="form-item">
18+
<label> </label>
19+
<button>Login</button>
20+
</div>
21+
<div className="form-item">
22+
<label> </label>
23+
<span>
24+
New User? <Link to="/register">Create Account</Link>
25+
</span>
26+
</div>
27+
</form>
28+
</div>
29+
);
30+
}

‎src/pages/PostPage.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react";
2+
3+
export default function PostPage() {
4+
return <div>Post Page</div>;
5+
}

0 commit comments

Comments
 (0)