convert smile into sad using css/html/javascript

I have code to create a milee. Now i want a slider bar from level 0 to 12 and on changing this bar value, i want to convert this smile into sad.

  div.smileyface {
     width: 300px;
     height: 300px;
     position: relative;
     border-radius: 150px;
     -webkit-border-radius: 150px;
     -moz-border-radius: 150px;
     display: block;
     background: #ffe632;
     background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
     background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e); 
     box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
     -webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
     -moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
     }
     
    p.eyes {
     width: 50px;
     height: 80px;
     background: #222;
     border-radius: 100px/160px;
     -webkit-border-radius: 100px 160px;
     -moz-border-radius: 100px/160px;
     position: absolute;
     top: 40px;
     box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
     -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
     -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
     } 
     
     p.eyes.lefteye {
      left: 75px;
      }
      
     p.eyes.righteye {
      right: 75px;
      }
      
    div.smile {
     width: 200px;
     height: 70px;
     border: 10px solid #222;
     border-top: 0;
     background: rgba(0,0,0,0);
     -moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
     -webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
     border-radius: 0 0 120px 120px / 0 0 90px 90px;
     position: absolute;
     bottom: 50px;
     left: 38px;
     box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
     -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
     -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
     }
     
    div.corner {
     width: 10px;
     height: 30px;
     background: #222;
     border-radius: 100px/160px;
     -webkit-border-radius: 100px 160px;
     -moz-border-radius: 100px/160px;
     position: absolute;
     top: -12px;
     -webkit-transform: rotate(65deg);
     -moz-transform: rotate(65deg);
     left: -12px;
     }
     
     div.corner.right {
      left: 202px;
      -webkit-transform: rotate(-65deg);
      -moz-transform: rotate(-65deg);  
      }

This is the code for making a smilee now i want to put a slider bar values from 0 to 12 and convert it from smile to sad

Solved

The way I would have done it would be in following manner:

Create div with only bottom border visible and border-radius set to 50% giving it a semi-circle(smiling) :) shape and then change the border-radius as and when the slider value change to give it a transformation from smile to a speechless face :| now with that being done to give it a sad face see if slider value is lower than 50% if yes then rotate the div by 180 deg and as the value goes lower from increase the border radius again giving semi-circle in opposite direction resulting in sad face :( So various values during different values of slider should be like :

Slider value 100 - Border radius 50% - Rotation 0

Slider value 50 - Border radius 0% - Rotation 0

Slider value 0 - Border radius 50% - Rotation 180 deg

Demo : https://jsfiddle.net/c620onvh/

Oh and also you will be needing to transform the div on Y axis equal to "-height of div", try removing transformY code from demo and try it and you'll know why :)


You want to map the slider position to the value of the css transform property. 



function changeSmile() {
  const val = document.getElementById("mySlider").value;
  const smileDiv = document.getElementById('smile').style.transform = `rotate(${val}deg)`;
}

and then change it from class smile to id. A class is generic, an id is specific to an element.


Comments

Post a Comment