page0

In this example below you will see how to do a page0 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by FarhanSharif, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright FarhanSharif ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>page0</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="topbar">
  <div id="logo-container"></div>
  <h1 id="website-name">Grocery Advisor</h1>
  <form action="" id="signout-container"><input type="submit" value="Sign Out" id="signout-btn"></form>
  <h1 id="user-name">User</h1>

</div>

<div id="navigation">
  <form action="" id="item-search-container">
    <input type="text" placeholder="Search items..." id="item-search-bar">
    <button id="item-search-btn"><i class="material-icons">search</i></button>
  </form>

  <button id="cart-btn"><i class="material-icons">shopping_cart</i><span>99</span></button>

  <ul id="category-btns">
    <li><span>Grain</span><i class="material-icons">expand_more</i>
      
      <div class="category-dropdown-container">
        <form action="" class="category-dropdown">
          <input type="submit" value="Bagel" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Bread" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Buns" class="category-dropdown-content">
          </form>
      </div>
      
    </li>
    <li><span>Dairy</span><i class="material-icons">expand_more</i>
      <div class="category-dropdown-container">
        <form action="" class="category-dropdown">
          <input type="submit" value="Bagel" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Bread" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Buns" class="category-dropdown-content">
          </form>
      </div>
    </li>
    <li><span>Fruits</span><i class="material-icons">expand_more</i>
      <div class="category-dropdown-container">
        <form action="" class="category-dropdown">
          <input type="submit" value="Bagel" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Bread" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Buns" class="category-dropdown-content">
          </form>
      </div>
    </li>
    <li><span>Veggies</span><i class="material-icons">expand_more</i>
      <div class="category-dropdown-container">
        <form action="" class="category-dropdown">
          <input type="submit" value="Bagel" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Bread" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Buns" class="category-dropdown-content">
          </form>
      </div>
    </li>
    <li><span>Milk</span><i class="material-icons">expand_more</i>
      <div class="category-dropdown-container">
        <form action="" class="category-dropdown">
          <input type="submit" value="Bagel" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Bread" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Buns" class="category-dropdown-content">
          </form>
      </div>
    </li>
    <li><span>Other</span><i class="material-icons">expand_more</i>
      <div class="category-dropdown-container">
        <form action="" class="category-dropdown">
          <input type="submit" value="Bagel" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Bread" class="category-dropdown-content">
          </form>
        
        <form action="" class="category-dropdown">
          <input type="submit" value="Buns" class="category-dropdown-content">
          </form>
      </div>
    </li>
  </ul>
</div>

