Toaster Actions

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

Thumbnail
This awesome code was written by projodesign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright projodesign ©
  • HTML
  • CSS
  • JavaScript
    <div class='toaster-wrapper'>
 
  <div class='toaster'>
    
    <div class='toaster-case'></div>
    
     <div id='bit-of-toast' class='bit-of-toast'></div>
    
     <div id='toaster-handle' class='toaster-handle toaster-handle-inactive'>
       
     </div><!--end toaster-handle-->
    
    <div class='toaster-brand'>
      <h3>gems</h3>
    </div><!--end toaster-brand-->
    
    <div class='toaster-dial'>
      
    </div><!--end toaster-dial-->
    
     <div class='toaster-stand'>
    
     </div><!--end toaster-stand-->
    
  </div><!--end toaster-->
  
  <a onclick="setToastType('cold')" class='heat-status hs-cold'>cold</a>
  <a onclick="setToastType('warm')" class='heat-status hs-warm'>warm</a>
  <a onclick="setToastType('hot')" class='heat-status hs-hot'>hot</a>
  <a onclick="setToastType('burnt')" class='heat-status hs-burn'>burnt</a>
  
  <a onclick="handleUp()" class='heat-status hs-burn'>cancel handle</a>
  
  <div class='thermo'></div>
 
</div><!--end toaster-wrapper-->

/*Downloaded from https://www.codeseek.co/projodesign/toaster-actions-ZWdyPy */
    $primary: #bad6d1;

.toaster-wrapper {
  margin:100px auto;
}

.toaster {
  margin:0 auto;
  width:300px;
  height:200px;
  position:relative;
}

.toaster-case {
  background:$primary;
  position:absolute;
  width:100%;
  height:100%;
  border-top-right-radius:30px;
  border-top-left-radius:30px;
  z-index:2;
}

.toaster-stand {
  background:#999;
  height:25px;
  width:100%;
  position:absolute;
  bottom:0;
  
  &:before {
    content:'';
    width:25px;
    height:15px;
    background:#999;
    position:absolute;
    bottom:-15px;
    left:15px;
  }
  
   &:after {
    content:'';
    width:25px;
    height:15px;
    background:#999;
    position:absolute;
    bottom:-15px;
    right:15px;
  }
  
}

.toaster-handle {
  width:50px;
  height:5px;
  background:#999;
  position:absolute;
  right:-45px;
  top:40px;
  z-index:1;
  cursor:pointer;
  
  &:after {
    content:'';
    width:20px;
    height:20px;
    background:#999;
    border-radius:100%;
    position:absolute;
    right:-10px;
    top:-7px;
  }
}

.toaster-handle-inactive {
    transform:rotate(-25deg);
}

.toaster-handle-active {
   transform:rotate(25deg);
  top:60px;
}

.toaster-dial {
  width:60px;
  height:60px;
  background:#f9f9f9;
  border-radius:100%;
  position:absolute;
  bottom:40px;
  right:50%;
  margin-right:-30px;
  z-index:2;
  background: conic-gradient(lightblue 10%, yellow 20%, orange 30%, red 40%, $primary 50%);
border-radius: 50%;
  transform:rotate(-90deg);
  box-shadow:inset 0 0 2px transparentize(#000,0.9);
  
  &:before {
    content:'';
    background:#f9f9f9;
    width:40px;
    height:40px;
    position:absolute;
    border-radius:100%;
    top:10px;
    right:5px;
    box-shadow: 0 0 2px transparentize(#000,0.9);
    }
  
  &:after {
    content:'';
    width:50%;
    height:100%;
    background:$primary;
    position:absolute;
    bottom:0;
    z-index:-3;
    border-right:1px solid transparentize(#333,0.95);
  }
}

.toaster-brand {
  h3 {
    margin:0;
    padding-top:30px;
    font-size:1.2em;
    text-align:center;
    color:darken(#bad6d1,20%);
  }
}

.bit-of-toast {
  width:140px;
  height:100px;
  border:1px solid beige;
  background:beige;
  position:absolute;
  border-radius:5px;
  top:-50px;
  left:calc(50% - 70px);
  z-index:-1;
  transition:all 0.3s cubic-bezier(.17,.67,.48,2.56);
}

.thermo {
  width:50px;
  height:50px;

   background-image: linear-gradient(-90deg, red, orange, yellow, blue);
  border-radius:50%;
  
}


/*Downloaded from https://www.codeseek.co/projodesign/toaster-actions-ZWdyPy */
    var toastType = document.getElementById('bit-of-toast');

function setToastType(temperature) {
   if(temperature == "cold") {
     console.log('cold toast');
     setTimeout(function(){ toastType.style.backgroundColor = 'blue'; }, 1000);
     handleDown(4000);
   }
  else if(temperature == "warm"){
    console.log('warm toast');
    setTimeout(function(){ toastType.style.backgroundColor = 'orange'; }, 1000);
    handleDown(6000);
  }
  else if(temperature == "hot"){
    console.log('hot toast');
    setTimeout(function(){ toastType.style.backgroundColor = 'red'; }, 1000);
    handleDown(8000);
  }
  else {
    console.log('burnt toast');
    setTimeout(function(){ toastType.style.backgroundColor = 'black'; }, 1000);
    handleDown(10000);
  }
     
 
}
 var toasterHandleActive = document.getElementById("toaster-handle");
toasterHandleActive.addEventListener("click", function() {
    handleDown('5000');
});


function handleDown(time) {
 toasterHandleActive.classList.add("toaster-handle-active");
  var toasterHandleInactive = document.getElementById("toaster-handle");
toastType.style.top = 0;
  alert(time);
  if(time == '') {
  var time = 5000;
  }
  else {
  var time = time;
  }
  handleUp(time);
}

function handleUp(time) {
  //alert('go back up handle');
  setTimeout(function(){  
      var toasterHandleInactive = document.getElementById("toaster-handle");
toasterHandleInactive.classList.remove("toaster-handle-active");
  toastType.style.top = "-50px";
  }, time);

};


  




Comments