From 9d869d73aca5a5f3c630a5145cb8850581d896ae Mon Sep 17 00:00:00 2001 From: BrianShifoko Date: Wed, 22 May 2024 14:14:47 +0300 Subject: [PATCH 1/2] Enhance UI, add reset button, step value feature, and add README --- .DS_Store | Bin 0 -> 6148 bytes README.md | 41 +++++++++++++++++++++++++ images/counter Application.png | Bin 0 -> 19896 bytes index.html | 8 +++-- script.js | 18 ++++++++--- style.css | 53 +++++++++++++++++++-------------- 6 files changed, 91 insertions(+), 29 deletions(-) create mode 100644 .DS_Store create mode 100644 README.md create mode 100644 images/counter Application.png diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1c3cd19f8f0fb41c10e14858d944f53245e67ba4 GIT binary patch literal 6148 zcmeHK%Wl&^6upy%b{vGr0;#a5CTzCbC1V!Y|nUzhz(|mPt+wM4wu++P+ViOUwXq@ zCb9-(>KY>|_A+r8XCiK7+rYo5fP8kVl+rOpbVT*%Ctr#kxc5_;y8T*iJTE5ZS$~fw zSz45vn-{FL(!R60#(9T#?seXWV=)iQsGJppX!=&RUPR?MHuYCRWS8|Qew~iy``ri6 zL|#T|KAI|Wnv9V0?oFB}Vm=VFJSo(5Lfyf+!=3%^qs7AaxBQ;F-QQmJ+(o~?)pMWt z{&MN?^~e6xy@TVE)5YiImoqgFVt8Yf-8c9f&QYn&@?$v7Gm#%5E;${jl~V$(K9NUb zDxqC=<*k>heS=?B&7qgH3oVEA9O!|O)ER7}!6@jErWk925j^@(`?4?w`+5zdq!Y?; zXCAmkgYn}J2AbBa0#<=rs(@Jm`Q2MOe>-iffK}jT1?2kR!X*X)3i42J_u$?UC-$;rLeg&)AB$-GMAB?T3= i6(d(}#Sh`i5O-w-7#OTHA_B8N0!jv3SOxy70>1!To0L)j literal 0 HcmV?d00001 diff --git a/README.md b/README.md new file mode 100644 index 0000000..c452198 --- /dev/null +++ b/README.md @@ -0,0 +1,41 @@ +# Counter Application + +This is a simple web-based counter application that allows users to increment, decrement, and reset a counter value. Additionally, users can specify a step value for incrementing and decrementing the counter. + +![Screenshot of Counter Application](images/counter%20Application.png) + +## Features + +- **Increment and Decrement**: Basic functionality to increase or decrease the counter value. +- **Reset**: A button to reset the counter to zero. +- **Step Value**: An input field to specify the step value for incrementing and decrementing. +- **Responsive UI**: Modern and user-friendly interface with improved accessibility features. + +## Project Structure + +The project consists of the following files: + +### `index.html` +This is the main HTML file that contains the structure of the counter application. + +```html + + + + + + Counter Application + + + +

Counter: 0

+ + +
+ + + + + + + diff --git a/images/counter Application.png b/images/counter Application.png new file mode 100644 index 0000000000000000000000000000000000000000..0b46dc1eaad50555e80c009a0e57a06a4c55e91a GIT binary patch literal 19896 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

H!jUo*LDu>H5N1NXd$4$#^wNTc7 z4Q@2L{G!FN2*bL1|F181QUPbV*9}r14_j*kAfF5U+x(927615SQl#?E-%tSb7wg+r z(n~G=-YfS4!$GlH!};Q0Z{KdRa-20A}&QKeAnviU*(T0`TE6;rR`iP za~2l8ff)BfXZ7`ecs->81{&>V{l}A$#R1F+GA8kS$HO#Q8PJS8Jpq9E|4}^*fN;;N zb(Z~Age;gIKmmChw;!EMC@%n4%|17dKVe4!u%q&^_$O2V4ND9#DR2mPp0HB|4jsVA zdNocm@H_p*`mih;;}dqY06Y2_-y6qS^;8DX_CxS;xSIp;*%S=xVqILEMUicW_7hcmw@arp%fy9}e(sCtkKwOUs4&es6EIB~RF z5HjVj(U_tNS=TZB=MY3Og|=i>a^l@%$@%wy`RbLye{p^Sr29|{@Q(jahAZ;{S<6>+ z^F*%-Aj^uc|4mB3l$(H+H!TfLtjYwU?;t7m`q*c>5x}TCUHI_Ch+=?OVFa*d{mtoz zfJ+`48Ju|ZIglDATAC-PF&+b_mJFH;PU4|l2qc<=)yXN6Oa?$rh9_|+?l%GQ<_V+z z$*7D2f*JR<;3OA*-Q@A9{9oVX;E1?E6YHEp?gp?)s4ewG=XbfupS z8*-*fVm3^pf8P{d)v(k-wX3Ntq^neYjA_2-m;cDEq|Jiy=F zNGbyb?OYPIf}eK9gm2BpA~hMI-a(72`Jzv>>mNvDB3&5jd_&od4V6Y`B8@T`g5ioo zqcXKT9tQn4{J!+lF7+7}2;r^bYEzy};a77jk@C*YoP3a$cT0SRn9U!XLkU(U99qEzhx$XivAO1=mCj1L z{nH#@g{Ro-shz_3PtvVa6d0j|z-QopRHJTzyf00mZVbxdQAA`-R2)d3Ni!gad_AZY-WX zTDm-u>&jWs4ZYg$Ojn{w^63ji6LSjXg$#NZ9?ZAr;6T3G_>Rih>=Z5&W1TFMv1e2q z*zq^!iY`;&7}stZcD?r8t@qNPpeKH-#PR`5iq`mJsc*yU9Mu?SAuEG=<5nb1Lb0}n zA^gFI?UeRyujKfk{rANKPX_o0Yb~ZmM|<3_=iW}Qw2^z7a$~9nZ(i9WEozpOOmg`d zo3KEXyFxObvfpdjL5WV@>`oG|g=mq8Yr^bE`4rfepU04PWtj>SupIq(%rwaoJoZ68 z5HXcFUZ4A+F@&$M|18qI_vKg}1ayNial2X_yM&Ef?$#2;V-)ReKxc9*m=oDHjvfkA zh$@k$ULO~}>eNSG5iNJ2tuY?5lPYi4AN4%#%_sN(gBs~G8pVu#T&YEN=I zF(&CTqk(?OlD+{Z@k*`cZX;zo>0rgTcqFPD<>@z1*SS}IT`I<~g+5Y-bEkYFUTS!W z<{NzfQX-vEcHokhHr-Md%Lb`C6y0w&a@#vGc^ca?W*_y%G4|;s(!)S*ed{%PdDVjb za!c)GI^7rvOT3IeC9k7#d%ITQ-djx-NpxH%nkM$!hN&9`F(fb)#gTc^(NVe zANeyQO|f;`2$JtD0w#SC{Vg^g2!(!=cq07Li9k`5z}m?Wqnu)^2MEUR;AO?Mo&Frmt%Z(+qF-n zEN7j;Uf;tXsWNVR_0X<=0k zx`i#6ZMKgBNJs5WQ1 zl)6VH%Cep{$+iK0XOajL0qxSsQXNnem`yrGDOQ)8X$zL zJi2~qAa7w2t{BSa8qTSlox!5et?ZZPDMJYHXPy!?&rIAVuG$2ke6IOzcu6XDX>lpH`^@2Ps z#>H?+0y-Um2U7ABo6;#fafl0o@A76K~ zq%&n(FVrVAQhLxQE9pJT67^Q8!Q34c*`^mQ3i5Utciyg?;)&5cR}K5TPIv~2q=)=g zThiUnN=eB60CjA1TT7_zTtE2TNdB#_eL+7~511BY9hEp1o?#2Pg`RV)r>1&8PF+e$ zI8=X?(z`IAu+i12c$2132Ikx1i<828bdfAB-0SVOZttmaBYes9$&kB=t2FYGah71} zA+@f8p-mw>;YVQ;^-p;~LS|mLEe|u09}_nh;vmEqHnX!9u&@(GV|dP29zXsAcBH~p z!x<=5g$qCU@q(kzUk^kPIP4kqDB$gZ8;I{PVa>AzN0VOVJUnYBOX0dwXFMlhAFv-y zmw3>7-@1MTxr}txo1=Vgwt0~-4_hU=wC?Pav8gR7?NoI4I|fzowD!RTTwkqz^n}{Y zg)Y15Bu=puUMBeFd)`+fmT;_Goh0ak%GlNJU8b-(BQs}^YYSi94=Bhz_<4XN*5vCQ zE_lu-TX$(uy{p^i-nac7dFtvb^N%Hb-hs=lHt7Tli%AEvs+N{V#KylMok--H_L*b!DPJqaJinjXbFkZ4?X2x`6n%?%vD7z- z)?ROJ*L&ALaC>WQUjl_}xsiZfh4*l{u(OX(6W4td{3yBy#JY)t^)s{Q{d+s|+D0kdV@<*yL|gGiGkfjjq~YFfRBriK+Fn1EEuQ;yGezPXSbB{2APuviT}CJQ( zEZ>`;I4i$FdNoyKd^?ddxxKs%{X=GPAAYpa6L5y$FD-&$XOtPN#pAv`SGl4Kzz+tW zpVwPnid%ZQA2e1pKi8dgsr!^|ah=?)=E>*wd>aUL3y8BRX6r(ls~Q9PhJEGLL9;?n9#+(BQCf)on>v@}Dyd z*2R$>fH|g20@f;-zEq&$rS@u(2PiqG!T`(GS39qlyR^cW&fZP7J3kj{`!U=-BjCC5 zA%WR?hxlG)Sfi(ozd;yPd%f+NDp}OPg6sGZt8c#Axe^u!bGi#hseR8;P^u09g6bHY zR5q7ha=oEf#p$7wBQwNo&4uZLydt#w?3Q4{XhwoeV)bF6?HMg`v95!Kq)+?A63&%* zxp9`2S|d0|Fv|!7L|G4!p+r!NAYa3_?Q{n$tgHoed^MgsFEm{-=kP-yRtWr|eJWa` zt}AJfMSsW)vw=$E3?5E+=8=2^GGsbHAUp#4QuqN6~ zq0@c7JH<3aT%VJ8G`Y6XrBc;3-pRrs72%rPv0&4mvNUWDA^R(c+#n&o=ob!^_n+sh4FY8`jgl-Fad|pe)YvnnzjX3KCiZ5v+ zngJ`?fYJvNu|X89NTgd8QI5oG*D2f`9XIUy0fmN{7}kIGz2>7z3Xbk>BV4<6H~3wH ze(YDQ*7_p0odse02ajDLTgU?Z<9yR8x6&Zn}^&a*Z!^6e5OqMreK=t#?j_vGi_qkEshTl~) z4j&=#lJINMS?65Uj${lxRx`!)yYch?;h}v(beSi}gaPM`ef_+Ncp1 zBDU)F{br8Z9)cr(1g=B2i|O&;=k$4I#49v2uYHmC_9OipTZb%Nl}hNq_@}7282Wp2 zJKAQF?9~zxL^jH#d9AgU02P!#H%6ice7+L4v`QVj>EL3R_0E$d*?vh18dC%F3`8E( z(L;W95A3>@)GaU2oqgCqfyMEAX>eRoB0eZ*hatCUa8faFRbyBIU(W#M|bpJkP(zKj78R=D9v4WjN!Bp#Fiv7=Y({M^0&_0vUxzlU16cZN-E zcZY^5*DmKhHuOC&+0JgwfsT}Z=ZG<#-j^M;ov);~nyc)_%BTdc>m~@+!F)nv$;-R5 z&ZwBjmc^%Rb=fQMbhgLm(k48fHLaiUw z85U(o4N46ot@dL(oOr7|{fOBY4Nas}rZ-2PKP&kKHYLn4(H}0PkfD+x3lr!KbsYIP-X3VE5I2C>QSXcp^i| zI@E3%_QhJIP`R3cS=hPa%wEce>E2Opf-d84c0zLlU z0;QS$p(87CyrWK{Q`vvv803R>A@-C4jE=zwggKt~sZ!j$47DSAd`2>;$=Uktz)jeF z0DyT205JFUS0AS-4-vks;0r&DRX9{-_<2LUoi~$TeCKPZGjuZkLScZ5D_9i;{-1)i z#b12KnyW_R$*-W5_nejVg=3XXjz_|Vxu>B=i>gj#2~H0w`qVy`JT~5Gz3C}kT)R7> z})%+!YR3}hp1hJ4KJ(sa!2erRttvh>5@rPPqg z_UIcdZuJt2f-pMk4w3qd+*=Cb#5{rBRbs*1G(m9u#m2N`4ZfU!n97;z zjaNQj<=j5O7Wn`Ol+UUl@&x1rzOZ%~ov3yUrwZsPZ{DQWH#k9^t^z2Ldb`32oEiZ@ zpb?1$SC2vIO91?RUvBB7=JgO*#~-#lzI+_1Om%=)zgX;vq|d;%VJ)Od6PswL@9o^@vCR*pMMSU;J)@f_}!-={~N8Q BLH_^% literal 0 HcmV?d00001 diff --git a/index.html b/index.html index f36c36c..31dd101 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,20 @@ + - Document + Counter Application

Counter: 0

+ +
+ - \ No newline at end of file + diff --git a/script.js b/script.js index b47686e..1c31c61 100644 --- a/script.js +++ b/script.js @@ -1,17 +1,27 @@ + const counterElement = document.getElementById("counter"); const incrementButton = document.getElementById("incrementBtn"); const decrementButton = document.getElementById("decrementBtn"); +const resetButton = document.getElementById("resetBtn"); +const stepInput = document.getElementById("stepInput"); let counter = 0; incrementButton.addEventListener("click", () => { - counter++; + const step = parseInt(stepInput.value) || 1; + counter += step; counterElement.textContent = counter; }); decrementButton.addEventListener("click", () => { - if (counter > 0) { - counter--; + const step = parseInt(stepInput.value) || 1; + if (counter - step >= 0) { + counter -= step; counterElement.textContent = counter; } -}); \ No newline at end of file +}); + +resetButton.addEventListener("click", () => { + counter = 0; + counterElement.textContent = counter; +}); diff --git a/style.css b/style.css index 2925b05..e7dc0e7 100644 --- a/style.css +++ b/style.css @@ -1,28 +1,35 @@ + body { - background-color: #120f0f; - font-family: Arial, sans-serif; - color: aliceblue; - text-align: center; - margin-top: 250px - } + background-color: #2c3e50; + font-family: 'Helvetica Neue', sans-serif; + color: #ecf0f1; + text-align: center; + margin-top: 150px; +} - #counter { - font-size: 24px; - margin: 20px; - color: white; - } +h1 { + font-size: 36px; + margin-bottom: 20px; +} - #incrementBtn, #decrementBtn { - font-size: 18px; - padding: 10px 20px; - margin: 10px; - cursor: pointer; - border-radius: 20px; - } +#counter { + font-size: 48px; + margin: 20px; + color: #2ecc71; +} - #incrementBtn:hover, #decrementBtn:hover{ - background-color: red; - color: aliceblue; - border-radius: 20px; +button { + font-size: 18px; + padding: 15px 30px; + margin: 10px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #3498db; + color: #ecf0f1; + transition: background-color 0.3s; +} - } +button:hover { + background-color: #2980b9; +} From c31474e001c35bd97fe5af72556fbee2a0984edb Mon Sep 17 00:00:00 2001 From: BrianShifoko <111000614+BrianShifoko@users.noreply.github.com> Date: Wed, 22 May 2024 14:29:12 +0300 Subject: [PATCH 2/2] Update README.md --- README.md | 43 +++++++++++++++---------------------------- 1 file changed, 15 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index c452198..3376fc9 100644 --- a/README.md +++ b/README.md @@ -11,31 +11,18 @@ This is a simple web-based counter application that allows users to increment, d - **Step Value**: An input field to specify the step value for incrementing and decrementing. - **Responsive UI**: Modern and user-friendly interface with improved accessibility features. -## Project Structure - -The project consists of the following files: - -### `index.html` -This is the main HTML file that contains the structure of the counter application. - -```html - - - - - - Counter Application - - - -

Counter: 0

- - -
- - - - - - - +## Contributing +Contributions are welcome! Please feel free to submit a pull request or open an issue if you have any suggestions or find any bugs. + + +### Screenshot + +Make sure to include a screenshot of your project in the root directory images folder of your project and name it `counter Application.png`. This will be referenced in the README file to give viewers a visual understanding of the application. + +### Final Notes + +- Update the `git clone` URL to your actual repository URL. +- Ensure the screenshot accurately represents the current state of the project. +- Customize the README as needed to better fit your project and contributions. + +