-
Notifications
You must be signed in to change notification settings - Fork 0
/
reviews.html
109 lines (97 loc) · 3.92 KB
/
reviews.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
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers have said!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class='buttonsDiv'>
<a class="nav-link" href="index.html">Welcome</a>
<a class="nav-link" href="reviews.html">Reviews</a>
<a class="nav-link" href="packages.html">Packages</a>
<a class="nav-link" href="travelEquipment.html">Equipment</a>
</nav>
</header>
<main>
<section>
<h1 class="accent">See what our customers say.</h1>
<p>Our customers are valuable to us. Not simply because they line our pockets with large sums of cash, but they usually (and it really is more often than not, honestly you wouldn't believe what parents let their kids get away with these days) sport amusing haircuts which we can point and laugh at as we blast them into the void. </p>
<p>See what they have to say about our impeccable services below.</p>
</section>
<!-- content will be inserted here by script -->
</section>
</main>
<section>
<form id="textForm">
<h3 class="accent">Write a review.</h3>
<p>If you too have had the pleasure of using our services and recieved precious little from them, take time to write a review below to help your fellow space navigators make an irrational decision.</p>
<p>Don't forget - Knowledge shared is knowledge halved!</p>
<label for="name">Full Name:
<input id="name" name="name" type="text" required>
</label>
<label for="textInput" class="rating-container">Rating:
<label for="rating">Rate out of 5:</label><br>
<input type="radio" id="rating1" name="rating" value="1">
<label for="rating1">1</label>
<input type="radio" id="rating2" name="rating" value="2">
<label for="rating2">2</label>
<input type="radio" id="rating3" name="rating" value="3">
<label for="rating3">3</label>
<input type="radio" id="rating4" name="rating" value="4">
<label for="rating4">4</label>
<input type="radio" id="rating5" name="rating" value="5" checked>
<label for="rating5">5</label><br>
</label>
<label for="comment">Please type your comment here:
<textarea id="comment" name="comment" rows="4"></textarea>
</label>
<input type="submit" value="Submit" class="btn">
</form>
</section>
<script type="module">
import reviews from "./reviewData.js"
const form = document.getElementById("textForm")
const main = document.querySelector("main")
const collectFormData = (e) => {
const data = {}
// convert HTMLformcollection into array and remove the final element (submit button)
let elements = [...e.target.elements].slice(0,-1)
try {
elements.forEach(({ name, value, checked, type }) => {
// for each element, create a key value pair in data from the name and value attributes
// TODO: sanitise input
if(type != "radio" || checked == true) {
// this if statement filters out unchecked radio inputs
data[name] = value
}
})
} catch (error) {
console.error(error)
}
return data
}
const appendNewReview = (data) => {
const htmlString = `<div class="reviewHeader">
<img src="${data.img}">
<h4>${data.name}</h4>
<div class="starRating">
<i>${new Array(parseInt(data.rating)).fill("*").join(" ")}</i>
</div></div>
<p>${data.comment}</p>`;
const newReview = document.createElement("div")
newReview.classList.add("review", "fadein")
newReview.innerHTML = htmlString
main.appendChild(newReview)
}
reviews.forEach(r => appendNewReview(r))
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = collectFormData(e)
appendNewReview({...data, img: ""})
})
</script>
</body>
</html>