Cara Mengubah Warna Background Pada HTML Dengan Input Kode Hexa

Selamat datang di website kursuswebdesign Dumet School , baiklah pada kesempatan kali ini saya akan membagikan tutorial tentang cara mengubah warna background dengan memasukan kode hexa, contoh : #000000. Langkah pertama Cara Mengubah Warna Background Pada HTML Dengan Input Kode Hexa , saya akan membuat struktur html terlebih dahulu seperti berikut ini;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Background</title>
  <link rel="stylesheet" href="back.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <div class="btn"><i class="fa fa-cog"></i></div>

  <div class="box">
    <h2>masukan kode hexa</h2>
    <div class="box-c">
    <div class="txtb">
      <div class="prev"></div>
      <input type="text" placeholder="#000000" id="hex">
    </div>
  </div>
    <button class="apply">coba</button>
  </div>


</body>
</html>

Jika sudah membuat file htmlnya langkah selanjutnya memberikan style CSS seperti dibawah ini

*{
  margin:0;
  padding:0;
  font-family: sans-serif;
}

body{
  background:#000;
}

.btn{
  position: absolute;
  top: 130px;
  right: 30%;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  transition: 0.2s;
}

.btn:hover{
  transform: rotate(180deg);
}

.box{
  position: absolute;
  top:-50%;
  left:50%;
  transform: translate(-50%, -50%);
  background:#f1f1f1;
  width: 450px;
  height: 180px;
  transition: 1s;
}

.box-show{
  top:50%;
}

.box h2{
  background:#d0dd0d;
  padding: 20px;
  font-size: 17px;
  color: #fff;
  text-transform: uppercase;
}

.box-c{
  padding:20px 20px;
  overflow: hidden;
}

.txtb{
  position: absolute;
  margin-bottom: 10px;
}

#hex{
  width: 87%;
  padding: 0 60px 0 80px;
  height: 40px;
  border:1px solid #ff004c;
}

.prev{
  width: 70px;
  height: 30px;
  position: absolute;
  top:5px;
  left: 5px;
}

.apply{
  float: right;
  border: none;
  background:#00bbff;
  text-transform: uppercase;
  padding:10px 30px;
  margin: 35px 17px;
  color: #fff;
  cursor: pointer;
}

Dan jika sudah selesai coba ditambahkan script javascript / jquery-nya sebagai berikut:

<script>
    // Membuat tampil dan sembunyikan box
    $('.btn').click(function(){
      $(".box").toggleClass('box-show');
    });

    // hasil warna setelah input kode hexa
    $('#hex').keyup(function(){
      $('.prev').css("background", $('#hex').val());
    });

    // fungsi tombol setelah selesai memilih warna yang sesuai
    $('.apply').click(function(){
      $('body').css("background", $('#hex').val());
      // fungsi sembunyikan box setelah memilih warna
      $(".box").toggleClass("box-show");
    });
  </script>

Jika semua sudah diketikan sampai akhir ,maka saat di klik icon akan muncul box yang digunakan untuk input kode hexa, lalu akan langsung dapat dilihat warna yang dihasilkan dan jika warna sudah sesuai keinginan langsung klik tombol coba dan background langsung berubah deeeh. Berikut ini contoh tampilanya yang saya buat : 

Demikian artikel tentang Cara Mengubah Warna Background Pada HTML Dengan Input Kode Hexa , semoga bermanfaat dan langsung dicoba .