JSFiddle - React, Tailwind, and code Playground

by Shah Danial

HTML

<form target="_blank" class="dynamic_form" id="add-widget" name="add-widget" action="https://www.blogger.com/add-widget" method="POST">
<p>
Jumlah Author yang dalam widget
</p>
<input id="jumlah-author" type="text" value="" placeholder="jumlah dalam angka" data-required="true" required="" class="usp-input">

<br/><br/>

<p>
Kira komen hingga berapa hari sebelum?
</p>   
<input id="hari" name="number" type="text" value="" placeholder="Taip 0 jika tidak mahu limit hari sebelum" data-required="true" class="usp-input">
<br/>
<small>Taip 0 jika tiada limit hari sebelum</small>

<br/><br/>
    



<p class="heading">Nama-nama comenntator yang taknak tersenarai</p>
 <div id="banned">
<p><input class="banneds" value="Anonymous" disabled></p> 
<p><input class="banneds" value="Tanpa Nama" disabled></p> 
<p><input class="banneds" value="No Name" disabled></p>
    </div> 
    
    <a href="#" id="addinput">Tambah nama di banned</a>
    
    <br/><br/>
    
    
    

    <textarea id="berak" name="widget.content" rows="1" cols="1" placeholder="Post Content" data-required="true" required="" class="usp-textarea">UMP = '',UMA = '',TA = '',TL = '[image] [user] ([count])',TN = 'No top commentators at this time.';
//&lt;![CDATA[
var...

CSS

input{width:100%}
textarea {display:none}

JavaScript

// ADD A GADGET TO BLOGGER

$(function(){
var berry = $('#berak').val();






$('*').hover(function(){
 document.getElementById("jumlah-author").defaultValue = "9";  
 document.getElementById("hari").defaultValue = "0";
 
 var ash = $(".banneds").map(function() {
   var fuck = $(this).val();
   return "'"+fuck+"'";
}).get();
 
 var shah = "<div class='commentators_widget'"+"><s"+"cript type='text/javascript'>var JA = "+$('#jumlah-author').val()+",MC = 1,ND = "+$('#hari').val()+",EM = true,EU = ["+ash+"],MU = 25,SA = 30,CA = true,UAA = 'https://1.bp.blogspot.com/-dkBexLJN-zs/VwOGfOe_twI/AAAAAAAAAr4/_iGxlLkC6WYkHkxeRHsaS7vv0B6JpkX3g/s30-c/gravatar.jpg' + SA,UNA = 'http://4.bp.blogspot.com/-yMXbWjO4q6I/VXbRq3nUQqI/AAAAAAAAHN8/0fUoe0LWLrU/s30-c/author-photo.jpg' + SA,";
 
 $('#the-result').val(shah + berry);
});  








// ----------- CLICK ----------------
        var scntDiv = $('#banned');
        var i = $('#banned p').size() + 1;
        
        $('#addinput').live('click', function() {
        $('<p><input type="text" class="banneds" value="" placeholder="Taip Nama comentator yang taknak dijadikan Top Comentator" required><a href="#" class="remove">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });
        
        $('.remove').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                                return false;
        });
        
  
  
// for test: Sila Hover button untuk result
$('.the-button').hover(function(){
alert($('#the-result').val());
});


});