Skip to main content

MEMBUAT MENU DRAG AND DROP PADA WEBSITE MENGGUNAKAN JAVASCRIPT

          


              Disini saya akan berbagi sedikit pengetahuan tentang bagaimana cara membuat Menu Drag & Drop pada sebuah website mengunakan bahasa pemrograman javascript.Seperti biasa saya menggunakan Text Editor Visual Studio Code.Bagi Teman-teman yang belum mempunyai software tersebut,maka download terlebih dahulu kemudian anda instal di pc ataupun dilaptop anda.Anda boleh saja menggunakan software Text editor yang lain,seperti subleme Text,notepad++,Atom dan yang lain-lain.Akan Tetapi saya Rekomendasi kan Vs.code,karena selain gratis atau Open source software yang satu ini sudah support berbagai macam bahasa pemrograman.Berikut Tampilan Software Vs.code:






















            Setelah anda buka software Visual studio code nya,selanjutnya anda dapat menuliskan coding berikut ini:

Untuk Code HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    />
    <title>Drag and drop upload</title>
  </head>
  <body>
    <div class="drop-container">
      <div class="drop">
        <i class="fa-solid fa-photo-film icon"></i>
        <span class="text">
          Drag and drop your documents, photos, and video here.
        </span>
        <div class="or-con">
          <span class="line"></span>
          <span class="or">OR</span>
          <span class="line"></span>
        </div>
        <label for="file-upload">Browse Files</label>
        <input type="file" id="file-upload" class="file-input" multiple />
      </div>
      <div class="progress"></div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Untuk Code CSS:

body {
    background: #f0d4ff;
    display: grid;
    place-items: center;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    height: 100vh;
    overflow: hidden;
  }
  
  .drop-container {
    background: #fff;
    padding: 1.5rem;
    width: 450px;
    display: inline-block;
    border-radius: 20px;
    box-shadow: 0 0 40px 15px rgba(0, 0, 0, 0.2);
  }
  .drop {
    border-radius: 10px;
    border: 3px dashed #aaaaaa;
    display: grid;
    width: 100%;
    place-content: center;
    padding: 2rem;
    box-sizing: border-box;
    display: grid;
    place-items: center;
  }
  
  .active {
    border: 3px solid #4b4b4b;
    background: #edccff;
  }
  
  .drop .icon {
    font-size: 60px;
    color: #a916f9;
  }
  .drop .text {
    text-align: center;
    font-weight: 500;
    color: #443f46;
    margin-top: 1rem;
  }
  
  .progress {
    background: #a916f9;
    width: 0%;
    height: 20px;
    display: none;
    border-radius: 10px;
    transition: all 0.2s;
  }
  .drop label {
    background: #a916f9;
    padding: 0.7rem 1.8rem;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
  }
  
  .file-input {
    display: none;
  }
  
  .line {
    width: 80px;
    height: 1px;
    background: #949494;
  }
  
  .or-con {
    display: flex;
    align-items: center;
    margin: 0.5rem;
  }
  
  .or {
    margin: 0 1rem;
    font-weight: 500;
    color: #443f46;
  }

  Untuk Code JAVASCRIPT:

const drop = document.querySelector(".drop");
const input = document.querySelector(".drop input");
const text = document.querySelector(".text");
const progress = document.querySelector(".progress");

let files = [];

input.addEventListener("change", () => {
  drop.style.display = "none";
  upload();
});

drop.addEventListener("dragover", (e) => {
  e.preventDefault();
  text.innerHTML = "Release your mouse to drop.";
  drop.classList.add("active");
});

drop.addEventListener("dragleave", (e) => {
  e.preventDefault();
  text.innerHTML = "Drag and drop your documents, photos, and video here.";
  drop.classList.remove("active");
});

drop.addEventListener("drop", (e) => {
  e.preventDefault();
  files = e.dataTransfer.files;
  drop.style.display = "none";
  upload();
});

