Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="store-background"></div>

<main class="shopping-app">
  <div id="iphone-info">
    <div id="time">0:00</div>
    <ul id="icons">
      <li><i class="fas fa-signal"></i></li>
      <li><i class="fas fa-wifi"></i></li>
      <li><i class="fas fa-battery-three-quarters"></i></li>
    </ul>
    <i class="read-me-button fa fa-ellipsis-v"></i>
  </div>

  <section class="screen list-page active">
    <aside class="app-module">
      <div class="app-module-content">
        <h1 class="module-header">Header</h1>
        <p class="module-content">Content</h1>
      </div>
    </aside>

    <div class="screen-content">
      <div class="user-info">
        <div id="go-to-cart" class="shopping-cart">
          <i class="cart-icon fa fa-shopping-cart"></i>
          <p class="shopping-cart-count">0</p>
        </div>
      </div>

      <img class="logo" alt="logo" src="https://pngimage.net/wp-content/uploads/2018/06/store-logo-png-1.png" />

      <div class="add-item-container">
        <i class="fa fa-shopping-bag"></i>
        <input id="add-item-input" type="text" placeholder="Add to list" />
        <button class="button add-item-button"><i class="fa fa-plus"></i></button>
      </div>

      <nav class="app-nav">
        <ul class="app-nav-container">
          <li id="shopping-list-button" class="app-nav-item active"><i class="fa fa-list-ol"></i>Shopping List</li>
          <li id="search-store-button" class="app-nav-item"><i class="fa fa-store"></i>Search Store</li>
          <li id="shopping-cart-button" class="app-nav-item"><i class="fa fa-shopping-cart"></i>View Cart</li>
        </ul>
      </nav>

      <section id="pages" class="page-one">

        <!-- Shopping List Screen Content -->
        <div id="shopping-list-screen">
          <ul id="shopping-list" class="list-section active">
          <li class="list-item hot" draggable="true">coffee beans <span class="price">$16.25</span></li>
          <li class="list-item hot" draggable="true">chicken breast <span class="price">$16.25</span></li>
          <li class="list-item hot" draggable="true">bike gloves <span class="price">$16.25</span></li>
          <li class="list-item hot" draggable="true">rooibos tea <span class="price">$16.25</span></li>
          <li class="list-item hot" draggable="true">new computer <span class="price">$16.25</span></li>
          <li class="list-item hot" draggable="true">Nintendo Switch + BOTW <span class="price">$16.25</span></li>
        </ul>
