Skip to content

Commit dd18167

Browse files
bobzirollbookercodes
bobziroll
authored and
bookercodes
committed
Initial commit
0 parents  commit dd18167

9 files changed

+239
-0
lines changed

Diff for: ‎App.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* Let's make it so our checkbox can actually mark our todo as complete or incomplete!
3+
* This challenge is a little more involved than some of the past ones. Check the comments
4+
* in the code for some help on accomplishing this one
5+
*
6+
* Challenge:
7+
* 1. Create an event handler in the App component for when the checkbox is clicked (which is an `onChange` event)
8+
* a. This method will be the trickest part. Check the comments in the stubbed-out method below for some pseudocode to help guide you through this part
9+
* 2. Pass the method down to the TodoItem component
10+
* 3. In the TodoItem component, make it so when the `onChange` event happens, it calls the `handleChange` method and passes the id of the todo into the function
11+
*/
12+
13+
import React from "react"
14+
import TodoItem from "./TodoItem"
15+
import todosData from "./todosData"
16+
17+
class App extends React.Component {
18+
constructor() {
19+
super()
20+
this.state = {
21+
todos: todosData
22+
}
23+
this.handleChange = this.handleChange.bind(this)
24+
}
25+
26+
handleChange(id) {
27+
this.setState(prevState => {
28+
const updatedTodos = prevState.todos.map(todo => {
29+
if (todo.id === id) {
30+
todo.completed = !todo.completed
31+
}
32+
return todo
33+
})
34+
return {
35+
todos: updatedTodos
36+
}
37+
})
38+
}
39+
40+
render() {
41+
const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
42+
43+
return (
44+
<div className="todo-list">
45+
{todoItems}
46+
</div>
47+
)
48+
}
49+
}
50+
51+
export default App

Diff for: ‎README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# title(){
2+
3+
return this.options.title || this.options.name;
4+
}
5+
6+
Quick start:
7+
8+
```
9+
$ yarn # npm install
10+
$ yarn build # npm run build
11+
````
12+
13+
## Development
14+
15+
Run Webpack in watch-mode to continually compile the JavaScript as you work:
16+
17+
```
18+
$ yarn watch # npm run watch
19+
```
20+
21+
## Supporting Scrimba
22+
23+
Since 2017, we have created over 20 free courses on Scrimba, and we're going to
24+
continue launching free courses. But to pay our bills, we have to charge once
25+
in a while. So if you've ever wanted to "give back" to Scrimba, you can do that by buying
26+
one of our paid courses
27+
28+
- [Become a professional React developer](https://scrimba.com/course/greact)
29+
- [The Responsive Web Design Bootcamp](https://scrimba.com/course/gresponsive)
30+
- [The Ultimate JavaScript Bootcamp](https://scrimba.com/course/gjavascript)
31+
32+
It would also mean the world to us if you share the courses.
33+
34+
Happy Coding!

Diff for: ‎TodoItem.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Challenge: Style the completed todo items differently from the incomplete items.
3+
*/
4+
5+
import React from "react"
6+
7+
function TodoItem(props) {
8+
return (
9+
<div className="todo-item">
10+
<input
11+
type="checkbox"
12+
checked={props.item.completed}
13+
onChange={() => props.handleChange(props.item.id)}
14+
/>
15+
<p>{props.item.text}</p>
16+
</div>
17+
)
18+
}
19+
20+
export default TodoItem

Diff for: ‎index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
3+
<link rel="stylesheet" href="style.css">
4+
</head>
5+
<body>
6+
<div id="root"></div>
7+
<script src="index.pack.js"></script>
8+
</body>
9+
</html>

Diff for: ‎index.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from "react"
2+
import ReactDOM from "react-dom"
3+
4+
import App from "./App"
5+
6+
ReactDOM.render(<App />, document.getElementById("root"))

Diff for: ‎package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "project",
3+
"dependencies": {
4+
"react": "16.4.0",
5+
"react-dom": "16.4.0"
6+
},
7+
"devDependencies": {
8+
"webpack": "^2.0",
9+
"babel-core": "^6.0",
10+
"babel-loader": "^7.0",
11+
"babel-preset-env": "*",
12+
"babel-preset-react": "*"
13+
},
14+
"scripts": {
15+
"build": "webpack",
16+
"watch": "webpack -w"
17+
}
18+
}

Diff for: ‎style.css

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body {
2+
background-color: whitesmoke;
3+
}
4+
5+
.todo-list {
6+
background-color: white;
7+
margin: auto;
8+
width: 50%;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
border: 1px solid #efefef;
13+
box-shadow:
14+
/* The top layer shadow */
15+
0 1px 1px rgba(0,0,0,0.15),
16+
/* The second layer */
17+
0 10px 0 -5px #eee,
18+
/* The second layer shadow */
19+
0 10px 1px -4px rgba(0,0,0,0.15),
20+
/* The third layer */
21+
0 20px 0 -10px #eee,
22+
/* The third layer shadow */
23+
0 20px 1px -9px rgba(0,0,0,0.15);
24+
padding: 30px;
25+
}
26+
27+
.todo-item {
28+
display: flex;
29+
justify-content: flex-start;
30+
align-items: center;
31+
padding: 30px 20px 0;
32+
width: 70%;
33+
border-bottom: 1px solid #cecece;
34+
font-family: Roboto, sans-serif;
35+
font-weight: 100;
36+
font-size: 15px;
37+
color: #333333;
38+
}
39+
40+
input[type=checkbox] {
41+
margin-right: 10px;
42+
font-size: 30px;
43+
}
44+
45+
input[type=checkbox]:focus {
46+
outline: 0;
47+
}

Diff for: ‎todosData.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const todosData = [
2+
{
3+
id: 1,
4+
text: "Take out the trash",
5+
completed: true
6+
},
7+
{
8+
id: 2,
9+
text: "Grocery shopping",
10+
completed: false
11+
},
12+
{
13+
id: 3,
14+
text: "Clean gecko tank",
15+
completed: false
16+
},
17+
{
18+
id: 4,
19+
text: "Mow lawn",
20+
completed: true
21+
},
22+
{
23+
id: 5,
24+
text: "Catch up on Arrested Development",
25+
completed: false
26+
}
27+
]
28+
29+
export default todosData

Diff for: ‎webpack.config.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
"output": {
3+
"filename": "[name].pack.js"
4+
},
5+
"module": {
6+
"rules": [
7+
{
8+
"use": {
9+
"loader": "babel-loader",
10+
"options": {
11+
"presets": [
12+
"babel-preset-env",
13+
"babel-preset-react"
14+
]
15+
}
16+
},
17+
"exclude": /node_modules/,
18+
"test": /\.js$/
19+
}
20+
]
21+
},
22+
"entry": {
23+
"index": "./index"
24+
}
25+
};

0 commit comments

Comments
 (0)