-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab.html
101 lines (86 loc) · 3.26 KB
/
lab.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {
font-family: Verdana;
}
h1, h2, h3 {
color: darkblue;
}
.rating-circle {
height: 2em;
width: 2em;
border: .1em solid black;
border-radius: 1.1em;
display: inline-block;
margin: 0;
padding: .1em;
}
.rating-hover {
background-color: yellow;
}
.rating-chosen {
background-color: green;
}
</style>
</head>
<body>
<h1>Contoso Web Developer Conference</h1>
<h2>Finding elements using jQuery</h2>
<div>This session is about identifying elements using jQuery methods and selectors.</div>
<h3>Rate this session</h3>
<div id="rating-container" max-value="5"></div>
<div>
<label for="max-value">Enter max value:</label>
<input type="text" id="max-value" />
<button type="button" id="update-max-value">Update max value</button>
</div>
<div>
<button type="button" id="save-rating">Save rating</button>
</div>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// your answer would go here
$(function () {
var displayCircles = function () {
var max_value = $('#rating-container').attr('max-value');
$('#rating-container').empty();
for (i = 0; i < max_value; i++) {
$('#rating-container').append('<div class="rating-circle"></div>')
};
};
displayCircles();
$('#update-max-value').click(function () {
if ($('#max-value').val() > 0) {
$('#rating-container').attr('max-value', $('#max-value').val());
displayCircles();
};
});
$(document).on('mouseenter', '.rating-circle', function () {
$('.rating-circle').removeClass('rating-chosen');
$(this).addClass('rating-hover').prevAll().addClass('rating-hover');
});
$(document).on('mouseleave', '.rating-circle', function () {
$('.rating-hover').removeClass('rating-hover');
$('#chosen').addClass('rating-chosen').prevAll().addClass('rating-chosen');
});
$(document).on('click', '.rating-circle', function () {
$('#chosen').removeAttr('id');
$(this).attr('id', 'chosen');
$('#chosen').addClass('rating-chosen').prevAll().addClass('rating-chosen');
});
$('#save-rating').click(function () {
var index = $('#chosen').index();
// index = -1 if no rating is given (i.e., no element with the id "chosen")
var rating = { value: index + 1, maxValue: $('#rating-container').attr('max-value') };
$.post('http://jquery-edx.azurewebsites.net/api/Rating', rating).done(function (data) {
$('#output').text(data.message);
});
});
});
</script>
</body>
</html>