CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CoderAz
CoderAz

Reputation: 99

Generating random logo colors on each hover event

I am doing a website for a friend and I am currently working on the social network elements.

I came up with an idea in my head, that whenever the user hovers over on of the social network images, it will randomly change the background color (on each hover) to one of his company logo colors.

This is my first project and I am trying to show future employers that I can use functions, arrays, conditions, objects within my coding.

Here is my code

HTML:

<section id="social">
<ul>
<li><i aria-hidden="true" class="fa fa-facebook-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-instagram fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-twitter-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-youtube-square fa-3x"></i></li>
</ul>
</section>

JQUERY / JS:

$(document).ready(function(){

    logoColors = [
    rgb(182,131,0),
    rgb((118,0,96),
    rgb(0,85,88),
    ];

    randomCol = Math.floor(Math.random() * 2);

    $("#social li").hover(function(){
        $(this).css("background-color", logoColors[randomCol]);

    })



});

Upvotes: 0

Views: 112

Answers (3)

Ankit
Ankit

Reputation: 6153

May be you can try this :

  1. I have defined both mouseover and mouseout events
  2. mouseover sets a random background , mouseout reverts back to original
  3. Original/initial color is retained in a variable
  4. done randomization of color inside functions

Other than this there are some errors like stray parenthesis in logoColor array, in order to avoid such issues validate your JavaScript code in JsLint 

$(document).ready(function(){

    //logoColors = [rgb(182,131,0),rgb((118,0,96),rgb(0,85,88)];
    var initialCol = $("#social li").css('background-color');
    var colors = ["#CCCCCC","#333333","#990099", "#1295A6", "#FFFF99"]; 

    

   // $("#social li").hover(function(){
       // randomCol = Math.floor(Math.random() * 2);
       // $(this).css("background-color", logoColors[randomCol]);

    //});
    
    $("#social li").hover(function() { //mouseover
    var col = Math.floor(Math.random()*colors.length);
    $(this).css('background-color',colors[col]);

}, function() { //mouseout
    $(this).css('background-color',initialCol);

});



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<section id="social">
<ul>
<li><i aria-hidden="true" class="fa fa-facebook-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-instagram fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-twitter-square fa-3x"></i></li>
<li><i aria-hidden="true" class="fa fa-youtube-square fa-3x"></i></li>
</ul>
</section>

Upvotes: 1

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

Fixes:

  1. One parentheses is extra in your rgb color declaration.
  2. Take colors in double quotes.
  3. Math.Random should go upto 3 because Math.floor() returns the largest integer less than or equal to a given number.

For extra effect, changing color on each link hover, you can declare randomCol variable inside hover function.

 $(document).ready(function(){

         logoColors = [
        "rgb(182,131,0)",
        "rgb(118,0,96)",
        "rgb(0,85,88)",
        ];

        var randomCol = Math.floor(Math.random() * 3);

        $("#social li").hover(function(){
            $(this).css("background-color", logoColors[randomCol]);

        })
    });

Upvotes: 0

Jax-p
Jax-p

Reputation: 8551

Edited JS

$(document).ready(function(){

        var defaultColor = "white";
        var logoColors = [
          'rgb(182,131,0)',
          'rgb(118,0,96)',
          'rgb(0,85,88)',
          'rgb(155,0,44)',
          'rgb(80,85,88)',
          'rgb(118,50,96)',
          'rgb(40,85,88)',
        ];

       $("#social li").hover(function(){
           randomCol = Math.floor(Math.random() * 6);
           $(this).css("background-color", logoColors[randomCol]);

       }, function() {
           $(this).css("background-color", defaultColor);
       });

});

working JS fiddle: https://jsfiddle.net/79fhdtu2/

Upvotes: 0

Related Questions