<h1 id="content-title">Bread</h1>
<div id="contents">

  <div class="item-container" style="display: none;">
    <div class="item-image">
      <div class="in-cart-symbol" style="display: none;">
        <i class="material-icons">done</i>
        <span>In Cart</span>
      </div>
    </div>
    <p class="item-info">Britannia Whole Wheat, 400g</p>
    <div class="quantity-control">
      <button class="quantity-dec"><i class="material-icons">remove</i></button>
      <input type="text" class="quantity" value="0">
      <button class="quantity-inc"><i class="material-icons">add</i></button>
    </div>

    <button type="button" class="item-btn">Add</button>
  </div>

  <h1 id="empty-message" style="display: none;">Looks like your list is empty. 
   
    Use the categories or search for some groceries to make a shopping list. When you’ve added all your items, confirm your shopping list. Next, enter your location and proceed to get a ranked list of the best stores to shop at.</h1>
      <div class="popup-store" style="display: none;">
      <div class="popup-store-container">
        <h1 class="popup-store-title">Store Details</h1>
        <div class="popup-store-close"><i class="material-icons">close</i></div>

        <div class="popup-store-contents">

            <p class="popup-store-franchise">Walmart</p>
          <p class="popup-store-info"><span>Address:</span><span>449 Parliament Street</span></p>
          <p class="popup-store-info"><span>Region:</span><span>Toronto, M5A3A3</span></p>
          <p class="popup-store-info"><span>Phone:</span><span>(866)-987-6453</span></p>
          <p class="popup-store-info"><span>Hours:</span><span>
            <span>Mon-Fri 12-12</span><span>Mon-Fri 12-12</span>
            </span></p>

        </div>
      </div>
    </div>
  <div class="result-container">
    <span class="result-number">1.</span><!--
    --><div>

    
      <span class="result-store">Store (350 Something Street)</span>
    <span class="result-cost">Total Cost: <span>$12.94</span></span>
      <span class="result-time">ETA: 12 min</span>
    </div>
  </div>
  
    <div class="result-container">
    <span class="result-number">2.</span><!--
    --><div>
      <span class="result-store">Mall (134 Else Street)</span>
      <span class="result-cost">Total Cost: <span>$2.25</span></span>
      <span class="result-time">ETA: 15 min</span>
    </div>
  </div>
  
  <form action="" id="finalize-form" style="display:none;">
    
    <div id="transport-btns">
      <button type="button" id="transport-walk" class="transport-selected"><i class="material-icons">directions_walk</i></button>
      <button type="button" id="transport-bike"><i class="material-icons">directions_bike</i></button>
      <button type="button" id="transport-car"><i class="material-icons">directions_car</i></button>
      <button type="button" id="transport-transit"><i class="material-icons">directions_transit</i></button>
    </div>
    
    <input type="hidden" name="transport-method" value="walk">
    
        <div id="input-radius-container">
      <h1>Find stores within: <select name="radius" id="input-radius">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5" selected>5</option>
        <option value="10">10</option>
        <option value="15">15</option>
      </select> km</h1>
    </div>
    
    <div id="location-search-container">
    <input type="text" placeholder="Enter your location..." id="location-search-bar">
    <input type="button" value="Go" id="location-search-btn">
      </div>
    

    
    <h1 id="ask-preference">What do you value more?</h1>
    
    <div id="radio-choices-container">
      <div class="radio-choice">
        <input type="radio" name="preference" value="price" checked>
        <h1>Price?</h1>
      </div>
      
      <div class="radio-choice">
        <input type="radio" name="preference" value="time">
        <h1>Travel Time?</h1>
      </div>
      
      <div class="radio-choice">
        <input type="radio" name="preference">
        <h1>Both?</h1>
      </div>
      
    </div>
    
    <div id="time-value-container" style="display: none;">
      <h1>How much do you value an hour?
      <input type="number" min="1" value="10" id="time-value" name="time-value">
        $</h1>
    </div>
    
  </form>
  
</div>

<div id="popup" style="display: none;">
  <div id="popup-cart">
    <h1 id="popup-cart-title">Current Shopping Cart</h1>
    <div id="popup-close-btn"><i class="material-icons">close</i></div>

    <div id="popup-cart-contents">
      <div class="popup-cart-item">
        <button class="popup-cart-delete"><i class="material-icons">delete</i></button>
        <p class="popup-item-info">Britannia Whole Wheat, 400g</p>
        <div class="popup-quantity-control">
          <button class="quantity-dec"><i class="material-icons">remove</i></button>
          <input type="text" class="quantity" value="0">
          <button class="quantity-inc"><i class="material-icons">add</i></button>
        </div>
      </div>
      
      <div class="popup-cart-item">
        <button class="popup-cart-delete"><i class="material-icons">delete</i></button>
        <p class="popup-item-info">Andos Whole Wheat Pita, 400g</p>
        <div class="popup-quantity-control">
          <button class="quantity-dec"><i class="material-icons">remove</i></button>
          <input type="text" class="quantity" value="0">
          <button class="quantity-inc"><i class="material-icons">add</i></button>
        </div>
      </div>
      
            <div class="popup-cart-item">
        <button class="popup-cart-delete"><i class="material-icons">delete</i></button>
        <p class="popup-item-info">Doritos Nacho Cheese, 400g</p>
        <div class="popup-quantity-control">
          <button class="quantity-dec"><i class="material-icons">remove</i></button>
          <input type="text" class="quantity" value="0">
          <button class="quantity-inc"><i class="material-icons">add</i></button>
        </div>
      </div>
      
      <div class="popup-cart-item">
        <button class="popup-cart-delete"><i class="material-icons">delete</i></button>
        <p class="popup-item-info">Doritos Cheese, 400g</p>
        <div class="popup-quantity-control">
          <button class="quantity-dec"><i class="material-icons">remove</i></button>
          <input type="text" class="quantity" value="0">
          <button class="quantity-inc"><i class="material-icons">add</i></button>
        </div>
      </div>
      
      <div class="popup-cart-item">
        <button class="popup-cart-delete"><i class="material-icons">delete</i></button>
        <p class="popup-item-info">Doritos Nacho, 400g</p>
        <div class="popup-quantity-control">
          <button class="quantity-dec"><i class="material-icons">remove</i></button>
          <input type="text" class="quantity" value="0">
          <button class="quantity-inc"><i class="material-icons">add</i></button>
        </div>
      </div>
      
      <div class="popup-cart-item">
        <button class="popup-cart-delete"><i class="material-icons">delete</i></button>
        <p class="popup-item-info">Nacho Cheese, 400g</p>
        <div class="popup-quantity-control">
          <button class="quantity-dec"><i class="material-icons">remove</i></button>
          <input type="text" class="quantity" value="0">
          <button class="quantity-inc"><i class="material-icons">add</i></button>
        </div>
      </div>
      
      <div class="popup-cart-item">
        <button class="popup-cart-delete"><i class="material-icons">delete</i></button>
        <p class="popup-item-info">Cheese, 400g</p>
        <div class="popup-quantity-control">
          <button class="quantity-dec"><i class="material-icons">remove</i></button>
          <input type="text" class="quantity" value="0">
          <button class="quantity-inc"><i class="material-icons">add</i></button>
        </div>
      </div>

    </div>

    <div id="popup-cart-btns">
      <button id="popup-cart-clearall" class="popup-cart-btn"><i class="material-icons">delete</i>  <span>Clear All</span></button>

      <form action="">
        <button id="popup-cart-next" class="popup-cart-btn"><i class="material-icons">done</i>  <span>Next</span></button>
      </form>
    </div>
  </div>
