Skip to content

Commit 3631422

Browse files
RanitManikRanitManik
committedMay 4, 2024
added challenges
1 parent d313041 commit 3631422

File tree

4 files changed

+94
-103
lines changed

4 files changed

+94
-103
lines changed
 

‎FrontendMentor25—interactive-rating-component/index.html

+71-47
Original file line numberDiff line numberDiff line change
@@ -17,54 +17,78 @@
1717
rel="stylesheet"
1818
/>
1919
</head>
20-
<body class="bg-very-dark-blue grid min-h-screen place-items-center">
21-
<main id="main"
22-
class="bg-main-bg grid min-h-96 max-w-sm content-between rounded-3xl p-6 font-sans text-body md:p-8"
23-
>
24-
<img
25-
class="bg-dark-blue rounded-full p-4"
26-
src="./images/icon-star.svg"
27-
alt=""
28-
/>
29-
<div>
30-
<h1 class="mb-2 text-3xl font-bold text-white">How did we do?</h1>
31-
<p class="text-light-gray">
32-
Please let us know how we did with your support request. All feedback
33-
is appreciated to help us improve our offering!
34-
</p>
35-
</div>
36-
<div id="btnDiv" class="flex justify-between">
37-
<button
38-
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
20+
<body
21+
class="grid min-h-screen place-items-center bg-very-dark-blue font-sans text-body"
22+
>
23+
<main id="main" class="max-w-sm rounded-3xl bg-main-bg">
24+
<section id="rate-page">
25+
<div class="grid min-h-96 content-between p-6 md:p-8">
26+
<img
27+
class="rounded-full bg-dark-blue p-4"
28+
src="./images/icon-star.svg"
29+
alt=""
30+
/>
31+
<div>
32+
<h1 class="mb-2 text-3xl font-bold text-white">How did we do?</h1>
33+
<p class="text-light-gray">
34+
Please let us know how we did with your support request. All
35+
feedback is appreciated to help us improve our offering!
36+
</p>
37+
</div>
38+
<div id="btnDiv" class="flex justify-between">
39+
<button
40+
class="h-12 w-12 rounded-full bg-dark-blue text-medium-gray hover:bg-light-gray hover:text-white focus:text-white active:bg-primary"
41+
>
42+
1
43+
</button>
44+
<button
45+
class="h-12 w-12 rounded-full bg-dark-blue text-medium-gray hover:bg-light-gray hover:text-white focus:text-white active:bg-primary"
46+
>
47+
2
48+
</button>
49+
<button
50+
class="h-12 w-12 rounded-full bg-dark-blue text-medium-gray hover:bg-light-gray hover:text-white focus:text-white active:bg-primary"
51+
>
52+
3
53+
</button>
54+
<button
55+
class="h-12 w-12 rounded-full bg-dark-blue text-medium-gray hover:bg-light-gray hover:text-white focus:text-white active:bg-primary"
56+
>
57+
4
58+
</button>
59+
<button
60+
class="h-12 w-12 rounded-full bg-dark-blue text-medium-gray hover:bg-light-gray hover:text-white focus:text-white active:bg-primary"
61+
>
62+
5
63+
</button>
64+
</div>
65+
<button
66+
class="mt-2 rounded-full bg-primary py-3 font-semibold uppercase tracking-wider text-white hover:bg-white hover:text-primary"
67+
type="submit"
68+
id="btnSubmit"
69+
>
70+
Submit
71+
</button>
72+
</div>
73+
</section>
74+
75+
<section id="thank-you-page" class="hidden">
76+
<div
77+
class="grid min-h-96 content-between justify-items-center p-6 text-center md:p-8"
3978
>
40-
1
41-
</button>
42-
<button
43-
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
44-
>
45-
2
46-
</button>
47-
<button
48-
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
49-
>
50-
3
51-
</button>
52-
<button
53-
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
54-
>
55-
4
56-
</button>
57-
<button
58-
class="bg-dark-blue text-medium-gray hover:bg-light-gray h-12 w-12 rounded-full hover:text-white focus:text-white active:bg-primary"
59-
>
60-
5
61-
</button>
62-
</div>
63-
<button
64-
class="rounded-full bg-primary py-3 mt-2 font-semibold uppercase tracking-wider text-white hover:bg-white hover:text-primary" type="submit" id="btnSubmit"
65-
>
66-
Submit
67-
</button>
79+
<img src="./images/illustration-thank-you.svg" alt="" />
80+
<p class="rounded-full bg-dark-blue px-4 py-2 text-primary">
81+
You selected <span id="rating">nothing</span> out of 5
82+
</p>
83+
<div>
84+
<h1 class="mb-2 text-3xl font-bold text-white">Thank you!</h1>
85+
<p class="text-light-gray">
86+
We appreciate you taking the time to give a rating. If you ever
87+
need more support, don’t hesitate to get in touch!
88+
</p>
89+
</div>
90+
</div>
91+
</section>
6892
</main>
6993
<script src="./src/script.js"></script>
7094
</body>

