javascript

Membuka beberapa page dalam 1 kali klik dengan Javascript

7/20/2019 11:38:00 pm

Buka beberapa halaman dalam satu kali klik

Oke kali ini kita akan membuat suatu fungsi, tepatnya fungsi javascript untuk membuka beberapa url dalam satu kali perintah.

Membuka beberapa page dalam 1 kali klik dengan Javascript
Membuka beberapa page dalam 1 kali klik dengan Javascript  


Membuka beberapa page dalam 1 kali klik dengan Javascript 


Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>https://indianaweb.blogspot.com</title>
  5. </head>
  6. <body>
  7.  <a href="javascript:(function(){window.open('https://dezige-in.blogspot.com/2014/06/link-membuka-banyak-url-dalam-satu-klik.html');})();javascript:(function(){window.open('https://www.google.com/');})();">Teks Link</a>
  8. </body>
  9. </html>

Mengganti nilai value ketika di klik dengan menggunakan Javascript

7/20/2019 10:57:00 pm

Ganti nilai value ketika di klik dengan menggunakan Javascript (method replacewith)

Mendengar dari katanya saja mungkin sedikit asing menurut kawan-kawan semua ok langsung aja kita teliti dan praktekkan.

Mengganti nilai value ketika di klik dengan menggunakan Javascript
Mengganti nilai value ketika di klik dengan menggunakan Javascript


Dengan fungsi ini kita dapat mereplaces suatu nilai value ketika kita jalankan perintah tersebut.

Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>indianaweb.blogspot.com</title>
  5. </head>
  6. <body>
  7. <h1>Cara mengganti nama dengan javascript</h1>
  8. <div class="container">
  9.   <div class="second">Data Pertama</div>
  10.   <div class="third">Data Ketiga</div>
  11. </div>
  12. <br>
  13. <button>Klik Css</button>
  14. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  15. <script>
  16. $(document).ready(function(){
  17.     $("button").click(function(){
  18.         $(".second").replaceWith("<p>Data Kedua</p>");
  19.     });
  20. })
  21. </script>
  22. </body>
  23. </html>

Cara membuat effect smooth scrolling dengan javascript

6/09/2019 06:04:00 pm

CARA MEMBUAT EFFECT SCROLLING DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

Smooth scrolling effect in JS
Cara membuat effect smooth scrolling dengan javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>Indianaweb.blogspot</title>
  5.  <style type="text/css">
  6.   body {
  7.    padding: 10px 400px;
  8.   }
  9.  
  10.   .button-container {
  11.    position: fixed;
  12.    bottom: 20px;
  13.    right: 20px;
  14.    background: #fff;
  15.    border: 1px solid #ccc;
  16.    padding: 10px;
  17.   }
  18.  </style>
  19. </head>
  20. <body>
  21. <h2 id="top">JavaScript</h2>
  22. <p>
  23. Lorem Ipsum is simply dummy text of the printing and typesetting industr
  24. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  25. when an unknown printer took a galley of type and scrambled it to make a type
  26. specimen book. It has
  27. </p>
  28. <p id="test">
  29. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  30. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
  31. when an unknown printer took a galley of type and scrambled it to make a type 
  32. specimen book. It has
  33. </p>
  34. <h2>Beginnings at Netscape</h2>
  35. <p>
  36. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  37. Lorem Ipsum has been the industry's standard dummy text ever since the 150
  38. when an unknown printer took a galley of type and scrambled it to make a type
  39. specimen book. It has
  40. </p>
  41. <p>
  42. Lorem Ipsum is simply dummy text of the printing and typesetting industry
  43. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  44. when an unknown printer took a galley of type and scrambled it to make a type 
  45. specimen book. It has
  46. </p>
  47.  
  48.  <div class="button-container">
  49.   <button onclick="scrollToBottom();">Scroll to Bottom</button>
  50.   <button onclick="scrollByUnits();">Scroll by 300</button>
  51.   <button onclick="scrollToElement();">Scroll to Element</button>
  52.   <button onclick="scrollToTop();">Scroll to top</button>
  53.  </div>
  54.  
  55.  <script type="text/javascript">
  56.   function scrollToBottom() {
  57.    window.scroll({
  58.     top: document.body.scrollHeight,
  59.     left: 0,
  60.     behavior: 'smooth'
  61.    });
  62.   };
  63.  
  64.   function scrollByUnits() {
  65.    window.scrollBy({
  66.     top: 300,
  67.     left: 0,
  68.     behavior: 'smooth'
  69.    });
  70.   };
  71.  
  72.   function scrollToElement() {
  73.    document.querySelector('#test').scrollIntoView({
  74.     behavior: 'smooth'
  75.    });
  76.   };
  77.  
  78.   function scrollToTop() {
  79.    document.querySelector('#top').scrollIntoView({
  80.     behavior: 'smooth'
  81.    });
  82.   };
  83.  </script>
  84.  
  85. </body>
  86. </html>