</div>

<div id="popup-receipt" style="display: block;">
  <div id="popup-receipt-container">
    <h1 id="popup-receipt-title">Receipt</h1>
    <div id="popup-receipt-close"><i class="material-icons">close</i></div>

    <div id="popup-receipt-contents">
      <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          4
        </p><!--
        --><p class="popup-receipt-info">Britannia Whole Wheat, 400g</p><!--
        --><p class="popup-receipt-cost">$3.99</p>
        <span>Sale Ends On 12/31/2016</span>
      </div>
      
      <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          4
        </p><!--
        --><p class="popup-receipt-info">Britannia Whole Wheat, 400g</p><!--
        --><p class="popup-receipt-cost">$3.99</p><span>Sale Ends On 12/31/2016</span>
      </div>
      
      <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          4
        </p><!--
        --><p class="popup-receipt-info">Britannia Whole Wheat, 400g</p><!--
        --><p class="popup-receipt-cost">$3.99</p>
      </div>
      
      <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          4
        </p><!--
        --><p class="popup-receipt-info">Britannia Whole Wheat, 400g</p><!--
        --><p class="popup-receipt-cost">$3.99</p><span>Sale Ends On 12/31/2016</span>
      </div>
      
      <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          4
        </p><!--
        --><p class="popup-receipt-info">Britannia Whole Wheat, 400g</p><!--
        --><p class="popup-receipt-cost">$3.99</p>
      </div>
      
      <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          4
        </p><!--
        --><p class="popup-receipt-info">Britannia Whole Wheat, 400g</p><!--
        --><p class="popup-receipt-cost">$3.99</p>
      </div>
      
      <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          3
        </p><!--
        --><p class="popup-receipt-info">Nacho Cheeses, 400g</p><!--
        --><p class="popup-receipt-cost">$5.99</p>
      </div>
      
            <div class="popup-receipt-item">
        <p class="popup-receipt-quantity">
          32
        </p><!--
        --><p class="popup-receipt-info">Apples</p><!--
        --><p class="popup-receipt-cost">$0.99</p>
      </div>
    </div>
    
    <div id="popup-receipt-total">
      <p><span>Total:</span>  <span>$10.97<span></p>
    </div>
  </div>
</div>
  
  <div id="popup-load" style="display: none;">
  <div id="popup-load-container">
    <h1 id="popup-cart-title">Load Previous Cart?</h1>
    <div id="popup-load-close"><i class="material-icons">close</i></div>

    <h1 id="popup-load-contents">
      Welcome back, Albert! Would you like to load your previous cart and continue from where you left off? 
    </h1>

    <div id="popup-load-btns">
      <button id="popup-load-no" class="popup-load-btn"><i class="material-icons">close</i>  <span>No</span></button>

      <form action="">
        <button id="popup-load-yes" class="popup-load-btn"><i class="material-icons">done</i>  <span>Yes</span></button>
      </form>
    </div>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/FarhanSharif/page0-rYvMgQ */
