;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*B5j79RFBLdkIsGfR2vbJ`!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@4wGt996I
zjqHrOJ}|0GJU|ylTVH;s9n9hLl`UI=18$AhYk!%=rc1^zkJ#jW>H1WL);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;
}