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...
Comments
Post a Comment