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"></h1>
        <div class="module-content"></div>
      </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" data-item-price="9.99">
              <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" data-item-price="10.59">
              <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" data-item-price="8.99">
              <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" data-item-price="9.79">
              <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" data-item-price="10.29">
              <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" data-item-price="10.29">
              <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" data-item-price="40.99">
              <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" data-item-price="89.00">
              <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" data-item-price="29.99">
              <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" data-item-price="42.89">
              <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" data-item-price="59.99">
              <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" data-item-price="89.00">
              <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" data-item-price="24.99">
              <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" data-item-price="86.78">
              <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" data-item-price="19.99">
              <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" data-item-price="99.00">
              <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" data-item-price="68.02">
              <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" data-item-price="14.99">
              <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" data-item-price="10.99">
              <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" data-item-price="22.80">
              <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" data-item-price="25.60">
              <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" data-item-price="36.06">
              <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" data-item-price="17.64">
              <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" data-item-price="20.85">
              <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" data-item-price="36.74">
              <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" data-item-price="69.00">
              <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" data-item-price="81.49">
              <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" data-item-price="68.31">
              <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" data-item-price="107.99">
              <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" data-item-price="229.95">
              <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" data-item-price="14.99">
              <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" data-item-price="54.95">
                <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" data-item-price="1499.00">
              <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" data-item-price="405.00">
              <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" data-item-price="199.96">
              <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" data-item-price="49.94">
              <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>$<span id="cartTotalPrice">0.00</span></strong></p>
            <button class="checkout-button">Checkout (0)</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;
}

.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;
}
.reset-search {
  padding: 0;
  margin: 0 0 0 0.5rem;
  display: inline;
  color: coral;
  cursor: pointer;
}
.reset-search:hover {
  color: lightsalmon;
}

/*---------------------------------------
 * 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%;
  cursor: pointer;
}

/*---------------------------------------
 * 4. Checkout screen
 *---------------------------------------*/
/* 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 h2 {
  font-size: 1rem;
}
.app-module-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: white;
  color: #232323;
  width: 95%;
  max-height: 90%;
  overflow-y: scroll;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.54);
}
.module-header {
  color: white;
  background: mediumaquamarine;
  padding: 0.6rem 1rem;
  margin: -1.1rem -1rem 0;
  border-radius: 20px 20px 0 0;
}
.module-content-container {
  border: 1px solid #d4dce4;
  border-radius: 5px;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,220,228,0.5) 60%);
  margin: 1rem -0.5rem -0.5rem;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  position: relative;
}
.module-content-container i {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: coral;
}
.module-content-header {
  margin: 0.5rem 0 -0.5rem;
  font-size: 1rem;
}
.module-content-list {
  list-style: none;
  font-size: 0.8rem;
  padding: 0.75rem 0.5rem;
  margin: 0.35rem -0.5rem;
  border: 1px solid #d4dce4;
  border-top: none;
}
.module-content-list li {
  padding: 0.35rem 0;
}
.order-summary {
  font-size: 0.8rem;
  border: 1px solid #d4dce4;
  border-radius: 5px;
  list-style: none;
  padding: 1rem 0.5rem;
  margin: -0.5rem 0 1rem;
}
.order-summary h3 {
  color: mediumaquamarine;
  margin: 0;
  background: rgba(212,220,228,0.5);
  padding: 0.5rem;
  margin: -1rem -0.5rem 0rem;
}
.order-summary-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(212,220,228,0.5);
  display: grid;
  grid-template-columns: 5fr 1fr;
}
.order-summary p {
  display: grid;
  grid-template-columns: 5fr 1fr;
  text-align: right;
  font-weight: bold;
  margin-bottom: 0;
}
.order-summary-item strong {
  font-weight: bold;
  text-align: right;
}
.adjusted-total {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin: -0.5rem 0 1rem;
}
.terms {
  text-align: center;
  display: block;
  margin-top: 0.5rem;
  font-size: 0.6rem;
  opacity: 0.6;
}

.pay-button,
.close-payment-button {
  background: coral;
  margin: 0 auto;
  display: block;
  font-size: 1.4rem;
  width: 100%;
}
              
            
!

JS

              
                /* --------------------------------------------
 * Calculate Total
 * -------------------------------------------- */
