React

by nhupham95

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<div id="app"></div>

CSS

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.flex {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto
}

@media (max-width:991.98px) {
  .padding {
    padding: 1.5rem
  }
}

@media (max-width:767.98px) {
  .padding {
    padding: 1rem
  }
}

.padding {
  padding: 5rem
}

.card {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none
}

.pl-3,
.px-3 {
  padding-left: 1rem !important
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #d2d2dc;
  border-radius: 0
}

.pr-3,
.px-3 {
  padding-right: 1rem !important
}

.card .card-body {
  padding: 1.25rem 1.75rem
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem
}

.card .card-title {
  color: #000000;
  margin-bottom: 0.625rem;
  text-transform: capitalize;
  font-size: 40px;
  font-weight: 500
}

.add-items {
  margin-bottom: 1.5rem;
  overflow: hidden
}

.d-flex {
  display: flex !important
}

.add-items input[type="text"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
  background: transparent
}

.form-control {
  border: 1px solid #f3f3f3;
  font-weight: 400;
  font-size: 0.875rem
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.875rem 1.375rem;
  font-size: 1rem;
  line-height: 1;
  color: #495057;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 2px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}

.add-items .btn {
  margin-left: .5rem
}

.btn {
  font-size:...

React

class TodoList extends React.Component {
    render () {
        const items = this.props.items.map((item, index) => {
            return (
                <TodoListItem key={index} item={item} index={index} removeItem={this.props.removeItem} markTodoDone={this.props.markTodoDone} />
            );
        });
        return (
            <div className="list-wrapper">
                <ul className="d-flex flex-column-reverse todo-list"> {items} </ul>
            </div>
        );
    }
}

class TodoListItem extends React.Component {
    constructor(props) {
        super(props);
        this.onClickClose = this.onClickClose.bind(this);
        this.onClickDone = this.onClickDone.bind(this);
    }
    onClickClose = () => {
        const confirmDelete = window.confirm('Are you sure?');
        if (confirmDelete) {
            const index = parseInt(this.props.index);
            this.props.removeItem(index);
        }
    }
    onClickDone = () => {
        const index = parseInt(this.props.index);
        this.props.markTodoDone(index);
    }
    render () {
        const todoClass = this.props.item.completed ?
            "form-check-label completed-event" : "form-check-label";
        return(
            <li>
                <div className="form-check">
                    <label className={todoClass}>{this.props.item.title}
                        <input type="checkbox" className="checkbox" checked={this.props.item.completed} onChange={this.onClickDone}/>
                        <i className="input-helper" />
                    </label>
                </div>
                <i className="remove fas fa-trash" onClick={this.onClickClose}></i>
            </li>
        );
    }
}

class TodoForm extends React.Component {
    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
        this.state = {
            event: ''
        };
    }

    changeEventText = e => {
        const {value} = e.target;
       ...