Jika masih bingung silahkan download SOURCE CODENYA disini
Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




Tags : 

Cara mengkonversi warna RGB ke HEX dengan javascript

6/09/2019 05:57:00 pm

CARA MENGKONVERSI WARNA RGB KE HEX DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

Encryption using JS
Cara Mengenkripsi MD5 dengan Javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Indianaweb.blogpsot</title>
  6. </head>
  7. <body>
  8.  <h2>RGB convert to color</h2>
  9.  <div class="controls">
  10.   <input type="range" min="0" max="255" value="0" onchange="document.getElementById('redValEl').value = this.value;convert();">
  11.   Merah : <input id="redValEl" type="text" value="0" style="width: 30px;"><br><br>
  12.   <input type="range" min="0" max="255" value="0" onchange="document.getElementById('greenValEl').value = this.value;convert();">
  13.   Hijau : <input id="greenValEl" type="text" value="0" style="width: 30px;"><br><br>
  14.   <input type="range" min="0" max="255" value="0" onchange="document.getElementById('blueValEl').value = this.value;convert();">
  15.   Biru : <input id="blueValEl" type="text" value="0" style="width: 30px;"><br><br>
  16.  
  17.   <input id="hexaValue" type="text" value="#000000">
  18.  </div>
  19.  <br><br>
  20.  <div id="rgb" style="width: 100px; height: 100px;"></div>
  21.  <div id="hex" style="width: 100px; height: 100px;"></div>
  22.  
  23.  <script type="text/javascript">
  24.  
  25.   var redValEl = document.getElementById('redValEl');
  26.   var greenValEl = document.getElementById('greenValEl');
  27.   var blueValEl = document.getElementById('blueValEl');
  28.   var hexaValue = document.getElementById('hexaValue');
  29.  
  30.   var rgb = document.getElementById('rgb');
  31.   var hex = document.getElementById('hex');
  32.  
  33.   function convert() {
  34.    var red = redValEl.value;
  35.    var green = greenValEl.value;
  36.    var blue = blueValEl.value;
  37.  
  38.    var hexaColorCode = "#" + getHexa(red) + getHexa(green) + getHexa(blue);
  39.    hexaValue.value = hexaColorCode;
  40.  
  41.    rgb.style.background = `rgb(${red}, ${green}, ${blue})`;
  42.    hex.style.background = hexaColorCode;
  43.   };
  44.  
  45.   function getHexa(value) {
  46.    var hexa = parseInt(value).toString(16);
  47.    return hexa.length == 1 ? "0" + hexa : hexa;
  48.   }
  49.  
  50.  
  51.  </script>
  52. </body>
  53. </html>


Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




 Tags : 

Cara Mengenkripsi value ke MD5 dengan Javascript

6/09/2019 05:49:00 pm

CARA MENGENKRIPSI VALUE KE MD5 DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

RGB to Hex Color Converter in JS
Cara Mengenkripsi value ke  MD5 dengan Javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Indianaweb.blogspot</title>
  6. </head>
  7. <style>
  8.  input{
  9.   padding: 5px 10px;
  10.  }
  11.  button{
  12.   cursor: pointer;
  13.  }
  14. </style>
  15. <body>
  16.  <h2>Encript Password Dengan JS</h2>
  17.  <form name="login" method="POST" style="width: 400px;" onsubmit="encryptForm();">
  18.   <input type="text" name="username" placeholder="username"><br><br>
  19.   <input type="password" name="password" placeholder="password">
  20.   <br><br>
  21.   <button type="submit">Submit</button>
  22.  </form>
  23.  
  24.  <script>
  25.   function encryptForm() {
  26.    var cript = document.login.password.value = CryptoJS.MD5(document.login.password.value);
  27.    alert(cript);
  28.   }
  29.  </script>
  30. </body>
  31. </html>
  32.  


Jangan lupa PLUGIN nya
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




Tags : 

Cara membuat fungsi copy ke clipboard dengan javascript

