Untitled

import { useState } from 'react';
import './App.css';


export default function App() {
    const [addItem, setAddItem] = useState([]);
    
    function handleAddItem(item) {
    setAddItem((items) => [...items, item]);
  }

  function handleDelete (itemId){
    setAddItem((items) => items.filter((item) => item.id !== itemId));  
  }

  function handleToggleItems (itemId){
    setAddItem((items) => items.map((item) => item.id === itemId ? {...item, packed: !item.packed} : item));
  }

  const itemsList = addItem.length;
  const itemsPacked = addItem.filter((item) => item.packed).length;

  function handleClearList(){
    setAddItem([]);
  }

  return (
    <div className="app">
      <Logo />
      <Form onAddItems = {handleAddItem}/>
      <PackingList items ={addItem} handleDelete={handleDelete} handleToggleItems = {handleToggleItems} handleClearList = {handleClearList} />
      <Stats itemsList = {itemsList} itemsPacked = {itemsPacked}/> 
    </div>  
  )
}

function Logo() {
  return (
    <h1>Far Away</h1>
  )
}

function Form({onAddItems}) {
  const [EnterItem, setEnterItem] = useState('');
  const [quantity, setquantity] = useState(1);

  return (
    <form className="add-form" onSubmit={handleSubmit}> 
      <h2>What do u need for trip</h2>

      <select 
        value={quantity}
        onChange={(e)=> setquantity(Number(e.target.value))}
      >
        {Array.from({length: 20}, (_, i) => i + 1).map((num) => (
          <option value={num} key={num}>{num}</option>
        ))} 
      </select>
      
      <input 
        type="text" 
        id='item'
        name="item"
        placeholder="Item..." 
        value={EnterItem}
        onChange={(e) => setEnterItem(e.target.value)} 
      /> 
      <button > Add </button>
    </form>
  )

   function handleSubmit(e) {
    e.preventDefault();
    if (!EnterItem) return;
    console.log(EnterItem, quantity);
    
    const newItem = {name : EnterItem,quantity, packed: false, id: Date.now()};
    console.log(newItem);
    onAddItems(newItem);

    setEnterItem('');
    setquantity(1); 
  }
}

function PackingList({items, handleDelete,handleToggleItems,handleClearList}) {
  return (
    <div className="list">
      <ol>        {items.map((item) => (
          <Item item={item} handleDelete={handleDelete} handleToggleItems={handleToggleItems} />  
        ))}
      </ol>
      <button onClick={handleClearList} className='clear'> Clear List </button>
    </div>  
  )
}

function Item({item,handleDelete,handleToggleItems}){
  return (
    <li>
      <input type="checkbox" value={item.packed} onChange={() => handleToggleItems(item.id)}/>
      <span style={item.packed ? { textDecoration: 'line-through' } : {}}>
         -{item.quantity}  {item.name} 
      </span>
      <button style={{background: '#000000'}} onClick={() => handleDelete(item.id)} > ❌ </button>
    </li>
  );
}

function Stats({itemsList,itemsPacked}) {
  return (
    <footer className="stats">
      <em>You have {itemsList} items on Your list, and you added {itemsPacked} (%{(itemsPacked)/(itemsList)*100})</em>
    </footer>
  )
}