body {
  margin: 0;
  padding: 0;
  background-color: mediumaquamarine;
}

/* WHITE AREA IN TOP */

#topbar {
  height: 201px;
  width: 100%;
  background-color: white;
  position: fixed;
}

#logo-container {
  border-radius: 100%;
  border: 3px solid black;
  width: 143px;
  height: 143px;

  position: absolute;
  top: 27px;
  left: 32px;
}

#website-name {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 72px;

  margin: 0;

  position: absolute;
  top: 66px;
  left: 250px;
}

#signout-container {
  position: absolute;
  top: 12px;
  right: 15px;
}

#signout-btn {
  border: 3px solid #333333;
  border-radius: 25px;

  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 24px;
  text-align: center;

  width: 205px;
  height: 63px;

  background-color: white;
}

#signout-btn:hover {
  cursor: pointer;
}

#user-name {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 48px;

  margin: 0;
  position: absolute;
  bottom: 0;
  right: 15px;
}

/* GREEN AREA IN TOP */

#navigation {
  position: fixed;
  width: 100%;
  height: 197px;
  background-color: mediumaquamrine;
  top: 201px;
  border-bottom: 3px solid white;
  z-index: 1;
}

#category-btns {
  position: absolute;
  margin: 0;
  bottom: 19px;
  padding: 0;
  left: 0;
  right: 0;
  text-align: center;
}

#category-btns li {
  display: inline-block;
  position: relative;
  height: 58px;
  width: 216px;
  border: 3px solid #ffffff;
  border-radius: 25px;

  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 24px;
  text-align: center;

  color: #ffffff;
  margin: 0px 1.5%;
  
  background-color: mediumaquamarine;
}

#category-btns li:hover {
  cursor: pointer;
}

#category-btns li span {
  position: relative;
  top: 12px;
  pointer-events: none;
}

#category-btns li i {
  position: absolute;
  font-size: 48px;
  right: 10px;
  top: 2.5px;
  pointer-events: none;
}

#item-search-container {
  background-color: blue;
  position: absolute;
  top: 30px;
  
  left: 2.5%; /*UX: 1.5%; NEEDS TWEAKING! */
  
  height: 58px;
  /* width: 684px; UX: 47.5%*/
  width: 46%;
  
  border-radius: 5px;
}

#item-search-bar {
  position: absolute;
  height: 100%;
  border: 0;
  padding: 0 10px;
  left: 0;
  
  width: 83.4%;
  
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 48px;
}

#item-search-btn {
  padding: 0;
  margin: 0;
  height: 100%;
  /*width: 83px;*/
  width: 14%;
  position: absolute;
  right: 0;
  
  border: 0;
  border-left: 3px solid mediumaquamarine;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  
  background-color: white;
  
}

#item-search-btn:hover {
  cursor: pointer;
}

#item-search-btn i {
  font-size: 48px;
  color: mediumaquamarine;
}



#cart-btn {
  position: absolute;
  border: 3px solid #FFFFFF;
  border-radius: 25px;
  
  height: 82px;
  width: 300px; /* for now? */
  top: 14px;
  right: 2.5%;
  
  background-color: mediumaquamarine;
  
}

#cart-btn:hover {
  cursor: pointer;
}

#cart-btn i {
  font-size: 64px;
  color: white;
}

#cart-btn span {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 100%;
  color: white;
  right: 110px;
  top: 0px;
  font-size: 17px;
  line-height: 25px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  border: 0;
  
  pointer-events: none;
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
}

/* FOR EACH ITEM TILE IN ITEMS.JSP */

#content-title {
  position: fixed;
  top: 401px;
  background-color: mediumaquamarine;
  height: 76px;
  width: 100%;
  margin: 0;
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 64px;

  color: #FFFFFF;
  
  padding: 3px 36px;
  border-bottom: 3px solid white;
}

#contents {
  background-color: mediumaquamarine;
  position: absolute;
  top: 486px;
  bottom: 0px;
  width: 100%;
  overflow-y: auto;
}

.item-btn {
  width: 107px;
  height: 58px;
  border: 3px solid #FFFFFF;
  border-radius: 25px;
  display: block;
  margin: auto;
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 24px;
  text-align: center;

  color: #FFFFFF;
  
  background-color: mediumaquamarine;
  
  cursor: pointer;
}

