Skip to content

Commit 6bf320f

Browse files
nerdjfpbnerdjfpb
committed
Day 9
1 parent 82ca7b7 commit 6bf320f

File tree

6 files changed

+253
-261
lines changed

6 files changed

+253
-261
lines changed

‎All Projects/counterProject.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useState } from 'react'
2+
import { StyleSheet, View, Text, Button } from 'react-native'
3+
4+
export default function CounterProject() {
5+
const [counter, setCounter] = useState(0)
6+
return (
7+
<View style={styles.container}>
8+
<Text style={styles.heading}>{counter}</Text>
9+
<Button
10+
title='Increase +'
11+
color='#014294'
12+
onPress={() => setCounter(counter + 1)}
13+
/>
14+
<Button
15+
title='Decrease - '
16+
color='#ff6160'
17+
onPress={() => setCounter(counter - 1)}
18+
disabled={counter < 1 ? true : false}
19+
/>
20+
<Button
21+
title='Reset to Zero'
22+
color='#fdc5c8'
23+
onPress={() => setCounter(0)}
24+
disabled={counter < 1 ? true : false}
25+
/>
26+
</View>
27+
)
28+
}
29+
30+
const styles = StyleSheet.create({
31+
container: {
32+
flex: 1,
33+
backgroundColor: '#2a2b3d',
34+
padding: 30,
35+
justifyContent: 'center',
36+
},
37+
heading: {
38+
color: '#ff6160',
39+
fontSize: 100,
40+
textAlign: 'center',
41+
},
42+
})

‎All Projects/simpleTodoApp.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React, { useState } from 'react'
2+
import {
3+
StyleSheet,
4+
View,
5+
Text,
6+
TextInput,
7+
Button,
8+
FlatList,
9+
} from 'react-native'
10+
11+
export default function simpleTodoApp() {
12+
const [todo, setTodo] = useState([])
13+
const [todoInputValue, setTodoInputValueChange] = useState('')
14+
15+
const addTodo = () => {
16+
if (todoInputValue.length > 0) {
17+
const singleTodo = {
18+
id: todo.length + 1,
19+
task: todoInputValue,
20+
}
21+
setTodo([...todo, singleTodo])
22+
setTodoInputValueChange('')
23+
}
24+
}
25+
26+
const deleteTodo = (deleteId) => {
27+
const newTodo = todo.filter((item) => item.id !== deleteId)
28+
setTodo(newTodo)
29+
}
30+
31+
return (
32+
<View style={styles.container}>
33+
<View style={styles.heading}>
34+
<Text style={styles.title}> Simple Todo App</Text>
35+
</View>
36+
<View style={styles.todoContainer}>
37+
<TextInput
38+
style={styles.addTodoInput}
39+
onChangeText={(text) => setTodoInputValueChange(text)}
40+
value={todoInputValue}
41+
placeholder='Add task'
42+
/>
43+
<Button title='Add' color='#4374c1' onPress={() => addTodo()} />
44+
<FlatList
45+
data={todo}
46+
renderItem={({ item }) => (
47+
<View style={styles.todoListing}>
48+
<Text style={styles.todoListItem}>{item.task}</Text>
49+
<Button
50+
title='Delete'
51+
color='#fc6064'
52+
onPress={() => deleteTodo(item.id)}
53+
/>
54+
</View>
55+
)}
56+
keyExtractor={(item) => item.id}
57+
/>
58+
</View>
59+
</View>
60+
)
61+
}
62+
63+
const styles = StyleSheet.create({
64+
container: {
65+
flex: 1,
66+
backgroundColor: '#f6fbfe',
67+
},
68+
heading: {
69+
marginTop: 50,
70+
padding: 20,
71+
backgroundColor: '#010535',
72+
textAlign: 'center',
73+
},
74+
title: {
75+
fontWeight: '700',
76+
textTransform: 'uppercase',
77+
color: '#fff',
78+
fontSize: 25,
79+
},
80+
todoContainer: {
81+
marginTop: 30,
82+
padding: 30,
83+
},
84+
addTodoInput: {
85+
height: 40,
86+
padding: 5,
87+
color: '#000',
88+
marginBottom: 10,
89+
borderBottomWidth: 2,
90+
borderBottomColor: 'grey',
91+
},
92+
todoListing: {
93+
backgroundColor: '#010535',
94+
marginTop: 30,
95+
flex: 1,
96+
flexDirection: 'row',
97+
justifyContent: 'space-between',
98+
padding: 20,
99+
borderRadius: 5,
100+
},
101+
todoListItem: {
102+
color: '#fff',
103+
fontSize: 25,
104+
},
105+
})

‎App.js‎

