Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../fontawesome-free-5.11.2-web/css/all.css">
    <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title></title>

    <style>
        .stars-outer{
          position: relative;
          display: inline-block;
        }

        .stars-inner{
          position: absolute;
          top: 0;
          left: 0;
          white-space: nowrap;
          overflow: hidden;
          width: 0
        }

        .stars-outer::before{
          content: "\f005 \f005 \f005 \f005 \f005";
          font-family: 'Font Awesome 5 Free';
          font-weight: 900;
          color: #ccc;
        }

        .stars-inner::before{
          content: "\f005 \f005 \f005 \f005 \f005";
          font-family: 'Font Awesome 5 Free';
          font-weight: 900;
          color: #f8c;
        }

        h1{
          text-align: center;
          padding-top: 20PX;
          font-family: 'Raleway-Regular', sans-serif;
        }
    </style>
  </head>
  <body>
      <h1>IMAGE</h1>

      <div class="container mt-3">
          <div class="form-group">
            <select id="product-select" class="form-control
            costum-select">
            <option value="0" disabled selected>Pilih Item</option>
            <option value="kolektabilitas">Kolektabilitas</option>
            <option value="simpanan">Simpanan</option>
            <option value="pinjaman">Pinjaman</option>
          </select>
          </div>

          <div class="form-group">
            <input type="number" id="rating-control"
             class="form-control" step="0.1" max="5" placeholder="Pilih 1 - 5" disabled>
          </div>

          <table class="table table-striped">
              <thead>
                  <tr>
                    <th>Item</th>
                    <th>Nilai</th>
                  </tr>
              </thead>
              <tbody>
                  <tr class="kolektabilitas">
                    <td>Kolektabilitas</td>
                    <td>
                        <div class="stars-outer">
                            <div class="stars-inner"></div>
                        </div>
                        <span class="number-rating"></span>
                    </td>
                  </tr>
                  <tr class="simpanan">
                    <td>Simpanan</td>
                    <td>
                        <div class="stars-outer">
                            <div class="stars-inner"></div>
                        </div>
                        <span class="number-rating"></span>
                    </td>
                  </tr>
                  <tr class="pinjaman">
                    <td>Pinjaman</td>
                    <td>
                        <div class="stars-outer">
                            <div class="stars-inner"></div>
                        </div>
                        <span class="number-rating"></span>
                    </td>
                  </tr>
              </tbody>
          </table>
      </div>


      <script>
          //Initial ratingControl
          const ratings = {
            kolektabilitas : 0,
            simpanan : 0,
            pinjaman : 0,
          }

          //total stars
          const starsTotal = 5;

          //run getRatings when Domloads
          document.addEventListener('DOMContentLoaded',getRatings);

          const productSelect = document.getElementById
          ('product-select');
          const ratingControl = document.getElementById
          ('rating-control');

          //init product
          let product;

          //product select change
          productSelect.addEventListener('change', (e) => {
            product = e.target.value;
            //Enable rating control
            ratingControl.disabled = false;
            ratingControl.value = ratings[product]
          });

          //Rating control
          ratingControl.addEventListener('blur', (e) => {
            const rating = e.target.value;

            //make sure 5 or under
            if (rating > 5) {
              alert('Tolong Pilih 1 - 5')
              return;
            }

            //change rating
            ratings[product] = rating;

            getRatings();
          });

          //GET Ratings
          function getRatings(){
            for (let rating in ratings){
              //get percentage
              const starPercentage = (ratings[rating] /
              starsTotal) * 100;

              //Round to nearest 10
              const starPercentageRounded = `${Math.round
              (starPercentage / 10) * 10}%`;

              //set width of stars - iner to percentage
              document.querySelector(`.${rating} .stars-inner`)
              .style.width = starPercentageRounded;

              //add number percentage
              document.querySelector(`.${rating} .number-rating`)
              .innerHTML = ratings[rating];
            }
          }
      </script>

  </body>
</html>