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 e2abb55

Browse files
form app added
1 parent beb7bc6 commit e2abb55

File tree

9 files changed

+1056
-0
lines changed

9 files changed

+1056
-0
lines changed
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "submit-form-in-react",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"react": "^18.2.0",
13+
"react-dom": "^18.2.0"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.0.26",
17+
"@types/react-dom": "^18.0.9",
18+
"@vitejs/plugin-react": "^3.0.0",
19+
"vite": "^4.0.0"
20+
}
21+
}
Lines changed: 1 addition & 0 deletions
Loading[フレーム]
Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.app-container{
2+
max-width: 450px;
3+
margin: 21px auto;
4+
overflow: hidden;
5+
background-color: rgb(34, 34, 34);
6+
border-radius: 12px;
7+
font-family: monospace;
8+
font-size: 15px;
9+
box-shadow: 0px 0px 12px 3px gray;
10+
height: 680px;
11+
position: relative;
12+
user-select: none;
13+
14+
}
15+
.react-form{
16+
display: flex;
17+
flex-direction: column;
18+
padding: 40px 21px 40px 21px;
19+
}
20+
.input-text{
21+
margin: 7px 0px;
22+
padding: 9px;
23+
font-size: 16px;
24+
border-radius: 7px;
25+
border: none;
26+
outline: none;
27+
}
28+
.input-text:focus{
29+
outline: 4px solid rgb(183, 0, 255);
30+
}
31+
.student{
32+
display: flex;
33+
align-items: center;
34+
margin: 9px 0px;
35+
padding: 6px;
36+
color: white;
37+
}
38+
textarea{
39+
margin: 9px 0px;
40+
padding: 9px;
41+
border-radius: 9px;
42+
border: none;
43+
outline: none;
44+
}
45+
textarea:focus{
46+
outline: 4px solid rgb(183, 0, 255);
47+
}
48+
fieldset{
49+
color: white;
50+
display: flex;
51+
flex-direction: column;
52+
border: 2px solid white;
53+
border-radius: 9px;
54+
}
55+
.clstat{
56+
padding: 6px;
57+
display: flex;
58+
align-items: center;
59+
}
60+
.clstat>input{
61+
margin: 0px 9px;
62+
}
63+
select{
64+
margin: 9px;
65+
padding: 6px 20px;
66+
font-size: 16px;
67+
border-radius: 9px;
68+
outline: none;
69+
}
70+
select:focus{
71+
outline: 4px solid rgb(183, 0, 255);
72+
}
73+
.chooseclass{
74+
color: white;
75+
margin: 18px 0px 0px 9px;
76+
}
77+
button{
78+
width: 150px;
79+
padding: 9px;
80+
background-color: rgb(200, 35, 255);
81+
color: white;
82+
border: none;
83+
border-radius: 9px;
84+
margin: 30px auto;
85+
margin-bottom: 0px;
86+
font-size: 17px;
87+
font-family: monospace;
88+
box-shadow: 3px 3px 0px 0px white;
89+
border-right: 2px solid black;
90+
border-bottom: 2px solid black;
91+
transition: .2s;
92+
}
93+
button:hover{
94+
transform: translate(3px, 3px);
95+
box-shadow: 0px 0px 0px 0px white;
96+
border-right: none;
97+
border-bottom: none;
98+
}
99+
100+
101+
.terminal{
102+
max-width: 420px;
103+
box-sizing: border-box;
104+
height: 200px;
105+
background-color: rgb(212, 0, 255);
106+
border-radius: 12px;
107+
/* backdrop-filter: blur(9px); */
108+
padding: 21px;
109+
position: absolute;
110+
top: 27%;
111+
left: 3.5%;
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
animation: openWindow .3s;
116+
117+
}
118+
@keyframes openWindow {
119+
from {transform: scale(0)}
120+
to {transform: scale(1)}
121+
}
122+
@-webkit-keyframes openWindow {
123+
from {-webkit-transform: scale(0)}
124+
to {-webkit-transform: scale(1)}
125+
}
126+
.terminal > p{
127+
font-size: 21px;
128+
text-align: center;
129+
color: white;
130+
margin-top: 50px;
131+
}
132+
.time{
133+
position: absolute;
134+
top: 20px;
135+
right: 20px;
136+
font-size: 27px;
137+
font-weight: bold;
138+
color: white;
139+
}
140+
.time:hover{
141+
color: black;
142+
}
Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import React from "react";
2+
import "./App.css";
3+
4+
export default function App() {
5+
const [userData, setUserData] = React.useState({
6+
firstname: "",
7+
lastname: "",
8+
email: "",
9+
studentStatus: false,
10+
comment: "",
11+
class: "",
12+
chooseColor: "",
13+
});
14+
15+
function inputChange(event) {
16+
setUserData((prevData) => {
17+
const { name, type, value, checked } = event.target;
18+
return {
19+
...prevData,
20+
[name]: type === "checkbox" ? checked : value,
21+
};
22+
});
23+
}
24+
25+
function submitClick(event) {
26+
event.preventDefault();
27+
document.getElementById("terminal").style.display = "block";
28+
29+
console.log(userData);
30+
}
31+
32+
function closeTerminal() {
33+
document.getElementById("terminal").style.display = "none";
34+
}
35+
return (
36+
<div className="app-container" id="app">
37+
<form action="" className="react-form">
38+
<input
39+
className="input-text"
40+
type="text"
41+
placeholder="enter your firstname"
42+
name="firstname"
43+
value={userData.firstname}
44+
onChange={inputChange}
45+
/>
46+
<input
47+
className="input-text"
48+
type="text"
49+
placeholder="enter your lastname"
50+
name="lastname"
51+
value={userData.lastname}
52+
onChange={inputChange}
53+
/>
54+
<input
55+
className="input-text"
56+
type="email"
57+
placeholder="enter your email"
58+
name="email"
59+
value={userData.email}
60+
onChange={inputChange}
61+
/>
62+
<div className="student">
63+
<input
64+
type="checkbox"
65+
id="studentid"
66+
name="studentStatus"
67+
onChange={inputChange}
68+
checked={userData.studentStatus}
69+
/>
70+
<label htmlFor="studentid">Is it React JS?</label>
71+
</div>
72+
73+
<textarea
74+
name="comment"
75+
id=""
76+
cols="30"
77+
rows="5"
78+
placeholder="write about yourself"
79+
onChange={inputChange}
80+
value={userData.comment}
81+
/>
82+
83+
<fieldset>
84+
<legend>Select your Tech</legend>
85+
<div className="clstat">
86+
<input
87+
type="radio"
88+
id="class10"
89+
name="class"
90+
onChange={inputChange}
91+
value="class React"
92+
checked={userData.class === "class React"}
93+
/>
94+
<label htmlFor="class10">Class React</label>
95+
</div>
96+
<div className="clstat">
97+
<input
98+
type="radio"
99+
id="class11"
100+
name="class"
101+
onChange={inputChange}
102+
value="class JavaScript"
103+
checked={userData.class === "class JavaScript"}
104+
/>
105+
<label htmlFor="class11">Class JavaScript</label>
106+
</div>
107+
<div className="clstat">
108+
<input
109+
type="radio"
110+
id="class12"
111+
name="class"
112+
onChange={inputChange}
113+
value="Class Typescript"
114+
checked={userData.class === "Class Typescript"}
115+
/>
116+
<label htmlFor="class12">Class Typescript</label>
117+
</div>
118+
</fieldset>
119+
120+
<label className="chooseclass" htmlFor="choose">
121+
Choose your favourite color &rarr;
122+
</label>
123+
<select
124+
name="chooseColor"
125+
id="choose"
126+
onChange={inputChange}
127+
value={userData.chooseColor}
128+
>
129+
<option>--choose--</option>
130+
<option value="Red">Red</option>
131+
<option value="Green">Green</option>
132+
<option value="Blue">Blue</option>
133+
<option value="White">White</option>
134+
</select>
135+
<button onClick={submitClick}>Submit Now</button>
136+
</form>
137+
138+
<div className="terminal" id="terminal">
139+
<div className="time" id="time" onClick={closeTerminal}>X</div>
140+
<p className="openTerminal">
141+
Open the developer tool and see the terminal
142+
</p>
143+
</div>
144+
</div>
145+
);
146+
}
147+
148+
// Thanks for watching this video
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react"
2+
import ReactDOM from "react-dom/client"
3+
import App from "./App"
4+
5+
ReactDOM.createRoot(document.getElementById("root")).render(
6+
<React.StrictMode>
7+
<App/>
8+
</React.StrictMode>
9+
)
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [react()],
7+
})

0 commit comments

Comments
(0)

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