let TOTAL_PRICE = document.getElementById('cartTotalPrice');
let CART_QUANTITY = document.querySelector('.checkout-button');
let PAY_BUTTON = document.querySelector('.pay-button');
let POPUP = document.querySelector('.app-module');
let POPUP_WINDOW = document.querySelector('.app-module-content');

var popupClicked = 0;
var cart = document.querySelector('#cart-items');
var cartCount = 0;
var totalPrice = 0;
var cartItems = [];

var observer = new MutationObserver( function(mutations) {
  mutations.forEach( function(mutation) {
    console.log(mutation.addedNodes);
    
    // Add item to cart (and increase cartCount)
    cartCount++;
    CART_QUANTITY.innerHTML = 'Checkout (' + cartCount + ')';
    
    // Add Prices
    totalPrice = parseFloat(TOTAL_PRICE.innerHTML) + parseFloat(mutation.addedNodes[0].dataset.itemPrice);
    TOTAL_PRICE.innerHTML = totalPrice.toFixed(2);
    
    cartItems.push({
      itemName: mutation.addedNodes[0].innerText,
      itemPrice: mutation.addedNodes[0].dataset.itemPrice
    })
  });
});

var config = { attributes: false, childList: true, characterData: false }

observer.observe(cart, config);

// observer.disconnect();

CART_QUANTITY.onclick = function() {
  if ( cartCount > 0 ) { 
    buildCheckoutScreen();
  }
}

POPUP_WINDOW.onclick = function() {
  popupClicked = true;
  setTimeout( function() {
    popupClicked = false;
  }, 500 );
} 

POPUP.onclick = function() {
  if ( !popupClicked ) {
  document.querySelector('.module-content').innerHTML = '';
  closePopup();
  }
}

function closePopup() {
  POPUP.style.display = 'none';
}

function payForIt() {
  // Reset the header
  document.querySelector('.module-header').innerHTML = 'Order Placed!';
  
  // Add confirmation message
  document.querySelector('.module-content').innerHTML = '<img src="https://media1.tenor.com/images/cb936926d59302a4944281af827f8992/tenor.gif" width="300" /><p>We are preparing your order for shipment!</p>';
  
  var closeButton = document.createElement('button');
  closeButton.className = 'close-payment-button checkout-button';
  closeButton.innerHTML = 'Close';
  closeButton.onclick = function() { closePopup(); };
  document.querySelector('.module-content').appendChild(closeButton);
  
  // "Turn off" module after 5 seconds
  setTimeout( function() {
    if ( POPUP.style.display === 'block' ) {
      POPUP.style.display = 'none';
    }
  }, 5000);
}