.item-image {
  width: 215px;
  height: 215px;
  border-radius: 10px;
  background-color: white;
  
  margin: auto;
  position: relative;
}

.quantity-control {
  height: 33px;
  width: 120px;
  padding: 0;
  margin: 10px auto;
  border: 0;
  position: relative;
}

.quantity-inc, .quantity-dec {
  height: 100%;
  width: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  display: inline-block;
  position: absolute;
  
  background-color: transparent;
  
  cursor: pointer;
}

.quantity-inc {
  right: 0;
}

.quantity-dec {
  left: 0;
}

.quantity-inc i, .quantity-dec i {
  color: white;
  font-size: 32px;
  font-weight: bold;
}

.quantity {
  height: 100%;
  display: inline-block;
  width: 48px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: calc(50% - 24px);
  
  font-family: Abyssinica SIL;
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 18px;
text-align: center;
}

.item-container {
  display: inline-block;
  text-align: center;
  margin: 32px;
}

.item-info {
  border: 0;
  padding: 0;
  margin: 10px auto;
}

.material-icons {
  pointer-events: none;
}

.in-cart-symbol {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  background-color: mediumaquamarine;
  position: relative;
  margin: auto;
  top: calc(50% - 60px);
  
  text-align: center;
  
}

.in-cart-symbol i, .in-cart-symbol span {
  position: relative;

  color: white;
  display: block;
  
  top: 16px; /* if symbol 100x100, 5px*/
}

.in-cart-symbol i {
  font-size: 48px;
}

.in-cart-symbol span {
  font-size: 24px;

  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
}


/* CART POPUP */

#popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  background-color: rgba(0,0,0,0.5);
}

#popup-cart {
  height: 600px;
  width: 800px;
  background-color: white;
  
  border-radius: 10px;
  position: relative;
  margin: auto;
  top: calc(50% - 300px);
}

#popup-cart-title {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 48px;
  
  height: 54px;
  
  margin: 0;
  padding: 4px 10px;
  
  border-bottom: 3px solid black;

  position: relative;
}

#popup-close-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height: 62px;
  
  cursor: pointer;

}

#popup-close-btn i {
  font-size: 64px;
  color: mediumaquamarine;
  pointer-events: none;
}

#popup-cart-btns {

  padding: 7px 13px;
  height: 107px;
  width: calc(100% - 26px);
  position: absolute;
  bottom: 0;
}

.popup-cart-btn {
  text-align: center;
  
  position: absolute;
  width: 356px;
  height: 107px;
  border: 3px solid #333333;
  border-radius: 40px;
  
  padding: 0;
  margin: 0;
  
  font-family: Abyssinica SIL;
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 48px;

color: black;
  
  background-color: white;
  cursor: pointer;
}

#popup-cart-clearall {
  left: 13px;
}

#popup-cart-next {
  right: 13px;
}

.popup-cart-btn i {
  font-size: 48px;
  position: relative;
  top: 3px;
}

#popup-cart-clearall i {
  color: red;
}

#popup-cart-next i {
  color: mediumaquamarine;
  font-weight: bold;
}

.popup-cart-btn span {
  position: relative;
  top: -3px;
}

#popup-cart-contents {
  overflow-y: scroll;
  
  position: absolute;
  top: 65px;
  bottom: 121px;
  width: 100%;
  background-color: white;
}

.popup-cart-item {
  background-color: #b8b8b8;
  height: 67px;
  position: relative;

  border-bottom: 3px solid white;
}

.popup-quantity-control {
  height: 33px;
  width: 120px;
  padding: 0;
  /* margin: 10px auto; */
  border: 0;
  position: absolute;
  top: calc(50% - 33px/2);
  right: 15px;
}

.popup-item-info {
  height: 54px;
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 32px;
  position: absolute;
  margin: 0;
  top: 15px;
  left: 100px;
}

.popup-cart-delete {
  position: absolute;
  height: 54px;
  /* border: 1px solid black; */
  border: none;
  border-radius: 10px;
  padding: none;
  background-color: transparent;
  
  cursor: pointer;
  
  top: calc(50% - 27px);
  left: 15px;
}

.popup-cart-delete i {
  font-size: 32px;
  color: red;
  pointer-events: none;
}

#empty-message {
  font-family: Abyssinica SIL;
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 36px;
  
  color: white;
  
  position: absolute;
  margin: 0;
  padding: 0;
  
  top: 23px;
  left: 45px;
  right: 45px;
}

