Di pembahasan kali ini saya akan membahas tentang bagaimana cara membuat Emoji Rating dengan menggunakan bahasa pemrograman javascript.Langkah awal yang harus anda lakukan adalah sediakan sofware Text editor,guna untuk menjalankan codingan atau pun program didalam perangkat Pc,Laptop ataupun komputer anda.Software text editor tersebut antara lain Notepad,Notepad++,Subleme Text,Atom,Visual studio code dan yang lain-lain.
Untuk Menjalankan Codingan,disini saya menggunakan software text editor Visual studio code.ada beberapa alasan tertentu saya menggunakan software Vs.code ini.Salah satu alasan kenapa saya menggunakan Vs.code adalah karena software yang satu ini selain open source,sudah support berbagai macam bahasa pemrograman,Memilki beberapa fitur ataupun ekstensi yang bisa dipergunakan.Software Vs.code sangat cocok digunakan bagi anda yang lagi belajar ngoding.Bahkan bukan hanya bagi pemula,para programmer profesional banyak memakai software yang satu ini Ketimbang software text editor yang lain.
Anda Bisa juga memakai text editor yang lain,akan tetapi saya merekomendasikan agar anda menggunakan Software Vs.code yang saya jelaskan tadi.Apabila anda belum memiliki Software tersebut,anda dapat mendownloadnya di situs website resminya https://code.visualstudio.com/download
Setelah anda download,Silahkan Install di penyimpanan perangkat komputer anda,maka tampilan atau gambar setelah anda install seperti berikut ini:
Setelah anda buka,silahkan tuliskan code berikut ini!!!
Berikut Untuk Code HTML nya:
<!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">
<title>Emoji reting</title>
<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" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://kit.fontawesome.com/fc57a8925a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="feadback">
<div class="emoji">
<i class="far fa-angry fa-3x"></i>
<i class="far fa-frown fa-3x"></i>
<i class="far fa-meh fa-3x"></i>
<i class="far fa-smile fa-3x"></i>
<i class="far fa-laugh fa-3x"></i>
</div>
<div class="reting">
<i class="fa-solid fa-star fa-2x active"></i>
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-2x"></i>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
Berikut Untuk Code CSS nya:
body {
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
background: rgb(157, 185, 244);
}
.feadback{
background: #fff;
width: 400px;
height: 200px;
box-shadow: 0px 4px 10px rgb(247, 247, 247);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
position: relative;
}
.emoji{
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
top: 20%;
width: 50px;
height: 50px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
display: flex;
overflow: hidden;
}
.far{
margin: 2px;
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transition: transform 0.2s;
-webkit-transition: transform 0.2s;
-moz-transition: transform 0.2s;
-ms-transition: transform 0.2s;
-o-transition: transform 0.2s;
}
.reting{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20%;
cursor: pointer;
}
.fa-star{
color: lightgray;
}
.fa-star.active{
color: green;
}
Berikut Untuk Code JAVASCRIPT nya:
const starsEl = document.querySelectorAll('.fa-star');
const emojisEl = document.querySelectorAll('.far');
const colors = ["red", "orange", "lightblue", "lightgreen", "green"];
updateReting(0);
starsEl.forEach((starEl, index) =>{
starEl.addEventListener('click', () =>{
updateReting(index);
});
});
function updateReting(index){
starsEl.forEach((starEl, idx)=>{
if(idx < index + 1){
starEl.classList.add("active");
}else{
starEl.classList.remove("active");
}
});
emojisEl.forEach(emojiEl =>{
emojiEl.style.transform = `translateX(-${index * 50}px)`;
emojiEl.style.color = colors [index]
})
}
Setelah anda tuliskan code tersebut,silahkan anda save atau simpan dipenyimpanan yang anda inginkan.Kemudian anda RUN atau jalankan codingan tersebut atau anda dapat menekan tombol CTRL+F5,maka hasilnya seperti gambar berikut ini.
SELAMAT MENCOBA!!!😇
Comments
Post a Comment