بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
PET STORE atau toko hewan sudah banyak berjamuran di tengah-tengah kehidupan masyarakat yang beraneka ragam. Tentu saja dengan keberadaan komunitas pecinta hewan, keberadaan Pet Store sangatlah dibutuhkan untuk mencukupi segala macam kebutuhan dari sang pemilik hewan peliharaannya. Kucing menjadi primadona keberadaan Pet Store. Mereka para penjual, menjual pernak-pernik yang berkaitan dengan kucing. Mulai kandang, pakan, tempat buang kotoran, dan aksesoris bel yang terlilit di leher kucing.
Namun seiring berjamurnya keberadaan Pet Store. Maka persaingan mendapatkan para pelanggan juga mengalami peningkatan yang sangat signifikan. Tentu saja dengan persaingan tersebut menimbulkan ide dan kreasi dari para pemilik Pet Store guna meningkatkan brand awareness dari produk itu. Para pemilik tokok tidak segan-segan memberikan pelayanan ekstra kepada para pengunjung yang mendatangi dan membeli produknya. Maka tak heran dengan itu, para pengunjung diwajibkan selektif memilih Pet Store untuk dijadikan langganannya.
Baca Juga :
Dan salah satu cara untuk memberikan nilai kepada Pet Store, adalah dengan memberikan form interaktif menarik pet store dengan sebuah pemrograman CSS3. Dan form itu kemudian dapat ditampilan dalam sebuah halam website dari Pet Store tersebut. Dengan demikian, para pengunjung dapat langsung memberikan nilai plus dan minusnya dari Pet Store itu setelah datang dan membelanjakan untuk keperluan hewan peliharannya. Satu yang menjadi acuan disini adalah form ini dipenuhi dengan animasi hewan yang lucu dan imut. Sehingga para pengunjung dirasakan akan betah dan kemudian mengisi form yang telah disediakan.
Untuk itu tidak perlu lama-lama lagi ya, karena kita akan segera membuat form menarik itu.
Yuk mulai saja tutorialnya :
Membuat Form Interaktif Menarik Pet Store dengan CSS3
HAML
.loader
.loader_inner
%img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw1.png'}
%img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l1.png'}
%img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw2.png'}
%img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l2.png'}
%img.pawone{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/paw1.png'}
%img.pawtwo{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l3.png'}
.div Memuat daftar umpan balik ...
.tut
.tut_inner
%h2 Gerakkan mulut karakter untuk menunjukkan ekspresi wajahnya
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/Dec_31,_2015_22:28.gif'}
%p Ok
.question
%p ?
.feedbackform
.feedbackform_slide.first.active_slide
%img.sb.monkey{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/sunburst.svg"}
.grad.monkey
.feedbackform_slide__inner
%h1.question_s
%h2 Gerakkan mulut kera keatas dan kebawah untuk menunjukkan ekspresi wajahnya!
.character
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/monkey.svg'}
.character_smile
.smiler_input
%input.monkey{:max => "20", :min => "0", :type => "range"}
%svg.smile.monkey{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "#562911", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.monkey
%span Istimewa
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
.feedbackform_slide
%img.sb.rabbit{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/circback.svg"}
.grad.rabbit
.feedbackform_slide__inner
%h1.question_s
%h2 Gerakkan mulut kelinci keatas atau kebawah untuk menunjukkan ekspresi wajahnya!
.character.rabbit
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rabbit.svg'}
.character_smile
.smiler_input
%input.rabbit{:max => "20", :min => "0", :type => "range"}
%svg.smile.rabbit{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "#562911", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.rabbit
%span Istimewa
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
.feedbackform_slide
%img.sb.panda{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/hexback.svg"}
.grad.panda
.feedbackform_slide__inner
%h1.question_s
%h2 Gerakkan mulut Panda lucu keatas atau kebawah untuk menunjukkan ekspresi wajahnya!
.character
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/panda.svg'}
.character_smile
.smiler_input
%input.panda{:max => "20", :min => "0", :type => "range"}
%svg.smile.panda{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "black", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.panda
%span Istimewa
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
.feedbackform_slide
%img.sb.lion{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/sunburst.svg"}
.grad.lion
.feedbackform_slide__inner
%h1.question_s
%h2 Gerakkan mulut Singa keatas atau kebawah untuk menunjukkan ekspresi wajahnya!
.character
.character_image
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/lion.svg'}
.character_smile
.smiler_input
%input.lion{:max => "20", :min => "0", :type => "range"}
%svg.smile.lion{:height => "20px", :version => "1.1", :width => "70px", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M10 10 C 20 10, 40 10, 50 10", :fill => "transparent", :stroke => "black", "stroke-linecap" => "round", "stroke-width" => "4"}
.rating.lion
%span Istimewa
%img.next{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton3.png'}
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
.feedbackform_slide
.feedbackform_slide__inner
.col_left
%img.board{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/resultboard.png'}
.summary
.col_right
.rating.end
%span Terima kasih!
%img.prev{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/greenbutton4.png'}
%a{:href => 'https://codepen.io/Alifacode/',:target => '_blank'} Ikuti kami di Codepen untuk kreasi-kreasi lainnya!SCSS
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Crete+Round);
.question{
position:absolute;
top:20px;
right:20px;
z-index:3;
display:none;
p{font-size:40px;color:white;cursor:pointer;margin:0;}
}
.tut{
background:white;
padding:0px;
width:760px;
margin:auto;
transition:all .3s;
//display:none;
border-radius:7px;
text-align:center;
position:absolute;
top:50%;
transform:translateY(-50%) scale(0);
left:0;
right:0;
z-index:3;
h2{
font-size: 20px;
color: #C39681;
width: 370px;
margin: 50px auto 30px auto;
}
p{
color: #C39681;
border-top: 1px solid #FCF1EC;
border-bottom-right-radius: 7px;
padding-top: 30px;
border-bottom-left-radius: 7px;
background: #FFF3ED;
transition:all .3s;
cursor: pointer;
margin: 20px 0px 0px 0px;
padding-bottom: 30px;
&:hover{
background:#7B6358;
color:white;
}
}
}
.loader{
position:fixed;
z-index:3;
width:100%;
height:100%;
background:#c39681;
&_inner{
text-align:center;
position:absolute;
left:0;
right:0;
top:50%;
transform:translateY(-50%);
margin:auto;
div{
color: rgba(255, 255, 255, 0.52);
font-size: 16px;
margin-top: 40px;
opacity:0;
animation:load .6s .3s forwards
}
.pawone{
top:-10px;
}
.pawtwo{}
img{
margin-right:17px;
width:30px;
position:relative;
opacity:0;
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
animation: load 1s (0.4s + $i/3) linear forwards;
}
}
@keyframes load{
0%{opacity:0}
100%{opacity:1}
}
}
}
}
body{
font-family: 'Varela Round', sans-serif;
padding:0;
margin:0;
overflow:hidden;
.feedbackform{
.end{
width: 400px !important;
height: 75px;
img{
top: 42px !important;
}
}
&_slide{
overflow:hidden;
float:left;
height:100vh;
right:0;
position:relative;
background:rgb(195,150,129);
transition:all .6s cubic-bezier(0.770, 0.000, 0.175, 1.000);
.sb{
width:200px;
height:200px;
position:absolute;
left:0;
top:50%;
transform:scale(12);
right:0;
opacity:0.166667;
transition:all .3s;
animation:spin 40s linear infinite;
margin:auto;
transform-origin: center;
}
.grad.monkey{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #CC970D 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #CC970D 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
.grad.rabbit{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #991E64 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #991E64 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
.grad.panda{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #7414E3 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #7414E3 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
.grad.lion{
background: -webkit-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #E41C3B 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, #E41C3B 100%);
position:absolute;
width:100%;
height:100%;
left:0;
opacity:0.25;
transition:all .3s;
top:0;
}
&__inner{
position:absolute;
top:50%;
left:0;
right:0;
width:780px;
margin:auto;
text-align:center;
transform:translateY(-50%);
h1{
margin:0;
font-size:22px;
color:white;
margin-bottom:6px;
transform:scale(0)
}
h2{
margin:0;
color: rgba(0, 0, 0, 0.42);
transform:scale(0);
font-size:14px;
}
.rating{
transform:scale(0);
img{
position: absolute;
transition:all .3s;
right: -10px;
top: 19px;
cursor: pointer;
width: 50px;
&:hover{
right:-14px;
}
}
.prev{
left:-10px;
&:hover{
left:-14px;
}
}
.prev,.next{
transform:scale(0);
}
font-family: 'Crete Round', serif;
color:#745226;
position:relative;
left:0px;
font-size:26px;
border-radius:4px;
width:260px;
padding:30px;
background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/board.png');
background-size:cover;
margin:0 auto;
text-transform:uppercase;
}
.character.rabbit{
width: 156px;
} .character{
width:180px;
transform:scale(0);
margin:0px auto -40px auto;
margin-top:30px;
position:relative;
&_smile{
position:absolute;
z-index:2;
top:0;
.smile.monkey{
position: absolute;
top: 119px;
left: 61px;
}
.smile.panda{
position: absolute;
top: 129px;
left: 63px;
}
.smile.lion{
position: absolute;
top: 122px;
left: 60px;
}
.smile.rabbit{
position: absolute;
top: 164px;
left: 49px;
}
input{
}
@-moz-document url-prefix() {
input.monkey{
transform: rotate(90deg) !important;
width: 96px !important;
top: 121px !important;
cursor: grab !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 35px !important;
}
input.rabbit{
transform: rotate(90deg) !important;
width: 96px !important;
top: 165px !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 22px !important;
}
input.panda{
transform: rotate(90deg) !important;
width: 96px !important;
top: 131px !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 36px !important;
}
input.lion{
transform: rotate(90deg) !important;
width: 96px !important;
top: 124px !important;
position: relative !important;
z-index: 1 !important;
opacity: 0 !important;
left: 33px!important;
}
}
input.monkey{
transform:rotate(90deg);
width:96px;
top: 30px;
cursor: -webkit-grab; cursor: -moz-grab;
position:relative;
z-index:1;
opacity:0;
}
input.rabbit{
transform:rotate(90deg);
width:96px;
top: 78px;
position:relative;
z-index:1;
opacity:0;
}
input.panda{
transform:rotate(90deg);
width:96px;
top: 42px;
position:relative;
z-index:1;
opacity:0;
}
input.lion{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
width: 96px;
top: 36px;
position: relative;
z-index: 1;
opacity: 0;
}
input[type=range]::-webkit-slider-runnable-track {
width:80px;
height: 190px;
//cursor: grab;
box-shadow: none;
background: transparent;
border-radius: 1.3px;
border: none;
}
input[type=range]::-moz-range-track{
width:80px;
height: 190px;
box-shadow: none;
background: transparent;
border-radius: 1.3px;
border: none;
}
}
}
}
}
}
}
// Animations
.poptut{
animation: poptut 1s .4s forwards;
}
.popone{
animation: pop 1s .4s forwards;
}
.poptwo{
animation: pop 1s .6s forwards;
}
.popthree{
animation: pop 1s .8s forwards;
}
.popfour{
animation: pop 1s 1s forwards;
}
@keyframes pop{
0%{transform:scale(0);}
25%{transform:scale(1.2);}
50%{transform:scale(.9);}
75%{transform:scale(1.1);}
100%{transform:scale(1);}
}
@keyframes poptut{
0%{transform:translateY(-50%) scale(0);}
25%{transform:translateY(-50%) scale(1.2);}
50%{transform:translateY(-50%) scale(.9);}
75%{transform:translateY(-50%) scale(1.1);}
100%{transform:translateY(-50%) scale(1);}
}
a.follow{
background: #4BE8AC !important;
box-shadow: 0px 3px 0px #39BF8C !important;
}
a.download,a.follow{ transform:scale(0);
&:hover{
background: #88614F;
}
text-align: center;
margin-top: 80px;
width: 200px;
float: left;
display: inline-block;
padding: 26px 30px;
background: #845E4C;
box-shadow: 0px 3px 0px #744A37;
color: white;
font-weight: 900;
font-family: 'nunito';
text-decoration: none;
border-radius: 4px;
margin-left: 22px;}
// summary
.summary{
position: relative;
padding: 0px 50px;
margin-top: 78px;
}
.col_left{
width: 400px;
position: relative;
height: 510px;
padding: 9px 0px 0px 0px;
margin: 0 auto;
text-align: left;
font-family: 'Crete Round', serif;
color: white;
font-size: 19px;
.board{
position:absolute;
top:0;
left:0;
width:100%;
}
p{
margin:0;
}
margin:0 auto;
text-align: left;
font-family: 'Crete Round', serif;
color: white;
font-size: 19px;
.answer_p{
font-size:28px; font-size: 19px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: 9px;
margin-bottom: 6px !important;
color: #4BE8AC;
}
}
.col_right{
width: 453px;
position: absolute;
bottom: -27px;
left: 159px;
margin: 0 auto;
a{
color: white;
font-size: 14px;
display: block;
margin: 14px;
}
}JS
var preload_time = 3000; // How long preload is shown
var preload_fade_speed = 400; // Preload fadeout speed
setTimeout(function(){
$('.loader').fadeOut(preload_fade_speed); // Fade out preloader
open_modal(); // Open tutorial
},preload_time);
// End preloader
// Tutorial modal
function open_modal(){
$('.tut').addClass('poptut'); // Remove
$('.question').fadeOut(400); // Fadeout
}
function close_modal(){
$('.question').fadeIn(400); // Fadeout
$('.tut').removeClass('poptut'); // Remove
$('h1,h2').addClass('popone'); // Intro
$('.character').addClass('poptwo'); // Intro
$('.rating').addClass('popthree'); // Intro
$('.next,.prev').addClass('popfour'); // Intro
}
$('.tut p').click(function(){
close_modal(); // Close modal
});
$('.question p').click(function(){
open_modal(); // Open modal
})
// End tutorial modal
// Page slider
var slide_amount = $('.feedbackform_slide').length; // Slide count
var window_width = $(window).width(); // Init window width
var current_x = 0; // Current x value of slides
var current_position = 0; // Current position
$('.feedbackform').css('width',window_width * slide_amount + 'px'); // Set up the slides
$('.feedbackform_slide').css('width',window_width + 'px'); // Set up the slides
$('.next').click(function(){
update_answers();
var window_width = $(window).width(); // Re assess window width
if(current_position < slide_amount - 1){
current_position++;
current_x = current_position * window_width;
$('.feedbackform_slide').css('right',current_x);
$('.active_slide').removeClass('active_slide').next().addClass('active_slide');
setTimeout(function(){
$('.active_slide').find('.popone').removeClass('popone'); // Reset animations
$('.active_slide').find('.poptwo').removeClass('poptwo'); // Reset animations
$('.active_slide').find('.popthree').removeClass('popthree'); // Reset animations
$('.active_slide').find('.popfour').removeClass('popfour'); // Reset animations
},10)
setTimeout(function(){
$('h1,h2').addClass('popone'); // Reset animations
$('.character,a.follow,a.download').addClass('poptwo'); // Reset animations
$('.rating').addClass('popthree'); // Reset animations
$('.next,.prev').addClass('popfour'); // Reset animations
},410)
}
});
$('.prev').click(function(){
update_answers();
var window_width = $(window).width();
if(current_position > 0){
current_position--;
current_x = current_position * window_width;
$('.feedbackform_slide').css('right',current_x);
$('.active_slide').removeClass('active_slide').prev().addClass('active_slide');
setTimeout(function(){
$('.active_slide').find('.popone').removeClass('popone'); // Reset animations
$('.active_slide').find('.poptwo').removeClass('poptwo'); // Reset animations
$('.active_slide').find('.popthree').removeClass('popthree'); // Reset animations
$('.active_slide').find('.popfour').removeClass('popfour'); // Reset animations
},10)
setTimeout(function(){
$('h1,h2').addClass('popone'); // Reset animations
$('.character,a.follow,a.download').addClass('poptwo'); // Reset animations
$('.rating').addClass('popthree'); // Reset animations
$('.next,.prev').addClass('popfour'); // Reset animations
},410)
}
});
$(window).resize(function(){ // Responisivity
var window_width = $(window).width(); // Window width
$('.feedbackform').css('width',window_width * slide_amount + 'px'); // Re jig slide sizes
$('.feedbackform_slide').css('width',window_width + 'px'); // Re jig slide sizes
current_position = 0; // Reset
current_x = current_position * window_width; // Reset
$('.feedbackform_slide').css('right',current_x); // Reset
$('.active_slide').removeClass('active_slide')
$('.first').addClass('active_slide');
});
// End page slider
// Questions
var questions = ['Bagaimana kesan Anda dengan pelayanan dari kami?','Bagaimana kesan Anda dan hewan peliharaan Anda?','Bagaimana pelayan staf kami?','Bagaimana dengan kebersihan toko kami?']
var q = 0;
$('.question_s').each(function(){
$(this).html(questions[q])
q++;
})
// Summary
var answers = []
var animals = ['monkey','rabbit','panda','lion']
for(i = 0; i < animals.length; i++){
answers[animals[i]] = ['Average']
}
function update_answers(){
$('.summary').html('');
for(i = 0; i < questions.length; i++){
$('.summary').append('<p>' + questions[i] + '</p><p class="answer_p">' + answers[animals[i]][0] + '</p>')
}
}
// Messages
var monkey_messages = ['Menyeramkan','Buruk','Tidak Baik','Lumayan','Bagus','Sempurna','Menakjubkan']; // Monkey array
var rabbit_messages = ['Mengecewakan','Tidak Senang','Tidak Bagus','Lumayan','Agak Lumayan','Senang','Sangat Sangat Senang']; // Rabbit array
var panda_messages = ['Menyeramkan','Buruk','Tidak Baik','Lumayan','Bagus','Sempurna','Menakjubkan']; // Panda array
var lion_messages = ['Sangat Kotor','Kotor','Butuh dibersihkan','Lumayan','Bersih','Sangat Bersih','Superb']; // Lion array
// The smile
$('input').mousedown(function(){
$('input').css('cursor','-webkit-grabbing'); // Change cursor
$('input').css('cursor','-moz-grabbing'); // Change cursor
});
$('input').mouseup(function(){
$('input').css('cursor','-webkit-grab'); // Change cursor
$('input').css('cursor','-moz-grab'); // Change cursor
});
var smile_value;
$('input').mousedown(function(){
var active_smile = $(this).attr('class').split(' ').pop(); // Get active smile
s = setInterval(function(){
// Change smile svg coords
smile_value = $('input.' + active_smile).val(); // Get the value
$('.smile.' + active_smile + ' path').attr('d','M10 10 C 20 ' + smile_value + ', 40 ' + smile_value + ', 50 10');
// Select relevant array
if(active_smile == 'monkey'){
var active_array = monkey_messages; // Monkey array
} else if(active_smile == 'rabbit'){
var active_array = rabbit_messages; // Rabbit array
} else if(active_smile == 'panda'){
var active_array = panda_messages; // Panda array
} else if(active_smile == 'lion'){
var active_array = lion_messages; // Lion array
}
answers[active_smile] = [$('.rating.' + active_smile + ' span').html()]; // Push to answers
$('.sb.' + active_smile).css('opacity',(smile_value/60)); // Pattern opacity
$('.grad.' + active_smile).css('opacity',(smile_value/40)); // Gradient opacity
if(smile_value == 0){
// Worst
$('.rating.' + active_smile + ' span').html(active_array[0]); // Set message
} else if(smile_value < 10 && smile_value > 5){
// Bad
$('.rating.' + active_smile + ' span').html(active_array[1]); // Set message
} else if(smile_value < 5 && smile_value > 0){
// Not good
$('.rating.' + active_smile + ' span').html(active_array[2]); // Set message
} else if(smile_value == 10){
// Average
$('.rating.' + active_smile + ' span').html(active_array[3]); // Set message
} else if(smile_value > 10 && smile_value < 15){
// Good
$('.rating.' + active_smile + ' span').html(active_array[4]); // Set message
} else if(smile_value > 15 && smile_value < 20){
// Very good
$('.rating.' + active_smile + ' span').html(active_array[5]); // Set message
} else if(smile_value== 20){
// Amazing
$('.rating.' + active_smile + ' span').html(active_array[6]); // Set message
}
},10)
});
// Clear interval
$('input').mouseup(function(){
clearInterval(s); // Clear intervals
});Catatan :
Untuk memodifikasi supaya lebih bagus dan sesuai keinginan, silakan diutak atik sendiri ya teman-teman. Jangan lupa back up template kalian kalau mau ngoding. Supaya nanti bila ada kerusakan akan dapat dikembalikan seperti semula.
Nah sekarang sudah jadi khan. Untuk demonya bisa dilihat dibawah ini ya
Oke sampai penghujung acara. Semoga jadi ya nanti ketika kalian mempraktekkannya. Sudah larut malam nih. Saatnya istirahat dan besok lanjut kerja lagi. Mata sudah 5 watt. Maaf ya teman-teman bila ada salah kata salah tulis dalam artikel kali ini. Silakan kirim komentar bila ada yang perlu ditanyakan. Terima kasih banyak yang sudah mampir. "Jangan berkecil hati bila kamu sedang menghadapi suatu masalah, karena Tuhan tidak akan memberikan ujian melebihi kemampuan umatNya. Sehingga kita bisa menjadi lebih baik esok dan kedepannya kelak". Salam Blogger.
