Skip to content
This repository was archived by the owner on Jul 19, 2023. It is now read-only.

Commit 8ab4746

Browse files
catherineisonlinecatherineisonline
committed
refactored code
1 parent 3d0d739 commit 8ab4746

File tree

3 files changed

+29
-28
lines changed

3 files changed

+29
-28
lines changed

‎app.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,14 @@ ratingNumbers.forEach((button) => {
1717
//Rendering selected value
1818
submitbtn.addEventListener("click", function () {
1919
const wasSelected = document.querySelector(".was-selected");
20-
let selectedValue = wasSelected.textContent;
21-
resultCard.classList.add("show-card");
22-
questionCard.classList.add("hide-card");
23-
resultText.textContent = `You selected ${selectedValue} out of 5`;
20+
// Check if the value was selected
21+
if (wasSelected === null) {
22+
window.alert("Please select a value ⁉️");
23+
}
24+
else {
25+
resultCard.classList.add("show-card");
26+
questionCard.classList.add("hide-card");
27+
resultText.textContent = `You selected ${wasSelected.textContent} out of 5`;
28+
}
29+
2430
});

‎index.html

+14-17
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33

44
<head>
55
<meta charset="UTF-8">
6+
<meta name="description" content="Interactive rating component - Frontend Mentor">
7+
<meta name="keywords" content="Interactive rating component, Frontend Mentor">
68
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
89
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
910
<link rel="stylesheet" href="styles.css">
1011
<title>Interactive rating component</title>
@@ -15,34 +16,30 @@
1516
<article class="main-container">
1617
<section class="front-section dark-bg">
1718
<!-- FRONT -->
18-
<section class="star-section"><img class="star-img" src="images/icon-star.svg" alt="" aria-hidden=“true”></section>
19-
<section class="content">
20-
<h1>How did we do?</h1>
21-
<p>Please let us know how we did with your support request. All feedback is appreciated
22-
to help us improve our offering!</p>
23-
</section>
19+
<img class="star-img" src="images/icon-star.svg" alt="" aria-hidden=“true”>
20+
<h1>How did we do?</h1>
21+
<p>Please let us know how we did with your support request. All feedback is appreciated
22+
to help us improve our offering!</p>
2423
<section class="rating-numbers">
25-
<input class="radio-btn" value="1" type="radio" id="one" checked></input>
24+
<input name="rating" class="radio-btn" value="1" type="radio" id="one" checked></input>
2625
<label class="rating-number one default-active" for="one">1</label>
27-
<input class="radio-btn" value="2" type="radio" id="two"></input>
26+
<input name="rating" class="radio-btn" value="2" type="radio" id="two"></input>
2827
<label class="rating-number two" for="two">2</label>
29-
<input class="radio-btn" value="3" type="radio" id="three"></input>
28+
<input name="rating" class="radio-btn" value="3" type="radio" id="three"></input>
3029
<label class="rating-number three " for="three">3</label>
31-
<input class="radio-btn" value="4" type="radio" id="four"></input>
30+
<input name="rating" class="radio-btn" value="4" type="radio" id="four"></input>
3231
<label class="rating-number four" for="four">4</label>
33-
<input class="radio-btn" value="5" type="radio" id="five"></input>
32+
<input name="rating" class="radio-btn" value="5" type="radio" id="five"></input>
3433
<label class="rating-number five" for="five">5</label>
3534
</section>
36-
<section><button class="btn">submit</button></section>
35+
<button class="btn">submit</button>
3736
</section>
3837
<!-- END OF FRONT -->
3938
<!-- BACK -->
4039
<section class="back-section dark-bg">
4140
<section class="back-section-inner">
42-
<img src="images/illustration-thank-you.svg" alt="review icon">
43-
41+
<img src="images/illustration-thank-you.svg" alt="" aria-hidden="true">
4442
<p class="result-text"></p>
45-
4643
<section class="thankyou-section">
4744
<h1>Thank you!</h1>
4845
<p> We appreciate you taking the time to give a rating. If you ever need more support,
@@ -57,4 +54,4 @@ <h1>Thank you!</h1>
5754

5855
</body>
5956

60-
</html>
57+
</html>

‎styles.css

+5-7
Original file line numberDiff line numberDiff line change
@@ -65,21 +65,19 @@ main {
6565
padding: 1rem;
6666
margin-top: 5px;
6767
margin-left: 5px;
68-
}
69-
.content {
70-
display: flex;
71-
flex-direction: column;
72-
gap: 0.9rem;
68+
width: 100%;
69+
height: auto;
70+
max-width: 1.2rem;
7371
}
7472

75-
.content h1 {
73+
.front-section h1 {
7674
color: var(--white);
7775
font-size: 1.8rem;
7876
font-weight: 400;
7977
letter-spacing: 1px;
8078
}
8179

82-
.content p {
80+
.front-section p {
8381
color: var(--light-grey);
8482
line-height: 1.5rem;
8583
}

0 commit comments

Comments
 (0)