-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (66 loc) · 2.59 KB
/
index.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shapes</title>
</head>
<body>
<div class="container">
<div class="button-container">
<button id="reset">reset</button>
<button id="about">about</button>
</div>
<div class="about-modal" id="about-modal">
<div class="modal-content">
<span class="close" id="close-modal-button">×</span>
<div class="information">
<p>The goal is to draw an irregular parallelogram based on the 3 random user points.</p>
<p>As soon as the user puts the third point will trigger the drawings.</p>
<p>The program will calculate the forth point, the center of mass and the area.</p>
<p>After that, the app will draw the parallelogram, the circle using the center of mass and show the
area
calculated.</p>
<p>After the drawing is completed, the user can move the selected point by click and move and
everything will be recalculated.</p>
<p>To reset the screen just click on the RESET button.</p>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
</div>
<!-- plugin initialization -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const canvas = document.getElementById('canvas');
const resetButton = document.getElementById('reset');
const aboutButton = document.getElementById('about');
const modal = document.getElementById('about-modal');
const closeModalButton = document.getElementById('close-modal-button');
// setting full width and height to the canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// create instance of a plugin
const shapes = new Shapes(canvas);
const showModal = () => {
modal.style.display = 'block';
};
const closeModal = () => {
modal.style.display = 'none';
};
// event to reset shapes
resetButton.addEventListener('click', shapes.reset);
// event to open modal
aboutButton.addEventListener('click', showModal);
// event to close modal if click away
window.addEventListener('click', event => {
if (event.target === modal) {
closeModal();
}
});
//event to close button close the modal
closeModalButton.addEventListener('click', closeModal);
});
</script>
</body>
</html>