import React, { Component } from 'react';
class BigText extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
text: '',
summary: ''
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
return (
<div>
<div>
<h1 className="row px-2">Big Text Notification</h1>
<hr />
<div className="row px-1 py-2 animated fadeIn">
<div className="px-1" style={{ width:50 + '%' }}><br />
<div className="mb-1">
<input type="text"
className="form-control"
placeholder="Title"
name="title"
value={this.state.title}
onChange={this.handleInputChange}
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Text"
name="text"
value={this.state.text}
onChange={this.handleInputChange}
/>
</div>
<div className="mb-1">
<textarea
className="form-control"
placeholder="Summary"
name="summary"
value={this.state.summary}
onChange={this.handleInputChange}
/>
</div>
<br />
<div className="row px-2" >
<div>
<button className="nav-link btn btn-block btn-info">Save</button>
</div>
<div className="px-1">
<button className="nav-link btn btn-block btn-danger"> Cancel</button>
</div>
</div><br />
</div>
<div><br />
<div className="px-1">
<table className="table table-clear table-hover table-striped"
>
<tbody>
<tr>
<td>
<strong>
{this.state.title}
</strong><br />
{this.state.text} <br />{this.state.summary}<br />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default BigText;I plan to create a custom CSS design that wraps the input fields in a border resembling a smartphone image. This will be used in conjunction with a React JS application where the user's typed input is displayed within the styled phone component on the right side. Follow this link for the image I intend to use as the border: Smartphone Border Image