<!--           <div class="error-message">No items found in your list. Add some above.</div> -->
          <div class="button-container">
          <button class="button empty-cart-button">
      Empty cart
    </button>
          <div class="button-divider"></div>
          <button class="button delete-all-button">
      Delete list
    </button>
          <div class="button-divider"></div>
          <button class="button reset-list-button">
      Reset all
    </button>
        </div>
        </div>

        <!-- Search Store Screen Content -->
        <div id="store-search" class="list-section">
          <div class="store-filter-container">
            <p class="search-results">
              <!--               <span class="search-query-quantity"></span> results for: <span class="search-query-result"></span> -->
            </p>
            <div class="store-filter-tools">
              <select class="price-filter">
                <option value="rel">Relevance</option>
                <option value="low">Lowest price</option>
                <option value="high">Highest price</option>
              </select>
              <i class="fa fa-th store-view"></i>
            </div>
          </div>
          <ul id="store-items" class="store-items grid">
            <!-- Coffee -->
            <li class="store-list-item" data-item-type="coffee">
              <div class="store-list-item-img-container">
                <img src="https://images-na.ssl-images-amazon.com/images/I/81P2cJ8QrIL._AC_UL320_SR172,320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Wicked Joe Bella Maria coffee beans, 12 oz.</p>
                <p class="store-list-item-price">$9.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="coffee">
              <div class="store-list-item-img-container">
                <img src="https://www.vitacost.com/Images/Products/500/Wicked-Joe/Wicked-Joe-Organic-Ground-Coffee-Dark-Roast-Wicked-Italian-873562001866.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Wicked Joe Wicked Italian coffee beans, 12 oz.</p>
                <p class="store-list-item-price">$10.59</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item selected" data-item-type="coffee">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/81A1wMoersL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Wicked Joe Big House coffee beans, 12 oz.</p>
                <p class="store-list-item-price">$8.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="coffee">
              <div class="store-list-item-img-container">
                <img src="https://ship.kroger.com/img/Products/500/Wicked-Joe/Wicked-Joe-Organic-Ground-Coffee-Medium-Roast-Sumatra-873562000906.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Wicked Joe Sumatra coffee beans, 12 oz.</p>
                <p class="store-list-item-price">$9.79</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="coffee">
              <div class="store-list-item-img-container">
                <img src="https://images-na.ssl-images-amazon.com/images/I/81Cp9-9O4cL._AC_UL320_SR172,320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Wicked Joe Wicked French coffee beans, 12 oz.</p>
                <p class="store-list-item-price">$10.29</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="coffee">
              <div class="store-list-item-img-container">
                <img src="https://ship.kroger.com/img/Products/500/Wicked-Joe/Wicked-Joe-Organic-Decaf-Ground-Coffee-Dark-Roast-Wicked-French-873562000913.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Wicked Joe Wicked French Decaf coffee beans, 12 oz.</p>
                <p class="store-list-item-price">$10.29</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>

            <!-- Protein -->
            <li class="store-list-item" data-item-type="protein">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71K5dv0r50L._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Musclepharm Combat Chocolate Protein Powder, 64 oz</p>
                <p class="store-list-item-price">$40.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="protein">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71MP6StSJiL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Beyond Raw ISO-Peptide Anabolic Protein Powder, 30 servings</p>
                <p class="store-list-item-price">$89.00</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="protein">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71C+RqPviNL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">100% Whey Protein, 2 lb.</p>
                <p class="store-list-item-price">$29.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="protein">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71pTf0qr-HL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Optimum Nutrition 100% Whey Gold Standard, 2 lb.</p>
                <p class="store-list-item-price">$42.89</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="protein">
              <div class="store-list-item-img-container">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91ruQZ2T3jL._SX522_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Nutrabio Classic Whey Protein Powder, 5 lb.</p>
                <p class="store-list-item-price">$59.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="protein">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/51w9jfT4AxL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Royal Whey Protein Isolate, 5 lb.</p>
                <p class="store-list-item-price">$89.00</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>

            <!-- Chicken -->
            <li class="store-list-item" data-item-type="chicken">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/81W5RmJiQPL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Omaha Steaks 8 Boneless Chicken Breasts, 2 lb. pkg.</p>
                <p class="store-list-item-price">$24.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="chicken">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/41bUWP1d3IL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Tyson Red Label, Fully Cooked Grilled Chicken Breast, 40 pieces</p>
                <p class="store-list-item-price">$86.78</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="chicken">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/81tqUd4VXUL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Omaha Steaks 8 Italian Chicken Breasts, 3 oz. ea.</p>
                <p class="store-list-item-price">$19.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="chicken">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/31ZDIFly3DL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Today Gourmet - Lemon Herb Chicken, 18 @ 5 oz.</p>
                <p class="store-list-item-price">$99.00</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="chicken">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/41UGTuou7rL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Tyson Red Label Golden Crispy Breaded Chicken Breast Patty, 5 lb.</p>
                <p class="store-list-item-price">$68.02</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="chicken">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/81vqw-oa7zL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Omaha Steaks 4 Chicken Fried Chicken, 4.5 oz.</p>
                <p class="store-list-item-price">$14.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>

            <!-- Tea -->
            <li class="store-list-item" data-item-type="tea">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/519mpZhG+TL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Twinings of London English Breakfast Black Tea Bags, 100 count</p>
                <p class="store-list-item-price">$10.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="tea">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/51XcYsV4RYL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Twinings of London Blackcurrant Breeze Black Tea Bags, 20 count</p>
                <p class="store-list-item-price">$22.80</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="tea">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/51Tkm7jQK8L._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Twinings of London Lady Grey Black Tea Bags, 20 count</p>
                <p class="store-list-item-price">$25.60</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="tea">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/511NRVx8PoL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Twinings of London Irish Breakfast Black Tea Bags, 50 count</p>
                <p class="store-list-item-price">$36.06</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="tea">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/51EpUQ+Jj1L._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Twinings of London Camomile, Honey & Vanilla Herbal Tea, 20 count</p>
                <p class="store-list-item-price">$17.64</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="tea">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/51wHht0TFUL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Twinings of London Pure Rooibos Herbal Red Tea Bags, 20 count</p>
                <p class="store-list-item-price">$20.85</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>

            <!-- Legos -->
            <li class="store-list-item" data-item-type="lego">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/91dKfDlGK2L._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">LEGO Ninjago Movie Green Ninja Mech Dragon 70612, 544 pieces</p>
                <p class="store-list-item-price">$36.74</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="lego">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71fmrWjDLUL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">LEGO Ninjago Movie Fire Mech 70615, 944 pieces</p>
                <p class="store-list-item-price">$69.00</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="lego">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/91-2LpXYsPL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">LEGO Ninjago Movie Quake Mech 70632, 1202 pieces</p>
                <p class="store-list-item-price">$81.49</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="lego">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71tAyit2bVL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">LEGO Ninjago Movie, Garma Mecha Man 70613, 747 pieces</p>
                <p class="store-list-item-price">$68.31</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="lego">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/61NhzsM22GL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">LEGO Ninjago Movie Temple Ultimate Ultimate Weapon 70617, 1403 pieces</p>
                <p class="store-list-item-price">$107.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="lego">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71Zglj2BdyL._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">LEGO Ninjago Movie Destiny's Bounty, 2295 pieces</p>
                <p class="store-list-item-price">$229.95</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>

            <!-- Other -->
            <li class="store-list-item" data-item-type="bike">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/61044OTtt9L._AC_UY218_QL90_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Fox Racing Ranger Mountain Bike Gloves</p>
                <p class="store-list-item-price">$14.99</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="bike">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71QEzBQ3hGL._AC_UY218_QL90_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Giro Fixture Bike Helmet with MIPS</p>
                <p class="store-list-item-price">$54.95</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="bike">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71nfqEsAp1L._AC_UL320_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Carbon Road Bike, SAVA HERD 6.0 T800 Carbon Fiber 700C Road Bicycle</p>
                <p class="store-list-item-price">$1,499.00</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="game">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/711uJA2i+JL._AC_UY218_QL90_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Nintendo Switch Console w/ Mario Kart 8 Deluxe</p>
                <p class="store-list-item-price">$405.00</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="game">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/71qmF0FHj7L._AC_UY218_QL90_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">Nintendo Switch Lite - Turquoise</p>
                <p class="store-list-item-price">$199.96</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
            <li class="store-list-item" data-item-type="game">
              <div class="store-list-item-img-container">
                <img src="https://m.media-amazon.com/images/I/511M6ML2t7L._AC_UY218_QL90_.jpg" />
              </div>
              <div class="store-list-item-meta">
                <p class="store-list-item-title">The Legend of Zelda: Breath of the Wild - Nintendo Switch</p>
                <p class="store-list-item-price">$49.94</p>
                <a class="button store-list-item-to-cart">Add to Cart</a>
              </div>
            </li>
          </ul>
