Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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)

AltStyle によって変換されたページ (->オリジナル) /