How to change star rating color on mouseenter, on mouseout, and on onclick

Discussion in 'Javascript' started by alrahat123, Sep 28, 2018.

  1. alrahat123

    alrahat123

    Joined:
    Sep 28, 2018
    Messages:
    1
    Likes Received:
    0
    When I mouseenter on stars from a li tag/list class, all stars from every list class is showing me stars as mouseentered. I want that to be changed. When I mouseenter on stars from a li tag/list class it should show me orange stars. Means if I mouseenter on 1 star it should show me 1 orange star. if 2, then 2 orange stars.

    onmouseout the ratings should show me the rating as server rated count. Change anything in mouseenterrating function and in clearstar function if you need(I mean how a rating system should work on mouseenter and on mouseout you will need to change it that way.). And I need javascript code with ajax for onclick also(Not jQuery).

    -----------------------------------------------------------------------------------------------------------------------------------

    Here is the code:

    Code (Text):


    <?php

    require "conx.php";

    $sql = "SELECT * FROM customers ORDER BY id ASC";

    $query = $conx -> query($sql);

    $numrows = $query -> num_rows;

    ?>

    <!DOCTYPE html>

    <html>

    <link rel="stylesheet" href="css/font-awesome.min.css">

    <link rel="stylesheet" href="style.css">

    <script src="jquery.min.js"></script>

    <body>

    <div class="Insert-Into">

    <ul>

    <?php if($numrows > 0): ?>

    <?php while($row = $query -> fetch_assoc()): ?>

    <?php $rating = $row["rating"]; ?>

    <li data-rating=<?php echo "$rating"; ?> data-id=<?php echo $row['id']; ?> class="list">

    <br/>
    <br/>

    <span class="username"><?php echo $row["username"]; ?></span>

    <br/>
    <br/>

    <?php

    $i;

    $color;

    for($i = 1; $i <= 5; $i++){
       
        if($i <= $rating){
           
            $color = "color:orange";
           
        }
        else{
           
            $color = "color:#ccc";
           
        }
       
        echo "<i class='fa fa-star' style='$color;' onmouseenter='mouseenterrating($i)' data-rating='$i' onmouseout='clearstar($i)'></i>";
    }

    ?>

    <br/>
    <br/>

    <b>Description</b>

    <br/>
    <br/>

    <div class="desc"><?php echo $row["description"]; ?></div>

    </li>

    <?php endwhile; ?>

    <?php endif; ?>

    </ul>

    </div>

    <script>
    function mouseenterrating(rating){
       
        var i, j, k, l, m;
       
        var list = document.getElementsByClassName("list");
       
        for(i = 0; i < list.length; i++){
                   
            var fa = list[i].getElementsByClassName("fa");
           
                for(j = 0; j < fa.length; j++){
                   
                    var value = fa[j].dataset.rating;
                                               
                        if(value <= rating){
                           
                            fa[j].style.color = "orange";
                           
                        }
                        else{
                           
                            fa[j].style.color = "#ccc";
                           
                        }

                }
       
       
       
        }
       
    }

    function clearstar(rating){
       
        var fa = document.getElementsByClassName("fa");
       
        var k;
       
        for(k = 0; k < fa.length; k++){
           
            var value = fa[k].dataset.rating;
                   
                fa[k].style.color = "#ccc";
           
        }
       
    }
    </script>

    </body>

    </html>

     
    Code (Text):




    .fa{
        font-size:25px;
       }
       
    .fa:hover{
              color:blue;
            }  
       
    li{
      list-style:none;
      padding-left:40px;
      padding-bottom:40px;
      border-bottom:2px solid #ccc;
      width:800px;
     }

    li:last-child{
                 border-bottom:none;
                }
               


     
    Code (Text):


    <?php

    $conx = mysqli_connect("localhost", "root", "");

    if(!$conx){
       
        echo "Not connected with localhost";
       
    }

    $sql = "CREATE DATABASE rating";

    $query = $conx -> query($sql);

    $dbselect = $conx -> select_db("rating");

    if(!$dbselect){
       
        echo "No database selected";
       
    }

    $sql = "CREATE TABLE customers(id INT(255) NOT NULL AUTO_INCREMENT UNIQUE KEY, username VARCHAR(200) NOT NULL, description VARCHAR(1000) NOT NULL, email VARCHAR(200) NOT NULL PRIMARY KEY, rating INT(5) NOT NULL)";

    $query = $conx -> query($sql);

    ?>

     
     
    alrahat123, Sep 28, 2018
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.