<!--           <div class="error-message">No items found for your search query. Please try again.</div> -->
        </div>

        <!-- View Cart Screen Content -->
        <div id="view-cart" class="list-section">
          <ul class="cart-progress-container">
            <li class="cart-progress-indicator active">Review</li>
            <li class="cart-progress-indicator">Payment</li>
            <li class="cart-progress-indicator">Complete</li>
          </ul>
          <ul id="cart-items" class="store-items list">
            <!-- To be built while shopping -->
          </ul>
<!--           <div class="error-message">No items found in your cart. Let's go shopping!</div> -->
          <div class="button-container payment-container">
            <p class="subtotal">Total: <strong>$</strong></p>
            <button class="checkout-button">Checkout (1)</button>
          </div>
        </div>
      </section>
    </div>
  </section>

  <section class="screen info-page active">
    <div class="screen-content">
      <img class="logo" alt="logo" src="https://pngimage.net/wp-content/uploads/2018/06/store-logo-png-1.png" />

      <div class="info-page-content">
        <h1>JS Conf Korea 2019 <span><a href="https://2019.jsconfkorea.com/en/tutorials/" target="_blank">(Sept. 3, 2019)</a></span></h1>
        <h2>Learn JavaScript by Building a Shopping App in CodePen</h2>
        <p>Learn by doing! The best way to learn JavaScript is with projects, so we'll be building a shopping app in CodePen.</p>
        <p>In this tutorial, we'll learn how JavaScript can manipulate data and the DOM to create a multi-screen, dynamic web app, right inside CodePen. We will walk through the app-building process together: from creating app screens in HTML & CSS, to adding
          basic JavaScript functionality with button presses, to adding basic data processing. This tutorial is aimed at beginner developers.</p>
        <h2>About <a href="https://aaron.kr" target="_blank">Aaron Snowberger</a></h2>
        <p>Aaron is a frontend designer/developer who likes to dabble in backend and mobile technologies. His current passions include React, React Native, Node, and the WP REST API. He’s also a Google Certified Trainer who has taught computer science and
          graphic design in high school since 2013. He's passionate about helping new learners discover the joys of JavaScript.</p>
        <small><span>Note:</span> Items listed in the Store screen are primarily referenced from <a href="https://amazon.com" target="_blank">Amazon.com</a>, but there are no affiliate links.</small>
      </div>
    </div>
  </section>

  <p class="toast">Some event happened!</p>
</main>
              
            
!

CSS

              
                /**
 * CSS Structure
 * 0. General app styles
 * 1. List screen
 * 2. Search screen
 * 3. Cart screen 
 * 4. Checkout screen
 */
