From 9f9401a9451794c315f1d81d166ec520c5938de3 Mon Sep 17 00:00:00 2001 From: Hadi Date: Fri, 25 Nov 2022 12:46:08 +0330 Subject: [PATCH] Add files via upload --- css/style.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++ imoji/cool.png | Bin 0 -> 6884 bytes imoji/neutral.png | Bin 0 -> 1347 bytes imoji/sad.png | Bin 0 -> 2824 bytes index.html | 38 ++++++++++++++++++++++ js/script.js | 30 +++++++++++++++++ 6 files changed, 149 insertions(+) create mode 100644 css/style.css create mode 100644 imoji/cool.png create mode 100644 imoji/neutral.png create mode 100644 imoji/sad.png create mode 100644 index.html create mode 100644 js/script.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..bc41f72 --- /dev/null +++ b/css/style.css @@ -0,0 +1,81 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); + +*{ + box-sizing: border-box; +} +body{ + background-color: #fef9f2; + font-family: 'Montserrat', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} +.panel-container{ + background-color: #fff; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + border-radius: 4px; + font-size: 90%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px; + max-width: 400px; + text-align: center; +} +.panel-container strong { + line-height: 20px; +} +.ratings-container{ + display: flex; + margin: 20px 0; +} +.rating{ + flex: 1; + cursor: pointer; + padding: 20px; + margin: 10px 5px; +} + +.rating:hover, .rating.active{ + border-radius: 4px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); +} +.rating img{ + width: 45px; +} +.rating small{ + color: #555; + display: inline-block; + margin: 10px 0 0; +} +.rating:hover small , +.rating.active small { + color: #111; +} + +.btn { + background-color: #302d2b; + color: #fff; + border: 0; + border-radius: 4px; + padding: 12px 30px; + cursor: pointer; +} +.btn:focus{ + outline: 0; +} +.btn:active{ + transform: scale(0.98); +} + + +.fa-heart{ + color: red; + font-size: 30px; + margin-bottom: 10px; + +} diff --git a/imoji/cool.png b/imoji/cool.png new file mode 100644 index 0000000000000000000000000000000000000000..abe10ad3822a7d4062072104207e3446262532b0 GIT binary patch literal 6884 zcmZ{pXEa=2)bOtnqD4y>y_Z3v_m)u;f*^XLCR&IRonVyUulGK>h)hHoqBA-XMv3UX zi_U~mpULy#UF-eu{O&q;uY1qk>+H49KIiOn?ti*EPwtU0kN^O1PvfboK2Ada6-q+f z{Q_G7$B8@kO4>>QP@O<}Wley4W_$fqUmF1Yc>n+wj{6Gt3bq9RUcvydV+8=RnE(KG z%Wcw=$5jy8JbR*wlQ^&{&A~W9?Do{u11GKiw;VbtqXB@vMnhG}z;|ZP+~tQ%FLWc3n1u!S`??B&7)MaMA8u&Ff}oF^ z-SJVY{eq7OM(`)c#sGt*!Wb~#G2ZuFxx4({s2%*fQIxNI&poZJo$6IyE15L|7y`pF z9&+)s1B%2q%W=f_p~81Is5o(s>$YeG!j~x>2QEt3^YmfPA3y9fLCmATK6{|8=Udom zdsU)*zt3FUrFF9vg0(Vu1)9BL)%5%OfY;={rY5M6m`*%U7Utsn=}E$GK}-Cqv>^8z zc?cip?C;9EsV=_QE{ZHG1A|)cWoa{W0HSc#4`UJ%f;!ROV&^=78S5@28gxqI8{q%l z8=FnBMw6PF4)VM&*m5aoC8t7d^o@&4^mwUbY|Kc&@L6!8z9ybBbR4-t%JZDC!|(J} z8xs`L85sBy!EVN~=6>21#H{;!32tmj(0RcsT4AO}#11Q}HQ_VcQ88!~cZKRaC5lSs z-f*5H8j(8cEKqucx&BTe8rtTyMG5V-K1<~b55HMlR?84tJgQvSrqIpamzctI+{KeM zZESI2hBdCSQzU$9n_N!h0w9ovAh>=()!~JgG7MoH6GKB#Wwz%H2(v*g|C!N6Tl=8YydrSwRJIwu>j5aVWFid4>`+B4m^F1 z9wvmHY$9tO5Hz^43y=bWmcxVibRB@MzP^z<->ts5NuS>0r6iZpcO@{GpUFHb)!y{C+9QNED<}5J!XhYaR}Y>YCs%=ng`5MCcVl zqKhCqXSP`iPx$1}k+e6>g-hKOEOYfj?5M3#{JS`l`_A_70b7nKTnA2*WLcoJld!NH zexf**`UZ*MuFRRyV$ZG!W+w_}U7ZAaq|3b2BJd^p8>v<)o_}kHl`vpo!NOu;0kf!_ z{DXn%^u;Hyxk)oY-Q6`b+^hZD6B05q>g!K(7)VV&J%I2vx);|P1m>t0kBZxQmZjDu z7WLN@2{WoD18PZJ8aCNF=@XaI&XRV`y9di0mDe)_8s0y9ii35ks=Dq2}7;y^7gZP*S%^&Y6DPaMcHX^mj9*-OjI zJDPllp1<&)qwz=+F)iH+*LZ^9nkLdNe8>%96LQ-_)GYMZyK0d zJxZr+d>aEZLQK4^Gc>IF*8?{P)Rti1fFpk}7))cxlAJ425P*KZeQA$Q*F7m3t~}do z_B+`a%8{C^pbBqtS?Y1mS_(?|8#k2W#F2+^Hpb!OgE=!_VI)*sJHPw~{=$L<4qSZW zfGllKe>3+=*(%=N9fDqGJ#R3{>FIGd-j;6-f>!VmiRK@&GhN^ zmAq8177xxI@b7W2rtIy;XCL;Kx-TzqV9WPPzb6dYA@S;6OdrycE^YjSaB9!Hd8jvn zOcT!|-AfMp>19341s=9=UkEBx~dIirn0=fj8m|aj^VpVeQp=|voVams5QR8W1dVkhAw`g+yX74NW z@uGjG_5SsB#qnElVw9+%K{#%A8OKAmcwa|$_R-P6v%XyV#FR`EY$HFY;MVktQRFek zVEtt7OC_-v)xoRk=5DFBzDWXCS5{U*$gr>)ecPw>l9C^r2qKtwPD74EZ!8uQacgoU z5r@HWx0S339t};eI)z%GWxsS3Ofr(~`0f2+2$8>83QIeVi+GB%om1Xy=Grb z{h*ZujFxr`Zp>Glo;<^xXD{viup?%&m2-I)w&1{&D8^X)fvJebLN` z3_tiv@Tji1x;x+>e$@flV~WY$Olp!jLw3~$t%_$?Dze8PWglFb)#}y{|LOiZS}gDw zN|bYOTTg{Hueh4}WxM`e`GdQ=o}Rl1o5n;X!vAVTQYY(j>UDd1&h2vA+F#Lktjuv3 zz-7*&dQtKy)~tDcxoXxFT{Syxx;Y`MJhj6n<&E**nEHaadY9y@@x`=2!P5I$4J!zV zx~27f69aTSz3s$%Sn%0E=)vH)_ zAXDV^m9H|)aeTksk`e%e?Q=}c(^e0#6_jZ9!TLVVLmGO^MejWbfw1lit9DHHeFn-J z3kO!J<&BMGa)6yZBqSW5rP!KvQeO9B%1+CfzEM>90oAg7&;1gylfwbWnF@>mJ=lTOq4i&_(Zmoru}TvkDOz{#B1?e8$W?N1UB83rjm*5z4xXK9HC<@3wa zBLO-(oQde9552Xm>O>74Bo|vu19qS9Eh*&Pm42GcB_XI;^|mJ~sV`P0UL!?4j{1(o zT(jWeCC_sfg_*{inxCHxu~_5EjrBS>3);FKsf2isdTL|yhN~2sA$W6BKSWA6DsmbC z*8$w_k=y4}b+!22=P>}c<>usMWaJF?_D4|qlrc#U_huv4E-%GoeG^8I|$TWDlRGT~;rrG2_sGH35k2XE~x#J2s z|7tam+~`59w>ap&+8f6x?#@>6!L6DsMfRIURhEQtCOf0vPM)a1Gx6=}zR-f+NhumVJ!|W5Acl4*v!iPeZ$kR# z(9q!E0N(M*KPIY9c6ytKaUSbt`I)rpl~Say?k z{{AI-xUDma_m1!Ra=?E1%ddX@cs=($V0AcL9@ROSBZHCl>a5!ZrwPYsLO}23}`o3ifZw#mK$RaCX5ezTC zSZGyIHhUisMGCH|fe={uZ(pC$5H!5!e%${3vhf+b^4l?;qJ`Z;3O3Wi*hCt9Ws1y< z$dmXJa+e6t`Fk{p9ofuYT^(y9q=+uiDy*kW{s^vtTJj^|89n z_KJqYv#irN4ilc8ypAb(@hO)18PVZZaaSa%GLpwulBDI5g}frwmXDQTW%)s;dP-LDa+{YwHk3{B37U~OH zzV1koqF|Btiq@C7dpK5_%LG6K?dVmE5Xhl#I_;sMvYu>rqN0e%31Q)P(m80rlL%w4 zUXz#j;HzK1YQ;4t3XgwgJ-1_3ff$D0701zsQ%H2J* zz>e4W`de3rb4iV;{iK&RWyQr40&W4EEq{j!9^YUpfzJLUV++Ufh?RjNS-8=&sO-G! zc90-MKCrbdC_3A!ez9dhH0CYqrA%!YCYUPXVBrz)hD;fq_imd|n8CE|`j+8{=~aqE znlHIV%`9Uw{Zs#_a*&3`=;7Wlv?M_!TEF(n<>f?CZEaB~rPX3v3acvIC-i*kix~?u1$f5Ar{S0xA(tGe7GS(zVDo*hxi^{Tj z;1x|RjA`Q3q<-JHh)+A8<@PE|47k1@udZ5a^ilD0HlFw{3Y!JMBUd|(`)i4fvV8+j4d_MN3`Rq zcna~BQdtJ1**2_NkFS8x$9Ru~fE=mY(-b4p4~HF-mM0Zdxg8#B$~Z#9LQtr9W;su* zqeGsQY?mQsHQY4iTn)&`G~$4|;ILrPwXo3B)5BZa1k(_Q`p>oBZsx<=`yxLrEuo-l zcpMx}UMaQ(!MBHQ8la-0&Mw<5;-}B*X;4J=;|CX1X!hM-y~*$FhXH^(wluXlae|*lDoanbsx|gFS!Bx z`+|Z#`X1u7n;u()3>5$6-RIdFR&C9^>e|dV*8BEI;Xz5Mtvx9yF}2pSe4xaiY%w@^ z;tP!cj76cdYr^4UI{qXVSm;w}X&HWBLRm@4Cs1EPzO?(wox~*f?XmSiLn+^-P%2hd zdOi(Q_kU;e_VxJI)^ItgNPE>}XUXs9T}+CYk5$Ge3>(wVpQ_y#OSSZi^S}J%j{dv# z-JO#NR_xm9RmRvY%V96RVzHFj{H3*cN#4xv!)oORP*AU-Q|t%}5gG zlLQ`K{ATa#^VR2%@yc}IvR)VBRX(n7zo_HyE(RZ$KtRRn_vqLLQ7wK6k6n<}M5Pf9 zL=p?jzbksbmJ{uX-*Cm0#mT`d{RL*n4Cbeghn365-@=3cH}A*JZ&yk(=jE~BKxK*) ztH&`Be>JK8fUU7bWmvk*oNkw)ew9C0lyOXMvh0j!eiH8>jw(`P4fG5+wZ2AeV(-=c z{V$72iLCTk(@$Inoo9~qr@?cZ8T?N6!nmSo{2o0nn7hC+fLH8IMdu`rzPp){am1*9 zoh@e{@2?<(os-eKBPw=s(j)6*uWQ)GHSHWX{a9Pf!X8Y%H@$jnxVzdXW!Y?m^?#&8 z_eZ}bu!jVoZ!j_NEMxdNKmVra!Pc(<^m9E}YU+Jn{TCrwVw*qxE*z~c|1!(9-R2El zy85uxYp?xFv^Mddr9U*k*vLWsscgq?9IqQ5cvui2$fG+YD^?WR3)y-)NseQSAjEX+ zPG#DNqqZgs)$N}AyO&z|Ld!D24U^h^U&whRX^{(_M zA?+m?tU5x^7R2aaWw!D}$Y&Wi*ZL6RvI9BqpLA>wzXte7bk|`! z+VgWiT={B}xNTGC+*{kI$wR;9l^Gi!9~UyW(VM_xQPDIf8>SV|e8s}TVSad@_Te`3 zByjKJ`In7YN<$+%6I!{;DF&g+CdvG7KKX^>t654hVPSaOp=8qTAe3-RksXy3%^a(+ z%Uq05Qv;Bc6nN3y3mQy+WLo3v?h&{?97bWt8d&SScY#5rKe7yNeaDE)X{V|s8HH_s zY>f^hyoS`|MMwvt3JuCcoJX&0r-Unv+rys7?adlbdSEP~uwG|xH52%$#Ox(~x{k0X zfoDCvn$&K)Q%9@3I#qc+w7RpBxZx3a@sr-FH@2jt(Icd?ZKlTdkI_=c-AM9^cwe2` zp7*N}^9#N!GTlP8l~MlIU4CtIf;p1tlP%PA6w=kD&2IK`@`^!gCgyUO|TyI8-k z*$4{Lx#Htdr<{`fquoUI3S^GV0NW$KMhl4>|`wh(|; z=!(Ge*!Y<(@j62Gz(sIvb92+Om1K9J)gHaj`o+uA53;iWr&4qr>re8QOU#_AujDE> zQpj)jK%1*DOG_v*eSs?}@;wx10^byBk(0dLu^Sz#HEjsg6^zowVcb6$^ri_ISK@X)!8bqB)H&U*{rzNSb>O7|y}iBN-Q9qm-t`4$Z_tha zE?X{__O|Y46NHbCuQ7-UHe&h=z0B^K?Wn#}Cmz%jA(0{2DvQ&K_Y2M;F2BX{^uaq^lZl%SM=e z;3oAYE>S}!ZLe6Io4>VOM?Tg~p^ki@d_Gbzy5;Fi$^ei5sEu6oA||v{)6!`4)q4y{70pN!ISrfT-)SC{IdO@% z=leY`E)qU^2j4bZtDg3}9?T2A(K#BoX%p-F_JYMdm_gp;VzkL%V6M$P$aF^=`Q?OD zct*zrWpbt=kab#>!0Q~o|-drc^8Ef#{^GKWTk4pGdB6ROF z_eVtElDkcOqpw89n4j(HQ41?yyq^(Y%@MhNUQ!dBI>EpGb}ynlHYWppCF7FP-fo9z zecIUOUq`*sprz0oZy52T(pv3Z&cydeM2n6=k?5~R9p=6nnLhie%4Fbh52SrF;aL!; zpN*1|Q$|AZ5HVD{N=WlsC3kjh;D<=5LLC~8&`RAe6AZk7Pz+8w*7uger0)8rKBD;k z;BRqec-u+5pp;qu+)a!S?p$N1(^VaK8`^qy^xTF=O%?TgPCb-IXDx^INWpFEt~jyl z<%LaRGPHei+W}DIMXDuTj9^WMZf@yHzeM*Eu*bei} z$q+gTCt)$Jye)S{hrJjZf7#5;5OaICwQk6*FCy(2_Zx@XQ_aNljkTw(?CbZoI01+X zi;6xH5qTsmZXhBmD=Hx?EG-}`EGsN59wIFM|0%q4edB27_kSy>%|%7w6d?bv1y9F! dwjQ3=@7(@x9qNH{W1J44p{AqyP1!2+e*i4CREz)s literal 0 HcmV?d00001 diff --git a/imoji/neutral.png b/imoji/neutral.png new file mode 100644 index 0000000000000000000000000000000000000000..e0afd1c16669dbc6de5690c2d2bdb6c80dc62e81 GIT binary patch literal 1347 zcmV-J1-$x+P)7sVmg=A^F6btUsZkkYN7b0!YbeBXb2mzyX(J(44!nF7{LQ2$VHTq5$ z@A(x+$9Z2fI{sF}ym$ZioWp(h-Fx1-qN;>Srr{{_%gtbFu}L7BKuDk@fP{OOg*uqUaC4^aPXE==0IFHxT`r^&uTL7AhTN$L?`eSNsV1 z3&3#Q1%ytZ-j5MJ$e`Tj{jp!Y3U~{^@AXNR^#|ar*Ny{bkhomubS7J9!@>hFdg?=L z^9xX2XlEfajj>xvPYe~($Q0DYNa`lGc}(d!4^WM59y5}kxX?VeCgG? zNKv}Uj<@e-g3KQPXO{mN(Mv(u7YQnTWXG=L3qt-!AerjgbIt>ZULu+5%75EVBVZ(T z6P53Sv@3E%Z_zk@cl*oR1;Cl@9|MO&GA$~WF!smWy&ZA~z15~>{ZDDHwhU+d+IxD;&IqUkiiOm7%m6*G>-=7Gb^h#{wUz-Dvth+(+ zHa1aE@A|mL`XuP==l>+SEp4%|Fh@?V<`dROfRoJF@6H1xTwei*Z@6&HtK#z)G5Q}J zw7z zY2QHzNncsE-{#E3l=BG0Rx#Z7~jDVNvLRbj*un6#C-&?9KsVTD&T)4$DHX z6ZY#C3~eUUaMU;-Ej;J#IgwoSbgcyRE0|wyHehP~sI;7$rLtn{hN`kc zX*oCRM>+z1Qycs0v+7oa54=iLzM-VwTVQ6+@NywW#bM>$lmBt+lYaww4Th?(@`vbf z>PO&H-iX;kz^T9-Ev7{gGrC%Jy79X}576jWdGhbW+<$nS z?9?H@QkzKDyyEit8EW5I3PP@D^~d^V$Q-#t0Q-V4oCnBG9pe7O<3UJSuCKtx0HjCe zQRxVxhmuC6V`H81=IwBH>>iNuqksAQ49S{Tek5|T`UvQWZLy<3%LVuI+MlNtw12}oFcP? zv0JyRB;P(Kn4TCyv@JBVqC&K7rwa0&lcJ5|cTu_nH!3QW?wzVcVK=qH+3|K%`T{d5 zDpdN&j<@H#Eq?&6>I&JhD|>1rDBZiM6o*1jj5x*9-%`5u!%K*^z^m3>MrrJO+tNQ=!ho!Lhl6gOdkGXAcffm-+Ge{{atMA0+%z3a9`8002ovPDHLk FV1m2diy#01 literal 0 HcmV?d00001 diff --git a/imoji/sad.png b/imoji/sad.png new file mode 100644 index 0000000000000000000000000000000000000000..20176c40b711f60ab5eb42fd696a3d305373eb62 GIT binary patch literal 2824 zcmV+j3-|PiP)9Q*e zz; zkeDCwPuuc$w;i}rKxE(Yrd}D_L4wA3yvGu%IY&TmjJKtPC!!1X>!-n}cUb>puBt2rg!V0d%yHz{)U#n2=lPbGCm8c$ zt;=p7SloXK1Xp@aMM4o~POo+s%C?s$f`OnpJ#%a9Cs}8_`{_*Kg%B5$@Bq*hYf9Xo zSVtIp`ZRRLlGzc=n;C^D!aQNZ zG62sLe{@U5sfgCi%>B9x1Oj;}p*^Hy{To#{+HODy;EIVB#@9o$x7y zqXI`xc+l2i;KXSipByux6fkkDjnxan7+X7V?B)$CMrIv__kH8RxD|h9U~NT3#jrhe zc5C?6pX%T^gz@z@Rxjwr_})@ z1pIz~(afIrAgmLL`I4;ii{bE-4-^^%fRg&Q+d~2yw|jBmuoq5o>mLBXN&uU7n0T+% zhe*7{bBxfSbB@5J+Yxa1OAWvHt$=BI@Xm*ROrDUygDXO=gM^BKwNILeTZHQBD!l%_ zgCDF6p{BB^XjmTz4T69yN1syeKHa7rI;2!EjHD5C__zm0PrCOb?%Zb}+#}Pz$Z$l% zu8&I?kKp7K$bwr1e0nswB1_r#g$^EeKf~VMn>>rycHdrq;Iq<3qXaYOl(tYMCn zT0@Zyi5XLpf0==3G?@-Cb&^$-3EU5iHX(>Yx$4|ZgV|U2(VRIGMt3-jDHGi*VCmex zZxf5f5DIl+;w2@?i%5deCP;{!X(w(J@XcEim@`9%#}KFp=vcK#qPoKUUO1*k;l4Wr z{5}n)N5c(Q5$4TIxb80t0&Nu9yXeJ4!v1zv-T#F($ZG`&ZFjCJrIhR4;6ecr9T9p| zzBpI|+b-|P?i|C4!rU$@ZfrS4L_N7$NGUN?_`F?B!V|G4@Chw08<%AR^PBZeFGU0Z zXqwiNyA4Ci!5t1;ta~6dKMsnO=tWhTI4uuIh%LZbr>J23e6WUtO@pIqDvl?r;1L=e zcn}oLdA~dw7dUj(#LfeLyuII#;O8cKVj~)WVUV^3IO`OxxwfUXWB0%-he;2LPG?W=@G?!Szv$sd4S* z$`icHf91xLKt^0Z5N#T)`M^=|sk#;?69E8#=WOgiK}V~&bI@0Q^tp+rHjKvZLrEuR zUA2Qb(_^@KMhs(WBpe0oKIFrb>qq0`FUlQ_66;g{r9)#K?>1K|BYK9JbB;xy&zBCA zJRSQbI_xBqSJsSyID331C@gh;gi5scqy6-l2hYD!3ufS!Sy9ZrI+o?f3w3MQdBBf< z?G1nkShKtfR}^7I4uLNNf$k}|bVo0cF#_u5Z0;c;HV#JB+uI9f#)r;LY2h^zY2g8Y zA@HGC(T~ou3G262ff=}Kem9zL>dEQEtR3Z``KBJ+HNP9oz=mz3VA*ByO#L(^JTM?S z9In>y5hQxEX_7laB9Xv$Ye~AylOuF?jBY?2eM`v)K_9w$G)$djVb1j7?f5yo(A|4D(o%QF;f_@5^JozBFf^}$7f(<9L6n2Lgla& zYw_RWm@Pfph0^cORgqHx)ibv4*GXgP!V*f| z>6^asc&^Gp&9B<){`r`$>wg(ozL=jyh1NGTPsJnXvf=;$6A{c-Sy8rgjWxcjUj5Ht zmBZ!=ckWsAo|N+InPqXR!YlL$+MUrzC_pDdqxTG&J-@>!l>AzcdoZ2|Oxyg>P)+hp zmOd<{yfjz!DY^`G`~|!o?Yzn-%r{v&zjXOMYm5$cq}5Ss%23UO5HL;iJV>o6Wx9L{ z$&v7~lydoSO%20<$KyE{F~$Tj9`H}w{6fA21>YI!+P!d%RQyaTm3AnkGR#M0L=a9Z z@ST-STiz*%%=M)yC$`;joUF)lE(jrD7)Hs{?U@;l%w@S! zCP+jykM?q{;O}92OSBYymgVyF>Gv1R6&kHo%(p6~s*CB1gy__W-h!fMMql5uy;MA= z`!D + + + + + + + + + Feedback UI Design + + + +
+ How satisfied are you with our
customer support performance?
+
+
+ + Unhappy +
+
+ + Neutral +
+
+ + Satisfied +
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e7d7254 --- /dev/null +++ b/js/script.js @@ -0,0 +1,30 @@ +const ratings = document.querySelectorAll('.rating') +const ratingsContainer = document.querySelector('.ratings-container') +const sendBtn = document.querySelector('#send') +const panel = document.querySelector('#panel') + +let selectedRating = 'satisfied' + + +ratingsContainer.addEventListener('click', (e) => { + if (e.target.parentNode.classList.contains('rating')) { + removeActive() + e.target.parentNode.classList.add('active') + selectedRating = e.target.nextElementSibling.innerHTML + + } +}) +sendBtn.addEventListener('click', (e) => { + panel.innerHTML = ` + + Thank You! +
+ Feedback: ${selectedRating} +

We'll use your feedback to improve our customer support

+ ` +}) +function removeActive() { + for (let i = 0; i < ratings.length; i++) { + ratings[i].classList.remove('active') + } +} \ No newline at end of file