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

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