JQuery exercise

This project has a large grid of dynamically created boxes, and clicking on one of them will change their background to a randomly generated color. The color change will move in an expanding radius. What is a jquery exercise How do you make a jquery exercise? This script and codes were developed by Brian on 26 January 2022, Wednesday.

How do I make an jquery exercise?
  1. JQuery exercise Previews
  2. JQuery exercise HTML Codes
  3. JQuery exercise CSS Codes
  4. JQuery exercise JS Codes
JQuery exercise Previews

JQuery exercise HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>jQuery exercise</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

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

  
</head>

<body>
  <div class="project-wrapper">
    <div class="view"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

JQuery exercise CSS Codes

@-webkit-keyframes grow {
  0% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
  }
  50% {
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
  }
  75% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
  }
}
@keyframes grow {
  0% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
  }
  50% {
    -webkit-transform: scale(2, 2);
            transform: scale(2, 2);
  }
  75% {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
  }
}
html,
body {
  height: 100%;
}
body {
  /*   padding: 20px; */
  background: #222;
}
.project-wrapper {
  width: 100%;
  height: 100%;
}
.project-wrapper .view {
  width: inherit;
  height: inherit;
  background: #222;
  margin: 0 auto;
  overflow: hidden;
}
.project-wrapper .view ul li {
  width: 15px;
  height: 15px;
  float: left;
  position: relative;
  background: #FFC400;
  cursor: pointer;
  margin: 2.5px;
  border-radius: 4px;
}
.project-wrapper .view ul li:hover {
  -webkit-transform-origin: middle center;
          transform-origin: middle center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: grow .5s 1;
          animation: grow .5s 1;
  z-index: 10;
}
.project-wrapper .view ul li:hover:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
}

JQuery exercise JS Codes

var $colorBoxes = (function(){
  'use-strict';

  //global variables 
  var colorBoxes = {},
      $view = $('.view'),
      elementWidth = 20, //must be updated if changed in the css
      elementHeight = 20, //must be updated if changed in the css
      boxesPerRow,
      boxesPerCol,
      boxCount; 

  colorBoxes.setup = (function(){
    var setup = {};
    
    setup.getVals = function () {
      boxesPerRow = Math.floor( $view.width() / elementWidth);
      boxesPerCol = Math.floor( $view.height() / elementHeight);
      boxCount = boxesPerRow * boxesPerCol; 
    };
    
    setup.build = function () {
      setup.getVals();
      
      var viewHtml, 
          listItems = '';

      for (var i = 0; i < boxCount; i += 1){
        listItems += '<li></li>';
      }
      viewHtml = '<ul>' + listItems + '</ul>';
      $view.append(viewHtml);
    };

    setup.init = function () {
      setup.build();
    };

    return setup; 
  }());
  
  colorBoxes.utils = (function () {
    var utils = {};
    
    utils.distance = function (x1, y1, x2, y2) {
      var x = Math.pow( (x1 - x2), 2),
          y = Math.pow( (y1 - y2), 2),
          result = Math.floor( Math.sqrt(x + y) );
      
      return result;
    };
    
    utils.newColor = function (){
      var rgb = {r:0,g:0,b:0};

      $.each(rgb, function (index, value){
        rgb[index] = Math.floor( Math.random() * (255) );
      });
      var newColor = 'rgb(' +rgb.r + ', ' + rgb.b + ", " + rgb.g + ')';
      
      return newColor;
    };
    
    return utils;
  }());

  colorBoxes.events = (function (){
    var events = {};
    
    events.resize = function () {
      $(window).resize(function () {
        $view.html('');
        colorBoxes.setup.init();
      });
    };

    events.click = function () {
      $view.on('click', 'li', function(){
        events.spread(this);
      });
    };
    
    events.spread = function (element) {
      var $list = $view.find('li'),
          $origin = $(element),
          originIndex = $origin.index(),
          originX = originIndex % boxesPerRow,
          originY = Math.floor( originIndex / boxesPerRow), 
          color = colorBoxes.utils.newColor(),
          spreadSpeed = 20; //in ms
      
      //goes through each li and changes its color
      for (var i = 0; i < $list.length; i += 1) {
          var posX = i % boxesPerRow,
              posY = Math.floor(i / boxesPerRow),
              distance = colorBoxes.utils.distance(originX, originY, posX, posY),
              delay = distance * spreadSpeed;
        
          timeout(i , delay);
      }
      
      function timeout (index, delay) {
        setTimeout( function(){
          $list.eq(index).css('background', color);
        }, delay);
      }
    };
    
    events.init = function () {
      events.resize();
      events.click();
    };
    
    return events;
  }());

  colorBoxes.init = function () {
    colorBoxes.setup.init();
    colorBoxes.events.init();
  };

  return colorBoxes;
}());

//document ready
$(document).ready(function(){
  $colorBoxes.init();
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.