From fee556297873413189b5a217a74046541ef36e0b Mon Sep 17 00:00:00 2001 From: frankiefab100 <46662771+frankiefab100@users.noreply.github.com> Date: Sat, 20 Aug 2022 21:39:19 +0100 Subject: [PATCH 1/4] add star rating play This fixes issue #464 --- src/plays/star-rating/Readme.md | 27 ++++++++++++++ src/plays/star-rating/StarRating.js | 55 ++++++++++++++++++++++++++++ src/plays/star-rating/cover.png | Bin 0 -> 13967 bytes src/plays/star-rating/styles.css | 17 +++++++++ 4 files changed, 99 insertions(+) create mode 100644 src/plays/star-rating/Readme.md create mode 100644 src/plays/star-rating/StarRating.js create mode 100644 src/plays/star-rating/cover.png create mode 100644 src/plays/star-rating/styles.css diff --git a/src/plays/star-rating/Readme.md b/src/plays/star-rating/Readme.md new file mode 100644 index 000000000..86d6f9f54 --- /dev/null +++ b/src/plays/star-rating/Readme.md @@ -0,0 +1,27 @@ +# Star rating + +A star rating component is commonly used to give feedback and reviews on e-commerce websites + +## Play Demographic + +- Language: js +- Level: Beginner + +## Creator Information + +- User: frankiefab100 +- Github Link: https://github.com/frankiefab100 +- Blog: https://frankiefab.hashnode.dev/how-to-build-a-star-rating-using-usestate-hook +- Video: + +## Implementation Details + +Update your implementation idea and details here + +## Consideration + +Update all considerations(if any) + +## Resources + +Update external resources(if any) diff --git a/src/plays/star-rating/StarRating.js b/src/plays/star-rating/StarRating.js new file mode 100644 index 000000000..ff693d625 --- /dev/null +++ b/src/plays/star-rating/StarRating.js @@ -0,0 +1,55 @@ +import PlayHeader from "common/playlists/PlayHeader"; +import { useState } from "react"; +import { FaStar } from "react-icons/fa"; +import "./styles.css"; + +// WARNING: Do not change the entry componenet name +function StarRating(props) { + // Your Code Start below. + + const [rating, setRating] = useState(null); + const [hoverFill, setHoverFill] = useState(null); + + return ( + <> +
+ +
+ {/* Your Code Starts Here */} + +
+
+ {[...Array(5)].map((_, index) => { + const ratingValue = index + 1; + + return ( + + ); + })} +
+
+ {/* Your Code Ends Here */} +
+
+ + ); +} + +export default StarRating; diff --git a/src/plays/star-rating/cover.png b/src/plays/star-rating/cover.png new file mode 100644 index 0000000000000000000000000000000000000000..184e66426871ccf759407628d7ac9529f4da92c4 GIT binary patch literal 13967 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 G&;J4S%b_s< literal 0 HcmV?d00001 diff --git a/src/plays/star-rating/styles.css b/src/plays/star-rating/styles.css new file mode 100644 index 000000000..3b6cf8ea0 --- /dev/null +++ b/src/plays/star-rating/styles.css @@ -0,0 +1,17 @@ +/* enter stlyes here */ + +.star-wrapper { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 100vw; + height: 100vh; +} + +.star > button { + background-color: transparent; + border: none; + cursor: pointer; + outline: none; +} From e1e9db247d3451dda118c88b19f03629d3f3ece5 Mon Sep 17 00:00:00 2001 From: frankiefab100 <46662771+frankiefab100@users.noreply.github.com> Date: Sat, 27 Aug 2022 15:10:47 +0100 Subject: [PATCH 2/4] update star-rating play --- src/plays/star-rating/StarRating.js | 29 +++++++++++++++++++++++++++- src/plays/star-rating/cover.png | Bin 13967 -> 11984 bytes src/plays/star-rating/styles.css | 17 ++++++++++++++-- 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/plays/star-rating/StarRating.js b/src/plays/star-rating/StarRating.js index ff693d625..abb1036f0 100644 --- a/src/plays/star-rating/StarRating.js +++ b/src/plays/star-rating/StarRating.js @@ -10,6 +10,24 @@ function StarRating(props) { const [rating, setRating] = useState(null); const [hoverFill, setHoverFill] = useState(null); + const getReviewLabel = (rating) => { + switch (rating) { + case 1: + return `Very bad ${String.fromCodePoint("0x1F922")}`; + case 2: + return `Bad ${String.fromCodePoint("0x1F97A")}`; + case 3: + return `Okay ${String.fromCodePoint("0x1F60C")}`; + case 4: + return `Good ${String.fromCodePoint("0x1F60A")}`; + case 5: + return `Excellent ${String.fromCodePoint("0x1F929")}`; + + default: + return ""; + } + }; + return ( <>
@@ -18,6 +36,14 @@ function StarRating(props) { {/* Your Code Starts Here */}
+

+ {rating + ? getReviewLabel(rating) + : hoverFill + ? getReviewLabel(hoverFill) + : null} +

+
{[...Array(5)].map((_, index) => { const ratingValue = index + 1; @@ -30,7 +56,8 @@ function StarRating(props) { onClick={() => setRating(ratingValue)} > b$gL~IC1mxF{(=tvD1 zihvL)0i=Z%kP<>@ArO+gfx~yd`#kslxqt4D>n|Smo;|Z>X3f0snye^&T}{@LyeH}C z=veRG`O|=ojy{5p?noTtao~xakaQ0noeY?BlE?j)^G>iUg z?8mpR@k^cd1IuYv?noMqt;!LeoxSsf=7wDkT%I%5xs*swU!$d?$z${G-PJT&;kj!b zeq#Qogw#Umj?gnOde^DpCYmyz+O#Dcp#%Qs0A8qR#i1fk9Mg#VM}|Y_t(fK;Hl~P^ zVf)_zGD1eL`T00m&eHGc*#9Pvg-w9#zdm4%Vf?pG)THkpJ&*;Ih%ktuP?^RoMn?}7 zgj(ku-`BKfqJTT^@Ht(WA%n{$(20NS(1j%dk{th%WYCcR*D5^>8ee8W4?W{3w*8+p z^3Yelk7GEr5L#&epE|5T4_Np7*>`kE%lJQ+T*kEZDx>D`6-N%!|Loi`VExAr7kmU1 z0Xo|o`bt4Z+HKii_);0 ze?#3aS?^9}|BT%o!|Dw}XqnMU3AX`W@TelxdIPWZP|!^^X$z*Z30_9;&_+k_PU3o=N&Quo?O(##F_oj9yLc>&PpL+y~@fsqJNiAr986nu&Uf(oigjaEBxvfpGljZ`O? zB+ng;13`4reyt>o+rTyXYZ&*Httl?#$Kxm7oXz*anm_M^6ohvgLL3??F<3vn?Gfaz zea&J~ZEs&Xb!Go0rTXup~t-PgYPu{%O7-@pI&Q&FF2OYfKy1ot?#K1ym!ou?-ZeL_os9Ul8 zrbi;QL)DalsNm(yi{jMyPEtnE^_O>vf+5l>TNA=wMU3&2`BZ<@RdH1s8J%Bvv0=#p z{7%7j*mURIL_)*5`@An~uD&k=;o^m_Kx?t9tm_8={>By6Eac9gPT$&!sttE!=*lnJ zer@Iv)BuXkY6ok7(Um&p^bHOD?MmFhe2aDqVF&=2SoT-L*e zU?SGvKvdqVQZ_-*$zqmpFm<37ilhxf{I2e9I!oOJZ>c0hT^neQR7k)Wf=cFTs$|XX zzjRvYZAqy0N8$`GZ&;kr%6CWA%qKiCqoaQz$1Q80e8!JdrT4%`yCpQR_$usQfh^i& zY&vxvn@S|tZx8sW{Mk(*Z2K?dCq8@j%#^pqK3b(55BbFVcB7$w5-oDiwF|#Vl-58 zo$>Yy4IY$Nsv?35I+&*A{(9FNKCWqJSQ5&=dh3R&$sS`sJ%lbq(}l@0JYy5+@v1P`KW%cff)d{ z)?abrH%P<^E9hk$~!dT9t1YwG3@Jct$s;FK^Ji{KEzmMD3wYQ8)Z$#C`571U@|P^W_vX&Kblrn(s=>!y}_ zqA6eq6lv*p3jKu3OU0hr2M#XbEbgH5-@#XLv40=;O)}oqo!gFI`~GC(S*LUD_CoeR zTH!UU7fYw}_8_}OTG43rrY7`mv+Y&rBbQqY<{|v$tV-rcKtjvq89!o zHo(U$VC22uRbDAakj{Fo`SOo8OyOPst!cb{FADQ3w2RMTKVX_qzNlmPq9KJ%kGWVf@bqoh+6} zDgX9p_?vu^iIt`>HpqZI0lD=xYJFi*@}mNXpi0#y-asLO?4(uj<^yS*jGfQMgV&DE z>$&06H(C?o8+m9&QqCOm)eky#*_ZCy7Y!Qrce zklZmnv79wxR6@5 z@NT`5Fa3QHxzfjJLyfe~9jSS_4><}Gug5>z>6>mtOQqFrl|-n!8s9mt5vn$Fk}<+n z*+(*kE(~|(3iyP7pN=A?vIY^jIZ*DPp%<|F?a%FRb8O$MZ#AS0E{y_E`cY3!Iz{hW z`e`9GYqqe}ve>}Qr9@TR!6HjzMk5vg`Q3)W= zh;Aw~;KKeRITJN$m!j{U}Iv87{w+8bUo* za{7^uH4~uVk{Slb6xOkYgomNfDY16;({p|I2_&K9TcMBw@hxIBQ?pq@{_~y9F-1oa z!GOf%RlUoG!?ghs!=}w;~P|GtRrtS(Fi5AsXNssb(zC? z>>Jc(m&KUXZoo_t0%WTpSAaQ;Iu#LHRDxEp{|mnpW{WBQa;nAI3|J%g!5Xn4vlBy+xdMB8&%eVWNys zw@RGK832;{$EPQr3A>tBrUjhT-M<<0g3%yjR&Ys9WwqQCSMuG1#6>@lC`f-iR^#Ke zv&mn={3A*2G?25)LJL#R)$A+aZbR+)5fod(#RKVgn6KN3g}kk^YKyasj1gUr`|q9q z5i)ZNa3x!VGd374)gVT&%TOJzkUt1jSHPmqn##ZG3Lkh3bZ)mHqKceX1^l!LE4gJ{{UDsl)n<<{(h6LM zrZq{uzB89{1D6bSwBGGV5R-%`IhDzDY}EJiDTNdKc& zx{yiS0HDVgQyz*i#M@TDmwfZK7d2*HH1Te~l#oTGh7BEq z>R6uwl5ydO+;!0(zB4tp6)Um#)UW;|eYM4`NX369#Py0IhqPDrV`cSn&zA>)FEInr zTpTQ1?t?^$1ZV}EEqN#JJaWkV#X-><6mgpE3&{Wu&kpt!?!2~u0BP=e&#S$OycSbP z1K$gHjax{8Xr~=~ag=>YD$U$aZlL`}VIi-iD54vE0iZ)M5e#COHUo#%w0otf9&3qZ z2@z4Z<~a^JO@eDdyC6?v7Id?GT4F>U?$niYavBl|IB@=$$r<0~0@w27S%EgG+4eWs zs|_Lf7^uWn9P;+<+kIPGLy8&`kCKw|T4&+yg`l`1Gkx)pjm^!hu&{tfOL~@;mO84* z%St+G(o5w$dUm%aKu@iLH{2=9{YDZf2+?^#jg!|f&b8u)DPD};ju6#oT6EPonj_Hw z;_-@N8%o*gk|_Q_z~<)W&NupApnI)NBhAd%yFiWaEG{oE&tqD)#q3nnjK$*4dd5lG zT>=0M1!_YT+{Z>n%tu~Zl|9rMuGvUY5RB=Bhyel2wKq{m z8lrM(D_#bJ&4b2YF$G_ob2cq3Z-9u*jz~$ES2qvR^zNFu8Pe0)58I&9k~cvdin{7r z55?q_dpTA|Pu-gE2DZ)g%U}FKt_#P3pu8I{Ky3+y{>fknvP`C+m$LZi#C+m zJ`ge^0!z{I64zRbUg>%e;yX&*(8s3!_)-_;Kw5UkKhNNurU%;0G3$!H3`;jK!--+^_JKwv#TLcMRB((>B@6N|?VV(zBI3;IBT z$QFicZS=^k%)Hjt92~Xb$0~TD^&JKRTxM;3AH$cdvO|^su*@4HASsZloP!q;ue%jJLdnSQycgMlm<5$}bd^2nbceaZ*7&-77?4?OBUOY3 zxf?gmDc_teRCF2oC|TzbIGZU~7Y-l*^I7N2=}yhQbwSGb6#02sNJLRgMCru@Ggx59 zuUW*Ik#FXX_;l>(5`YQq?oPWMnte+@z4SV8_Iom>J!6?tFN!87C(TlyGr za;2Fahd!IJBFdcP4-@&aC6VLOeeEN5b&DxdWHkJ%>8_8Kb5pV5!y0bK?8xL6s=jKq z=g`l|B*>B!GpuuQaDGz%$}0>+q=J)0*{KrA!?wdlQ(MRz$NnXZcw(8-ssMY~1PYgZ z*WuCSPRv5N+kh|&gy(8y<4A{VqsS1wwqQq3GJm_Ce}`ncs09UL$&WFRUdoxL&RUBI z=DC7=wXTVWzg8u!Ag9OfnltS;+UN(!><|oLu&7?&#(Z96dV2bCW<_4 zi}QfQpR5oRYY}!bAl7}oq0cRLGzKXOfJ1mJy(<-!HC$h7DoW8_G(PD#z=j;EjS@sU1kox3uPqS> z2$lD(S~g3rpM8kmrza?YBt1FR`){Y$s4M} zf^q=rf>~ul`_MLfRy$SDbvJ76nlN(6`v9g@1J>^ZtTb(I4gZLithrVQL7rEzE@U#5 zxqozxX`QWJeuITJ928mj0-SET79rQL?FyPQTi|MvQs6(JBZ4869`A|9(sBN%MuwoAV3;B$a*74fR3*iMLx7sj~f=`Fw=&-NIahdFX~ys+1uBFMUxlEcwn; z_geVd(J#DvRx2};8}vsLgM2#C$|FpG`LF|GLYzib5cJ%#6O>~|oGOi}6(=J=A+OC~ z;bUzylLfv#dA{qDLp9(#u}8r?^M5}(XA>(34^Hj5!1_-ng4ZX#S0-ZjbOfx; zO3c@-Nj@SzNR>1Jd>Bk*eU(r9wq`guG)J#e-r!V07?!JS;z6#(7GCvjVTfSAGn~)F8!4|(CZ>?Bp$BP<`O!HXvp_Y^s`LU&7>4jN&99P-Q z{%ItbH0BFm1^l1K^!3F`B7=ODElZs(n*iE)GA+fSx_m0o*hIyjTAHF1&^v7|@PJCV zH_MfLd(V2t0FHDK>oeF9ux^xjv}WohC>Y|IY5F?Z5U2*BY^D$9-*CoO$_=*_slj=h zFj}dV5|SHyPzs*R)uUQ&ZG*4*YkL*qp37WgSRT*Iqd zsUbmlcX*T$xHhM<3)(DoxqW~C)zr;@t|Ncu-yb*(*ZDguTh%yQ+3c-5`7N#?WmQHV zH?2NQl$Y_aYucNf5!lAiGQjx8TKNv?({2r%f|%DBOt{-w5qBgA+u zY22H#MKl$0bgB>7SQt)cVP}`ROUpMd)Kd1fs<{}vSY8J7!|o)4zozm^^X&b*UAxiw z!)umKws-`*eO$006&XnB%XM5SyhXP=TsK(u_9(n}L9W!*pXQ#9Re!kj-R@umV*Tgv zPEe@WK>MqKqet_5tLM@Z1_~aS@5DAW+07H%1n&t8cd>o~&gS^>U00p@C#gPrn4Gw# zx|jos4eV=dnpIi-H0!FqYjac^IPS#e*6qKZ& zQZ~riR@)lQTm+}(?SjuNJIe5{n7(a zbggx&dxEbMDZn*^HYLgj32Lio0L(eJ1#A%*)TP|lynw6DPr}k?2enS_8z(h}i9nCI zmLLGkD0dyHcItyqOeo z&R;5(uc6C*b)uESE7#~6X^TOoGcC?;_uUx*-ISe4vHP}M`3StD?H*5uK~t7qaT zixUxhe^w@%jxyKqz%2@I(1P9+IL%sk+d`h&h;(m1XdRW^&dw$M(o?*6wPb-$j;Yr7Js6|JJlx~zY zx{zqP2A}H24!D_oP=tR_%vpam9yH(#B0LosTNUh7%%s?E0)d_0sTysqCp6T~)iHe@ z&65CYnvPrdc9{6vX_3iotGDCI>N{#bN!72f8e7GCIRNwHhe{>U{Ki?^)(a}DK*3C{ zW&6nVknAdyW3p?c9=HtZIGH5YA->$4m1xOyQ}r|p!3jU^keJEsScR=5L0pm!3OM1& zQbwe}6#;b>Z!^usLH7cc064m)kR!T;7L)2SH_tVDf&xnk{;T*~xEe@;=5n3OGVO)=)XT=2FVR!BY0| z_OruVFwMXUzGMg-jusyPIR8L9^X8%W6u{O;_1XWqI20xhv^jBjkIT1&8ZFyOr{xc=z01j)@5dnvO*q;YdC=+x1=0A6RUi@|&n4X zriigm(HOfdLt`5=wwWElXCfsv%)bb4G1-EZwSUDsv*w>uM>L;ozTaJP zOS$A=|)Z zu`8#GHRi*aP5Dq%mRXqbb4XK)&Zdcu!c7xYJcGh>%qSpSwk8NB9QaE(7b4V~ze!o1 zS%<(-bq!=a6x-g^(eLg6pJ)9gi! zW%aK+pOQ<^-1OP+#5Q}rWiG3FQkd>O@>HTfsI!mR9zJIk?zte$N)OvG+9d8OTf$>X}?WqQCT4^Of6cXqek3A*Z!whD^-gv+Lt5FU=Q824HS< zt8_u4!wI+50}P@F6~(RI&yk_Sa)Xmy#Rl>kTLp6)J{}5LgK9BbtM}OH2nW~On%yp% z$>&JIIFG)bcu$8!yylZ*7cS#9Rd(VJ6umfsg=%!|8m{7w=f{*S#lG$HAt|`@lzQe6 zz9BY>)#pnVxR^-W^G$LBo>13q8?^}Xfs3YQ%Wl5mg%mY_C=&l7c$82>9AIluw0UjQ zbi%1kZVDI|7v<393An@<8K-osmy!>SUSbe2%%+c})9XhlmE|gjBu zTXjGQT?}+l zikTIy*GkAaYgp{IPc_AcnmWe^fNkm71*kWHGE?;o%rLEv9$`*Mu!Wbw3Ot++z=Th^^XAd_%A6yHtX!D&(urp7I9-zbBO;i%~j`r8a&}Cjb3?(g7FF zg2UBnvc5its-_-uT4pTtK7^L_w=3Gh+BXJN2%bY9rK-`#F?l}gQT`KCH*c&@7QC%G zfvNo1MUI$ZB}1nJLyaTeVUiIt!mM#~qk;V+Sn}JukKz?fwq*yqe~wmkax*L92TFb` zlTgM_7bv_WfED{YrBc?xLIXpK1QzY6f>1ZYqTmy~?)BnLVU}#m%M@rse#-6>=_GaX zeN6G4jw0s|K@4IcA)L@CXJQ@*(tBWsrxJbAZP-De)O_vraOyBcAThS1Ngb)Z6OYc? z!5VjfkrI?7?94dVQ;Y`usm?C5qb--}4%EwSs&7i$e-JqB&HEh{+4A74J4VMboMf6q zzu}nF2=-ht`=U|NE?wI;ieSh`$LtZk1s#U^cBvk5UIVYC@r0N9O@CqQ9beq0LGMwm zd6VJCh^ho{u{9{Hy^cXHp|NY*cB3(ekr(v7u*E)?_FUWbu85N;BatZeCp?M$lN^X?HSrgcl=u}`!JymWo~>1Le966`<<0U=%VdToo|mg?nGCh+o4lrE=)E%&pw80! zTSuUR+2Tem;!CLsAlWDCT^<)3F3K@q2^hK`N}Y*2s>da;rYE#=n)2aRKf&rS>cC+> zd-(Vm0Xb0h+NCDy8R_N?Z`8X)zl@3V{GR5@3ExRWf-1>?<;AyPgdYH@ zTPq+%QVh|~H1>b>BeUHTLSInonFH9<|3!3uqq<<;wVjccCCHK#4||fKKgqpH;0mg| z;`P7f)aSz+8Ua?mXu~yLm&wQ%v}-jXf-O|O={(_4v+OW#f$C_f#ZZE3UW}(L;oZ$K z%+%1y8q+AS+l4E;UD3Cv??hW|iXtaXarst;(-BxwPgk)La4yL0ajNzQf@b;d;w3HR zf?y~y(><+_;BIxb1XYhXn0E?Bp@9=t9ROJ9(pTY+6`e!Kvc{n>SCh1G79=gB(rfoa z#i=yKqn)(U(Iw!U@F~{48lx1j^oy0HgG=0kuU}6EHYXvP5CAU3+(6iYDU{^(qyb$+438kR{Y*NdRCTq)=(Uy!F=fFOS7XFgm1z7RvkIWBS z?D-!O6}dj6618mth=n1`qS%=pZ&$lV@Hy`GMfa&vnu@PZ9_7l z5{icn+fj_Z4}r{bfv>NxUY6yQNGfznEDi3ph6XA7afOs2F~|bRDO5AUnodrF@)>Oy zxcU-r{LQ7*TBVA#9=Ym9w%cCV@+kp|NhApfLn(&6tT)kqLduq85`NG6krn5~{osk##RP&|xR?Anq}<@<6O`4|XDwLus)YIrT=G&d2d z)cR7He1@ZRy8>BK>KAF|{0>w2jac*@jy9X#A1gSTakzsG@ze5JZnfLIZD9LnH#c2J z29%XXjr54^Vk{?&pnWQ@O0#fc4mBYt50Xo(Rqe~fvNuOcyP*i=T6*su`&5Pi|3CZWz? zV;RjkkH89U)WW;bziu4EZd}&F6W+3awD{$puAufDDnG*AdzAZmr|IRn+zhWq^rlAy zHS%cOf_4_Pze~38Il$_(fgRUy?2Do#^wo~y?F-B@^x=p&rIz9oD4Gx9t2#>)nK>)E zW7gR3hkX#AGe^%YO#WC{)-M|{-J5nJ2zA4SFu2obRukfASr2@5>|4RD0zKk(9AWlR zy6eH-@=3ObC}LRUbY9npeq4XhQX}Fp{u0sH0%n<@n8is7bZzORFx!WZw_iK)YshFl zf}j%YzZrz;W{r{T8gl}4KC)+6$BfC$C}j!Lt!oS*+lUhT2AAvOBvfHqvqaH9%FqkMzAc6VV;Mnn7ajcm7s2e+MXD|19&s^`3kZ4&joNa<`dm@nlbj?CIHNJ+h6j-%`BBzLu~NmaMc%O;cWjR?Xn%{cAzu+wh}S zA`SiTgd@{3-$OyHInujnke&0%QOzWqpyrzqq>Hk(F-TI#Ytk|;7Cf?4OlxR%H2tww z;;>}fHPt=fnC^G`E!iYd{VYot3xG|R8dA-s2ifvmU*Z|AdYzr{1ZH4&rnmti zTghC&QiEW{X#XgJB8JEGW{osl!au)1oYxc9=DEAwgOz>)NeJ^D(eIb4tk?i*(ouh( zYIfnD6xFTT6VWv7uk&fC`>|HPY_+4}13PZl!9JG}{j7n1Lz)ohUmC+wHSlxSU;r2Y zg-_{Zx^w-zmZm@G7F>LD^_5BkLbK{oU@MkdFEUr{4lH$lroQiy^}t_)U!sTP!reCg zK|r|WVy`2qXQLXqz0A>tl}@d%dc zd+Q(y>!YLZ{*-W*iJ5#uBCM&;bks~-TA12I7mW4--Z3jkaL~jbDAsou1Dg=x?s*Ls z4_TOR69Gf9)|zS`h})|lIG3Lw1k0mn{#YoC+?KPobz-PCX7J;kwf#cZ8~1N*SYBF; z#%e)bWtrnHBiPh;elV09qU0=y6pgO#I@`zteZqcp;EEl1PII3x?E>y>Eyl_MhHBje zqIuFiIi7VY@<5pILob~-wtF9XF|D9H>#c$pX$=TgER5&|MbXj<&zu5zS=ApQw{)Ag zW#;L?)aH-R%L@p)5m^G2ZGx$!_uLOWy zI|QMtn37Ci5$d*n;Lbab>Gyd|IbS})(baM4VZXFjtY_QjtGZ+l1$8jB><&8E-iyJbQ(lj#~q+{oEk?~dul z69cBYYxB5%{U)OxFpDGk{)aD{4R{M;cnS_WS0KaY>ivotYPKWYQ3X z=F7`#fx~jd8UaJN40Eu8rRu_AymcSt!sT$=fsAw1=C_-XFx~BTU{FUQ^=9$>tG$3t z?|p|bxd7Hry`jq+=ytt83f&fCRWU?-8qcXmL>RcUUJYMYaM^}kUjBJB-lNTFQfdSJ z*6vz~tZ|auy9Ivk+_l;j)}m?9#5o7taIw}v2(B3zYZgx!Uw*?D1e?}k8th@n&_fOR za7>eCi`Lf0J=sCK0N<;CXGgkyKreH>fw~~`9thqwB~#@@;0Rcx-MN|sg@r|hY z2_(YqKPU7aKhL{fGU!+o}M~4$$(BEg${Z3ZlA80C>oC;0yEcfQ=s|+ zn7iMuMoi8pcwpCxU6$sCGRTlyw;Z+Ah+ASXX}EuNPiWw;mK@)Z0+s4GdpFlWXhl*O zqFC2oTAVlX(oCd35WKz7^eS^;UQHE`rcv^f5Lc2M_#)eGrqHyVVv$1ppwP9FNX#u4 zM`>hWH;pDNx+0O&c4oHRzII#QDO#02u9vO!`FB66a%7z5pL~$DB<0bd|?I6_J zH;VfUBCWwVB{{xa_&cAt9)Yhm-*@@+S=e%;9hfE`YarxU>LC``k8(rCU=T>5s6;59 ze`DXn22H_QvA6XH&K@;lJ(6ri=hn~YDft1PFxTd5xtd|Mr5{4K)wOPT1a?^W@`+WtSP6F&+fk%A`TO6N)YoV z4f))AMd?ofv8A4~Gu3}@AoP+As9_n@DAxEADo&H;uLA-{=Y=W#a>DX;(LLzkw#tcK zWV>C&Yg*oTW=~0RBDLh7zG>Z+EPc3pmJCr6S1>+EQ}>^$3R#?f4Z^ZQ4SVYlt8v|} z$49|bcOMjgxhjq^>|YX;o8Kkh?0iSJuEJ$~{j^Ex0xa^5o`f#G`N@rFYdGH&%?s+f z>vxz7n6C_R#N@Lr%)*9}p1akapSRV+MIhs~!cuE4(;xJhcg{Ay?kFjd1*!zPqDrEb z(1xIF@)YWeE^a6Sl@r496cSUMI?uv2<)^+$^K$_(z0aEwje{su&&q`mV-1`>>M*|f8KrhNzT%4~$H~W9P)c7;Y?ZF%0-tMz4&kiRpA}+t3Nm&l=;x8}NaOZ0( zw(kOp_pWPC7T~;D{*VN}ad`C1c*4BzH1g1dr$94eGlt#*qu?=nby1XE`#uukmhtjp z1H4fKgjB0>LJyK?>M>AdI`Ozz(dMTnK!Dvr*yg676qcEir_s++x<;}{bqP_g=Z8_G z%=w$FbbsMt1vqRN)xxHLtmtGI%ASdJJ2N_C5;*-=S${Ah?UUQVR|MB}jMo&9A1Rgx zhs6}R{gSPM(bzp_e#{_1V$Z_q9%RQxVX3j-_Z%)Ds6}M7cqKsiL58RUXz0!Gp1L@> z8q>vIy??O{2z#H)HYb3rP#N7B9gK#G&gx3szU6{)>e0~^|FhHZrEY5V3u|U7S>%07 zOG~7PV$cxy$idjH zKw=sF)S*B5j79&#RFBLdkIsGfR2vbJ`!63;25urbxiiWZK4%L*DbFg^FY+0NE7WbI z{cqtmnXq=5lhK5}fF4g5QoO?5i_Zufq;ih`4Yb*&PvTcQ=kAdK@lZy}4at@*Pwu;* z4uD1-52IlfnQ4j&Mk6{a)wC<38HA{Z&-9bQThTZFuLWvC_-U8qIbTh=HgSJ zK7W=OxIXx~oHG{vZ8{Ko2Ts|8C2Rhm!~PUVzp5q?KDd}g^xn)J)u)PxQ8y;c-_L*B z*YRt?c?uq_-%KViy0;FW4&bn8gU*a#>iZ84oM4p0juL~0Z_(K^&nHY4%O%AzL2Z>w?*>}on_OCyCaIbDtU~ZLxE07@4wGtH1WL);42~A^ig0 z?*isXbzB9eZTGx?M?%5)?`#a8v&8~xFsf75yCq=i0VKS0*cN6gPX1;B8Wv1krU#G0 zIJ3%`{6*7D_PTR0L5_0o9CA{~VFJP{KA!r=v| z@!P-|dEbqZ!nbvL34?!5pV$_OXQJnzm z4MP?@y2L(zP1SMS*1tR*C<8g&u(m$`dC{9_&T-%FyKX*)YK$BN6R=)gZPB1Ll zvD`2RF`!;L%2Vpm!#zL>^U4?&OV7VH5ZsmQ5Of)`SyB>`xWX`QlCr!YnrZv7U1eHtv?(A| z4b7dodu{rBLle!xN>b&t1rUc6=G$we_{hBM;8*q6&wi@njAmF=kkOesVS=5NVkZ+y zwBJnieK7Fodi&z@ms(OX)aRAnwp(mI+KA5oiC_T5ngEZ9`^<*bGx zAcX-L@Os})n#nb~z=U}w9itjwrb&LR+>gVs+=es4G25znO{hAj#XO5n{w%6)Jos;v zzm8cS5TIFbQiu{D1zPG&yy0g0mh}KeX zl0xA1?Jt*_A})?n-mxwJi;|2UH#I^GP9vKn-g17Cd-22`?~xe%G9lj7aue zToOduJlK`XdqaeQ`hHIFH0+#kz=x$`ve}0q#}-4!iUf!=&902?=fK5h z!GonAdaXZ&+Yr0-xb5JgBeK#zQx!UU8RZ}ydH=jN0A~5t=G*|jwX!_-`;X{>nQPGO z@5Rp&b?-T&_oJ0|nw{{=G}vcAQaWf&H2Ola1(i8lKrOZUSV=`{2^BAvIOphg@bN+y zYxsuKNZ~rvTHk@N#mKpgwPC#@6wfTD22~XpWBU- zEo&mz4T!QWnfsqY0*AXiV{o^hzneoPL5XcEbwyd4*nyrhBs}yVJDnGT%irfNewq9B zZ0_+FInS~IbjV2reO3)`mghG8pSD|^-%c9NF-pK_xAM~+Z?@@i4MC+YW*$vHeiJ1yW=c=_j5b}S8PO9xJ|nz0UJtv?(?hpWu55xz2JZq zAJV0MH`~<%zA~10Q2cjC-JM1NhK*|vnEvS(EC)3ar^Gtt-}j^T<)Gk)I+APod-0vA z;VhhWo8hm^WZ`w1ATw)8)X)7{d<0MqUn|+@Klaf8-=eKaQ~a~I6L_-MYWR1rpX9$F z67h$3w*P5*d}w`yLsq>d|HnQo2pX)&_255?uWruoy;$9x-)_6=IlsexHLO-KM|2gC zew~tD>A?G G&;J4S%b_s< diff --git a/src/plays/star-rating/styles.css b/src/plays/star-rating/styles.css index 3b6cf8ea0..fbf078ff1 100644 --- a/src/plays/star-rating/styles.css +++ b/src/plays/star-rating/styles.css @@ -1,12 +1,19 @@ /* enter stlyes here */ +.play-details .play-details-body { + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + height: 100vh; + overflow: hidden; +} .star-wrapper { display: flex; + flex-direction: column; justify-content: center; align-items: center; text-align: center; - width: 100vw; - height: 100vh; } .star > button { @@ -15,3 +22,9 @@ cursor: pointer; outline: none; } + +@media screen and (max-width: 450px) { + .FaStar { + width: 40px; + } +} From e028199d9251479cfc3719411049bf97e3fd46dc Mon Sep 17 00:00:00 2001 From: frankiefab100 <46662771+frankiefab100@users.noreply.github.com> Date: Wed, 31 Aug 2022 14:58:09 +0100 Subject: [PATCH 3/4] update star rating hover state --- src/plays/star-rating/Readme.md | 16 ++++++---------- src/plays/star-rating/StarRating.js | 13 ++++++------- src/plays/star-rating/styles.css | 13 ++++++------- 3 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/plays/star-rating/Readme.md b/src/plays/star-rating/Readme.md index 86d6f9f54..a4660be20 100644 --- a/src/plays/star-rating/Readme.md +++ b/src/plays/star-rating/Readme.md @@ -1,6 +1,6 @@ # Star rating -A star rating component is commonly used to give feedback and reviews on e-commerce websites +A star rating component is commonly used to give feedback and reviews on e-commerce websites or app stores. ## Play Demographic @@ -12,16 +12,12 @@ A star rating component is commonly used to give feedback and reviews on e-comme - User: frankiefab100 - Github Link: https://github.com/frankiefab100 - Blog: https://frankiefab.hashnode.dev/how-to-build-a-star-rating-using-usestate-hook -- Video: -## Implementation Details -Update your implementation idea and details here +## What will you learn? -## Consideration +- Functional Component. +- useState Hook. +- Event handling. +- State management -Update all considerations(if any) - -## Resources - -Update external resources(if any) diff --git a/src/plays/star-rating/StarRating.js b/src/plays/star-rating/StarRating.js index abb1036f0..4fb6d2e38 100644 --- a/src/plays/star-rating/StarRating.js +++ b/src/plays/star-rating/StarRating.js @@ -9,6 +9,7 @@ function StarRating(props) { const [rating, setRating] = useState(null); const [hoverFill, setHoverFill] = useState(null); + const [isHover, setIsHover] = useState(null); const getReviewLabel = (rating) => { switch (rating) { @@ -36,12 +37,8 @@ function StarRating(props) { {/* Your Code Starts Here */}
-

- {rating - ? getReviewLabel(rating) - : hoverFill - ? getReviewLabel(hoverFill) - : null} +

+ {getReviewLabel(isHover > 0 ? isHover : rating)}

@@ -51,6 +48,8 @@ function StarRating(props) { return ( diff --git a/src/plays/star-rating/styles.css b/src/plays/star-rating/styles.css index fbf078ff1..4497920df 100644 --- a/src/plays/star-rating/styles.css +++ b/src/plays/star-rating/styles.css @@ -1,19 +1,18 @@ /* enter stlyes here */ -.play-details .play-details-body { +.star-wrapper { + position: relative; display: flex; justify-content: center; align-items: center; + text-align: center; width: 100vw; height: 100vh; overflow: hidden; } -.star-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; +.review-label { + position: absolute; + margin-top: -100px; } .star > button { From 9a09464e1ec78214a37cd7e7adf404374db6f23d Mon Sep 17 00:00:00 2001 From: "Franklin U.O. Ohaegbulam" <46662771+frankiefab100@users.noreply.github.com> Date: Thu, 1 Sep 2022 22:17:16 +0100 Subject: [PATCH 4/4] Update styles.css --- src/plays/star-rating/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plays/star-rating/styles.css b/src/plays/star-rating/styles.css index 4497920df..0134c3dfa 100644 --- a/src/plays/star-rating/styles.css +++ b/src/plays/star-rating/styles.css @@ -5,8 +5,8 @@ justify-content: center; align-items: center; text-align: center; - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; overflow: hidden; }