Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Cart

    Uploaded by

    umermunir414

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Cart

    Uploaded by

    umermunir414
    2 views3 pages

    Original Title

    cart

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    2 views3 pages

    Cart

    Uploaded by

    umermunir414

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 3

    import {

    Text,
    View,
    StyleSheet,
    TouchableOpacity,
    TextInput,
    } from 'react-native';
    import { useState } from 'react';

    export default function App() {


    let [items, setItems] = useState([0, 0, 0]);

    const increment = (i) => {


    let copyAry = [...items];
    copyAry[i]++;
    setItems(copyAry);
    };
    const decrement = (i) => {
    let copyAry = [...items];
    copyAry[i]--;
    setItems(copyAry);
    };
    const getTotal = () => {
    let sum = 0;
    for (let p = 0; p < items.length; p++) {
    sum = sum + items[p];
    }
    return sum;
    };
    const hndlClear = () => {
    setItems(items.map((_) => 0));
    };
    const hndlDld = (i) => {
    setItems(items.filter((_, index) => index !== i));
    };
    return (
    <View>
    <TextInput style={styles.input}></TextInput>
    <View style={styles.temp}>
    <TouchableOpacity style={styles.touchbtn}>Add Item</TouchableOpacity>
    </View>
    <View style={styles.temp}>
    <Text style={styles.totalItemsContainer}>
    Cart Items (
    {
    // items.reduce((sum, x) => sum + x, 0)
    getTotal()
    }
    )
    </Text>
    </View>
    <View style={styles.temp}>
    <TouchableOpacity style={styles.touchbtn} onPress={() => hndlClear()}>
    Clear Cart
    </TouchableOpacity>
    </View>
    <Text style={styles.maintxt}>Items in Cart</Text>
    {items.map((x, i) => (
    <View style={styles.listview}>
    <Text style={{ fontWeight: 'bold' }}>Item : {i + 1}</Text>
    <TouchableOpacity
    style={styles.roundbtn}
    onPress={() => decrement(i)}
    disabled={x === 0}>
    -
    </TouchableOpacity>
    <Text>{x}</Text>
    <TouchableOpacity
    style={styles.roundbtn}
    onPress={() => increment(i)}>
    +
    </TouchableOpacity>
    <TouchableOpacity style={styles.touchbtn} onPress={() => hndlDld(i)}>
    Delete
    </TouchableOpacity>
    </View>
    ))}
    </View>
    );
    }

    const styles = StyleSheet.create({


    temp: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    },
    input: {
    borderWidth: 2,
    Width: '50vw',
    padding: 15,
    borderColor: 'rgb(205, 92, 92)',
    borderRadius: 15,
    margin: 5,
    },
    touchbtn: {
    width: '30vw',
    backgroundColor: 'rgb(205, 92, 92)',
    color: 'white',
    padding: 10,
    textAlign: 'center',
    borderRadius: 15,
    fontWeight: 'bold',
    borderWidth: 3,
    borderColor: 'rgb(104, 36, 56)',
    },
    totalItemsContainer: {
    backgroundColor: 'rgb(255, 160, 122)',
    textAlign: 'center',
    color: 'white',
    fontWeight: 'bold',
    fontSize: 'larger',
    width: '90vw',
    padding: 15,
    borderColor: 'rgb(205, 92, 92)',
    borderWidth: 3,
    margin: 15,
    borderRadius: 5,
    },
    maintxt: {
    marginTop: 10,
    fontSize: 'larger',
    fontWeight: 'bold',
    paddingLeft: 15,
    },
    roundbtn: {
    width: 30,
    height: 30,
    backgroundColor: 'rgb(205, 92, 92)',
    color: 'white',
    borderRadius: 25,
    textAlign: 'center',
    fontSize: 25,
    },
    listview: {
    flexDirection: 'row',
    gap: 15,
    alignItems: 'center',
    padding: 10,
    borderWidth: 2,
    marginTop: 10,
    width: '70vw',
    marginLeft: 10,
    backgroundColor: 'rgb(254, 245, 231)',
    borderRadius: 10,
    },
    });

    You might also like