6/09/2019 05:43:00 pm

CARA MEMBUAT FUNGSI COPY KE CLIPBOARD DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

Menyalin ke clipboard
Cara membuat fungsi copy ke clipboard dengan javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>Copy to Clipboard Automatic</title>
  5. </head>
  6. <body>
  7.  Klik Textbox :
  8.  <input type="text" readonly="readonly" value="https://indianaweb.blogspot.com/" onclick="copyToClipboard(this);" style="padding:5px 10px">
  9.  <span id="copyStatus" style="display:none ;">Copied to Clipboard</span>
  10.  
  11.  <script type="text/javascript">
  12.   function copyToClipboard(element) {
  13.    element.select();
  14.    if(document.execCommand('copy')) {
  15.     document.getElementById('copyStatus').style.display = '';
  16.     setTimeout(function() {
  17.     document.getElementById('copyStatus').style.display = 'none';
  18.     }, 3000);
  19.    }
  20.   }
  21.  </script>
  22. </body>
  23. </html>


Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




Tags : 

Cara Membuat Stopwatch Dengan Javascript

6/09/2019 05:20:00 pm

CARA MEMBUAT STOPWATCH DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

Stopwatch Dengan JS
Cara Membuat Stopwatch Dengan Javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Indianaweb.blogspot</title>
  6.  <style type="text/css">
  7.   body{
  8.    background: #27ae60;
  9.    color: #f6f6f6;
  10.    display: flex;
  11.    flex-direction: column;
  12.    align-items: center;
  13.    justify-content: center;
  14.    height: 100vh;
  15.   }
  16.  
  17.   .stopwatch {
  18.    font-size: 14em;
  19.    font-family: monospace;
  20.   }
  21.  
  22.   ul {
  23.    margin: 0;
  24.    padding: 0;
  25.   }
  26.  
  27.   ul li {
  28.    list-style: none;
  29.    padding: 10px 0;
  30.   }
  31.   button {
  32.    cursor:pointer;
  33.    border-radius:5px;
  34.    padding: 5px 10px;
  35.   }
  36.  </style>
  37. </head>
  38. <body>
  39.  <div class="controls">
  40.   <button onclick="start()">Start</button>
  41.   <button onclick="pause()">Pause</button>
  42.   <button onclick="stop()">Stop</button>
  43.   <button onclick="restart()">Restart</button>
  44.   <button onclick="lap()">Lap</button>
  45.   <button onclick="resetLaps()">Reset Laps</button>
  46.  </div>
  47.  <div class="stopwatch">00:00:00</div>
  48.  <ul class="laps"></ul>
  49.  
  50.  <script type="text/javascript">
  51.  
  52.   var ms = 0, s = 0, m = 0;
  53.   var timer;
  54.  
  55.   var stopwatchEl = document.querySelector('.stopwatch');
  56.   var lapsContainer = document.querySelector('.laps');
  57.  
  58.   function start() {
  59.    if(!timer) {
  60.     timer = setInterval(run, 10);
  61.    }
  62.   }
  63.  
  64.   function run() {
  65.    stopwatchEl.textContent = getTimer();
  66.    ms++;
  67.    if(ms == 100) {
  68.     ms = 0;
  69.     s++;
  70.    }
  71.    if(s == 60) {
  72.     s = 0;
  73.     m++;
  74.    }
  75.   }
  76.  
  77.   function pause() {
  78.    stopTimer();
  79.   }
  80.  
  81.   function stop() {
  82.    stopTimer();
  83.    ms = 0;
  84.    s = 0;
  85.    m = 0;
  86.    stopwatchEl.textContent = getTimer();
  87.   }
  88.  
  89.   function stopTimer() {
  90.    clearInterval(timer);
  91.    timer = false;
  92.   }
  93.  
  94.   function getTimer() {
  95.    return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
  96.   }
  97.  
  98.   function restart() {
  99.    stop();
  100.    start();
  101.   }
  102.  
  103.   function lap() {
  104.    if(timer) {
  105.     var li = document.createElement('li');
  106.     li.innerText = getTimer();
  107.     lapsContainer.appendChild(li);
  108.    }
  109.   }
  110.  
  111.   function resetLaps() {
  112.    lapsContainer.innerHTML = '';
  113.   }
  114.  
  115.  </script>
  116.  
  117. </body>
  118. </html>

Jika masih bingung silahkan download SOURCE CODENYA disini
 Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




Tags :