const { Component } = React; const Submit = styled.default.input` color: white; background: blue; border-radius: 5px; padding: 1em; font-weight: bold; outline: none; box-sizing: border-box; border: 0; &:hover { background: black; cursor: pointer; } ` const FormItem = styled.default.div` margin-top: 2em; ` const Input = styled.default.input` border: 0; outline: 0; font-size: 18px; border-bottom: 1px solid grey; &:hover { color: blue; border-bottom-color: blue; &::-webkit-input-placeholder { color: blue; } } &:focus { color: blue; &::-webkit-input-placeholder { color: blue; } } ` const Form = styled.default.form` padding: 2em; ` const Header = styled.default.div` background: black; padding: 1em; font-size: 0.75em; color: white; width: 100%; display: flex; align-items: center; ` const Container = styled.default.div` padding: 1em; font-size: 0.75em; width: 100%; height: 100%; padding: 0; ` const successKeyFrame = styled.keyframes` 0% { opacity:0; -webkit-transform: translateY(-100%); background: green; } 10% { opacity: 1; background: lightgreen; -webkit-transform: translateY(0%); } 90% { opacity: 1; background: lightgrey; } 100% { opacity:1; background: #f2f8fd; } `; const TaskList = styled.default.ul` width: 100%; margin-top: 2em; padding: 0; ` const TaskItem = styled.default.li` padding: 2em; width: 100%; display: block; background: #f2f2f2; &:nth-child(2n) { background-color: #f2f8fd; } animation: ${successKeyFrame} 2s ease-in-out 0s; ` const rotate360 = styled.keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; const Rotate = styled.default.div` display: inline-block; animation: ${rotate360} 2s linear infinite; padding: 2rem 1rem; font-size: 1.2rem; `; const removeItem = (items, i) => items.slice(0, i-1).concat(items.slice(i, items.length)) class App extends React.Component { constructor(props) { super(props); this.state = {value: '', tasks: ["Make a Todo list with Styled Components", "Learn CSS Grids"]}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.handleRemove = this.handleRemove.bind(this); } handleChange(e) { this.setState({ [e.target.name]: e.target.value }); } handleSubmit(event) { event.preventDefault(); this.setState({ tasks: [...this.state.tasks, this.state.value], value:'' }) } handleRemove(index) { const tasks = this.state.tasks; const removedItem = tasks.splice(index, 1) this.setState({ tasks }) } render() { return (

🔥

Todo List

{this.state.tasks && this.state.tasks.length > 0 ? this.state.tasks.map((task, index) => ( this.handleRemove(index)} key={index}>{task}) ) :

No Tasks

}

); } } ReactDOM.render(, document.getElementById("root"));

Jeff Robertson

Styled Components Todo List