/*---------------------------------------
 * General app styles : SCREEN_SIZE (width: 375px, 812px)
 *---------------------------------------*/
* {
/*   position: relative; */
  box-sizing: border-box;
}
body {
  background: #232323;
  color: white;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  overflow-y: scroll;
}
img {
  display: block;
}
.store-background {
  background-image: url('https://images.pexels.com/photos/1831825/pexels-photo-1831825.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-position: center;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100vw;
  height: 130%;
  position: absolute;
  top: -2rem;
}
#iphone-info {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30px;
/*   background: #111; */
  z-index: 10;
  top: 0;
  border-radius: 20px 20px 0 0;
}
#iphone-info:before {
  content: '';
  height: 10px;
  width: 60px;
  z-index: 10;
  background: #333;
  display: block;
  border-radius: 15px;
  top: 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#iphone-info:after {
  position: absolute;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
  background: #959595; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  content: '';
  display: block;
  height: 16px;
  width: 16px;
  border-radius: 12px;
  z-index: 10;
  top: 7px;
  left: 50%;
  transform: translateX(40px);
}
#time {
  margin: 10px 20px;
  font-size: 0.9rem;
}
#icons {
  margin: 7px 10px;
}
#icons li {
  list-style: none;
  display: inline-block;
  font-size: 0.7rem;
  margin-left: 5px;
}
.shopping-app {
  /* iPhone resolutions: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions */
  background: #232323;
  position: relative;
  width: 391px; /* border is 8px each side, 16px total */
  height: 828px; /* actual size 812px, but consider border as well */
  margin: 1rem auto;
  padding-top: 1.5rem;
  border: 8px solid black;
  border-radius: 30px;
  box-shadow: 0px 9px 40px rgba(0,0,0,0.9);
}
.shopping-app:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 30px;
  width: 209px;
  background: black;
  border-radius: 0 0 20px 20px;
  content: '';
  z-index: 10;
}
.shopping-app:after {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  content: '';
  height: 10px;
  width: 112px;
  border-radius: 20px;
  z-index: 10;
}
.screen {
  display: none;
  background: #232323;
  width: 375px;
  height: 812px;
  position: relative;
  overflow: hidden;
  top: -24px;
  border-radius: 25px;
  z-index: 0;
}

/* Module */
.app-module {
  transition: all 0.3s;
  display: none;
  position: absolute;
  z-index: 998;
  background: rgba(0,0,0,0.76);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.app-module-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: white;
  color: #232323;
  width: 95%;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.54);
}

.screen-content {
  position: relative;
  top: 50px;
  height: 762px; /* 812px - 40px */
  overflow: hidden;
}
.screen.active {
  display: block;
}
.info-page {
  position: absolute;
  top: 0px;
  margin-top: 0px;
  background: mediumaquamarine;
  z-index: 1;
  transition: all 0.5s;
  width: 0;
  opacity: 0;
}
.info-page .screen-content {
  top: 40px;
}
.info-page.expanded {
  width: 375px;
  opacity: 1;
}

.info-page-content {
  padding: 1rem;
  font-size: 80%;
}
.info-page-content h1 {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #e57248;
  color: #365;
  font-weight: bold;
  font-size: 1.4rem;
}
.info-page-content h1 span {
  font-size: 80%;
}
.info-page-content h1 a,
.info-page-content h2 a {
  color: #264c3f;
}
.info-page-content h2 {
  font-size: 1rem;
  color: #365;
}
.info-page-content small {
  font-style: italic;
  color: #4c997f;
  display: block;
  margin-top: 2rem;
}
.info-page-content small a {
  color: #365;
}
.logo {
  max-width: 50%;
  margin: 1rem auto;
  display: block;
  filter: invert(100%);
}
.logo:hover {
  filter: invert(80%);
}
.app-title { 
  font-family: 'Open Sans Condensed', Impact;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 1rem 0;
  text-align: center;
}
.read-me-button {
  position: absolute;
  top: 50px;
  left: 15px;
  font-size: 1.2rem;
  opacity: 0.5;
  cursor: pointer;
  z-index: 997;
}
.read-me-button:hover {
  opacity: 0.9;
}
.app-nav {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 1rem;
}
.app-nav-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
/*   flex-direction: 'row'; */
  align-items: center;
  justify-content: space-around;
  width: 100%;
}
.app-nav-item {
/*   display: inline-block; */
  font-size: 13px;
  opacity: 0.7;
  cursor: pointer;
}
.app-nav-item .fa {
  opacity: 0.5;
  margin-right: 5px;
}
.app-nav-item:hover,
.app-nav-item:hover .fa {
  opacity: 0.9;
}
.app-nav-item.active {
  color: lightcoral;
}