.category-dropdown-container {
  position: absolute;
  top: calc(100% + 3px);
  left: -3px;
  width: calc(100% + 6px);
  /* height?? max height? */

  background-color: white;
  display: none;
}

.category-dropdown {
  position: relative;
  background-color: grey;
  height: 58px;
  

}

.category-dropdown-content {
  height: 100%;
  width: 100%;
  background-color: white;
  border: none;
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 24px;
  text-align: center;

  color: black;
  
  cursor: pointer;
}

.category-dropdown-content:hover {
  background-color: lightgrey;
}

#category-btns li:hover .category-dropdown-container {
  display: block;
}


#finalize-form h1 {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 36px;

  color: #FFFFFF;
  
  display: inline-block;
  padding: 0;
  margin: 10px;
}

#input-radius {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 36px;
  
  margin: 0px 5px;
  padding: 0px 5px;
}

.radio-choice input {
  font-size: 100px;
  width: 25px;
  height: 25px;
}

#location-search-container {
  
  height: 58px;
  width: 100%;
  
  border-radius: 5px;
  
  position: relative;
  margin: 15px auto;
}

#location-search-bar {
  position: absolute;
  left: 0;
  height: 100%;
  width: 84.5%;
  border: 0;
  padding: 0 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 48px;
}



#location-search-btn {
  padding: 0;
  margin: 0;
  height: 100%;
  /*width: 83px;*/
  width: 14%;
  position: absolute;
  right: 0;
  
  border: 0;
  border-left: 3px solid mediumaquamarine;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  
  background-color: white;
  
  cursor: pointer;
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 36px;
  
}

#finalize-form {
  padding: 35px 40px;
}

#ask-preference, .radio-choice, #radio-choices-container, #input-radius-container, #transport-btns {
  display: inline-block;
}

#transport-btns {
  height: 56px;
}

#transport-btns button {
  height: 50px;
  width: 50px;
  border: 3px solid white;
  margin: 0;
  padding: 0;
  background-color: transparent;
  
  cursor: pointer;
}

#transport-btns button i {
  font-size: 36px;
  color: white;
  pointer-events: none;
}

#input-radius-container, #radio-choices-container {
  padding-left: 50px;
}

#transport-btns button.transport-selected {
  border: 3px solid red;
  
}

#transport-btns button.transport-selected i {
  color: red;
}

#time-value {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 36px;
  
  margin: 0px 5px;
  padding: 0px 5px;
  
  width: 77px;
  
  text-align: center;
}

#time-value-container {
  padding: 0px 0px 0px 442px;
}

.result-container {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 36px;
  
  color: white;
  
  position: relative;
  
  margin: 30px 30px 50px;
  
  height: 166px;
}

.result-number {
  position: relative;
  bottom: calc(100% - 42px);
}

.result-number, .result-container div {
  display: inline-block;
  height: 100%;
}

.result-store, .result-cost, .result-time {
  display: block;
  
  margin: 0 0 20px 13px;
}

.result-time {
  margin: 0 0 0 13px;
}

.result-store:hover, .result-cost span:hover {
  cursor: pointer;
  text-shadow: 0 0 10px white;
}

/* STORE POPUP */

.popup-store {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  background-color: rgba(0,0,0,0.5);
  
  z-index: 1;
}

.popup-store-container {
  height: 600px;
  width: 800px;
  background-color: white;
  
  border-radius: 10px;
  position: relative;
  margin: auto;
  top: calc(50% - 300px);
}

.popup-store-title {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 48px;
  
  height: 54px;
  
  margin: 0;
  padding: 4px 10px;
  
  border-bottom: 3px solid black;

  position: relative;
}

.popup-store-close {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height: 62px;
  
  cursor: pointer;

}

.popup-store-close i {
  font-size: 64px;
  color: mediumaquamarine;
  pointer-events: none;
}

.popup-store-contents {
  
  position: absolute;
  top: 65px;
  bottom: 121px;
  width: 100%;
  /*background-color: lightgrey; */
}

.popup-store-franchise {
  height: 54px;
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 42px;
  position: relative;
  margin: 0;
  top: 30px;
  left: 40px;
  width: calc(100% - 80px);
  
  /*background-color: grey;*/
}