// Upload Logic
function upload() {
  // fake Upload Logic
  let intervalCount = 0.25;
  progress.style.display = "block";
  progress.style.width = `${20 * intervalCount}%`;
  const interval = setInterval(() => {
    intervalCount += 0.25;
    progress.style.width = `${20 * intervalCount}%`;
    if (intervalCount == 5) {
      clearInterval(interval);
    }
  }, 100);
}

     
            Setelah anda masukan codingan tersebut ke dalam Sofware Vs.code,kemudian anda simpan di penyimpanan yang anda inginkan.Setelah itu anda Run atau jalankan,Maka hasilnya seperti gambar dibawah ini





Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

PENGERTIAN DAN MANFAAT PEREGANGAN STATIS DAN DINAMIS DALAM DUNIA OLAHRAGA

                          Dalam Gerakan peregangan meliputi peregangan statis dan dinamis. Peregangan statis dilakukan setelah latihan, sedangkan peregangan dinamis dilakukan sebelum latihan. Kedua jenis peregangan ini memiliki manfaatnya masing-masing.Peregangan (stretching) sebaiknya dilakukan sebelum  berolahraga. Bagi anda yang belum tahu,  peregangan termasuk peregangan statis dan dinamis. Keduanya memiliki fungsi dan keunggulan masing-masing.            Peregangan Statis adalah jenis peregangan yang dilakukan di akhir latihan. Ini memiliki pola peregangan berbeda yang terjadi selama periode waktu tertentu dan tidak ada gerakan. Pemanasan statis memungkinkan otot tubuh bagian atas untuk rileks sambil meningkatkan fleksibilitas dan rentang gerak.Berikut manfaat peregangan stastis: * Peningkatan fleksibilitas dan rentang gerak          ...
Post a Comment
Read more

Komponen & Gerak Dasar Kebugaran Jasmani Dalam Berolahraga

               Kebugaran jasmani adalah alat pembelajaran Pendidikan Jasmani Olahraga dan Kesehatan, selain itu merupakan upaya untuk meningkatkan dan mengembangkan kesehatan dan kebugaran tubuh.               Kebugaran jasmani atau physical fitness dapat diartikan sebagai kondisi jasmani yang menggambarkan kebugaran jasmani atau dapat pula diartikan sebagai kemampuan seseorang untuk melakukan suatu pekerjaan tertentu dengan baik tanpa mengalami kelelahan yang berarti. Komponen kebugaran jasmani, di antaranya adalah sebagai berikut.   1. Kelenturan adalah kemampuan sendi untuk melakukan gerakan secara maksimal.   2. Keseimbangan merupakan kemampuan sikap dan posisi tubuh pada saat tertentu.    3. Kecepatan adalah kemampuan berpindah dari satu tempat ke tempat lain dalam waktu yang singkat.        4. Kelincahan merupakan kemampuan mengubah arah dengan ...
Post a Comment
Read more

MEMBUAT GAME SEDERHANA MEMECAHKAN BOLA SALJU DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN JAVASCRIPT

                                                Pembahasan kali ini saya akan memberikan sedikit pengetahuan tentang cara membuat game sederhana memecahkan bola salju dengan menggunakan bahasa pemrograman javascript.Pertama yang anda lakukan adalah membuka Software Text editor anda seperti Notepad,Notepad++,Sublem Text,Atom,Visual Studio code dan yang lain-lain.Di Pembahasan kali ini saya akan menggunakan Software Text Editor Visual Studio code,mengapa saya menggunakan software ini?.               Software visual studio code memilki beberapa keunggulan dan beberapa fitur yang berbeda dari Software Text Editor yang lainnya.Salah satu keunggulan Software Vs.code adalah sudah support berbagai macam bahasa pemrograman dan sangat cocok digunakan bagi anda yang lagi belajar coding .Bahkan sofware Vs code ini banyak ...
Post a Comment
Read more