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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 id="root"></div>

<div>
  Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> 
  from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> 
  is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
              
            
!

CSS

              
                body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition: all .2s;
}
a{
  text-decoration: none;
}
::-webkit-scrollbar-track
{
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: rgba(0,0,0,.07);
}

$break-small: 700px;
$break-large: 900px;
$break-md: 1281px;

.item-container{
  width: calc(25% - 2rem);
  padding: 1rem;
  text-align: center;
  display: inline-block;
  margin: 1rem;
  overflow: hidden;
  color: #333;
  position: relative;
  text-transform:capitalize;
  @media screen and (max-width: $break-small) {
   width: 50%;
   margin: 0;
 }
 @media screen and (min-width: $break-small) and (max-width: $break-large) {
  width: calc(50% - 2rem);
}
@media screen and (min-width: $break-large) and (max-width: $break-md) {
 width: calc(33.33% - 2rem);
}



 
  &:hover{
    background: #eee;
    border-radius: 15px;
    .img{
      padding: 3rem;
      cursor: pointer;
      @media screen and (max-width: $break-small) {
          padding: .5rem;
       }
    }
    @media screen and (max-width: $break-small) {
       background: #fff;
       border-radius: 0;
     }
  }

  .img{
    width: 100%;
    padding: 2rem;
    @media screen and (max-width: $break-small) {
       padding: .5rem;
     }
  }

  .info{
    float: left;
    width: 100%;
    font-size: 1.1rem;
  }
  h1{
    text-transform: capitalize;
    color: #333;
      cursor: pointer;
      @media screen and (max-width: $break-small) {
       font-size: 1.2rem;
     }
  }
  h2{
    @media screen and (max-width: $break-small) {
       font-size: 1rem;
     }
  }
  button{
    border: none;
    background: #e55;
    color:#fff;
    padding:.7rem;
    width: 100%;
    margin: .5rem .5rem 0 0;
    outline: none;
    cursor: pointer;
    @media screen and (max-width: $break-small) {
      width: 100%;
       margin: .2rem 0;
     }

    

    &:hover{
      background: #ccc;
      color: #e55;
      @media screen and (max-width: $break-small) {
          background: #e55;
          color: #fff;
       }
    }
    &:disabled{
      background: #ddd;
      color: #e55;
      cursor: not-allowed;
    }
  }
}
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Neucha');


.list-container {
  display:block;
  width: 80%;
  padding: 0 1rem;
  margin-top: 3.5rem;
  height:100%;
  overflow-y: auto;
  @media screen and (max-width: $break-small) {
   width: 100%;
   margin-top: 4rem;
   padding-bottom: 30vh;
 }
 @media screen and (min-width: $break-small) and (max-width: $break-large) {
  width: 70%;
}

 &.lg {
   width: 100%;
 }
}
.popup{
  position: fixed;
  z-index: 10;
  height: auto;
  width: 19%;
  overflow: auto;
  max-height: calc(100% - 5rem);
  transition: .5s all;
  background: #eee;
  color: #06386d;
  top: 5rem;
  right: 1%;
  padding: .5rem 1rem;
  border-radius: 5px;
  box-shadow: 2px 2px 7px #ccc;
  font-family: 'Neucha', cursive;
  letter-spacing: 1px;
  line-height: 1.5;
  // transform: translate(-50%,-50%);
  @media screen and (min-width: $break-small) and (max-width: $break-large) {
   width: 29%;
  }
  @media screen and (max-width: $break-small) {
   top:auto;
   left: 0;
   bottom: 0;
   right: 0;
   box-shadow: none;
   width: 100%;
   max-height: 30vh;
   overflow: auto;
   border-radius: 0;
   border: 5px solid #fff;
 }


  .cart{
    .cart_item{
      float: left;
      width: 100%;
      border-bottom: 1px dashed #ccc;
      padding: 5px 0;

      &:last-child{
        border: none;
      }

      h3{
        float: left;
        width: auto;
        font-size:1rem;
        &:last-child{
          float: right;
        }
      }

    }
  }



  .final_price{
    border-top: 2px dashed #222;
    padding: 1rem 0;
    float: left;
    width: 100%;
    h3{
       font-size:1rem;
      float: left;
      width: auto;
      &:nth-child(even){
        float: right;
      }
    }

    .cart_item{
      border: none;
      float: left;
      width: 100%;
    }
  }

}