‎FrontendMentor25—interactive-rating-component/src/output.css

+14-43
Original file line numberDiff line numberDiff line change
@@ -562,14 +562,6 @@ video {
562562
margin-top: 0.5rem;
563563
}
564564

565-
.inline-block {
566-
display: inline-block;
567-
}
568-
569-
.inline {
570-
display: inline;
571-
}
572-
573565
.flex {
574566
display: flex;
575567
}
@@ -578,6 +570,10 @@ video {
578570
display: grid;
579571
}
580572

573+
.hidden {
574+
display: none;
575+
}
576+
581577
.h-12 {
582578
height: 3rem;
583579
}
@@ -650,38 +646,19 @@ video {
650646
padding: 1.5rem;
651647
}
652648

653-
.p-2 {
654-
padding: 0.5rem;
655-
}
656-
657-
.py-3 {
658-
padding-top: 0.75rem;
659-
padding-bottom: 0.75rem;
649+
.px-4 {
650+
padding-left: 1rem;
651+
padding-right: 1rem;
660652
}
661653

662654
.py-2 {
663655
padding-top: 0.5rem;
664656
padding-bottom: 0.5rem;
665657
}
666658

667-
.py-\[\.6rem\] {
668-
padding-top: .6rem;
669-
padding-bottom: .6rem;
670-
}
671-
672-
.px-2 {
673-
padding-left: 0.5rem;
674-
padding-right: 0.5rem;
675-
}
676-
677-
.px-4 {
678-
padding-left: 1rem;
679-
padding-right: 1rem;
680-
}
681-
682-
.py-1 {
683-
padding-top: 0.25rem;
684-
padding-bottom: 0.25rem;
659+
.py-3 {
660+
padding-top: 0.75rem;
661+
padding-bottom: 0.75rem;
685662
}
686663

687664
.text-center {
@@ -727,14 +704,14 @@ video {
727704
color: hsl(216 12% 54% / var(--tw-text-opacity));
728705
}
729706

730-
.text-white {
707+
.text-primary {
731708
--tw-text-opacity: 1;
732-
color: hsl(0 0% 100% / var(--tw-text-opacity));
709+
color: hsl(25 97% 53% / var(--tw-text-opacity));
733710
}
734711

735-
.text-primary {
712+
.text-white {
736713
--tw-text-opacity: 1;
737-
color: hsl(25 97% 53% / var(--tw-text-opacity));
714+
color: hsl(0 0% 100% / var(--tw-text-opacity));
738715
}
739716

740717
.active {
@@ -776,10 +753,4 @@ video {
776753
.md\:p-8 {
777754
padding: 2rem;
778755
}
779-
}
780-
781-
@media (min-width: 1024px) {
782-
.lg\:p-8 {
783-
padding: 2rem;
784-
}
785756
}

‎FrontendMentor25—interactive-rating-component/src/script.js

+8-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
const main = document.getElementById("main");
21
const btnDiv = document.querySelector("#btnDiv");
32
const buttons = btnDiv.querySelectorAll("button");
43
const submitBtn = document.querySelector("#btnSubmit");
4+
const rating = document.querySelector("#rating");
5+
const ratingPage = document.getElementById("rate-page");
6+
const thankYouPage = document.getElementById("thank-you-page");
7+
8+
thankYouPage.style.display = "none";
59

610
let userRate = -1;
711
buttons.forEach((btn) =>
@@ -20,17 +24,8 @@ submitBtn.addEventListener("click", (e) => {
2024
alert("Please select a number");
2125
return;
2226
}
27+
ratingPage.style.display = "none";
28+
rating.innerText = userRate;
29+
thankYouPage.style.display = "block";
2330
console.log(`You choose ${userRate}`);
24-
main.classList.add("justify-items-center", "text-center");
25-
main.innerHTML = `
26-
<img src="./images/illustration-thank-you.svg" alt="" />
27-
<span class="bg-dark-blue py-2 px-4 rounded-full text-primary">You selected ${userRate} out of 5</span>
28-
<div>
29-
<h1 class="mb-2 text-3xl font-bold text-white">Thank you!</h1>
30-
<p class="text-light-gray">
31-
We appreciate you taking the time to give a rating. If you ever need
32-
more support, don’t hesitate to get in touch!
33-
</p>
34-
</div>
35-
`;
3631
});

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ files for easy navigation and exploration. Feel free to browse through and check
3434
| 22 | [clipboard landing page](FrontendMentor22—clipboard-landing-page) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor22—clipboard-landing-page/index.html) |
3535
| 23 | [advice generator app](FrontendMentor23—advice-generator-app) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor23—advice-generator-app/index.html) |
3636
| 24 | [faq accordion](FrontendMentor24—faq-accordion) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor24—faq-accordion/index.html) |
37+
| 25 | [faq accordion](FrontendMentor25—interactive-rating-component) | [Live Demo](https://ranitmanik.github.io/frontendmentor-challenges/FrontendMentor25—interactive-rating-component/index.html) |
3738

3839
## How to Use
3940

0 commit comments

Comments
 (0)