JQuery exercise

Developer
Brian
Size
3,780 Kb
Views
16,192
  1. JQuery exercise Previews
  2. JQuery exercise HTML Codes
  3. JQuery exercise CSS Codes
  4. JQuery exercise JS Codes

How do I make an 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 22 November 2022, Tuesday.

JQuery exercise Previews
IQ Test

JQuery exercise - Script Codes 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 - Script Codes 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 - Script Codes 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();
});
JQuery exercise - Script Codes
JQuery exercise - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 3,780 Kb
Views 16,192
Do you need developer help for JQuery exercise?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian (brian-baum) Script Codes
Name
JQuery hash nav plugin
Smooth Scrolling in ReactJS
ReactJS Accessible Accordion Panel
CSS dropdowns
AngularJS contact list
ReactJS Image Carousel
JQuery countdown plugin
Responsive demo page
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!