.popup-store-info {
  height: 54px;
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 32px;
  position: relative;
  margin: 20px 0 0 0;
  top: 30px;
  left: 40px;
  width: calc(100% - 80px);
  
  /*background-color: grey;*/
}

.popup-store-info > span + span {
  position: absolute;
  left: 150px;
}

.popup-store-info span + span span {
  position: relative;
  display: block;
  /*background-color: blue;*/
  margin: 0 0 15px 0;
}

#popup-receipt {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  background-color: rgba(0,0,0,0.5);
  
  z-index: 1;
}

#popup-receipt-container {
  height: 600px;
  width: 800px;
  background-color: white;
  
  border-radius: 10px;
  position: relative;
  margin: auto;
  top: calc(50% - 300px);
}

#popup-receipt-title {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 48px;
  
  height: 54px;
  
  margin: 0;
  padding: 4px 10px;
  
  border-bottom: 3px solid black;

  position: relative;
}

#popup-receipt-close {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height: 62px;
  
  cursor: pointer;

}

#popup-receipt-close i {
  font-size: 64px;
  color: mediumaquamarine;
  pointer-events: none;
}

#popup-receipt-contents {
  overflow-y: scroll;
  
  position: absolute;
  top: 65px;
  bottom: 67px;
  width: 100%;
}

.popup-receipt-item {
  background-color: #b8b8b8;
  height: 76px;
  position: relative;

  border-bottom: 3px solid white;
}

.popup-receipt-quantity, .popup-receipt-cost, .popup-receipt-info:nth-last-child(2) {

  height: 54px;
  vertical-align: middle;
  line-height: 54px;
  top: calc(50% - 54px/2);
  /*top: calc(67px/2 - 54px/2);*/
  /*top: calc(25px - 54px/2);*/
}

.popup-receipt-info:nth-last-child(3) {
  height: 54px;
  vertical-align: middle;
  line-height: 54px;
  top: calc(25px - 54px/2);
}

.popup-receipt-quantity {
  padding: 0;
  margin: 0;
  border: 0;
  position: absolute;
  /*top: calc(50% - 54px/2);*/
  
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  font-size: 40px;
  text-decoration-line: underline;

  color: black;
  
  left: 20px;
}

.popup-receipt-info {

  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 32px;
  position: absolute;
  margin: 0;
  border: 0;
  padding: 0;
  
  left: 100px;
}

.popup-receipt-item span {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 20px;
  position: absolute;
  margin: 0;
  border: 0;
  padding: 0;
  
  left: 100px;
  bottom: 5px;
}

.popup-receipt-cost {
  position: absolute;

  /* border: 1px solid black; */
  border: 0;
  padding: 0;
  margin: 0;
  right: 20px;
  
  font-family: Abyssinica SIL;
font-style: normal;
font-weight: bold;
line-height: normal;
font-size: 40px;

color: black;
  
  
  
}

#popup-receipt-total {
  position: absolute;
  bottom: 0;
  height: 67px;
  width: 100%;
  overflow-y: scroll;
  border-top: 3px solid black;
}

#popup-receipt-total::-webkit-scrollbar {
  background: transparent;
}

#popup-receipt-total p {
  position: absolute;
  height: 54px;
  vertical-align: middle;
  line-height: 54px;
  border: 0;
  margin: 0;
  padding: 0;
  
  right: 20px;
  bottom: calc(50% - 54px/2);
}

#popup-receipt-total p span:first-child {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 32px;
  position: absolute;
  right: 150px;
  top: calc(100% - 54px);
  height: 54px;
  vertical-align: middle;
  line-height: 54px;
}

#popup-receipt-total p span + span {
    font-family: Abyssinica SIL;
font-style: normal;
font-weight: bold;
line-height: normal;
font-size: 40px;
  height: 54px;
  vertical-align: middle;
  line-height: 54px;

color: black;
}

/* LOAD PREV POPUP */
#popup-load {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  background-color: rgba(0,0,0,0.5);
  
  z-index: 1;
}

#popup-load-container {
  height: 500px;
  width: 800px;
  background-color: white;
  
  border-radius: 10px;
  position: relative;
  margin: auto;
  top: calc(50% - 250px);
}

#popup-load-title {
  font-family: Abyssinica SIL;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  font-size: 48px;
  
  height: 54px;
  
  margin: 0;
  padding: 4px 10px;
  
  border-bottom: 3px solid black;

  position: relative;
}