#pages {
  display: grid;
  grid-template-columns: 375px 375px 375px;
  transition: all 0.5s;
}
#pages.page-one {
  transform: translateX(0px);
}
#pages.page-two {
  transform: translateX(-375px);
}
#pages.page-three {
  transform: translateX(-750px);
}

.list-section {
  margin: 0;
  padding: 0;
  width: 375px;
  height: 490px;
/*   overflow-y: scroll; */
  transition: all 0.5s;
}

.list-item {
  transition: 1s all;
  position: relative;
  right: 0;
  height: 35px;
  opacity: 1;
  box-sizing: border-box;
  display: block;
  font-family: 'Open Sans', Arial, sans-serif;
  list-style: none;
  font-size: 12px;
  background: coral;
  padding: 0.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.list-item:hover {
  opacity: 0.8;
  cursor: pointer;
}
.list-item .price {
  float: right;
  margin-right: 30px;
  opacity: 0.5;
  visibility: hidden;
}
/*---------------------------------------
 * List screen
 *---------------------------------------*/
.new {
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}
.button {
  margin: 1rem auto;
  display: block;
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  color: white;
  font-size: 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 30px;
  padding: 5px 15px;
  font-weight: bold;
  letter-spacing: 2px;
}
.button:hover {
  color: coral;
  cursor: pointer;
  border-color: rgba(255,127,80, 0.2);
}
.button:active,
.button:focus {
  outline: none;
/*   border: none; */
  border-color: rgba(255,127,80, 0.2);
}
.button-divider {
/*   border-right: 1px solid rgba(255,255,255,0.2); */
/*   height: 140px; */
/*   margin-top: 10px; */
/*   border-left: 1px solid rgba(255,255,255,0.6); */
}

.button-container {
  background: #232323;
  display: flex;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(0,0,0,1);
  bottom: 0px;
  width: 100%;
  position: absolute;
  z-index: 2;
}

.add-item-container {
  height: 30px;
  margin: 0 20px 1rem;
  background: white;
  border-radius: 20px;
  padding: 0 10px;
}
.add-item-container input {
  box-sizing: border-box;
  height: 30px;
  border: none;
  width: calc( 100% - 50px);
  font-family: 'Open Sans';
  padding-left: 10px;
}
.add-item-container input:focus,
.add-item-container input:active {
  outline: none;
}
.add-item-container.disabled,
.add-item-container input:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.add-item-container .fa-shopping-bag {
  color: coral;
  opacity: 0.5;
  background: transparent;
}
.add-item-button {
  display: inline-block;
  background: mediumaquamarine;
  margin: 0;
  position: absolute;
  width: 42px;
  height: 30px;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
}
.add-item-button.disabled {
  cursor: not-allowed;
  background: #4c997f;
  opacity: 0.7;
}
.add-item-button.disabled:hover {
  color: white;
}

.purchased {
  background: mediumaquamarine;
  text-decoration: line-through;
}

.delete-button {
  text-decoration: none;
  text-transform: uppercase;
  background: transparent;
  position: absolute;
  right: 10px;
  border: 0;
  color: white;
}

.delete {
/*   transition: 1s all;
  position: absolute; */
  right: -375px;
  opacity: 0;
/*   display: none; */
}

.add {
  left: -375px;
  opacity: 0;
}

/* Shopping Cart info */
.user-info {
/*   background: blue; */
  width: 100%;
}
.shopping-cart {
  margin-top: 15px;
  margin-right: 10px;
  position: absolute;
  right: 0;
  cursor: pointer;
}
.cart-icon {
  box-sizing: border-box;
  opacity: 0.5;
  font-size: 1.2rem;
  padding: 7px 0;
  border: 1px solid white;
  width: 36px;
  height: 36px;
  border-radius: 20px;
  text-align: center;
}
.cart-icon:hover {
  opacity: 0.8;
}
.shopping-cart-count {
  position: absolute;
  top: 17px;
  left: -10px;
  font-size: 9px;
  background: coral;
  width: 20px;
  text-align: center;
  border-radius: 5px;
/*   display: none; */
}

.pseudo-item {
  transition: 1s all;
  position: absolute;
  top: 15px;
  right: 0;
  transform: translateY(-50%);
  z-index: -1;
  width: 375px;
  height: 35px;
  background: mediumaquamarine;
}

.to-cart {
/*   position: fixed;
  top: 43px;
  left: calc( 50% + 134px ); */
  right: 10px;
  top: -176px;
/*   transform: translate(0, -200px); */
  width: 36px;
  height: 36px;
  border-radius: 36px;
}

.toast {
  transition: 0.5s all;
  box-sizing: border-box;
  position: absolute;
  bottom: -180px;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(189, 183, 107, 0.8);
  padding: 1.2rem;
  text-align: center;
  border-radius: 20px;
  width: 80%;
  font-size: 14px;
  box-shadow: 2px 10px 10px rgba(0,0,0,0.2);
}
.show-toast {
  opacity: 1;
  bottom: -80px;
  box-shadow: 2px 10px 40px rgba(0,0,0,1);
}

.jiggle {
  animation: jiggle 2s ease-in;
}

@keyframes jiggle {
  0%, 10% {
    transform: scale(1.0, 1.0)
  }
  3% {
    transform: scale(1.1, 0.9)
  }
  6% {
    transform: scale(0.9, 1.1) translate(0, -5px)
  }
  9% {
    transform: scale(1.0, 1.0) translate(0, -3px)
  }
}

/*---------------------------------------
 * 2. Search screen
 *---------------------------------------*/
#store-search.list-section {
  background: green;
  height: 570px;
  overflow-y: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}