Lines changed: 88 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,105 @@
11
import React, { useState } from 'react'
2-
import { StyleSheet, View, Text, Button } from 'react-native'
2+
import {
3+
StyleSheet,
4+
View,
5+
Text,
6+
TextInput,
7+
Button,
8+
FlatList,
9+
} from 'react-native'
310

411
export default function App() {
5-
const [counter, setCounter] = useState(0)
12+
const [todo, setTodo] = useState([])
13+
const [todoInputValue, setTodoInputValueChange] = useState('')
14+
15+
const addTodo = () => {
16+
if (todoInputValue.length > 0) {
17+
const singleTodo = {
18+
id: todo.length + 1,
19+
task: todoInputValue,
20+
}
21+
setTodo([...todo, singleTodo])
22+
setTodoInputValueChange('')
23+
}
24+
}
25+
26+
const deleteTodo = (deleteId) => {
27+
const newTodo = todo.filter((item) => item.id !== deleteId)
28+
setTodo(newTodo)
29+
}
30+
631
return (
732
<View style={styles.container}>
8-
<Text style={styles.heading}>{counter}</Text>
9-
<Button
10-
title='Increase +'
11-
color='#014294'
12-
onPress={() => setCounter(counter + 1)}
13-
/>
14-
<Button
15-
title='Decrease - '
16-
color='#ff6160'
17-
onPress={() => setCounter(counter - 1)}
18-
disabled={counter < 1 ? true : false}
19-
/>
20-
<Button
21-
title='Reset to Zero'
22-
color='#fdc5c8'
23-
onPress={() => setCounter(0)}
24-
disabled={counter < 1 ? true : false}
25-
/>
33+
<View style={styles.heading}>
34+
<Text style={styles.title}> Simple Todo App</Text>
35+
</View>
36+
<View style={styles.todoContainer}>
37+
<TextInput
38+
style={styles.addTodoInput}
39+
onChangeText={(text) => setTodoInputValueChange(text)}
40+
value={todoInputValue}
41+
placeholder='Add task'
42+
/>
43+
<Button title='Add' color='#4374c1' onPress={() => addTodo()} />
44+
<FlatList
45+
data={todo}
46+
renderItem={({ item }) => (
47+
<View style={styles.todoListing}>
48+
<Text style={styles.todoListItem}>{item.task}</Text>
49+
<Button
50+
title='Delete'
51+
color='#fc6064'
52+
onPress={() => deleteTodo(item.id)}
53+
/>
54+
</View>
55+
)}
56+
keyExtractor={(item) => item.id}
57+
/>
58+
</View>
2659
</View>
2760
)
2861
}
2962

3063
const styles = StyleSheet.create({
3164
container: {
3265
flex: 1,
33-
backgroundColor: '#2a2b3d',
34-
padding: 30,
35-
justifyContent: 'center',
66+
backgroundColor: '#f6fbfe',
3667
},
3768
heading: {
38-
color: '#ff6160',
39-
fontSize: 100,
69+
marginTop: 50,
70+
padding: 20,
71+
backgroundColor: '#010535',
4072
textAlign: 'center',
4173
},
74+
title: {
75+
fontWeight: '700',
76+
textTransform: 'uppercase',
77+
color: '#fff',
78+
fontSize: 25,
79+
},
80+
todoContainer: {
81+
marginTop: 30,
82+
padding: 30,
83+
},
84+
addTodoInput: {
85+
height: 40,
86+
padding: 5,
87+
color: '#000',
88+
marginBottom: 10,
89+
borderBottomWidth: 2,
90+
borderBottomColor: 'grey',
91+
},
92+
todoListing: {
93+
backgroundColor: '#010535',
94+
marginTop: 30,
95+
flex: 1,
96+
flexDirection: 'row',
97+
justifyContent: 'space-between',
98+
padding: 20,
99+
borderRadius: 5,
100+
},
101+
todoListItem: {
102+
color: '#fff',
103+
fontSize: 25,
104+
},
42105
})

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@
1212
"react": "~16.9.0",
1313
"react-dom": "~16.9.0",
1414
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
15-
"react-native-web": "~0.11.7"
15+
"react-native-web": "~0.11.7",
16+
"uuid": "^7.0.3"
1617
},
1718
"devDependencies": {
18-
"babel-preset-expo": "~8.0.0",
19-
"@babel/core": "^7.0.0"
19+
"@babel/core": "^7.0.0",
20+
"babel-preset-expo": "~8.0.0"
2021
},
2122
"private": true
2223
}

‎readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@ You can check the commits to find the part by part codes.
2121
# Projects
2222

2323
- [Day 8 - Counter App using React Native](https://www.instagram.com/p/B-orhNBAfmj/)
24+
- [Day 9 - Simple Todo using React Native](https://www.instagram.com/p/B-uAkv9Aj-y/)

0 commit comments

Comments
 (0)