From d372a2f40f3911af9b39ca5c05b089d5bf5dc30f Mon Sep 17 00:00:00 2001 From: MariaBanaszkiewicz Date: Sat, 4 Dec 2021 00:17:10 +0100 Subject: [PATCH 1/6] initialize quiz timer --- src/components/timer/quiz-timer.css | 0 src/components/timer/quiz-timer.js | 25 +++++++++++++++++++++++++ src/main.js | 5 ++--- 3 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 src/components/timer/quiz-timer.css create mode 100644 src/components/timer/quiz-timer.js diff --git a/src/components/timer/quiz-timer.css b/src/components/timer/quiz-timer.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/timer/quiz-timer.js b/src/components/timer/quiz-timer.js new file mode 100644 index 0000000..2ced9b3 --- /dev/null +++ b/src/components/timer/quiz-timer.js @@ -0,0 +1,25 @@ +class QuizTimer { + static showTimer() { + const clock = document.createElement('div'); + clock.setAttribute('id', 'clock'); + + const minutes = document.createElement('span'); + minutes.setAttribute('id', 'min'); + minutes.innerText = '00'; + + const colon = document.createElement('span'); + colon.innerText = ':'; + + const seconds = document.createElement('span'); + seconds.setAttribute('id', 'sec'); + seconds.innerText = '00'; + + clock.appendChild(minutes); + clock.appendChild(colon); + clock.appendChild(seconds); + + return clock; + } +} + +export { QuizTimer }; diff --git a/src/main.js b/src/main.js index 0de0ebc..11e1111 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,4 @@ import './style.css'; +import { QuizTimer } from './components/timer/quiz-timer.js'; -document.querySelector('#app').innerHTML = ` -

CC first project

-`; +document.querySelector('#app').appendChild(QuizTimer.showTimer()); From d64cacf0911bd89361946ac3fe7448dfa5539b5a Mon Sep 17 00:00:00 2001 From: MariaBanaszkiewicz Date: Sat, 4 Dec 2021 16:02:45 +0100 Subject: [PATCH 2/6] add countup timer --- src/components/timer/quiz-timer.js | 22 +++++++++++++++++++++- src/main.js | 3 ++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/timer/quiz-timer.js b/src/components/timer/quiz-timer.js index 2ced9b3..ca31bc7 100644 --- a/src/components/timer/quiz-timer.js +++ b/src/components/timer/quiz-timer.js @@ -1,5 +1,5 @@ class QuizTimer { - static showTimer() { + static createTimer() { const clock = document.createElement('div'); clock.setAttribute('id', 'clock'); @@ -20,6 +20,26 @@ class QuizTimer { return clock; } + + static startTimer() { + let minutes = 0, + seconds = 0; + const min = document.getElementById('min'); + const sec = document.getElementById('sec'); + + timer = setInterval(function () { + seconds++; + if (seconds === 60) { + seconds = 0; + minutes++; + if (minutes === 60) { + minutes = 0; + } + min.innerHTML = minutes < 10 ? '0' + minutes : minutes; + } + sec.innerHTML = seconds < 10 ? '0' + seconds : seconds; + }, 1000); + } } export { QuizTimer }; diff --git a/src/main.js b/src/main.js index 11e1111..6401afb 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,5 @@ import './style.css'; import { QuizTimer } from './components/timer/quiz-timer.js'; -document.querySelector('#app').appendChild(QuizTimer.showTimer()); +document.querySelector('#app').appendChild(QuizTimer.createTimer()); +QuizTimer.startTimer(); From 71011eae2498c5a0cccb3e48c23e9f32f5527ea0 Mon Sep 17 00:00:00 2001 From: MariaBanaszkiewicz Date: Sun, 5 Dec 2021 14:47:48 +0100 Subject: [PATCH 3/6] add stopping timer and initial styling --- src/components/timer/quiz-timer.css | 4 ++ src/components/timer/quiz-timer.js | 78 ++++++++++++++++------------- src/main.js | 8 +-- src/style.css | 4 ++ 4 files changed, 56 insertions(+), 38 deletions(-) diff --git a/src/components/timer/quiz-timer.css b/src/components/timer/quiz-timer.css index e69de29..6c706cd 100644 --- a/src/components/timer/quiz-timer.css +++ b/src/components/timer/quiz-timer.css @@ -0,0 +1,4 @@ +#clock { + color: white; + font-size: 3rem; +} diff --git a/src/components/timer/quiz-timer.js b/src/components/timer/quiz-timer.js index ca31bc7..1fa074b 100644 --- a/src/components/timer/quiz-timer.js +++ b/src/components/timer/quiz-timer.js @@ -1,45 +1,53 @@ -class QuizTimer { - static createTimer() { - const clock = document.createElement('div'); - clock.setAttribute('id', 'clock'); +var timer; - const minutes = document.createElement('span'); - minutes.setAttribute('id', 'min'); - minutes.innerText = '00'; +export function createTimer() { + const clock = document.createElement('div'); + clock.setAttribute('id', 'clock'); - const colon = document.createElement('span'); - colon.innerText = ':'; + const minutes = document.createElement('span'); + minutes.setAttribute('id', 'min'); + minutes.innerText = '00'; - const seconds = document.createElement('span'); - seconds.setAttribute('id', 'sec'); - seconds.innerText = '00'; + const colon = document.createElement('span'); + colon.innerText = ':'; - clock.appendChild(minutes); - clock.appendChild(colon); - clock.appendChild(seconds); + const seconds = document.createElement('span'); + seconds.setAttribute('id', 'sec'); + seconds.innerText = '00'; - return clock; - } + clock.appendChild(minutes); + clock.appendChild(colon); + clock.appendChild(seconds); - static startTimer() { - let minutes = 0, + return clock; +} + +export function startTimer() { + let minutes = 0, + seconds = 0; + const min = document.getElementById('min'); + const sec = document.getElementById('sec'); + const clk = document.getElementById('clock'); + min.innerText = '00'; + sec.innerText = '00'; + clk.style.display = 'initial'; + + timer = setInterval(function () { + seconds++; + if (seconds === 60) { seconds = 0; - const min = document.getElementById('min'); - const sec = document.getElementById('sec'); - - timer = setInterval(function () { - seconds++; - if (seconds === 60) { - seconds = 0; - minutes++; - if (minutes === 60) { - minutes = 0; - } - min.innerHTML = minutes < 10 ? '0' + minutes : minutes; + minutes++; + if (minutes === 60) { + minutes = 0; } - sec.innerHTML = seconds < 10 ? '0' + seconds : seconds; - }, 1000); - } + min.innerText = minutes < 10 ? '0' + minutes : minutes; + } + sec.innerText = seconds < 10 ? '0' + seconds : seconds; + }, 1000); } -export { QuizTimer }; +export function stopTimer() { + const clk = document.getElementById('clock'); + clk.style.display = 'none'; + clearInterval(timer); +} diff --git a/src/main.js b/src/main.js index 6401afb..31af4ce 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,7 @@ import './style.css'; -import { QuizTimer } from './components/timer/quiz-timer.js'; +import './components/timer/quiz-timer.css'; +import { createTimer, startTimer, stopTimer } from './components/timer/quiz-timer.js'; -document.querySelector('#app').appendChild(QuizTimer.createTimer()); -QuizTimer.startTimer(); +document.querySelector('#app').appendChild(createTimer()); +startTimer(); +setTimeout(stopTimer, 1000 * 35); diff --git a/src/style.css b/src/style.css index 852de7a..18f7ebb 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,7 @@ +body { + background-color: #8ab0ab; +} + #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; From 3084d2c3fefe6867188fa42399828e2172a0ce7f Mon Sep 17 00:00:00 2001 From: MariaBanaszkiewicz Date: Sun, 5 Dec 2021 19:28:29 +0100 Subject: [PATCH 4/6] improve styling --- public/timer.png | Bin 0 -> 6472 bytes src/components/timer/quiz-timer.css | 12 +++++++++++- src/components/timer/quiz-timer.js | 8 ++++++-- src/main.js | 2 +- 4 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 public/timer.png diff --git a/public/timer.png b/public/timer.png new file mode 100644 index 0000000000000000000000000000000000000000..a3e601883c097acf3828a026150daae4f3e389a4 GIT binary patch literal 6472 zcmXY$cT^L+*T+lQ$W(?*K}2LDWp88`*~;F?wv-`5W~&0CP}#dsg|e3*tE}Q+31yWj zg(}J@Q=uT!m*;ohKW=i8?@dl}lXH@Ml5AmS$i%?I0001(jE(fHE_2*}Mn`j*hTqWm ze3{V)8QF&d0L-8MGl~Id<)h0=?kDBv0imAmL0;0(5TC*w zbshlV`n0j0&V$IJZRFFUa{aK~-f1jg_@>;Q&w`Y%*wPHBk$7L$%=a}cX=c>p@h(}5Ds86fv%!~Ak zjEi)O_>)syRtA47TBZsCGQ^w0x?vjdSeOPZ^)-)zMlW?eH7CU^K1b7Avs1*|`KqB?2Tu3WaM?FjE}TDvAeKuBg*E zF*`BFfY2X4G-^1TgcSu>j?rAuDHo}C);i9-^I)XZqUxb3%C(9@UF!N_eA><|e?5uY zSU6*S^ZkBtq7_k+_)QG`FkxE^r>%xKxks$S{{AT&>=m^`+rvf41(l*alET=!g1v@ypBB(UM zVR@5_%rS!KgOx2Fvsl8q+u$DN)h`qbViwZzK!pDm&qe$|E z0STBs$)1#hPEAHt_!P}FZ9#t8ug)ioR*j@^V3XkSW@1dair)1HwJVh}05e+VI}j5u zvoqSDd*F?k$;6R_V#n&L&B|TjT~eLdRA(2DU2Tuyc1Q4>H3)%W3SvG#=G&)gY$B6A zf1bO`D)JuW*X^FB*1$@w!4bKNkID~HRw@lCD&8x0x98eXEZ)NnJ58RP1`>7LxEs~c z2Xpsd;8TaHX7=GygV9@@X;V#Y)Gqg-hZCQ$CFNN?4hw1d<77msX6BYGR08sq(H^{n zh?i3FIxf$e%rN6YNxMN9js$+*pO#Yf)8&n!_Sb^Je6?{DKT{Bv=(`LH$+QoOKn)v+6n$&Y&Y zomc+j7`}9x=?eKv|0+e-bCp*%9}}4zWA~apBHSf&YY6R+Ws)#;Q6}GcLA4iJVZHZa z)9|JE82p1ETH=w1aH)J6H zd`C=h@p4+A@QkEs0=TW$62HBDCOWmv`6|ma>Ev8-fqXuBX#N88=Hzvnno?*^wOUqS zv~Zp-4w+J1XQSn=>4lQ8ghEPVoeKfwfv94CpXam@^U$~c`|@$tv}(UK$;8R+VrH@} z2D-7Qpb$g?3 z?jnWqveSzuOP(;k{lXm(JhrgQ?DaI(5T;a~B|yTG#X*AT4}8k(ky^(B3ZrpYuI*o` zZ&#ghNTLq81^rFUacdvF5Q$F+mwtEBH@S_xM%vuI@B7C)wBK{=J4}VS*4W)w^p2dh zO-(~UHGit)^hkc8t3NoN{WUCB4O!rnuU1!!(-`7zHkG4_nRha%W&3S0q5$mC+0QRr z1DsZ5fW+vBC4ZKpg+x7{4w2Fru1MMESkNT>5Sv(y#xAlJcBm~JC#=GD1_V%$B`Wtuh zbnpx+PTn`=e!s4N1ajYhNhsRu6Vty38{r0?VMTZ6mda=IgIX|V8{zeRPUmQ2&43cg zvHwYVxsZy4l)Ry*<{RO_j&bBkCk<~DB6eNgg5T%nNKJ0Tisv70f^E=01M(2lsX-FqBt$`P)Q4`)Ada5jrxZj%R>+&2(-=HQSJr zeG`3;dx^pL?T;j7&`0&v9uB#W#keAWr4g^H@LP>XPST1@|BO>n4{xIsZX;-SAlerS zr0>n=XnPd|Mqsq|N)p^NVAb18&LO{SAY%Y5f5UnfIVv*}-mk*xd$adD-X<;zEhi?1 zHi4Tf33h9k@@M;LcCI35X7bupQ9dPhCBfdQn4VEQ#PNsZtC$h*{->hH4_1s4hsG4% z&~DnCWX)XptwsH=B%zH0apj@>n4&3u;N*VgTaCo9{(R7CM*qa3R~(`wCm*K_1r{qE zd7BM(V~zU?virVwV=4Oz95YM%r{t^$j+aB*ysXT?V&|0(NK5rM!{uESccUJ#oo5t{PUvQ^AHU88kJzkZXQ+)9+l02O?t^> zE?Pb`n~x73ab$hBTpp)^eiGa0?S(ZKb2ijO-^^GkXD~HaSm~me6CYyJN+J|~N3|1RRG zjYz{B>;1bspAvdqwgxgYwbz_wWh-##uyMmdZHtQ*Tu*y8bgAdB@UcY(!~XHs+E(2+ zIIt@m=PKs(w`sfO<7tr15K9&50`~Jtb6Fl=s8pFfD|fBPT9B@th336EXisuV5q>s} z-9=~RAT9=yy^C~{LwR7K)l&~t^}!nv*j{RIy)Hubjr+}kWX+3h*Jqa_+fWv^+fDoZ zPqsgJ#IR661*l(XMj3&jZ}cQ4 zNYmk~AFO^%fID4NLPe>UMH<+>y zbXysUkDHNX`2YIAd-Z=i`h&xn*?aHkj0zye=t=kZ(dB=JuT+i%X|l zA&;f61B-9mX}|Tq;$(0uH?WnCy%uDKcC^1*sSr<>*J$;fuS4QL`KJ=xVLu6W41bpH z$Sa<0ltb+g5!hD#O4)K*xH+(TCiFvG0I1Gh`LIgw>V|S53&j}S)##?;o6Z{^0@TF} zlM6v~c3MVT5jv{bVCA}8)EnBNIxVV^D_5iCj4G`BURB;zZBRAyN{hT{RDn~@hTp^o zi)Rl@a^DOhaFtnC$?HE5+)5@XXY0JX^qSmvl*qhxsIH~ANI8|LqxxJ=O-U}qHhOtV zoQ*Ymz5F5yCk?Q+{Uzr1`DugiJJc6~Nto#HGdXQf7UCxg)pN6-Df{EB@98xi zY5kdiKC~NMuCbGmhh_uCY(u9t~dH*x*IuT<6L%WjE zo+Z(~rC@E#@*l*n=c`01x^e6c?d9L9^c@)ITnw(HWSF+rDD;p zisLgDlcGil-?j^C!a!kWTC6I!p@}VsYfs|_FBh5yku~|{v)(}Bpb%;Bk83yhXEI6Y zqr*V5`g{M~bm2OQ&{gNpF?kTCA_3G?^N0Q)#qbOz9S{O^qmq~9+vVk6dC%Kpn47=8 zM?|~AcAg?K9JQ3kE&AuPIIJ7kLX(j-IR-rb67MlaYyLSvLmZcfGupdu~rZmOS?!@aJia&OkVg$7- zd@Pb+l$0XzvVZig5zQivj;JNnm^hJtDfFPS(BMq4*22jyB(fNrM(aL@P^kiL%Lb^E&#~-dxZQs{)ya{ zrm$IAOYZ4iDi>BFe_s@(Ie0^W_(HJ58gEPO7j{LIX4ACiKCcepo->E~s6G+_w5V+obh&JLcE8S~J2%h`v!Oo~4@nGWpH2~l?Au@2~- zrYF(f&!coKz8SWUb>z%h{nMPwb8ji@h=|0Sm7Y5z;XAGZ=@@uPUO4up5KP&n1eyt{@% zcvHuSskBFB-9^KFseYNG(ubxcK;8sjDNLBXe&WM)UG*{H)s!+xMdxU;#qRY9b z&MDWz$kpv!+@E=G8=?NJN&g?!wJGT|I4dQnc4t%08=%%>YtQKet*dV^)O-4W?2=c@ zvaCKoR#)+tgK9vZLG7Ph6D)LTs%0bT z@uh2#(BdYnG?4tsy>xS9dmcTNnk>$Kw|IJH4cTuwhWym6(gs7)7SKjsi>aU5)*(#J z`QI$HFAtpkZNS7zYA$j{tqFwHFn{}dZzW^Dzj@?r5&sk)A&TS9lmG5f?ZlA(iZhv4c7-Clu$+nOgCNdr6rYG0?9We7O>yY=c54`TW;k2iTozBXH{$p#igdB4)p z=%hpj6*%V&JLdDRio{Kg$yc+{vM9Yi&P&)-9p`p^pI9Bu8AeI&Vou2{nU^?rAt|mZ zHJdgMo@9JjvnYYYSwIVZ9WF4llfx9-*q+F@9XPEq%C17>+rr$OYHe7=2}>$(ix=U{ zlj@yPl7yvUd}Y$y;!^YPq6e7n(0;zV$<R$gVCI^Z1k~e(d>VP@t?~92uQOmYj z9X?;Jo#uIZ<)c%;u3n)SOq2gjrHl-Lmj6r4+2V6*Rmc7JA`M~$+HOQgVyI}Vt?6go z!#NeSd!@|#X3N~)P9#*U2Q_M^Hf|ax^VOhzSz1-)Egk8`+`R9%$i(UWI>RCJ*T+T& zS0vYD3rc;yreZai_D}OnBsXQNmF63S);c`u_op9uWzIL+ zX&6AN0mieXnz|Y@A!D*D9e5rNb zh`g!$66;?bwKk!k@)Sx+(omfB|7g$lq%+RBuoJozaOmaMJlT35>p=uw zvOx3by4AvCjTr%KAC?zJ7R5{O+22F-@hCzUSv2ZYxGBYM*tn^kV3J6JEJ%QT@S! zTpCn3ibE-g2_++?goA4XRk3euH$}i^2y|HTP01EpJpf@QMzFqwc9Yf!$^e1K%S6MCbiLD7EE;%8SQJ;8pxaUneG&D=inb?e{U zvCF{Nw%*#W$4ni|V`gF+4;S)ouRC4_3rWkza;DH2_8+BXOFF&>_Iv2(Sx~mi??biU zdLTTs3&T9!b(9I=-!mo#obSjAGp4Mh7{p4=!^(%OI5gR@Xt_55&D^Bol{cdNI9{L6clqSv6Ud&&@ z5k8VP_7YKYKNfXhI-~o`6BG#c^K*~Jydo)EyJ_D3Z9!xu0^Bm2I2CZESg)TxxzO^g z9FEqCfJ?Tn>tNZ@J-E?N3+x1Jaw=5E76a>PrA1`Ea87&8ja))=LwqXCHhn7nh{nbE zXv|0gb|cfei;F_*G7dKXL+@sSq}HELejx{|zRFOvQWj6RTiXC50KI@f!HS?|{HV%V zw?SADGfFe5Wn>DAwJd-i`}+n`?n literal 0 HcmV?d00001 diff --git a/src/components/timer/quiz-timer.css b/src/components/timer/quiz-timer.css index 6c706cd..5bce0dd 100644 --- a/src/components/timer/quiz-timer.css +++ b/src/components/timer/quiz-timer.css @@ -1,4 +1,14 @@ #clock { color: white; - font-size: 3rem; + font-size: 50px; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; +} + +#clk_img { + height: 70px; + width: auto; + margin: 10px; } diff --git a/src/components/timer/quiz-timer.js b/src/components/timer/quiz-timer.js index 1fa074b..b2642ab 100644 --- a/src/components/timer/quiz-timer.js +++ b/src/components/timer/quiz-timer.js @@ -4,6 +4,10 @@ export function createTimer() { const clock = document.createElement('div'); clock.setAttribute('id', 'clock'); + const image = document.createElement('img'); + image.setAttribute('id', 'clk_img'); + image.src = '/timer.png'; + const minutes = document.createElement('span'); minutes.setAttribute('id', 'min'); minutes.innerText = '00'; @@ -15,6 +19,7 @@ export function createTimer() { seconds.setAttribute('id', 'sec'); seconds.innerText = '00'; + clock.appendChild(image); clock.appendChild(minutes); clock.appendChild(colon); clock.appendChild(seconds); @@ -27,10 +32,9 @@ export function startTimer() { seconds = 0; const min = document.getElementById('min'); const sec = document.getElementById('sec'); - const clk = document.getElementById('clock'); + min.innerText = '00'; sec.innerText = '00'; - clk.style.display = 'initial'; timer = setInterval(function () { seconds++; diff --git a/src/main.js b/src/main.js index 31af4ce..5ca2f39 100644 --- a/src/main.js +++ b/src/main.js @@ -4,4 +4,4 @@ import { createTimer, startTimer, stopTimer } from './components/timer/quiz-time document.querySelector('#app').appendChild(createTimer()); startTimer(); -setTimeout(stopTimer, 1000 * 35); +//setTimeout(stopTimer, 1000 * 35); From bcf73b71d375383fc1cb63d5c3be305ea75afdc8 Mon Sep 17 00:00:00 2001 From: MariaBanaszkiewicz Date: Tue, 7 Dec 2021 13:52:39 +0100 Subject: [PATCH 5/6] fix timer code --- src/components/timer/quiz-timer.css | 2 +- src/components/timer/quiz-timer.js | 25 +++++++++++++------------ src/main.js | 1 - 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/timer/quiz-timer.css b/src/components/timer/quiz-timer.css index 5bce0dd..bd458c8 100644 --- a/src/components/timer/quiz-timer.css +++ b/src/components/timer/quiz-timer.css @@ -7,7 +7,7 @@ gap: 5px; } -#clk_img { +#clock img { height: 70px; width: auto; margin: 10px; diff --git a/src/components/timer/quiz-timer.js b/src/components/timer/quiz-timer.js index b2642ab..5f72316 100644 --- a/src/components/timer/quiz-timer.js +++ b/src/components/timer/quiz-timer.js @@ -1,23 +1,20 @@ -var timer; +let timer; export function createTimer() { const clock = document.createElement('div'); clock.setAttribute('id', 'clock'); const image = document.createElement('img'); - image.setAttribute('id', 'clk_img'); image.src = '/timer.png'; const minutes = document.createElement('span'); - minutes.setAttribute('id', 'min'); - minutes.innerText = '00'; + minutes.setAttribute('id', 'timer-minutes'); const colon = document.createElement('span'); colon.innerText = ':'; const seconds = document.createElement('span'); - seconds.setAttribute('id', 'sec'); - seconds.innerText = '00'; + seconds.setAttribute('id', 'timer-seconds'); clock.appendChild(image); clock.appendChild(minutes); @@ -28,10 +25,10 @@ export function createTimer() { } export function startTimer() { - let minutes = 0, - seconds = 0; - const min = document.getElementById('min'); - const sec = document.getElementById('sec'); + let minutes = 0; + let seconds = 0; + const min = document.getElementById('timer-minutes'); + const sec = document.getElementById('timer-seconds'); min.innerText = '00'; sec.innerText = '00'; @@ -44,9 +41,9 @@ export function startTimer() { if (minutes === 60) { minutes = 0; } - min.innerText = minutes < 10 ? '0' + minutes : minutes; + min.innerText = timerDigits(minutes); } - sec.innerText = seconds < 10 ? '0' + seconds : seconds; + sec.innerText = timerDigits(seconds); }, 1000); } @@ -55,3 +52,7 @@ export function stopTimer() { clk.style.display = 'none'; clearInterval(timer); } + +function timerDigits(time_value) { + return time_value < 10 ? '0' + time_value : time_value; +} diff --git a/src/main.js b/src/main.js index 5ca2f39..aaa0ad9 100644 --- a/src/main.js +++ b/src/main.js @@ -4,4 +4,3 @@ import { createTimer, startTimer, stopTimer } from './components/timer/quiz-time document.querySelector('#app').appendChild(createTimer()); startTimer(); -//setTimeout(stopTimer, 1000 * 35); From cd2ca8a7d1671dad4a0158be0be42cae79c48592 Mon Sep 17 00:00:00 2001 From: MariaBanaszkiewicz Date: Wed, 8 Dec 2021 10:31:13 +0100 Subject: [PATCH 6/6] fix img problem --- src/components/Button.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Button.css b/src/components/Button.css index 45f285a..fd540b9 100644 --- a/src/components/Button.css +++ b/src/components/Button.css @@ -23,7 +23,7 @@ button:hover { position: relative; } -img { +.wrapper img { width: 70px; height: 70px; transform: translateY(-10px); @@ -33,6 +33,6 @@ img { position: absolute; } -.hidden { +.wrapper .hidden { opacity: 0; }