.store-filter-container {
  color: #232323;
  background: white;
  cursor: pointer;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  border-bottom: 1px solid rgba(0,0,0,0.24);
}
#store-search select {
  border-radius: 20px;
  color: #454545;
  background: #efefef;
  height: 20px;
  margin-right: 1rem;
}
.store-filter-container .fa {
  opacity: 0.5;
  margin-right: 1rem;
/*   position: absolute;
  right: 1rem;
  top: 0.5rem; */
}
.store-items {
  background: white;
  overflow-y: scroll;
  color: #232323;
  font-size: 80%;
  list-style: none;
  padding: 0 0 30px 0;
  margin: 0px 0 0px 0;
  display: grid;
/*   border-top: 1px solid rgba(0,0,0,0.24); */
  border-bottom: 1px solid rgba(0,0,0,0.1);
  height: 540px;
}

.store-list-item {
  padding: 1rem;
  background: white;
/*   border-top: 1px solid rgba(0,0,0,0.1); */
  border-bottom: 1px solid rgba(0,0,0,0.14);
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}
.pseudo-store-item {
  background: mediumaquamarine;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  opacity: 0;
  transition: all 0.3s;
}
.pseudo-store-item.selected {
  opacity: 0.5;
}

/* .error-message {
  position: absolute;
  top: 2rem;
  color: black;
  font-size: 80%;
  text-align: center;
  width: 100%;
  margin: 1rem;
  box-sizing: border-box;
  z-index: 0;
} */

.store-list-item:last-child {
  margin-bottom: 40px;
  border-bottom: none;
}
.store-list-item-img-container {
  text-align: center;
  margin-right: 1rem;
}
.store-list-item img {
  max-height: 100px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.store-list-item .button {
  color: coral;
  font-size: 0.6rem;
  padding: 0;
  border: 0;
  margin: 0;
}

.store-items.list {
  grid-template-columns: 1fr;
  align-content: start;
}
.store-items.list .store-list-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  max-height: 140px;
  align-self: start;
}

.store-items.grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.search-results {
  font-size: 80%;
  margin-left: 1rem;
}
.search-query-quantity {
  font-weight: bold;
}

/*---------------------------------------
 * 3. Cart screen
 *---------------------------------------*/