#popup-load-btns {

  padding: 7px 13px;
  height: 107px;
  width: calc(100% - 26px);
  position: absolute;
  bottom: 0;
}

.popup-load-btn {
  text-align: center;
  
  position: absolute;
  width: 356px;
  height: 107px;
  border: 3px solid #333333;
  border-radius: 40px;
  
  padding: 0;
  margin: 0;
  
  font-family: Abyssinica SIL;
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 48px;

color: black;
  
  background-color: white;
  cursor: pointer;
}

#popup-load-no {
  left: 13px;
}

#popup-load-yes {
  right: 13px;
}

.popup-load-btn i {
  font-size: 48px;
  position: relative;
  top: 3px;
  font-weight: bold;
}

#popup-load-no i {
  color: red;
}

#popup-load-yes i {
  color: mediumaquamarine;
}

.popup-load-btn span {
  position: relative;
  top: -3px;
}

#popup-load-contents {
    font-family: Abyssinica SIL;
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 48px;

color: black;

  position: absolute;
  margin: 40px;
  border: 0;
  padding: 0;
  
  text-align: center;
}

#popup-load-close {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  height: 62px;
  
  cursor: pointer;

}

#popup-load-close i {
  font-size: 64px;
  color: mediumaquamarine;
  pointer-events: none;
}

/*Downloaded from https://www.codeseek.co/FarhanSharif/page0-rYvMgQ */
  function keepNum(elem, prevNum) {
  var regex = /[^0-9]+/g;
  if (regex.exec(elem.value)) {
     elem.value = prevNum; 
   }
}

window.addEventListener("load", function() {
  
  var contents = document.getElementById("contents");

  document.body.addEventListener("click", function(e) {
    if (e.target.className == "quantity-inc") {
      e.target.previousElementSibling.value =
        parseInt(e.target.previousElementSibling.value) + 1;
    } //end if

    if (e.target.className == "quantity-dec") {
      if (e.target.nextElementSibling.value > 0)
        e.target.nextElementSibling.value =
          parseInt(e.target.nextElementSibling.value) - 1;
    } //end if
  }); //end, click listener
  
  document.body.addEventListener("click", function(e){
    if (e.target.className == "quantity") {
      
      var prevNumVal = e.target.value;
      e.target.addEventListener("input", keepNum(this, prevNumVal)); //end, input listener
      
    } //end if
    
  }); //end, click listener
  
  contents.addEventListener("click", function(e) {
    if(e.target.className == "item-btn") {
      e.target.innerHTML = "Added";
      e.target.style.border = "none";
      e.target.disabled = true;
      e.target.style.cursor = "default";
      
      var currElement = e.target; //currElem is button
      currElement = currElement.previousElementSibling; //currElem is quantity-control
      
      /* Do something with quantity-control? */
      
      currElement = currElement.previousElementSibling.previousElementSibling; //currElem is item-info, then currElem is item-image
      
      var inCartSymbol = currElement.children[0]; //access to in-cart-symbol
      
      inCartSymbol.style.display = "block";
      
      
      
    }
    
  }); //end, click listener
  
  
  
  //start of transport-btn click listener
  document.getElementById("transport-btns").addEventListener("click", function(e) {
    var btns = this.children;
    var prevSelected = "";
    for (var i = 0; i < btns.length; i++) {
      if (btns[i].classList.contains("transport-selected")) {
        prevSelected = btns[i];
        break;
      }
    }
    if (e.target.tagName == "BUTTON" && !e.target.classList.contains("transport-selected")) {
      e.target.classList.add("transport-selected");
      prevSelected.classList.remove("transport-selected");
      
      if (e.target.id == "transport-walk") {
        this.nextElementSibling.value = "walk";
      }
      
      else if (e.target.id == "transport-bike") {
        this.nextElementSibling.value = "bike";
      }
      
      else if (e.target.id == "transport-car") {
        this.nextElementSibling.value = "car";
      }
      
      else if (e.target.id == "transport-transit") {
        this.nextElementSibling.value = "transit";
      }
    }
    
  }); //end of transport-btn click listener
  
  document.getElementById("radio-choices-container").addEventListener("click", function(e){
    if (e.target == this.children[2].children[0]) {
      this.nextElementSibling.style.display = "block";
    }
    
    else {
      this.nextElementSibling.style.display = "none";
    }
  });
 

}); //end, window listener

Comments