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 4d9a8c3

Browse files
form added
1 parent 94c915c commit 4d9a8c3

File tree

6 files changed

+132
-31
lines changed

6 files changed

+132
-31
lines changed

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
1111
-->
1212
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
1414
<!--
1515
Notice the use of %PUBLIC_URL% in the tags above.
1616
It will be replaced with the URL of the `public` folder during the build.

‎src/ActionTypes/index.js

Whitespace-only changes.

‎src/App.css

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,30 @@
22
text-align: center;
33
}
44

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height:40vmin;
5+
.btn-file {
6+
position: relative;
7+
overflow: hidden;
88
}
9-
10-
.App-header {
11-
background-color: #282c34;
12-
min-height: 100vh;
13-
display: flex;
14-
flex-direction: column;
15-
align-items: center;
16-
justify-content: center;
17-
font-size: calc(10px + 2vmin);
18-
color: white;
9+
.btn-file input[type=file] {
10+
position: absolute;
11+
top: 0;
12+
right: 0;
13+
min-width: 100%;
14+
min-height: 100%;
15+
font-size: 100px;
16+
text-align: right;
17+
filter: alpha(opacity=0);
18+
opacity: 0;
19+
outline: none;
20+
background: white;
21+
cursor: inherit;
22+
display: block;
1923
}
2024

21-
.App-link{
22-
color:#61dafb;
25+
#img-upload{
26+
width:100%;
2327
}
2428

25-
@keyframes App-logo-spin {
26-
from {
27-
transform: rotate(0deg);
28-
}
29-
to {
30-
transform: rotate(360deg);
31-
}
29+
.marginTop{
30+
margin-top: 10px;
3231
}

‎src/App.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { Component } from 'react';
22
import './App.css';
3+
import Card from './Components/Card'
4+
import Form from './Components/Form'
35

46

57
// Redux Persist takes your Redux state object and saves it to persisted storage.
@@ -8,8 +10,8 @@ import './App.css';
810
class App extends Component {
911
render() {
1012
return (
11-
<div className="App">
12-
<Card />
13+
<div className="">
14+
<Form />
1315
</div>
1416
);
1517
}

‎src/Components/Card.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ class Card extends React.Component{
99

1010
render(){
1111
return(
12-
<div class="card" style="width: 18rem;">
13-
<img class="card-img-top" src="..." alt="Card image cap" />
14-
<div class="card-body">
15-
<h5 class="card-title">Card title</h5>
16-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
17-
<a href="#" class="btn btn-primary">Go somewhere</a>
12+
<div className="card" style={{"width": "18rem","margin": "10px"}}>
13+
<img className="card-img-top" src="..." alt="Card image cap" />
14+
<div className="card-body">
15+
<h5 className="card-title">Card title</h5>
16+
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
17+
<a href="#" className="btn btn-primary">Go somewhere</a>
1818
</div>
1919
</div>
2020
)

‎src/Components/Form.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React, { Component } from "react";
2+
import '../App.css';
3+
4+
class Form extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
file: "",
9+
previewUrl: 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png',
10+
title: "",
11+
text: ""
12+
};
13+
14+
this.handleImageChange = this.handleImageChange.bind(this);
15+
this.handleSubmit = this.handleSubmit.bind(this);
16+
}
17+
18+
handleSubmit(e) {
19+
e.preventDefault();
20+
console.log('this',this.state);
21+
}
22+
23+
handleImageChange(e) {
24+
e.preventDefault();
25+
26+
let reader = new FileReader();
27+
let file = e.target.files[0];
28+
29+
reader.onloadend = () => {
30+
this.setState({
31+
file: file,
32+
previewUrl: reader.result,
33+
});
34+
};
35+
36+
reader.readAsDataURL(file);
37+
}
38+
39+
render() {
40+
let { previewUrl } = this.state;
41+
const { text, title } = this.state;
42+
43+
44+
return (
45+
46+
<div className = "container">
47+
48+
<div className = "col-lg-4 marginTop">
49+
<div className ="col-md-8">
50+
<div className ="form-group">
51+
52+
<div className = "marginTop">
53+
<label htmlFor="title">Title:</label>
54+
<input type="text" className = "form-control" value = { title } onChange = { e => this.setState({ title: e.target.value })}/>
55+
</div>
56+
57+
<div className = "marginTop">
58+
<label htmlFor="text">Text:</label>
59+
<input type="text" className = "form-control" value = { text } onChange = { e => this.setState({ text: e.target.value })}/>
60+
</div>
61+
62+
<div className = "marginTop" >
63+
<img src = { this.state.previewUrl } className = "rounded" width = "100px" alt="Cinque Terre" />
64+
</div>
65+
66+
<div className = "marginTop">
67+
<label>Upload Image: </label>
68+
<div className ="input-group">
69+
<span className ="input-group-btn">
70+
<span className ="btn btn-default btn-file">
71+
Browse... <input type="file" onChange = { this.handleImageChange } className ="form-control" />
72+
</span>
73+
</span>
74+
<input type="text" className="form-control" readOnly />
75+
</div>
76+
</div>
77+
<button type="submit" onClick = { this.handleSubmit } className ="btn btn-default marginTop">Submit</button>
78+
</div>
79+
</div>
80+
</div>
81+
82+
<div className = "marginTop ">
83+
<div className = "col-lg-7 cards">
84+
<div class="card" style= {{ "width": "18rem" }}>
85+
<img class="card-img-top img-responsive" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" alt="Card image cap" />
86+
<div class="card-body">
87+
<h5 class="card-title">Card title</h5>
88+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
89+
<a href="#" class="btn btn-primary">Go somewhere</a>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
95+
</div>
96+
);
97+
}
98+
}
99+
100+
export default Form;

0 commit comments

Comments
(0)

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