function buildCheckoutScreen() {
  // Build header
  document.querySelector('.module-header').innerHTML = 'Checking out ' + cartCount + (cartCount > 1 ? ' items.' : ' item.');
  let popupContent = document.querySelector('.module-content');
  
  // Reset the content of the modal to prevent GIF animation from appearing on a second click.
  popupContent.innerHTML = '';
  
  // Build address / contact info area
  createPopupBox('Address | COEX', '서울특별시 강남구 영동대로 513 (삼성동, 코엑스) 06164', popupContent, 'Phone: 02-6000-0114');
  
  // Shipping options
  createPopupBox('Receiving', 'Delivery to front door (or leave at Guard House)', popupContent);
  
  // Payment options
  createPopupBox('Payment Method', ['Cell phone (KT)', 'KakaoPay', 'Bank Transfer'], popupContent);
  
  // Order summary
  var shipment = document.createElement('h2');
  shipment.innerHTML = 'Shipment 1 of 1';
  popupContent.appendChild(shipment);
  
  var shipmentBox = document.createElement('ul');
  shipmentBox.className = 'order-summary';
  var shipmentBoxTitle = document.createElement('h3');
  shipmentBoxTitle.innerHTML = 'Expected Arrival: 9/3';
  shipmentBox.appendChild(shipmentBoxTitle);
  
  cartItems.forEach( function(item) {
    var shipmentItem = document.createElement('li');
    shipmentItem.className = 'order-summary-item';
    
    var shipmentItemName = document.createElement('span');
    shipmentItemName.innerHTML = item.itemName.split('\n')[0];
    var shipmentItemPrice = document.createElement('strong');
    shipmentItemPrice.innerHTML = item.itemPrice;
    
    shipmentItem.appendChild(shipmentItemName);
    shipmentItem.appendChild(shipmentItemPrice);
    
    shipmentBox.appendChild(shipmentItem);
  });
  
  // Subtotal
  var discount = totalPrice * 0.005;
  var shippingFee = totalPrice * 0.05;
  var coupon = totalPrice * 0.02;
  var adjustedTotal = totalPrice - discount - coupon + shippingFee;
  
  subtotalFields('p', 'Subtotal', totalPrice, shipmentBox);
  // Discount
  subtotalFields('p', 'Discount', discount, shipmentBox);
  // Shipping Fee
  subtotalFields('p', 'Shipping Fee', shippingFee, shipmentBox);
  // Coupon
  subtotalFields('p', 'Coupon', coupon, shipmentBox);
  
  popupContent.appendChild(shipmentBox);
  
  // Adjusted Total
  subtotalFields('h2', 'Final Total', adjustedTotal, popupContent, 'adjusted-total');
  
  // Create payment button
  var payButton = document.createElement('button');
  payButton.className = 'pay-button checkout-button';
  payButton.innerHTML = 'Pay';
  payButton.onclick = function() { payForIt(); };
  popupContent.appendChild(payButton);
  
  // Terms of Service
  var terms = document.createElement('small');
  terms.className = 'terms';
  terms.innerHTML = 'By clicking the above PAY button, you agree to Store\'s Terms of Service.';
  popupContent.appendChild(terms);
  
  // Display popup box
  POPUP.style.display = 'block';
}

function createPopupBox(boxTitle, boxContent, parentNode, extraInfo = '') {
  // Create a small content box
  var box = document.createElement('div');
  box.className = 'module-content-container';
  
  // Create a header and add it to the content box
  var title = document.createElement('h2');
  title.className = 'module-content-header';
  title.innerHTML = boxTitle;
  
  box.appendChild(title);

  // Create the box content and add it to the box
  var content = document.createElement('p');
  content.className = 'module-content-content';
  content.innerHTML = (boxContent instanceof Array ? boxContent[0] : boxContent) + 
    (extraInfo !== '' ? ('<br>' + extraInfo) : '');
    
  box.appendChild(content);
    
  var subContent = null;
  // But, if the boxContent is an array, we need to create another sub-box
  if ( boxContent instanceof Array ) {   
    // Create a list
    subContent = document.createElement('ul');
    subContent.className = 'module-content-list';
    
    // for every item, add it
    boxContent.forEach( function(item) {
      // Create a list item
      var subContentItem = document.createElement('li');
      
      // Create a radio button and add it to the li
      var subContentRadio = document.createElement('input');
      subContentRadio.setAttribute('type', 'radio');
      if ( boxContent[0] === item ) {
        subContentRadio.checked = true;
      }
      subContentItem.appendChild(subContentRadio);
      
      // Create the radio button title and add it to the li
      var subContentText = document.createElement('span');
      subContentText.innerHTML = item;
      subContentItem.appendChild(subContentText);
      
      // Now, finally, add the whole li to the ul list
      subContent.appendChild(subContentItem);
    })
    
    // Add the ul list to the box
    box.appendChild(subContent);
  }
  
  // Create an arrow and add it to the box
  var arrow = document.createElement('i');
  arrow.className = 'fa fa-chevron-right';
  arrow.style.cursor = 'pointer';
  box.appendChild(arrow);
  
  // Finally, attach the whole box to the module
  parentNode.appendChild(box);
  if ( subContent !== null ) {
    parentNode.appendChild(subContent);
  }
}

function subtotalFields(element, subTitle, subContent, parentNode, className = '') {
  var field = document.createElement(element);
  field.innerHTML = '<span>' + subTitle + '</span><strong>' + subContent.toFixed(2) + '</strong>';
  if ( className !== '' ) {
    field.className = className;
  }
  parentNode.appendChild(field);
}
              
            
!
999px

Console