├── README.md ├── assets └── illustration-thank-you.svg ├── index.html ├── script.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | thie link of the challenge : 2 | https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI 3 | -------------------------------------------------------------------------------- /assets/illustration-thank-you.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | Document 16 | 17 | 18 |
19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 |
How did we do?
27 |
28 | Please let us know how we did your support request. All feeback is 29 | appreciated to help us to improve our offering! 30 |
31 |
32 | 33 |
34 |
35 |
1
36 |
37 |
38 |
2
39 |
40 |
41 |
3
42 |
43 |
44 |
4
45 |
46 |
47 |
5
48 |
49 |
50 | 51 |
52 | 53 |
54 | thank-you 55 |
You selected 4 out of 5
56 |
57 |
Thank you!
58 |
59 | We appreciate you taking the time to give a rating. If you ever need 60 | more support, don't hesitate to get in touch! 61 |
62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const buttons = document.querySelectorAll(".num__container"); 2 | 3 | buttons.forEach((button, i) => { 4 | button.addEventListener("click", () => { 5 | // Partie changement de couleur 6 | buttons.forEach((button) => { 7 | button.style.backgroundColor = "#323c47"; 8 | }); 9 | button.style.backgroundColor = "orange"; 10 | 11 | // Partie text display 12 | const title = document.querySelector(".card-body__layout > .title"); 13 | const paragraph = document.querySelector(".card-body__layout > .paragraph"); 14 | 15 | title.textContent = sections[i].title; 16 | paragraph.textContent = sections[i].paragraph; 17 | 18 | // Finish reading and ready for submit 19 | const submitButton = document.querySelector("button"); 20 | 21 | if (i == sections.length - 1) { 22 | submitButton.style.backgroundColor = "white"; 23 | submitButton.style.color = "orange"; 24 | 25 | submitButton.addEventListener("click", () => { 26 | const card = document.querySelector(".card"); 27 | const hiddenCard = document.querySelector(".hidden-card"); 28 | 29 | card.style.display = "none"; 30 | hiddenCard.style.display = "flex"; 31 | 32 | document 33 | .getElementById("final-button") 34 | .addEventListener("click", () => { 35 | window.location.reload(); 36 | }); 37 | }); 38 | } else { 39 | submitButton.style.backgroundColor = "orange"; 40 | submitButton.style.color = "white"; 41 | } 42 | }); 43 | }); 44 | 45 | const sections = [ 46 | { 47 | title: "How did we do?", 48 | paragraph: 49 | "Please let us know how we did your support request. All feeback is appreciated to help us to improve our offering!", 50 | }, 51 | { 52 | title: "How are we?", 53 | paragraph: 54 | "Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour", 55 | }, 56 | { 57 | title: "We are we from?", 58 | paragraph: 59 | " calibrer une mise en page, lon utilise un texte en faux latin, le Lorem ipsum ou Lipsum. Wikipédia!", 60 | }, 61 | { 62 | title: "In what we work?", 63 | paragraph: 64 | "improve our offering! improve our offering! improve our offering! improve our offering! improve our offering!", 65 | }, 66 | { 67 | title: "Already clear?", 68 | paragraph: 69 | "Please let us know to help us to improve our offering! improve our offering! offering! improve our offering!", 70 | }, 71 | ]; 72 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300&display=swap"); 2 | 3 | html, 4 | body { 5 | padding: 0; 6 | margin: 0; 7 | height: 100%; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | 14 | .background { 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | height: 100%; 19 | background-color: hsl(216, 12%, 8%); 20 | font-family: "Noto Kufi Arabic", sans-serif; 21 | } 22 | 23 | .card { 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: space-between; 27 | background: #252d37; 28 | width: 450px; 29 | height: 450px; 30 | border-radius: 20px; 31 | padding: 30px 40px; 32 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 33 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 34 | } 35 | 36 | .card-header__layout { 37 | display: flex; 38 | } 39 | 40 | .card-header__layout > .star__container { 41 | border-radius: 50%; 42 | padding: 15px; 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | background-color: #323c47; 47 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 48 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 49 | } 50 | .star__container > .star-icon { 51 | color: orange; 52 | font-size: 1.1em; 53 | } 54 | 55 | /********** CARD BODY LAYOUT ********************/ 56 | 57 | .card-body__layout { 58 | color: white; 59 | } 60 | 61 | .card-body__layout > .title { 62 | font-weight: bold; 63 | margin-bottom: 0.3rem; 64 | font-size: 1.5em; 65 | } 66 | .card-body__layout > .paragraph { 67 | color: rgba(255, 255, 255, 0.705); 68 | } 69 | 70 | .card-rating__layout { 71 | display: flex; 72 | justify-content: space-between; 73 | } 74 | 75 | .card-rating__layout > .num__container { 76 | border-radius: 50%; 77 | width: 50px; 78 | height: 50px; 79 | display: flex; 80 | justify-content: center; 81 | align-items: center; 82 | background-color: #323c47; 83 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 84 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 85 | cursor: pointer; 86 | } 87 | .num__container > .number { 88 | color: white; 89 | font-size: 1.2em; 90 | font-weight: bold; 91 | } 92 | 93 | .card-button { 94 | background-color: orange; 95 | border: none; 96 | outline: none; 97 | border-radius: 15px; 98 | display: block; 99 | width: 100%; 100 | color: white; 101 | padding: 10px 0; 102 | font-size: 20px; 103 | font-weight: bold; 104 | cursor: pointer; 105 | } 106 | 107 | .card-button:hover { 108 | background-color: rgb(224, 151, 14); 109 | } 110 | 111 | .num__container:nth-child(1) { 112 | background-color: orange; 113 | } 114 | 115 | /******** HIDDEN CONTENT *********************/ 116 | .hidden-card { 117 | color: white; 118 | display: none; 119 | flex-direction: column; 120 | justify-content: space-between; 121 | align-items: center; 122 | background: #252d37; 123 | width: 450px; 124 | height: 450px; 125 | border-radius: 20px; 126 | padding: 30px 40px; 127 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 128 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 129 | } 130 | 131 | .hidden-card > img { 132 | width: 50%; 133 | } 134 | 135 | .hidden-card > .head { 136 | color: orange; 137 | padding: 10px 20px; 138 | display: flex; 139 | justify-content: center; 140 | align-items: center; 141 | border-radius: 20px; 142 | background-color: #323c47; 143 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 144 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 145 | } 146 | 147 | .hidden-card > .body { 148 | display: flex; 149 | flex-direction: column; 150 | justify-content: center; 151 | align-items: center; 152 | } 153 | 154 | .hidden-card > .body > .title { 155 | font-size: 1.5em; 156 | font-weight: bold; 157 | } 158 | .hidden-card > .body > .paragraph { 159 | text-align: center; 160 | color: rgba(255, 255, 255, 0.705); 161 | } 162 | --------------------------------------------------------------------------------