Skip to main content

MEMBUAT EMOJI RATING MENGGUNAKAN BAHASA PEMROGRAMAN JAVASCRIPT

           
           
             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!!!😇
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