Skip to main content

MEMBUAT TAMPILAN LIKE & DISLIKE UNTUK WEBSITE DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN JAVASCRIPT(BESERTA CODENYA)

    

             

            Disini saya akan memberitahu cara membuat tampilan Like & Dislike pada sebuah website yang akan anda gunakan,dengan menggunakan bahasa pemrograman javascript.Disini saya menggunakan Text editor Visual Studio Code.Mengapa saya menggunakan Visual Studio code,karena dapat menyuport beragam bahasa pemrograman.selain itu simple dan mudah dipahami dalam membuat sebuah kodingan yang akan dibuat



Berikut codingan HTML nya:

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>Like Dislike</title>

    <!-- FONTAWESOME CDN -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">


    <!-- STYLESHEET -->

    <link rel="stylesheet" href="style.css">

  </head>

  <body>


    <div class="wrapper">

      <div class="like">

        <i onclick="count()" class="fas fa-heart icon"></i>

        <br>

        <input id="likeCount" type="number" value="0">

      </div>

      <div class="dislike">

        <i onclick="count1()" class="fas fa-heart-broken icon"></i>

        <br>

        <input id="dislikeCount" type="number" value="0">

      </div>

      <div class="subscribe">

        <button>SUBSCRIBE</button>

      </div>

    </div>

    <script type="text/javascript" src="app.js"></script>

  </body>

</html>

Berikut Codingan untuk css nya:

body{

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100vh;

    overflow: hidden;

    background: #3accfd;

  }

  .wrapper{

    margin: 200px 15%;

    width: 70%;

    height: 300px;

    display: grid;

    grid-template-columns: 1.5fr 1.5fr 2fr;

    background: #3accfd;

    box-shadow: 12px 12px 24px #2a93b6,

                -12px -12px 24px #4affff;

    border-radius: 30px;

  }

  .like,.dislike,.subscribe{

    display: grid;

    place-items : center;

  }

  .icon{

    margin-top: 70px;

    font-size: 80px;

    color: #0086b3;

    cursor: pointer;

    text-shadow: 5px 8px 15px #2a93b6;

    transition: .5s;

  }

  .icon:hover{

    color: #ba0015;

    transform: scale(1.2);

  }

  input{

    margin-top: -100px;

    margin-left: 15px;

    width: 100%;

    border: none;

    outline: none;

    text-align: center;

    background: none;

    font-size: 30px;

    font-weight: 800;

    pointer-events: none;

    color: #0086b3;

    text-shadow: 2px 2px 3px #2a93b6;

  }

  button{

    background: #0086b3;

    border: none;

    outline: none;

    cursor: pointer;

    color: #ececec;

    font-size: 25px;

    font-weight: 700;

    padding: 15px 35px;

    border-radius: 35px;

    transition: 0.5s;

    box-shadow: 12px 12px 24px #2a93b6,

                -12px -12px 24px #4affff;

  }

  button:hover{

    background: #ba0015;

    transform: scale(1.05);

  }

Berikut Untuk Codingan Javascript nya:

var likeCount = document.querySelector('#likeCount');

var dislikeCount = document.querySelector('#dislikeCount');


function count(){

  likeCount.value = parseInt(likeCount.value) + 1;

}


function count1(){

  dislikeCount.value = parseInt(dislikeCount.value) + 1;

}

Maka Hasilnya seperti ada gambar di Bawah ini:




Selamat Belajar dan mencoba ,semoga dapat menambah ilmu dan membantu.Thanks sudah berkunjung di Blog Saya...


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

MENGGAMBAR KARTUN TOM & JERRY MENGGUNAKAN BAHASA PEMROGRAMAN PYHTON

                           Bahasa pemrograman pyhton merupakan suatu bahasa pemrograman komputer guna membantu pekerjaan lebih cepat dan mengintregasikan sistem anda lebih efektif.Pada topik pembahasan saat ini yaitu mengenai cara menggambar kartun Tom & jerry menggunakan bahasa pemrograman pyhton.               Ada beberapa persyaratan untuk menjalankan bahasa pemrograman pyhton diantaranya anda harus mempunyai software text editor dan Ekstensi Interpreter penerjemah bahasa pyhton ke dalam bahasa mesin.Dalam menjalankan bahasa pemrograman python ada beberapa software yang bisa anda gunakan seperti,Paycharm,Kite,Spyder,IDLE,Vs.code dan yang lain-lain.               Anda bisa saja memilih salah satu software yang ingin anda gunakan didalam penjelasan sebelumnya.Pada topik ini saya memilih software Vs.code dalam menjalankan per...
Post a Comment
Read more