.order_btn{
  border: none;
  outline: none;
  background: salmon;
  color: #fff;
  margin: 1rem;
  width: calc(100% - 2rem);
  padding: .8rem;
  text-transform: capitalize;
  font-size: 1.1rem;
  letter-spacing: 2px;
  border-radius: 5px;
  cursor: pointer;
}
.thank_you{
  position: fixed;
  z-index: 15;
  background: #eee;
  text-transform: capitalize;
  text-align:center;
  top: 0;
  left: 0;
  padding: 5rem;
  height: 100%;
  width: 100%;
  font-family: 'Lobster', cursive;
  font-size: 2rem;
  @media screen and (max-width: $break-small) {
   font-size: 2rem;
   padding: 2rem;
 }
  h1{
    width: 100%;
    float: left;
  }
  p{
    font-size: 1.5rem;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    @media screen and (max-width: $break-small) {
       font-size: 1.2rem;
     }
  }
  .order_btn{
    width: auto;
    padding: 1rem 2rem;
    @media screen and (max-width: $break-small) {
       padding: .7rem 1rem;
     }
  }
}
.navbar{
  float: left;
  width: 96%;
  margin: 0 2%;
  padding: .8rem 0;
  // background: #333;
  // color: #fff;
  // text-align: right;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  color: #e55;
  text-align: center;
  z-index: 10;
  background: #fff;
  box-shadow: 0 8px 10px -6px rgba(0, 0, 0, .2);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  @media screen and (max-width: $break-small) {
   padding: .7rem;
   width: 100%;
   margin: 0;
 }

  .logo{
    // position: absolute;
    // left: 2rem;
    // top: 50%;
    // transform:  translateY(-50%);
    display: inline-block;
      @media screen and (max-width: $break-small) {
       float: left;
     }
    img{
      transform: rotate(-10deg);
      width: 2rem;
      float: left;

    }
    h1{
      float: left;
      padding: 0 .7rem 0;
      font-size: 1.5rem;
      letter-spacing: 5px;
      font-family: 'Righteous', cursive;
      @media screen and (max-width: $break-small) {
         font-size: 1.5rem;
         padding-top: 0;
       }
    }
  }

  

  .popup_btn{
    position: absolute;
    top: 1rem;
    right: 3rem;
    border: none;
    cursor: pointer;
    outline: none;
    background: transparent;
    @media screen and (max-width: $break-small) {
      top: .7rem;
      right: 1rem;
     }
    img{
      width: 2rem;
      height: 2rem;
      display: block;
      @media screen and (max-width: $break-small) {
        width: 2rem;
        height: 2rem;
       }
    }
    span {
      height: 1.2rem;
      width: 1.2rem;
      font-size:.7rem;
      border-radius: 100%;
      background: #f9da48;
      color: #FF5722;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: -20%;
      bottom: 0;
      border: 2px solid #FFC107;
      animation: cart_num .3s;

      @media screen and (max-width: $break-small) {
        height: 1.2rem;
        width: 1.2rem;
        font-size: .8rem;
       }
    }
  }
}

@keyframes cart_num {
  0%{
    transform : scale(0);
    box-shadow: 0px 0px 4px 2px #fff;
  }
  100%{
    transform: scale(1);
    box-shadow: 0px 0px 4px 10px transparent;
  }
}

.order{
  position: fixed;
  z-index: 10;
  height: 100%;
  width: 100%;
  overflow: auto;
  background: #eee;
  color: #06386d;
  top: 0;
  right: 0;
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 2px 2px 7px #ccc;
  font-family: 'Neucha', cursive;
  letter-spacing: 1px;
  line-height: 1.5;

  .cart_left{

      float: left;
      width: 70%;
      overflow: auto;
      height: calc(100vh - 10rem);
    @media screen and (max-width: $break-small) {
        height:auto;
        width:100%;
      }
    .cart_item {
      width: 100%;
      float: left;
      background: #fff;
      padding: 1rem;
      border-radius: 5px;
      margin-bottom: .5rem;
      

      img {
        width: 5rem;
        float: left;
      }
      .cart_info{
        float: left;
        padding: 1rem;
        width: calc(100% - 5rem);
      }
    }
  }


  .cart_right{
    float: right;
    width: calc(30% - 1rem);
    margin:0 0 0 .5rem;
    padding: 1rem;
    background: #fff;
    border-radius: 5px;
    @media screen and (max-width: $break-small) {
        margin:0;
        width:100%;
      }

    .cart_item,.final_price {
      float: left;
      width: 100%;
      padding: .5rem 0;
      h3{
        float: left;
        font-size:1rem;
        &:last-child{
          float: right;
        }
      }
    }
    .final_price{
      border-top: 2px dashed #333;
      padding: 1rem 0;
      color: #333;
      font-size: 1.5rem;
      &:first-child{
        border: none;
          padding: .5rem 0;
          color: #06386d;
          font-size: 1.1rem;
      }
    }

  
  }
}

              
            
