-
Notifications
You must be signed in to change notification settings - Fork 0
/
clearScreen.js
159 lines (126 loc) · 3.93 KB
/
clearScreen.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/* jshint esversion: 6 */
/*global assert */
$(document).ready(function () {
'use strict';
let width = 0;
let growthAmount = 0;
let growthRate = 0;
let numberOfCircles = 0;
let circleCollection = [];
/**
* This function makes the divs bigger. every time it
*
*/
function makeBigger() {
width = width + growthAmount;
$('div.circle').height(width);
$('div.circle').width(width);
}
/**
* this function removes an element. It will be called by an event
* handler (delegation method is used )
*/
function removeMe() {
$(this).remove();
}
/**
* this function fades a mouseover element
*/
function fadeMe() {
$(this).fadeTo(800, 0.1);
}
/**
* this function restores opacity to 100%
* this happens when a mouse leave the 'this' element
*/
function restoreOpacity() {
$(this).fadeTo(0, 1);
}
/**
* attaching a click event to start button
* this function launches setValues function which collects
* the input values and stores them in an appropriate
* variable
*/
$('#start').click(function () {
setValues();
addCircles();
let timer = setInterval(() => makeBigger(), growthRate);
});
/**
* Event Delegation the #holder div, which is actually the holder of the divs to be created
* delegates events to the divs with class 'circle' this line delegates on click which calls
* remove function
*/
$('#holder').on('click', '.circle', removeMe);
/**
* this delegation is for the mouseover event and calls fadeMe function
*/
$('#holder').on('mouseover', '.circle', fadeMe);
/**
* this delegation is for the mouseleave event and calls the restoreOpacity function
*/
$('#holder').on('mouseleave', '.circle', restoreOpacity);
/**
* this function sets or gets values from the inputs and puts them in
* appropriate variable after parsing them
*/
function setValues() {
width = parseInt($('#width').val());
growthAmount = parseInt($('#growthAmount').val());
growthRate = parseInt($('#growthRate').val());
numberOfCircles = parseInt($('#numOfCircles').val());
}
/**
* this function adds circles to to the html in <div> with #holder
* the css is applied on the go! each div gets its color from a random color
* generator getRandomColor function
* the position at which they appear is also random and
* is generated by the random randomPositionX and randomPositionY functions
*/
function addCircles() {
let aCircle;
for (let i = 0; i < numberOfCircles; i++) {
aCircle = $("<div />",
{
class: "circle",
css: {
position: 'absolute',
left: randomPositionX() + 'px',
top: randomPositionY() + 'px',
width: width + 'px',
height: width + 'px',
backgroundColor: getRandomColor,
}
});
$('#holder').append(aCircle);
}
}
/**
*
* @returns {string} a random color number
*/
function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
/**
*
* @returns {number} a random position on the screen for X
* at which a div appears
*/
function randomPositionX() {
return (Math.random() * ($(document).width())).toFixed();
}
/**
*
* @returns {number} a random position on the screen for Y
*/
function randomPositionY() {
return (Math.random() * ($(document).height())).toFixed();
}
});