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

PENYAKIT DEGENERASI BUAH PINGGANG

                           Penyakit yang dinamai Degenerasi buah pinggang mungkin sekali disebabkan oleh keadaan dimana bangunan buah pinggang itu sendiri tersangkut dengan langsung atau oleh persediaan darah yang kurang kepada buah pinggang itu,sedangkan yang belakangan ini adalah biasanya disebabkan oleh pembuluh nadi yang mengeras (atteriosclerosis).Anggota-anggota tubuh biasanya mempunyai banyak tenaga cadangan dan penjagaan keselamatan yang agak luas,sehingga penyakit yang menimbulkan degenerasi itu sudah agak berjalan jauh sebelum ia menjadi nyata.Oleh sebab itu ,pada umumnya orang-orang yang sudah mencapai setengah umur dan orang-orang yang sudah lanjut usia yang mempunyai penyakit yang demikian dalam rupa yang nyata.               Satu pengertian tentang pekerjaan yang biasa dari buah pinggang akan menolong kita mengetahui beberapa diantara gejala-gejala,tanda-...
Post a Comment
Read more

MEMBUAT DIGITAL CLOCK DENGAN MENGGUNAKAN BAHASA PEMROGRAMAN C++

                              Pembahasan kali ini akan mengulas tentang cara membuat Digital Clock dengan menggunakan bahasa pemrograman C++.Untuk menjalankan codingan atau programnya saya menggunakan software Dev C++.Saya menggunakan software ini karena sangat cocok untuk mengcompile serta menjalankan bahasa pemrograman c++.Jika anda belum memiliki software Dev C++ silahkan download di situs website resminya  https://sourceforge.net/projects/orwelldevcpp/ .               Setelah anda download silahkan install seperti software pada umumnya,Berikut tampilan atau gambar software Dev c++ setelah di install dan dibuka.                 Setelah anda buka software Dev C++ langkah selanjutnya adalah tuliskan code berikut ini: #include<iostream> #include<conio.h> #include<dos.h>  #include <win...
Post a Comment
Read more

APA SAJA MANFAAT MINYAK KELAPA?,BERIKUT PENJELASANNYA!!!

                              Ternyata selain dipakai untuk menggoreng makanan yang kita konsumsi,minyak kelapa memilki beberapa manfaat.Salah satu studi menemukan bahwa jumlah minyak yang tepat dalam tubuh dapat menurunkan kadar lipoprotein dalam tubuh, lipoprotein yang merupakan salah satu zat penyebab penyakit jantung. Selain itu, banyak produk kecantikan yang menggunakan minyak sebagai salah satu bahan utamanya.Berikut manfaat minyak kelapa selain dipakai untuk menggoreng makanan: 1.Hand Scrub                  Kita sering menjumpai berbagai merek  scrub tangan di pasaran. Namun karena kuantitas yang dijual sangat tinggi, terkadang kita tidak bisa membedakan mana  yang asli dan mana yang palsu. Padahal,  produk kecantikan terbaik adalah yang mengandung bahan-bahan alami, bukan? Jadi mengapa tidak mencoba membuat pembersih tang...
Post a Comment
Read more