RN-Challenge - Jonathan Reginald

App.js

@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+import { View, Text, StyleSheet, KeyboardAvoidingView, Keyboard } from 'react-native'
+import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'
+
+import Todos from './components/Todos'
+
+export default App = () => {
+    const [todo, setTodo] = useState();
+    const [todoItems, setTodoItems] = useState([]);
+
+    const addTodoHandler = () => {
+        Keyboard.dismiss;
+        // dunno why keyboard.dimsiss doesn't work
+        setTodoItems([...todoItems, todo])
+        setTodo(null);
+    }
+
+    const completeTodo = (index) => {
+        let itemsCopy = [...todoItems]
+        itemsCopy.splice(index, 1)
+        setTodoItems(itemsCopy)
+    }
+
+    return (
+        <View style={styles.container}>
+            {/* To Do List */}
+            <View style={styles.todoWrapper}>
+                <Text style={styles.title}>To-Do List</Text>
+                <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+                <View style={styles.items}>
+                    {/* Todo Items */}
+                    {
+                        todoItems.map((item, index) => {
+                            return (
+                                <TouchableOpacity key={index} onPress={() => completeTodo(index)}>
+                                    <Todos text={item} />
+                                </TouchableOpacity>
+                            )
+                        })
+                    }
+                    {/* <Todos text={'Task 1'} /> */}
+                </View>
+            </View>
+            {/* write a todo */}
+            <KeyboardAvoidingView 
+                behavior={Platform.OS === "ios" ? "padding" : "height"}
+                style={styles.writeTodoWrapper}>
+                    <TextInput
+                        style={styles.input}
+                        placeholder={'Write a new task'} 
+                        value={todo}
+                        onChangeText={text => setTodo(text)}
+                    />
+                    <TouchableOpacity onPress={() => addTodoHandler()}>
+                        <View style={styles.addWrapper}>
+                            <Text style={styles.addText}>+</Text>
+                        </View>
+                    </TouchableOpacity>
+                </KeyboardAvoidingView>
+        </View>
+    )}
+
+const styles = StyleSheet.create({
+    container : {
+        flex: 1,
+        backgroundColor: 'rgb(231,245,255)',
+    }, 
+    todoWrapper : {
+        paddingTop: 80,
+        paddingHorizontal: 20,
+    }, 
+    title : {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: 'rgb(0,65,129)'
+    }, 
+    separator: {
+        marginVertical: 30,
+        height: 1,
+        width: '80%',
+      },
+    items : {
+        marginTop: 30,
+    },
+    writeTodoWrapper: {
+        position: 'absolute',
+        bottom: 60,
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center'
+    },
+    input: {
+        paddingVertical: 15,
+        paddingHorizontal: 15,
+        paddingLeft: 20,
+        width: 250,
+        backgroundColor: '#fff',
+        borderRadius: 60,
+        borderColor: 'rgb(0,65,129)',
+        borderWidth: 1
+    },
+    addWrapper: {
+        width: 60,
+        height: 60,
+        borderRadius: 60,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgb(0,65,129)',
+        // borderColor: '#C0C0C0',
+        // borderWidth: 1
+    },
+    addText : {
+        fontWeight: 'bold',        
+        color: '#fff',
+    },
+})

README.md

@@ -7,7 +7,7 @@ This is a set of open ended challenges for you to show us your skills. Clone thi
 
 ## Instructions
 ### 1. Learn
-- Download the [MoneyHub App](http://onelink.to/x9xxwg). Try to understand how the features are implemented. If you join the team, you'll be the one making these features!
+- Download the [MoneyHub App](https://moneyhub.id/). Try to understand how the features are implemented. If you join the team, you'll be the one making these features!
 - Feel free to learn from any resources. [React Native Website](https://reactnative.dev), [YouTube](https://www.youtube.com/results?search_query=react+native+tutorial), etc. 
 - We have a udemy account you can borrow (reach out to [email protected]). This one is really good. Please reach out!
 - Understand how GitHub works. It's a standard tool in the industry. [GitHub Tutorial](https://guides.github.com/activities/hello-world/)
@@ -65,4 +65,21 @@ Your app should be able to complete these tasks:
 - Somehow make this boring app fun! show some crazy pokemon animation or something :P
 
 ## How to run the demo
-(REPLACE THIS WITH YOUR INSTRUCTIONS)
+1. Download or clone this repository,
+2. Open this folder with VS Code,
+3. On the terminal, use npm install,
+4. And then npm start,
+5. To open the app, you can use android/ios simulator if you have one, but I used expo app and scanned the QR code.
+This to-do application is so simple:
+1. Adding a task: type down what do you want to do in the text input below, and then tap the + button to add it
+2. Removing a task : When you're done with your task, simply tap the item that you want to delete.
+
+## Dev notes
+Things that I definitely want to learn and improve to this app:
+1. Edit a task
+2. Mark a task whether it is completed or not
+3. Implement a navigation so I can add more screens like task details
+4. Definitely want to learn firebase, because i tried using it here but it just doesn't work and I don't know why
+5. Learn backend in general
+6. AND make my app less boring
+

components/Todos.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+const Todos = (props) => {
+    return (
+        <View style={styles.item}>
+            <View style={styles.itemLeft}>
+                <View style={styles.square}></View>
+                <Text style={styles.itemText}>{props.text}</Text>
+            </View>
+            <View style={styles.circle}></View>
+        </View>
+    )
+}
+
+const styles=StyleSheet.create({
+    item : {
+        backgroundColor: '#fff',
+        padding: 15,
+        borderRadius: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 20
+    }, 
+    itemLeft : {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap'
+    },
+    itemText : {
+        maxWidth: '80%'
+    },
+    square: {
+        width: 24,
+        height: 24,
+        backgroundColor: 'rgb(255,73,104)',
+        opacity: 0.4,
+        borderRadius: 5,
+        marginRight: 15,
+    },
+    circle : {
+        width: 12,
+        height: 12,
+        borderColor: 'rgb(255,73,104)',
+        borderWidth: 2,
+        borderRadius: 5
+    }
+})
+
+export default Todos;