Shopping List

Functional Component

<!DOCTYPE html> 
<html> 

<head> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
</head> 

<body> 
<div id="app"></div> 
<script type="text/babel"> 

    const { useState } = React; 

    function ShoppingList() { 

      const [items, setItems] = useState([ 
        { itemName: 'item 1', quantity: 1, isSelected: false }, 
        { itemName: 'item 2', quantity: 3, isSelected: true }, 
        { itemName: 'item 3', quantity: 2, isSelected: false }, 
      ]); 

      const [inputValue, setInputValue] = useState('');  


      const addItem = () => { 
        const newItem = { 
          itemName: inputValue, 
          quantity: 1, 
          isSelected: false, 
        }; 
        const newItems = [...items, newItem]; 
        setItems(newItems); 
        setInputValue('');  
      }; 

      return ( 
        <div className='item-list'>  
          <h1>Display List</h1> 
          <input value={inputValue} 
            onChange={(event) => setInputValue(event.target.value)} 
            placeholder='Add an item...' 
          /> 
          <button onClick={addItem}>Add Item</button> 
          <br /><br /> 

          <table style={{'background-color': '#D6EEEE'}}> 
            <thead> 
              <tr> 
                <th style={{ 'width': '100px', 'text-align': 'left'}}>Name</th> 
                <th>Quantity</th> 
              </tr> 
            </thead> 
            <tbody> 
              {items && items.map(item => 
                <tr key={item.itemName}> 
                  <td>{item.itemName}</td> 
                  <td style={{ 'text-align': 'right' }}>{item.quantity}</td> 
                </tr> 
              )} 
            </tbody> 
          </table> 

        </div> 
      ); 
    }; 

    ReactDOM.render(<ShoppingList/>, document.getElementById('app'));  

  </script> 
</body> 

</html>

Sample Code

<!DOCTYPE html> 
<html> 

<head> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
</head> 

<body> 
<div id="app"></div> 
<script type="text/babel"> 

import React, { useState, useEffect } from 'react';  
import './index.css';  
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';  
import { faChevronRight, faChevronLeft, faCircle, faCheckCircle, faPlus } from '@fortawesome/free-solid-svg-icons';  

const ShoppingList = () => { 

  const [items, setItems] = useState([ 
     { itemName: 'item 1', quantity: 1, isSelected: false }, 
     { itemName: 'item 2', quantity: 3, isSelected: true }, 
     { itemName: 'item 3', quantity: 2, isSelected: false }, 
  ]); 

  const [inputValue, setInputValue] = useState('');  

  const [totalItemCount, setTotalItemCount] = useState(6); 

  const handleAddButtonClick = () => { 
     const newItem = { 
        itemName: inputValue, 
        quantity: 1, 
        isSelected: false, 
     }; 
     const newItems = [...items, newItem]; 
     setItems(newItems); 
     setInputValue('');  
     calculateTotal(); 
  }; 

  const handleQuantityIncrease = (index) => { 
     const newItems = [...items]; 
     newItems[index].quantity++; 
     setItems(newItems); 
     calculateTotal(); 
  }; 

  const handleQuantityDecrease = (index) => { 
     const newItems = [...items]; 
     newItems[index].quantity--; 
     setItems(newItems); 
     calculateTotal(); 
  }; 

  const toggleComplete = (index) => { 
     const newItems = [...items]; 
     newItems[index].isSelected = !newItems[index].isSelected; 
     setItems(newItems); 
  }; 

  const calculateTotal = () => { 
     const totalItemCount = items.reduce((total, item) => { 
        return total + item.quantity; 
     }, 0); 
     setTotalItemCount(totalItemCount); 
  }; 

  return ( 
    <div className='app-background'>  
      <div className='main-container'>  
        <div className='add-item-box'>  
           <input value={inputValue} 
                  onChange={(event) => setInputValue(event.target.value)} 
                  className='add-item-input'  
                  placeholder='Add an item...' 
           /> 
           <FontAwesomeIcon icon={faPlus} onClick={() => handleAddButtonClick()} /> 
        </div> 
        <div className='item-list'>  
           <div className='item-container'>  
              <div className='item-name' onClick={() => toggleComplete(index)}>  
              {item.isSelected ? ( 
              <> 
                <FontAwesomeIcon icon={faCheckCircle} /> 
                <span className='completed'>{item.itemName}</span>  
              </> 
              ) : ( 
              <> 
                <FontAwesomeIcon icon={faCircle} /> 
                <span>{item.itemName}</span> 
              </> 
              )} 
              </div> 
              <div className='quantity'>  
                 <button> 
                    <FontAwesomeIcon icon={faChevronLeft} onClick={() => handleQuantityDecrease(index)} /> 
                 </button> 
                 <span> {item.quantity} </span> 
                 <button> 
                    <FontAwesomeIcon icon={faChevronRight} onClick={() => handleQuantityIncrease(index)} /> 
                 </button> 
              </div> 
           </div> 
        </div> 
        <div className='total'>Total: {totalItemCount}</div>  
      </div> 
    </div> 
  ); 
}; 

ReactDOM.render( <ShoppingList/>, document.getElementById('app') );