!

JS

              
                const { Component, PropTypes } = React;



class List extends Component {
  state = {
          items: [
            { id: 'item_1001',
              name:'Apple' ,
              src: 'https://i.ibb.co/2M74fJY/apple.png',
              cost: 1,
              qty: 0
            },
            { id: 'item_1002',
              name:'Beer' ,
              src: "https://i.ibb.co/7KMsv8K/pint.png",
              cost: 5,
              qty: 0
            },
            { id: 'item_1003',
              name:'Lettuce' ,
              src: "https://i.ibb.co/prQCnx2/salad.png",
              cost: 3,
              qty: 0
            },
            { id: 'item_1004',
              name:'Bread' ,
              src: "https://i.ibb.co/mtSgjfK/bread.png",
              cost: 2.50,
              qty: 0
            },
            { id: 'item_1005',
              name:'aubergine' ,
              src: 'https://i.ibb.co/yqZL7Pj/aubergine.png',
              cost: 3.50,
              qty: 0
            },
            { id: 'item_1006',
              name:'cheese' ,
              src: 'https://i.ibb.co/TbWF0RB/cheese.png',
              cost: 5.99,
              qty: 0
            },
            {
              id: 'item_1007',
              name:'chocolate' ,
              src: 'https://i.ibb.co/cNmshyn/chocolate.png',
              cost: 7.80,
              qty: 0
            },
            {
              id: 'item_1008',
              name:'fish' ,
              src: 'https://i.ibb.co/1KWWxmx/fish.png',
              cost: 10.20,
              qty: 0
            },
            { id: 'item_1009',
              name:'jawbreaker' ,
              src: 'https://i.ibb.co/Dfgwn9k/jawbreaker.png',
              cost: 1.50,
              qty: 0
            },
            { id: 'item_1010',
              name:'milk' ,
              src: 'https://i.ibb.co/xzwZPGx/milk.png',
              cost: 3,
              qty: 0
            },
            {
              id: 'item_1011',
              name:'steak' ,
              src: 'https://i.ibb.co/bXy9Yw4/steak.png',
              cost: 15,
              qty: 0
            },
            {
              id: 'item_1012',
              name:'red chilly' ,
              src: 'https://i.ibb.co/sWscDrF/mustard.png',
              cost: 0.50,
              qty: 0
            },
            { id: 'item_1013',
              name:'tomato' ,
              src: 'https://i.ibb.co/B4yy9J8/tomato.png',
              cost: 0.70,
              qty: 0
            },
            { id: 'item_1014',
              name:'water' ,
              src: 'https://i.ibb.co/rcf39YY/water.png',
              cost: 1,
              qty: 0
            },
            { id: 'item_1015',
              name:'asparagus' ,
              src: 'https://i.ibb.co/HVJDLym/asparagus.png',
              cost: 2.50,
              qty: 0
            },
            { id: 'item_1016',
              name:'avocado' ,
              src: 'https://i.ibb.co/qdj7Jx1/avocado.png',
              cost: 4.99,
              qty: 0
            },
            { id: 'item_1017',
              name:'bacon' ,
              src: 'https://i.ibb.co/x6f0G4m/bacon.png',
              cost: 3,
              qty: 0
            },
            { id: 'item_1018',
              name:'banana' ,
              src: 'https://i.ibb.co/zZpj7br/banana.png',
              cost: 1.70,
              qty: 0
            },
            { id: 'item_1019',
              name:'beans' ,
              src: 'https://i.ibb.co/n3w2kTc/beans.png',
              cost: 0.80,
              qty: 0
            },
            { id: 'item_1020',
              name:'blueberries' ,
              src: 'https://i.ibb.co/F84Gh4w/blueberries.png',
              cost: 5.99,
              qty: 0
            },
            { id: 'item_1021',
              name:'broccoli' ,
              src: 'https://i.ibb.co/Zf4HYff/broccoli.png',
              cost: 2,
              qty: 0
            },
            { id: 'item_1022',
              name:'nutella' ,
              src: 'https://i.ibb.co/kDfpY0F/butter.png',
              cost: 7.60,
              qty: 0
            },
            { id: 'item_1023',
              name:'cabbage' ,
              src: 'https://i.ibb.co/dc76F50/cabbage.png',
              cost: 1.50,
              qty: 0
            },
            { id: 'item_1024',
              name:'Soda' ,
              src: 'https://i.ibb.co/XDN13fk/can.png',
              cost: 1.20,
              qty: 0
            },
            { id: 'item_1025',
              name:'carrot' ,
              src: 'https://i.ibb.co/RSW2B5r/carrot.png',
              cost: 4,
              qty: 0
            },
            { id: 'item_1026',
              name:'cherries' ,
              src: 'https://i.ibb.co/yVSx2P8/cherries.png',
              cost: 3.10,
              qty: 0
            },
            { id: 'item_1027',
              name:'chicken' ,
              src: 'https://i.ibb.co/x3QbFnF/chicken.png',
              cost: 6.99,
              qty: 0
            },
            { id: 'item_1028',
              name:'chili' ,
              src: 'https://i.ibb.co/9Tdxvj9/chili.png',
              cost: 0.90,
              qty: 0
            },
            { id: 'item_1029',
              name:'chives' ,
              src: 'https://i.ibb.co/PmCZWKF/chives.png',
              cost: 1.30,
              qty: 0
            },
            { id: 'item_1030',
              name:'cookies' ,
              src: 'https://i.ibb.co/F03mpyy/cookies.png',
              cost: 2.50,
              qty: 0
            },
            { id: 'item_1031',
              name:'corn' ,
              src: 'https://i.ibb.co/FWHk4vK/corn.png',
              cost: 2.60,
              qty: 0
            },
            { id: 'item_1032',
              name:'croissant' ,
              src: 'https://i.ibb.co/NZBpGDr/croissant.png',
              cost: 4.99,
              qty: 0
            },
            { id: 'item_1033',
              name:'Look Morty, I turned myself into a pickle' ,
              src: 'https://i.ibb.co/fnL42HT/rick.png',
              cost: 2,
              qty: 0
            },
            { id: 'item_1034',
              name:'cupcake' ,
              src: 'https://i.ibb.co/WkzhhZ4/cupcake.png',
              cost: 3.50,
              qty: 0
            },
            { id: 'item_1035',
              name:'doughnut' ,
              src: 'https://i.ibb.co/2835jMz/doughnut.png',
              cost: 4,
              qty: 0
            },
            { id: 'item_1036',
              name:'flour' ,
              src: 'https://i.ibb.co/tZ20JBz/flour.png',
              cost: 8,
              qty: 0
            },
            { id: 'item_1037',
              name:'garlic' ,
              src: 'https://i.ibb.co/mXDshjJ/garlic.png',
              cost: 1.10,
              qty: 0
            },
            { id: 'item_1038',
              name:'gingerbread' ,
              src: 'https://i.ibb.co/WgN8cp1/gingerbread.png',
              cost: 5.60,
              qty: 0
            },
            { id: 'item_1039',
              name:'grapes' ,
              src: 'https://i.ibb.co/0GR7pMY/grapes.png',
              cost: 9.99,
              qty: 0
            },
            { id: 'item_1040',
              name:'honey' ,
              src: 'https://i.ibb.co/nPksSrm/honey.png',
              cost: 15.99,
              qty: 0
            },
            { id: 'item_1041',
              name:'hot dog' ,
              src: 'https://i.ibb.co/mcYh7KF/hot-dog.png',
              cost: 2.30,
              qty: 0
            },
            { id: 'item_1042',
              name:'jam' ,
              src: 'https://i.ibb.co/g63B5pR/jam.png',
              cost: 12,
              qty: 0
            },
            { id: 'item_1043',
              name:'jelly' ,
              src: 'https://i.ibb.co/527qD1W/jelly.png',
              cost: 5.80,
              qty: 0
            },
            { id: 'item_1044',
              name:'kebab' ,
              src: 'https://i.ibb.co/bv3q652/kebab.png',
              cost: 7.90,
              qty: 0
            },
            { id: 'item_1045',
              name:'knives set' ,
              src: 'https://i.ibb.co/WvDz0GN/knives.png',
              cost: 30,
              qty: 0
            },
            { id: 'item_1046',
              name:'lemon' ,
              src: 'https://i.ibb.co/3CyNzyb/lemon.png',
              cost: 1,
              qty: 0
            },
            { id: 'item_1047',
              name:'mustard' ,
              src: 'https://i.ibb.co/jRgpR7T/mustard.png',
              cost: 1.10,
              qty: 0
            },
            { id: 'item_1048',
              name:'octopus' ,
              src: 'https://i.ibb.co/1JYyFQV/octopus.png',
              cost: 20,
              qty: 0
            },
            { id: 'item_1049',
              name:'olives' ,
              src: 'https://i.ibb.co/6JFD9ry/olives.png',
              cost: 3,
              qty: 0
            },
            { id: 'item_1050',
              name:'onion' ,
              src: 'https://i.ibb.co/rmh91LN/onion.png',
              cost: 2,
              qty: 0
            },
            { id: 'item_1051',
              name:'orange' ,
              src: 'https://i.ibb.co/yqsrBXC/orange.png',
              cost: 4.70,
              qty: 0
            },
            { id: 'item_1052',
              name:'pasta' ,
              src: 'https://i.ibb.co/2MqdGCK/pasta.png',
              cost: 2.30,
              qty: 0
            },
            { id: 'item_1053',
              name:'pepper' ,
              src: 'https://i.ibb.co/MGgzffT/pepper.png',
              cost: 1.20,
              qty: 0
            },
            { id: 'item_1054',
              name:'pepper crusher' ,
              src: 'https://i.ibb.co/LptgYDH/pepperpowder.png',
              cost: 20.50,
              qty: 0
            },
            { id: 'item_1055',
              name:'pickles' ,
              src: 'https://i.ibb.co/D82tdN6/pickles.png',
              cost: 1,
              qty: 0
            },
            { id: 'item_1056',
              name:'pineapple' ,
              src: 'https://i.ibb.co/VtC4xsN/pineapple.png',
              cost: 5,
              qty: 0
            },
            { id: 'item_1057',
              name:'pumpkin' ,
              src: 'https://i.ibb.co/52kdt5y/pumpkin.png',
              cost: 5,
              qty: 0
            },
            { id: 'item_1058',
              name:'radish' ,
              src: 'https://i.ibb.co/hWDq3cP/radish.png',
              cost: 3,
              qty: 0
            },
            { id: 'item_1059',
              name:'salmon' ,
              src: 'https://i.ibb.co/vPL4xyL/salmon.png',
              cost: 14.80,
              qty: 0
            },
            { id: 'item_1060',
              name:'sausage' ,
              src: 'https://i.ibb.co/WDsYdyx/sausage.png',
              cost: 4.99,
              qty: 0
            },
            { id: 'item_1061',
              name:'shrimp' ,
              src: 'https://i.ibb.co/WcrczZx/shrimp.png',
              cost: 8.90,
              qty: 0
            },
            { id: 'item_1062',
              name:'strawberry' ,
              src: 'https://i.ibb.co/R2LcWSx/strawberry.png',
              cost: 5,
              qty: 0
            },
            { id: 'item_1063',
              name:'sushi' ,
              src: 'https://i.ibb.co/2cK13ZQ/sushi.png',
              cost: 15,
              qty: 0
            },
            { id: 'item_1064',
              name:'taco' ,
              src: 'https://i.ibb.co/tx6f2bw/taco.png',
              cost: 2,
              qty: 0
            },
            { id: 'item_1065',
              name:'turkey' ,
              src: 'https://i.ibb.co/FJywW5d/turkey.png',
              cost: 25,
              qty: 0
            },
          ],
          total_items: 0,
          total:0,
          packaging: 1.99,
          popup:false,
          thank_popup:false,
      }
  add = (name,cost) => {
   
    this.state.items.map((item, id) => {
        if (item.name == name) {
            item.qty += 1;
        }
      

    })
    this.setState({
      total_items: this.state.total_items + 1,
      total: this.state.total + cost,
    });
    
  }
  remove = (name, cost) => {
    this.state.items.map((item, id) => {
      if (item.name == name) {
        if(item.qty != 0) {
          item.qty -= 1;
          this.setState({
            total_items: this.state.total_items - 1,
            total: this.state.total - cost,
          });
        }
      }


    })
  }
  popup = () => {
    this.setState({
      popup: !this.state.popup
    });
  }
  thank_popup = () => {
    this.setState({
      thank_popup: !this.state.thank_popup
    });
  }
  reload = () => {
      window.location.href = window.location.href;
  }
  render() {
    return (
      <div>
        <div className='navbar'>
          <span className='logo'>
            <img src='https://i.ibb.co/s3t3Gm8/watermelon.png' alt="logo" />
            <h1>Shopping Cart</h1>
          </span>
          <button className="popup_btn"><img src='https://i.ibb.co/BcSC34f/cart.png' />
          {this.state.total_items != 0 ? (<span>{this.state.total_items}</span>):null }</button>
        </div>
        <div className="list-container">
        {this.state.items.map((item, id) => {
          return <div className='item-container' key={id} >
                    
                      <img src={item.src} alt={item.name} className="img" />
                      <h3>{item.name}</h3>
                    
                    <b>${(item.cost).toFixed(2)}</b>
                    <button onClick={() => this.add(item.name,item.cost)}>Add to Cart</button>
                    <button onClick={() => this.remove(item.name,item.cost)}>Remove</button>
                </div>
        })}
      </div>
        <div className="sidecart">
          {
          this.state.total_items != 0 ? (<div className="popup" >
            <div className="cart">
              <h2>Your Cart</h2>
                {this.state.items.map((item1, id1) => {

                  return(
                    <div key={id1}>
                      {item1.qty != 0 ?
                        (<div key={id1} className="cart_item">
                           <span><h3>{item1.name} ({item1.qty})</h3><h3>${(item1.cost * item1.qty).toFixed(2)}</h3></span>
                        </div>): null}
                    </div>
                  );

                })}
              </div>
            <div>
              <div className="final_price">
                <div className="cart_item">
                  <h3>Items Price:</h3>
                  <h3>${(this.state.total).toFixed(2)}</h3>
                </div>
                <div className="cart_item">
                  <h3>Delivery Charges:</h3>
                  <h3>Free</h3>
                </div>
                <div  className="cart_item">
                  <h3>Packaging:</h3>
                  <h3>${(this.state.packaging).toFixed(2)}</h3>
                </div>
              </div>
              <div className="final_price">
                <h3>Total Price:</h3>
                <h3>${(this.state.total + this.state.packaging).toFixed(2)}</h3>
              </div>
              <button className="order_btn" onClick={() => this.popup()}>order now</button>
            </div>
          </div>) : (<div className="popup" ><b>You cart looks empty...</b></div>)}
        </div>
        <div className="orderpage">

          {
            this.state.popup ?
          (this.state.total_items != 0 ? (<div className="order" >
            <div className="cart">
              <h1>Your Cart</h1>
                <div className="cart_left">
                    {this.state.items.map((item1, id1) => {

                      return(
                        <div key={id1}>
                        {item1.qty != 0 ?
                          (<div key={id1} className="cart_item">
                             <img src={item1.src} />
                             <span className="cart_info">
                                <h3>{item1.name} x {item1.qty}</h3>
                                <h3>Cost : ${item1.cost}</h3>
                                <h3>Total Cost : ${(item1.cost * item1.qty).toFixed(2)}</h3>
                             </span>
                          </div>): null}
                        </div>
                        );

                    })}
                  </div>
                </div>
                <div className="cart_right">
                  <div className="final_price">
                        <div className="cart_item">
                          <h3>Items Price:</h3>
                          <h3>${(this.state.total).toFixed(2)}</h3>
                        </div>
                        <div className="cart_item">
                          <h3>Delivery Charges:</h3>
                          <h3>Free</h3>
                        </div>
                        <div  className="cart_item">
                          <h3>Packaging:</h3>
                          <h3>${(this.state.packaging).toFixed(2)}</h3>
                        </div>
                  </div>
                  <div className="final_price">
                    <h3>Total Price:</h3>
                    <h3>${(this.state.total + this.state.packaging).toFixed(2)}</h3>
                  </div>
                
                  <button className="order_btn" onClick={() => this.thank_popup()}>order now</button>
                </div>
          </div>) : null):null}

          {
            this.state.thank_popup ? (<div className="thank_you">
              <h1>thank you</h1>
              <p>We will deliver your package at your doorstep shortly.</p>
              <button className="order_btn" onClick={() => this.reload()}>Go Back to Shopping</button>
            </div>) : null
          }
        </div>        
      </div>
    );

  }
}





ReactDOM.render(<List />, document.getElementById('root'));
              
            
!
999px

Console