Day 002 - Product Card

day-002-product-card.markdown

Day 002 - Product Card

http://www.100daysui.com/#cbp=ajax/shot-2

A Pen by Jonathan Obino on CodePen.

License.

index.html

<div class="product">
  <div class="header">
    <div class="back"></div>
  </div>
  <div class="main">
    <div class="left">
      <h1>Nook</h1>
      <h2>Lounge chair</h2>
      <h3>$320.00</h3>
      <img src="http://www.design.si.it/wp-content/uploads/2018/02/Sedia-di-design-nordico-legno-polipropilene-e-cuscino-grigio.png" alt="" />
      <img src="https://banner2.cleanpng.com/20180403/gce/kisspng-eames-lounge-chair-table-dining-room-furniture-modern-5ac3984e3543e8.8864625415227679502182.jpg"/>
    </div>
    <div class="right">
      <p>Designer Karim Rashid continues to put his signature spin on all genres of design through various collaborations with top-notch companies. Another one to add to the win column is his work with Italian manufacturer Chateau d’Ax.</p>
      <p>In stock. <a href="">Buy Extended Warranty</a></p>
      <p>
        <span class="fa fa-star yellow"></span>
        <span class="fa fa-star yellow"></span>
        <span class="fa fa-star yellow"></span>
        <span class="fa fa-star yellow"></span>
        <span class="fa fa-star"></span>
        <span>(4.67 - 172 reviews)</span>
      </p>
      <p class="quantity">QUANTITY <span class="fa fa-angle-left angle"></span><span id="qt">3</span><span class="fa fa-angle-right angle"></span></p>
    </div>
  </div>
  <div class="footer">
    <div class="left">
      <p id="price">$960.00</p>
    </div>
    <div class="right">
      <p>Add to Cart</p>
    </div>
  </div>
</div>

script.babel

const arrows = document.querySelector('.quantity').querySelectorAll('.fa');

const handleChange = (elem)=>{
  const qt = document.querySelector('#qt');
  const total = document.querySelector('#price');
  let value = parseInt(qt.innerText);
  let classArr = Array.from(elem.classList);
  if(/right/gi.test(classArr)) {
    if(value!=9) value++;
    else alert('Watch out! We\'ve got a badass over here!');
  }
  else {
    if(value!=1) value--;
    else alert('Watch out! We\'ve got a badass over here!');
  }
  qt.innerText = value;
  total.innerText = '$'+(value*320); 
}

const product = document.querySelector('.product');

const moveBox = (val)=>{
  product.style.mozTransform =
  product.style.msTransform =
  product.style.webkitTransform =
  product.style.transform = 'translateX('+val+'px)';
}

const back = document.querySelector('.back');

const spring = new rebound.SpringSystem();

let animation = spring.createSpring(60,3);

animation.addListener({
  onSpringUpdate(spring){
    let current = spring.getCurrentValue();
    if(current > 1) spring.setEndValue(0);
    let val =  rebound.MathUtil.mapValueInRange(current,0,1,0,20);
    moveBox(val);
  }
})

back.addEventListener('click',()=>{
  animation.setEndValue(1);
});


const arrArr = Array.from(arrows);

arrArr.forEach(elem=>{
  elem.addEventListener('click',()=>{
    handleChange(elem);
  })
})

scripts

<script src="https://unpkg.com/rebound"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

//$senape: #bcbd31;
$senape:rgb(71, 190, 115);
$giallo:rgb(254,203,108);

$cubicBounce:cubic-bezier(0.68, -0.55, 0.265, 1.55);

body{
  background:linear-gradient(to top, rgba(100,50,50,0.6), rgba(0,0,0,0.8)),url(https://www.atrafloor.com/app/uploads/2017/01/camo-camouflage-pattern-flooring-grey.jpg);
  background-size:cover;
min-height:100vh;
 font-family: 'Montserrat', sans-serif;
}

a {
  text-decoration:none;
  color: #3399ff;
}

#qt{
  color:rgb(153,153,153);
}

p{
  .fa[class~=angle]{
      font-size:1.3rem;
      position:relative;
      top: 0.15rem;
      margin:0 20px;
      cursor: pointer;
      color:rgb(216,216,216);
    transition:all .5s;
    &:hover{
      color:$senape;
    }
  }
}

.yellow{
  color: $giallo;
}
.product{
  height:500px;
  width:600px;
  background:white;
  position:relative;
  left:calc(50% - 300px);
  margin-top:calc(50vh - 250px);
  &.action{
    animation: bounce 1s $cubicBounce infinite;
  }
  .header{
    height:40px;
    position:relative;
    padding:20px;
    .back{
      position:relative;
      width:0px;
      height:0px;
      border-top: 30px solid $senape;
      border-bottom: 30px solid transparent;
      border-left: 30px solid $senape;
      border-right: 30px solid transparent;
      &:before{
        content:"←";
        position:absolute;
        color:rgba(255,255,255,0.9);
        font-size:1.3rem;
        font-weight:bold;
        top:-22px;
        left:-22px;
      }
    }
  }
  .main{
    padding:0 30px;
    box-sizing: border-box;
    .quantity{
      margin-top:40px;
      color: #333;
    }
    h1{
      font-size:4.5rem;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      margin: 0 -5px -15px;
      color:#232e3a;
    }
    h2{
      color:#999999;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      margin: 0 0;
      text-transform:uppercase;
    }
    h3{
      color:#232e3a;
      margin:0;
    }
    img{
      max-width:90%;
      margin-left:25px;
    }
    .left,
    .right{
      width:40%;
      padding: 0 calc(5% - 1px);
    }
    .right{
      color:#999;
      font-size:.78rem;
      line-height: 1.5;
    }
  }
  .footer{
    position:absolute;
    bottom:0;
    padding:5px 40px 5px 0;
    width:calc(90% - 40px);
    left:10%;
    border-top: 1px solid #ccc;
    .left{
      p:before{
        content:"Total Price";
        text-transform:uppercase;
        font-size:.7rem;
        color:black;
        position:absolute;
        top:-12px;
        width:200%;
      }
    }
    p{
    color:$senape;
    position:relative;
    font-size:1.5rem;
    }
  }
}

.left{
  float:left;
}

.right{
  float:right;
}

@keyframes bounce{
  50%{
    transform: translateX(10px);
  }
}

forked from codepen to use when making an e-shop