#cart-items.store-items {
  height: 470px;
  padding-bottom: 10px;
}
#cart-items .store-list-item:last-child {
  margin-bottom: 10px;
}
.cart-progress-container {
  background: lightsalmon;
  color: rgba(255,255,255,0.7);
  margin: 0 0 0 -2.5rem;
  font-size: 80%;
  list-style: none;
  border-bottom: 1px solid rgba(0,0,0,0.24);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.cart-progress-indicator {
  display: inline-block;
  text-align: center;
  margin: 0;
  height: 30px;
  padding: 5px 0 0 0;
  position: relative;
}
.cart-progress-indicator:before,
.cart-progress-indicator:after {
  content: '';
  display: block;
  border-left: 10px solid coral;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  position: absolute;
  top: 0;
  right: -10px;
  width: 0px;
  height: 0px;
  z-index: 1;
}
.cart-progress-indicator:before {
  border-left-color: lightsalmon;
  right: -8px;
  z-index: 2;
}
.cart-progress-indicator.active {
  background: coral;
  color: rgba(255,255,255,0.8);
}
.cart-progress-indicator.active:before {
  border-left-color: coral;
}
.payment-container {
  display: flex;
  justify-content: space-between;
  color: #232323;
  background: white;
  height: 70px;
}
.subtotal {
  margin-left: 1rem;
  padding-top: 5px;
  font-size: 80%;
}
.checkout-button {
  border: none;
  background: mediumaquamarine;
  color: white;
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.2rem;
  min-width: 60%;
}

/*---------------------------------------
 * 4. Checkout screen
 *---------------------------------------*/
              
            
!

JS

              
                /* --------------------------------------------
 * iPhone Clock
 * -------------------------------------------- */
// iPhone clock interval, every second (1000ms)
setInterval(function() {
  displayTime();
}, 1000); // every second update displayTime()

// Function that controls the iPhone time display
function displayTime() {
  let iPhoneClock = new Date(); // Built in JS Date Object
  let hours = iPhoneClock.getHours();
  let minutes = iPhoneClock.getMinutes();
  let seconds = iPhoneClock.getSeconds();

  // minutes and seconds are returned as integers without preceding zeroes
  // the following two conditionals append a leading zero
  // if minutes or seconds are less than 10 (i.e. 09, 08, etc)
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  // Set the value of the #time element to "h:mm:ss"
  document.getElementById("time").innerHTML =
    hours + ":" + minutes + ":" + seconds;
}

/* --------------------------------------------
 * Create Default (Original) List
 * -------------------------------------------- */
let ORIGINAL_LIST = [];

buildOriginalList();

// Find all the items already in our shopping list 
// & add them to our ORIGINAL_LIST array
function buildOriginalList() {
  var items = document.querySelectorAll('.list-item');
  for( var i = 0; i < items.length; i++ ) {
    ORIGINAL_LIST.push(items[i]);
  }
  console.log( ORIGINAL_LIST );
}

/* --------------------------------------------
 * Add Items (input)
 * -------------------------------------------- */
// Add Item BUTTON
document.querySelector('.add-item-button').onclick = function() {
  if ( document.getElementById('pages').className === 'page-one' ) {
    addItem(); 
  }
}

function addItem(el = null, useToast = true) {
  // Create a new `li` list item and set its values and attributes
  var newItem = document.createElement("li");
  
  // If passing in an element (i.e. we're resetting the list),
  // Get its innerText - minus the price at the end,
  // OR grab the value from the input field instead.
  var newItemName = el !== null 
    ? el.innerText.slice(0, el.innerText.indexOf('$')) 
    : document.getElementById("add-item-input").value.trim();
  
  // Be sure the input field actually has a value (non-empty)
  if ( newItemName === '' ) return;
  
  newItem.innerHTML = newItemName;
  // `new` CSS class = height: 0, opacity: 0 (an invisible element)
  newItem.className = "list-item new";
  newItem.setAttribute("draggable", true);

  // We need a setTimeout function in order to allow
  // the CSS transition in list-item to happen
  setTimeout(function() {
    // `hot` CSS class is the red we have, full height, 100% opacity
    newItem.className = "list-item hot";
  }, 0);
  
  // Don't forget to add the click & drag functionality to all list items
  newItem.onclick = function() { handleClick(this); };
  newItem.ondrag = function() { handleDelete(this); };
  
  // Append the new item to our list
  document.querySelector("#shopping-list.list-section").appendChild(newItem);
  
  // Finally, reset the input field to be empty
  document.getElementById("add-item-input").value = "";
  
  // *** Toast will be used in the following app iteration
  showToast("manual-add", newItemName);
};

// Add Item with ENTER
// Add item on keyboard ENTER
document.getElementById("add-item-input").onkeyup = function(event) {
  if (event.keyCode === 13) {
    // Run the `onclick` function we wrote above
    document.querySelector(".add-item-button").click();
  }
};

/* --------------------------------------------
 * "Purchase" Items (click)
 * -------------------------------------------- */
// Get the current (default) list of items and give them all a click function
var listItemArray = document.querySelectorAll(".list-item");
for (var i = 0; i < listItemArray.length; i++) {
  listItemArray[i].onclick = function() {
    handleClick(this);
  };
  listItemArray[i].ondrag = function() {
    handleDelete(this);
  }
}

function handleClick(item) {
  if (item.className === "list-item hot") {
    item.className = "list-item purchased";
    handlePurchase(item);
  } else {
    item.className = "list-item hot";
    handleReturn(item);
  }
}

// --------------------------------------------
/*
 * A few constants that we will refer to over and over again
 */
const TRASH_ICON = '<i class="fa fa-times"></i>';
const CART_COUNT = document.querySelector('.shopping-cart-count');

/* 
 * Supplementary Purchase item function - adding visual feedback 
 */
function handlePurchase(el) {
  
  // Create a Trash / Remove button and add it to the element
  var trash = document.createElement("button");
  trash.className = "delete-button";
  trash.innerHTML = TRASH_ICON;
  trash.style.cursor = 'pointer';
  el.appendChild(trash);

  // Create a pseudo-element to "zoom" into the cart
  var zoom = document.createElement("span");
  zoom.className = "pseudo-item";
  el.appendChild(zoom);
  setTimeout(function() {
    zoom.className += " to-cart";
    // parentNode.offsetTop is important to make all the elements
    // end up in the same place, over the cart button
    zoom.style.transform =
      "translateY(-" + (zoom.parentNode.offsetTop + 5) + "px)";
  }, 100); // Begin the transition `to-cart` after 100ms
  setTimeout(function() {
    zoom.remove();
  }, 1200); // Remove the pseudo-element after 1200ms (1.2s)
  
  // Increase cart count
  CART_COUNT.innerHTML = parseInt(CART_COUNT.innerHTML) + 1;
  
  // *** Toast will be used in the following app iteration
  showToast("click-add");
}

/* 
 * Supplmentary Return item function - fixing what the previous function added 
 */
function handleReturn(el, useToast = true) {
  // Reduce cart count
  if (
    CART_COUNT.innerHTML !== "0" &&
    (el.lastChild.innerHTML === TRASH_ICON ||
      el.lastChild.previousSibling.innerHTML === TRASH_ICON)
  ) {
    CART_COUNT.innerHTML = parseInt(CART_COUNT.innerHTML) - 1;
    CART_COUNT.className = "shopping-cart-count jiggle";
    setTimeout(function() {
      CART_COUNT.className = "shopping-cart-count";
    }, 500);
  }
  // Remove child elements
  removeTrash(el);
  // Reset class name
  el.className = 'list-item hot';
  
  // *** Toast will be used in the following app iteration
  if (useToast) {
    showToast("click-remove");
  }
}

// Function to remove the trash icon
function removeTrash(el) {
  if (el.lastChild.innerHTML === TRASH_ICON) {
    // If we only have a trash icon
    el.lastChild.remove();
  } else if (el.lastChild.previousSibling.innerHTML === TRASH_ICON) {
    // If there's a trash AND a moving item - then remove the TWO children
    el.lastChild.remove();
    el.lastChild.remove();
  }
}

/* --------------------------------------------
 * Delete Items (drag)
 * -------------------------------------------- */
/* 3. Delete item function (used in handlePurchase()) */
function handleDelete(el, useToast = true) {
  el.className += " delete";
  setTimeout(function() {
    el.remove();
  }, 750);
  
  // *** Toast will be used in the following app iteration
  if (useToast) {
    showToast("delete");
  }
}

/* --------------------------------------------
 * Empty Cart
 * - All list items return to red color, no strikethrough, no trash
 * - Cart count decreases by 1 as it counts down, but eventually zeroes out (after 1.5s)
 * -------------------------------------------- */
var emptyCart = document.querySelector(".empty-cart-button");
emptyCart.onclick = function() {
  allTask("empty-cart", "remove-all");
  setTimeout(function() {
    CART_COUNT.innerHTML = 0;
  }, 1500); /* Actual time for 6 items will be 3000 because 500 * 6 in delayedResponse() */
};

/* --------------------------------------------
 * Delete List
 * - All list items are sequentially "dragged" off screen and removed
 * -------------------------------------------- */
var deleteAll = document.querySelector(".delete-all-button");
deleteAll.onclick = function() {
  allTask("delete-list", "delete-all");
};

/* --------------------------------------------
 * Reset List
 * - All (original) list items are sequentially added back into the list 
 * -------------------------------------------- */
var resetList = document.querySelector(".reset-list-button");
resetList.onclick = function() {
  allTask("reset-list", "reset-list", true);
  setTimeout(function() {
    console.log("after reset", ORIGINAL_LIST);
  }, 3000);
};

/* --------------------------------------------
 * Helper Functions
 * - allTask( taskName, showToast, useOriginalList)
 * - delayedResponse( element, index, taskName )
 * -------------------------------------------- */
function allTask(task, toast, originalList = false) {
  var currentItems = document.querySelectorAll(".list-item");
  if (!originalList) {
    for (var i = 0; i < currentItems.length; i++) {
      delayedResponse(currentItems[i], i, task);
    }
  } else {
    CART_COUNT.innerHTML = "0";
    for (var i = 0; i < ORIGINAL_LIST.length; i++) {
      delayedResponse(ORIGINAL_LIST[i], i, task);
    }
  }
  
  // *** Toast will be used in the following app iteration
  setTimeout(function() {
    showToast(toast);
  }, currentItems.length * 100);
}

/* Delayed item animation */
function delayedResponse(el, i, task) {
  switch (task) {
    case "empty-cart":
      setTimeout(function() {
        handleReturn(el, false);
      }, 500 * i);
      break;
    case "delete-list":
      setTimeout(function() {
        handleDelete(el, false);
      }, 500 * i);
      break;
    case "reset-list":
      setTimeout(function() {
        addItem(el, false);
      }, 500 * i);
      break;
  }
}

              
            
!
999px

Console