From f6c1fde9d055efc5eb2c4484d57c82a48942810a Mon Sep 17 00:00:00 2001 From: Kosuri Indu <118645569+kosuri-indu@users.noreply.github.com> Date: Thu, 8 Aug 2024 19:06:22 +0530 Subject: [PATCH] Added: Time Capsule Center(VanillaJS) (#749) * Added: Time Capsule Center(VanillaJS) * Review changes --- .../Time-Capsule-Center/README.md | 68 ++++++ .../Time-Capsule-Center/index.html | 77 +++++++ .../Time-Capsule-Center/screenshot.webp | Bin 0 -> 18126 bytes .../Time-Capsule-Center/script.js | 214 ++++++++++++++++++ .../Time-Capsule-Center/style.css | 156 +++++++++++++ Vanilla-JS-Projects/README.md | 2 +- 6 files changed, 516 insertions(+), 1 deletion(-) create mode 100644 Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/README.md create mode 100644 Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/index.html create mode 100644 Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/screenshot.webp create mode 100644 Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/script.js create mode 100644 Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/style.css diff --git a/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/README.md b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/README.md new file mode 100644 index 00000000..278f34ed --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/README.md @@ -0,0 +1,68 @@ +

đŸ’Ĩ Time Capsule Center đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + + + + + + + + + + + +
+ +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +- A web application to help you store memories in terms of time capsules for future. + + + +## :zap: How to run it? 🕹ī¸ + + +- Fork this repository. +- Clone the forked repository. +- Open index.html in your web browser to start your culinary exploration. + + + +## :zap: Screenshots 📸 + + +![Screenshot 2024-08-07 011353](https://github.com/user-attachments/assets/800ed567-67fa-476f-891c-34331e916477) +![Screenshot 2024-08-07 011805](https://github.com/user-attachments/assets/939c3a3c-0046-41f4-b74f-3e5ec4c564fc) +![Screenshot 2024-08-07 011851](https://github.com/user-attachments/assets/8bdb336d-948c-4547-a3da-e07f9dfb9abb) + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + + +

Developed By Kosuri Indu

+

+ + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

\ No newline at end of file diff --git a/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/index.html b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/index.html new file mode 100644 index 00000000..c9f4ac53 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/index.html @@ -0,0 +1,77 @@ + + + + + + Time Capsule Center + + + + +
+
+

Time Capsule Center

+ +
+ +
+

Add Time Capsule

+
+ + + + + + + + + + + + + +
+
+
+

Statistics

+
+

Overall Statistics

+

Total Capsules: 0

+

Total Messages: 0

+

Total Images: 0

+

Total Videos: 0

+
+
+

Recent Activity

+
    +
    +
    +

    Upcoming Capsules

    +
      +
      +
      +
      +

      Capsule Storage

      + +
      +
      +
      + +
      + + + diff --git a/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/screenshot.webp b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/screenshot.webp new file mode 100644 index 0000000000000000000000000000000000000000..8caad8ca7732e4d70cdd2a09d5d46afe6f088143 GIT binary patch literal 18126 zcmch-Wk4NE);79vcXtUc0fM``y9Kx4?hxF91b27W;O_43F2OZ8Tyo~j9L~(V-+RCN zfH+BA|ibv0D!8nfSigP8)4I1``i>b4T#DM!XJbuN-RSvFZTm+ zW*kLgB{Gz$)f4yY2*NJt)GMpz^t{*lRIb-OS3!vM7;odtko)&n(ifBkkVotMcK$Y9 z-aN128`syYNB2{cC!Iow6xqku*RR_IQ?K){ueS&};u+zw|LLtm z^ZFJ~e0%Ea;ETbt?CE~(_=MMp*WN4ROVAF%eZ|e$ea6P`6+PxZ_rK1cet(2}-62|| zog`34!{u#`AXx2(^({ebHbIDnM_kV4sitD{a{luK!s&uXkmCCjIGbPE(Xpar{62*C71A z?TE964nq#A-mf~$BRdDV7gu+hCHypGDA953u?%umJp$apa-(vdD?b!<%Jh)ia=H*nr(;abbAzY@Y`yIeA@WT1`fxKyWaCo=51na6{2mg_{ zzXxiQ5E(m3V^JD zx&PQt1_42cKXP-W61;q&T03jdqjuk+0QL(RvK>0=Ad zu0AIo%oH-_KcGnd^RJtqvVEm93;Jh{{a#|P4C9|U2e%DH4bT39{$nr`c1B!(HIzhG zrOx1&nK^S-iuxWHVwD_|R0ji8^`{AU`b0YP%R?dNU-%#!NcghgJ>If*1_%?>*=VFh zVYxPc;vu^B;9anq%4`3Xv%m9`eE6S;AbpN#Um=)hI@tL$;bX4faRV+dMy+7@Kj8HT zShn)b$|w7bVaTxKmI_}O<8P+Hi_^(dtbsx?XU&=r`)@lbTq~{S{~b5aD-Nebe(xY> z#gq0={`v!5^Wl9NF)h%X6Q%=158VThrXqS_%#fT#?|I-)Bt9|2zegre(bM19BF#XG zs1V?ZpA9k=;j8uBhxWtlWgB{l*~>P-61%;jtIk2ZYs6ynFSH-oULU;YmbP+>!fo+ z(wsbhXuv<2`gbsJmf5%D=D%_h3Ptup!TzP7@E{z2+guLE0njeXjb0pSLP|Z6Rlom8 zBrR6#;I80jB?%G{t(u^J3JfNk?Do49UvXGM2~CDb!vk&p_f7jF73-TW^m*)L%fE<7@V_B|r zot%*T4VrMB6+KOniqpUHkk;T6TK_*;Djde@*Z$)$Kf|R~^yJreWiVRLkiEFI*!R;eXL%Lra)& zXkWB!P`LalRqsIbzoJ2}ngv;Bg~*itS~1q>e7|`4QdYf#B)cXuRNPq~JqAITT|@`o zt*o77UHCBQ4E-I2c*F+Byf<=Wj@Bpx7|2%djNIMBo$As5ow*x;LSrh^WIdW@;9+Zr>5PC`ZH_LkDuu%S9Z`MhPN#66};B9)0VR?UV zx%_)I`OR7M*f~1yZ#K96bMn3BdBpwj^j_MwKh3H7ZzlGCHVJ=oy~z(bVAU)*j@P#m ze^YYrnU}wLZz-sfbxN@rn~UA)6fA}P`4Toz;ro9{(7&OH6p!jXL;i;ep+%8xbHD_O zyHWjct(7-HxPXCL_YvHot%AY$@J9Kr4em9`5$xk^{2ADo&X;!}`qQ{hHv}U5CCLBb zzqE}*GJ8XgtmghxTz>OZTNQFf$6ubh`>|emuK2yr-?{k~lZ%}TE@qBP7E92}oS24K zmit8yx^)9nSw!(VSXv5%?~8oheOK|Pj9dXTU2G76@cJ<{`PgS-6h*)UHmYTtO>tPk zPsHRzaPNs6%c}q-BVIB8nGPm!J1BNBufKR2;dE71#Oe7X-0^k7 z?Z$F3$gPAYH}~;Zi|QftoA-itYa( z!eeJMr$zI?@oxnNVO#S1p_+`{p5HtFGf7@9xG670#$T{=I&#n-KT-Twn!G^K(;KBA zd#4gOJGny1?}W6G=LlfNpdoZM8uXsK{uJa!Uh#j`H*b#N!d;2&y;**%_O#mAR%(}? z^m>D~WCwb!b++usM7SGlDqH<>fCvU;Al(2qNlh2ljh=V<<}Y?Wxn8A`j1Na?AQ!fF@e=T zO(y@UO#iSswqVz@|14F1|1iz?x9aBBjahFDn(ikv24oj@GrMN!k;=b;{STCx46zMb z2x7h0dwT4Q{`X`3oDqfb6WFgXW&gh_#^3W;Ra2KlHOk$)(%I>->2I@N$#64be*L^u zF}m^6SgVuL`AbRTk_(SF*ajNpOKS*om>(oj5$Vz{nYPUsA;yx=Q6MhuJI()3g)3%Z~SHa24^ds`kw)JYm7c zrmf@1{ulG`w}%h!UB#a#?wn}=fS1>`o&_WC7_x77z6;*H3OE@NeYpJeKq3)!XH9_^ zH=PtMpE{&x{0@ANl6ik@v1_PazzT80Lx3&sWErIijkFuKPBhcw3my%AAb2v^?>BkL z@H!{B`}O+j7rOubG2)4233gW4f^f|3SPg?QZ7pWO(qu~9$&^>i(jNO&XKXn`(cX(Y z_hf8VpE_ymO#GOo<|j!rQ$~4RW4KqvzU6pPV|)6P)4o|1+Q`0h?k^nm>u9ZH*?G;+ zeeLsCb^9|b>*J=J_O)u?_UxOd+~G1OR~f zHZ=8xKs-wE#X8()#E914Fu~C^!?>{&6MS52MFST~olOGI9W zmlO!vgA|)!jgZ2@+eWtf23Gi)5xEYrd?A?JMe1xg75WahMF}Wmdm`qC!>~p4dKY3g zJ&$2=t-6rR3AC795e00)ptL5~NjkJjxw-DJEy$h67AAgf%5wj96(#gesCK>ba^$Ev zlhcT$%>yWah;Wp!LaK&bo5VgpSizK&f~5dFn3d?M%vxPi-{LD6x>W%MtQ@+#YnjY+ z_eHbfj8tuU@tQ2@x=)Iu5S=Uu7F0A6Doj@-omr8gRZ^q|N%;@`{l5 zQL9eaW?)h)?aTPSO4Fe82y{w~!60neUH~7R5R?^3X>HhF$5hi-t*L?=KWvionuVlV zT*oX25+Sh88{Dv!WXD}23ImtJ|CE);b5N_d z4wH8s8w50Z79PAiHyZA;PpC)y2fwcW9m1uUmk9mSfIYdDMN$mk1;y-&PA+~eE4u9@ zwNCnta9;a*15FK23_&%&jLa{kXMs6ob|~$NT&NDt1jNRySkB9jx~w}7`@)`RTV3{F zR?(}fy$H6gQa10YSw0$lw-Vz2fX%uHthAN!Ll`(yi&O7=uZ2(J=kA#_>I>X8DML+F zGSr*nL{RO;vLEWxqxqB=EFF{P2p)3`)qEXqPrKE6>UJSESvCzi&plo8EBcjSae;t( zO@yCvyOk8{?|Z+>H3Ekss)UQywVH_E&YH4uA2@)ClQ=bhqA{M{YNgr`{mF zxNEVa1a085O))mP@@AHadK9=QdUNVf1uKJNIC zmB5D6B@F`tkf3in74 z8*s%n`p%?6_M>?erGq4Kei_UO(}z|=3P7$a#!AKSxJxZ?BBZ+13OA)H8ei*7rz;Dy zp$>g>RBfC+YVii4vBR=B4?O;+Pzt)__Oq+iaGNRWINimeqCTD&dou8nJbfcu*aOqH z20?RQmUR1P{}!eF6XS<0H^+cy!qlPp#CqAN5d^&X(;g>vQvOE*K?1~_*&lgEWBLwy zu?!dVln_ZD5}X#}&|bz|&*MV5#f`iSQRbpRzXRezW^E>vaeMjoNBF3Nf*v=^I$65#8omx;a|K&{KZf9mllU{$|OQR4{~J>Cz{lICF~ z@8_4pG%K6S7Wff5$5Dlc@EZFJAI#+u$D6cCztmZD-EyL{=Uyx`QUpw_bMbJc9%DvY zRH4m+ZjD-hic;e9h0;roiXs+`^0m(vo4Ml$iAzJkRb>(8je1}viWjLAy*uKqH7)og z*7sx!bgC^vg@TVEK+)zJN=o8qllV?N!f;Mz7Q~)hLSW~E^bYXfZ&r_*PILG2Y|662 zJG04CoROSsSzfIpe4Ebv7kgF-40ZZ)iCLK86s=w~lq+O)0RTvS9Hrmt`j108hw^u0 z!wz{mZnW~N%OQErg9kx$I>8bQ-$UMG>(?`#=K0f`|9={X3ZTz>WMPn0__?v$sc%NW z1bk=pIlCKePeTg&_<_lFKb}$A21932w3^Hvp~8AOgi4UKDrYi@_eNxPT~OW007zV! z4wEW?93ZA58<3{oq8R`%(~np11T zK{8nOL)F1ORf}@Agaz{}UE78N-R-uup}Wqg(8y7PMbha}1>EN;1Wd~iT(dIq7(t$e zXSrLs5-qvo@b({%gpPu&4{=uf{_!ZqgV|0rJkhGc?GB$2-{ySl4422A7hF2H%0Q#x zf3y1t@e@G@3PSd1kb!!JSZnHp4QT+$pV9T(ZzkWP?vRG?9xZl+3@PQGHqN-8S6bDjXLyvGGvqatMK~C71xQ{KU@=^{k51W$;D&VSIAde+-86D*{f@A#w<8t|9 zqf(Yq3`VqdLxnTRrj6oM2j3(Z5It#W7H+2O3DFQMqH#eWcn}P3#JzSY5d0LXrPiz(&cu-1&9A|d&hUE5zxw*#kL+axC zWZ*F~e&-+1|KY4gv|Ln0BV9i=ZWKct-;%FW8m?o(xj5pHiovqZ)UC|4d_hVjWvmvT zkiTe^jk00wBMelDqtk^H!)ytpcZ4_vZR*Ny(!=3dT~z84ay?!8HM0qPaAa z3!H5lb4EYRFjb30G)sonRgJu2M-Z&XaNj2kX{f-felCdd7cqMtE2ALC+EO^e5A+Cc zXE%x}bHTpLicgT0`*0aeF^8TELN#!FOe0%2-4(P=*c=opjALxFvT1gy4D28~EwiRH zsSVVUcLb!gS4BQd85V)tRYv30*Ef^%P_`rLwg3`XGg3M7Z@g`u=y4L~*Zmfwgy{Q& zxj%IqfPh&LZ|1EaYz_0mF^MPob48a{bjrTPF-cT}(6s>N@DL}dAp72Zk8Zgt8(yO` zaZEzC#@YXQNn3qms2M(jr`K(c(r;5gi-X|8^Gr7YH$OH#!JvZ3N6ulL?KG>KlI;nd z-2|J&s0wn~7?`T>cGvNJHP6GAzTIs z=ec;U>H6m_zN7PyQEH_XZjp4E4>y4$d&0bjM?D>l!9Dfar%7CB^( zOs=Jj{Uez3yn3;r3=vOEUE9}7HXoHYlETk_ic>U2;UrTpih?haQNI7)IF#uPm;>Ug8SmnKOe%a3c_=eH#pMAJ$dLKG@^CVKnb@8P(nX4#fk^(^-^Y zPzbd)4jP}nxt@f>f`G8ug=c&5Y!)^TdZF^B)-cM|S17YiUP7}oO|yEc@SQEhU1w@> zDq;4oo4hJ@FYDd_KsMrUx_?6(Ar3;ZZoJ15DH+oDl_nwD9e68}M0{Tf4#`ld!7e=d zZYpDvoTxJlLN{3*Ndlj#pILmAy$AXx__xNNHcQvdcRy2x^Vu++k~b%cJ7%44Z$|MZ+ZjN;C&A}2KDH-vu5f&(WUFw$S-Z&J`VT=m74(K-C|1%iEz^Gtp2 z;6l&?B1`lX9QMxXb(VNsdeDKCV~}nWz`ye~#AG%o4si@ZS-MyboTd^hGO~xQGvU|f z8M*J4+13~Nv4r1rs9gTSozwde>-}^@4JJ^Q^~%io0Z0W8Cn9BBqeOMO(NLuSK+CJz zI`s51^@l>aU?h%7m3T{V*AdN(3l_zG04|S!Z!hZqV@g7OtoF+xY^dv zQOH38V*bOwd~Mvo5{gq)dg$S>Ak<7NA7@6NdM8eVRT2&>-g*3>nOS@(y6`n)Y>D*8 z)fi(UX`iW&7culk@}QPq03TP$l+KwXdb`*$^c`fl^m@bRV5uaKTC5a<)Oip-Dp&H8 z?#rRnOhUDoaCG=o;x@n#8IZ>-C0H3FG(9&z!3A4-q)MjKqKE)|0M6VwoEyL*_bnZf zCiq{2R)ma2g#l>h)dEoWw$gF{0L{4}2HG>e@evr0Env?ZK;mCA2u61n5y2X}dJVD= z#x%c8``X3IY*)Ei0EpbLk-r2Tk;}@D$Rj22!Ds9#-j`*+s(Q3*0uc2%Pb0U5H_3v^ z1`f~=THFE#UNJ6M@V3oXlqC#7msrv9Yev1Tyl*3yyF2XD+vBXFRb@}E{2vQ<73v;s^7 zuQMNUCO!{Y)R-C&{c)tmiu>(du9FBrbj=Me z&@p%f^REF8#~#f5<}vpkx24T(#(Se}hF!2n556xrTJsWn_n7~nj%tkBsVM8FA0rr2k`MT|jjgGA~>$mcId{z9!^#D$3cvos}L8b{nQ}`<2;< zlb(RjL=0;_l3R}AYmAtB=33MllGCV)>f&>erawS2)vdF03N+A3A!l>b)Z>A=%zq=~ z#H`_1vis@^Q!oTypmSD=$4f&-B0-nRaf$I6Ysw$JYpqRerg}H1Vgo z68ot-5$rP_8p< zhoWHP&pwa7wnEKGLLriU6RB@G1#~OywDE*IW++^n zfSM%?NQx7AoWc9N4CGLeMITu{_)o4Nq5}NG>pQGTYzGy#Nn~JUm%Nh+B?3FpuMHc1T4vn5b44JNsy=6CnhAY-FafVJv51+VUy!_W_DFPKW;~O9W>f;@G ztaRscr~@cN*AOC$vCEGWcHP4w$xwt7Aw1OLOm@ecwk0y!?T&I%j$g;}Z7b;g52Ow4A9Q~)6T zw=V+Df@GVz>d(&R*!#v!ik4fdT0z3=s#=L05_!Jn9T-MpPAHg%-ZRsXR=Qf;brRx- zfFg3YD~IS$B3D=5Qy)Z7zrj5r6&lH%{H&5&juFJxk|SVOa-nn%7)990F8vYb`GTQ< zy0Ls-EeYSTL?=8Z?hF0eDT*}OZl4bz_m+TOU@c=wKbj63P#q#D$Qb`cMrDNtoZh7R z%95wP>L_E(AcvZo{4)&NCw^%r;W5XXsT>rFEVP-z`|t5+j{>vKm>q`D|zUdzFFjMW2NYU zpaK$~t+T0>7y$rq*+tcdP|q|V+QOv(pZOV>X^Xn>-7IV_13pxnbQ2atlD0cWIkb=u zL}xZ%Wg5qKv+EK>_^lg_#mEyOd#qSM45IGg1+Lwon@QFy`AfM|6}b1?dUzW)BhM6#XX>9IMHe4T4OagYBn1ghbn zhwh83!U>y)CAlPUvUXXGXI5%bU^fX>Y24C=xU|wcbRfs-bH8RSzaoJIRLtJ#Y z0OUcP+;6Txcq}QIOp*s}GlFw)#nOa$HrfC{Ew)`PljyiT)!V-ta1s((4j#GyAl#aV zoWnG0Zp;1H4;Y-^B<9Rx7Yn6hZ4cVBD0omVfA5XN6xFN^n#SC9E93y|MbS*w=~cfI zHD8B1J^hF_O0Dj#nF2JP;3`l~jZ1S;v5$$Po6LnlyIbAZ*rpA{L$=NA;2iEp^A?<3 zl{7dk5UMF2V7+;KQK4O@>tNHijTSwwTSNi7FRja*uL_?jc?TOa1n=vHV#_PGpI zpsyHzaPS4~zrLC*M`e}vlLW50qm=c>pghWp5C|l&Y zwCbxsLuAPVW%wogdgSvx+JhUDsO2PK*336tTFJu6dmMK#gAhnwchr9s*Hv;oV%S7&NWyaeoR?yzt!z3_>DMDpA&h1*` zis(fMc%tVY5Yr&_6w9%eLoB-}>rH$Y48rVCA}cvo^8fr5$1c3_fBIo>NzNVlOM(uJ zX4MtHL@`V(Man}|aF*Zirj16J=Xn?O$ho;@v zghb{ElKAiCVi@p2eVS5VQz+V<3aKdv!uFuI*FhQ0APb(?4z>5)kUUQtSsmj|XP@TC zUfh4cL?A>|X6Td00WyKS+`h0%@9YarjBz*_^!ZL)-}*E6)-&{@N**TYfaJc_pcDn2 zJh|LIjw<&JQ~jTrlY-}O+At~8+LSXl4o|)g0+Yvwei=sI80At>HcWq@{qB`!y$M|P z+?lM+788|ftvxJ+|6)rmG5^&QcHBc$|1qA_@=K#0C4x+RMyvs{8YL$ognBIOh_UeZ z#ZMOr9P>)h&4xtUOJlFZqo?>)P{jOWhp)lLa*%V?Cq-o-?&s46ALq@RU4#-rc@nOG zdyp2?wEv*6;}DK;iE#AOe))1s z>0^gf#8^Van!yCI>mH79Dh1GtriV5fxi(P?h|!WO;F|qAFFF%Ie%V1cS^!122)K?l z)Qp#?B;Ngu+2;esa@s4eW<86zj(5X;D3YGRgw4+dCqQGbqyo2QZnaA)hI6DzGfpHQyp}M2Lw|_G{>V*?FZ%C6ZB$ylW z(>&fdDLrT^ZWU)1n2TLw#Qcm+eTsjpcvBpJ=}3x`#3 z>e&OVom)d<)foTC(#VqUmRr`aD;7%LDg#)}mR{}=VoHoN`I^qpK=b*ed#+H5q}s3J z$y)$dXn@4YuUx}dE|cQP<=kX4e&Tp}kRk$;e0i}wc=J*27D^P=?j)TRVs#OZVdKVV zOn&zid5!1&sG8FuQcycvW*uk?N!ZU6J|9V3yHSau^+MA3Ma>o_G14;$!cz3^ud2Il zKzIs#NfYoD1PI*O3xh7TV_AB3+n!K!||Yj z4Ass0R7G^PH0OdNhw!CqjCyiZ?2V~3ZO@b6p6aJE6TS&{94#S0EFU5N)l)&^VHIBc zAw3!~8|ApZ(fgzrE_y1Q7vA21)qGx}{aAv96bCsxL@XCf7#GBin#Nui(YJ{2NtrTh|xXOI*+|1v<~LUM8yp0I28jGDJL2_MZvm63|s21wsNA#^p1hX_!x1O!g0qodzv< z$~{IR7h(=}j|A~n+hbYt5wzk3JPki@l?p(LAxW=*qOIrXGszQ}z(g)alcC?1$Qx$eTrx(ac$pD`Z^WolN8kSl(S1q|102EE}W*k?MED`@hO#-N| z@jUT@BzR3^1`fn5<}tBZU}?6ng~y;lQX zsOUl2_tz+BlTxs3mwq&K>-&?vU@w7)7mAu@Un*6R=~#^SzrByhnSMDO7Ig9Tp4$)A zgDDuJ#V@)WHdBfgWQ^2VkV zQXd=T*QI8VXnzWV0OyJfu;Z6vwqIA}F`QTj{>*#AUd-gD zA&LdkZY@-ddjrO*#t*KB*0fx=j#zGWLGei_9^af39CE4hhSS9;)G+&vD?{N4a2-_L zX_rh$CKq4P=Ws2~bonbj>@6T1rEzA|T@jV1pAng7@1aFX&U#1|e?jHu+$t`S22OFH zQKAP$D#Dsm5j&E+uc%z68w)ZCsNZ#M_6y3%c(}_81)Nn(jG&R8P$; z;2Si|`lk1P93W2~DsRuE-VP@2%kD%D$+?lINYqq*d4FkH$UaKCRe9+; zFve|e^81*UDOwe%K` z5{+vOE*-%~zpB1y;eNMEkB20>v(`B?GnA#vU%G{bit?^S!Vv2SC2rn8PWo|iBkkDP zNRTho`+8(!7r5s--&cu$KJ}uuu#e65>sBJ}?gbWpk$5HB@T8$=NR>K$wHG|zo&_EI zV6T8T?KR_pHQc8d9gNQ+&DP4AU&~gvdvTPk`#y+{0BKq}&`oU>Entd8 zu_0u|He}2;L@C%a3^OZo;0eqnp`$s4ftU<@TX>;cZ+Y13(!D5RIs3_PwaPi%b)Ac& z^ZN1na6k7ee?-i%aZzcjyBKMw2l}Upcw~5)0p|`e-yr1VSuao+crk7_iX4#r#|deN zdlI{4B6YE=<%Iw;zi&I9f#;II!8|D8#2X#;`Ru+w;%vp2!ahNuUURw_jLM&X5z>Te z$hMQN0**83MTa}cCQ{&Pq>5;hwE#YYh#5^qsF^L_j1i+gzTnR)`0DB~>8T@@o7Sub zG|9exi@b+q#ITYerz~EZD$?E$#_Lr7f%208DlLe0lm+%p_v_fvRRl7}$4U56gI~H} zSx98zWUOG)WQp|Bn);F_6o~e!UNP)*{ri&P zkwoXPIJD>L=yvw1e0ypo)k(bJTpC3dYSW;C)ang^jt5!R z5D)T5--uO`%#wccL(>7+;?^aBD?cL8jGjJ;A49T?Q4a91rZ)G3?+=Cx7qG*a45y@E zRb+OC&qlqE%?`L}^ZQy5XHvMM@y8*&QPhST;VH01tM(5ygXJUbL zu}YXPuStB`D{UudQN{}f$ON=3r@*ZveztfnVIZ*MB{F*$WkB9(Tjt>78jD>4#UC}X z(|`?ZRv*n+K?z`wt>&%MeKuVMX>%T-2%#;~x@E;_%N4OPe^NqOz%{`l+7?cPAer^h z28}f;M$|?73)VrRW1t-H3gE69$Fh{+*fJCiYx7ewh zjE4WSJQs)1Yz)#dXj(@wYc%gAB=e0^fD8vixOJzIvAN#9fUj{t;}ik_6dK$`oYPer z8S1h=^Z2L>C?7?2HVSq$CU`kz{oy8?)0pbkuHxl1p>w(hjK2BfzA7_>Tv9Jhzt)0K zA|~G>!R%klLW0eMSxpH*HGK1x*puBVperwP!E38)!S5h68>FL1ndfp5`U1Kr+_8S< zZGTb*LuFamKoVqEY?jVi9$a71_9dU*g!PT+Kw^4L^`zJoFcBI&RL z@$=MaIul=v1{~y(7_q(NB(ZgOD6UkFkH_t3D}C5B?s)bLzr~e%(O$z`Dq(y29AEoy z)J{WTDB8CA_>ULZTYdUuR>|?JnQlWzyyR-a$@tHn%UgG1YVz+o%xv6+)MM3 z&?@(7XJ6KkmUZp#JRiig&x2K9?h%f!mG@~$i!aT<(`(Z$IUT}2$Q@kkh5wvByb(WL zL8b6z)>lARvx7cCsI(jlzMOUKN`W85Ay`oTRc0_8E?!VFOr)NVWm2(Ok)a+%zyw($ zpL!sb24QXjW~xenDq4^99mA(5)K=7*<&hb8{F5CDL6kHg4KdCTR-cwvIQH)f z$$UxC9&e!yzOFSl2`V=bGlyZ;|9UZMbHyIY_dL}Zw*%V+0=YXIP(&KHK+Cjc{{&^f z4L0D1<+b0O*L8-DDO>~i`I!UNiuGQjUekRc^V1p9Sb|SJtMEJoSHM;#o3#KewZUEc z*Q=xarq-U&3Ivd6ye;?D5zw0ZrYYap-Ikr1W@8`ES zg$iUXF7zPp5$0XJVm_dpsT;&uuiN@e+6Kz1ibgC&vrvpN@k@untsAOaB@I3hFv)lH zs3mprT$#lnweq1ugR|J{D!4nZ8FyW!rYcbYuM6@77R5&6sE7;3#2@Zon<7l>B)qPT z0@EbY%xt&Yz6hL7fe-T0z>tdCx#=p_aMDtdAjVekxnr+73V>3}kd`s^E}}~lwj0%Z z;N}&XppE~KH=3%1q7fXQhL;*Ga`Dl8d}^L9Nsqb*=a8jM&ab{XAxr=}R~r_TtOCjK zC!k&uCM&Sh`vrt7PBfZl#&{0jQ=ZNr2j?VZ9=giaq(7U1?QG25Vv5&(M5W4JG5~Pv z_}t(r+ozX>IX=1E{-D)saiTTo97sG`s-D1Nt zz04UlnP11`8ypiMv2^Jc^9vj0V{Idrcr;?x z7aWgJ-T88Y7iXPRo2W^rU?+2e8UQV12$Ly81C=RLr?1&EvW_XAUvl$P(pVMyO^k9| zinyzBq%^SwPh4mf3yy?zRa}OY|>m*v@yx=5G zn4b!Miruqp%zx;|VzS5KF2umvpt_lZfs}dHF#R4fEOr?kGMB1QM5{OsQ$#f-vstU2Cw1*XniQV6Y)9|>&HV5v#ci1%YPO=aJS%Ej$AG+{ zS2P;?^LTG*wARWh>McV8tojzqO@K@&*-*iEg8m4V_L1%%|FdG+8K*eW)~axl2!>hs zot%01;L#l!YhBRon+)Tc^z*<{M<3!NJ|6H>1Ys)D?vxTnBYMHr#SjeS(z4%m#OqK# z-_?{H_5u7#;mcOe4`)V(YcPvrbLb|>t0Y*7P037yiEQ3p+cA3iX+kFJ8GgB&X;~e( zM8bds{E4uA#8IE3$>u9LWT^obl^pu~OXoRx410LSuYP&4w@YIZkVv~(kB4P)&#r^I z)IaWvM&_Co`g9XpDxrgSWP_-UOd13Ac*zUlCdkK#Oh`hOf*aACN!{5Wrtda}Y*#k0 z|LCf~{2-6D8~77LR=3=UDWcZGw!7q7F4!j82M z&UC%P*ZA#TCr|w{t`L%(BLf8l5P_r+5DAOEG+VXqdXY#O%juk?nX>@^h&oTbDzXXl zKalU1H)xFSgiAv4gd?*1lT>Ss4zRDe`4IP%rd1=P2~QcmBDM|2$S z)C+-u5oz*I+4=E5yLS8L&8W-r&|=`*o}v;hl~FtgxA3Mn_j!IWJ&m8JQVjX~x}3nL z2g1&V7Ut|-il9|mm7N18l@DaY7wSy&xgihLwsxFshUaj!chj-xdJAoIwkgu4M)Qux z^CCwQ%R=q%YP52SNA&wc9&;o8Qa~AGrf3EaaM*+Y`~fy~u@v6LKpdS3v#7JOuR>qi z!7^Y`0gMcL@bVb{MwLl^^}-jt@<~b!bZ1!Hkt$w6=Nb5WTE};7hk4`$M7W5;c%BCOt!p)BVvL@fXz z^%_orpLTUoowhR;m3*)5=6o8HB;Y)lEd3_&C3=v86P}aw7a^v{Pu~NU)S~Uqd zBN_iT(VVAzS=5&{DI3^w7&ds)lwi_-V2LO>K#}V3UBh z1aFn;4;i4CTTtB(uq_aZSDmGVlJIDFvG6FqPcE>vLx}K-8WisK10@ijTacmyJ;^`8 zF85!he|7#PSaP`(LOC!TPQ)eEEOy7i!oqgA7(|K7bvCMN=G%8X_ zRt?IPuh4afRf2I-u8rOP)j2v;aYp^Tj0AW3z`0`m;Kox8Cb~4?RX|H1BFz#;A+Z>> z0|1coW&!{hn~y%y&sFlHt?lH(>QNT(AnJd;D|Nb=nwLPeYoFhiF=0#^*|TR)9s7Hu z#Z-Z)-_G&j`D?pQ#r)CDyN2g8+at*_4GBUrKBuMAs8JXI2y_z?%cM7ZyWDEp8@w^< zZSdd6OF6qD%#~NS$#fN|wurm@&+HxgNTRHGvF|;wUpWWfu7Jrk4!g~tcx(MXtn`-n literal 0 HcmV?d00001 diff --git a/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/script.js b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/script.js new file mode 100644 index 00000000..075d3db9 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/script.js @@ -0,0 +1,214 @@ +document.addEventListener('DOMContentLoaded', () => { + const form = document.getElementById('timeCapsuleForm'); + const capsuleList = document.getElementById('capsuleList'); + const searchBar = document.getElementById('searchBar'); + const notification = document.getElementById('notification'); + const statisticsContainer = document.getElementById('statisticsContainer'); + let capsules = []; + + form.addEventListener('submit', (e) => { + e.preventDefault(); + + const capsuleName = document.getElementById('capsuleName').value; + const openDate = new Date(document.getElementById('openDate').value); + const tags = document.getElementById('tags').value.split(',').map(tag => tag.trim()); + const message = document.getElementById('message').value; + const image = document.getElementById('image').files[0]; + const video = document.getElementById('video').files[0]; + + const capsule = { + name: capsuleName, + openDate: openDate, + tags: tags, + message: message, + image: image ? URL.createObjectURL(image) : null, + video: video ? URL.createObjectURL(video) : null, + }; + + capsules.push(capsule); + updateDashboard(); + updateStatistics(); + showNotification('New capsule added successfully!'); + form.reset(); + }); + + searchBar.addEventListener('input', updateDashboard); + + function updateDashboard() { + capsuleList.innerHTML = ''; + const searchQuery = searchBar.value.toLowerCase(); + const filteredCapsules = capsules.filter(capsule => + capsule.name.toLowerCase().includes(searchQuery) || + capsule.tags.some(tag => tag.toLowerCase().includes(searchQuery)) + ); + + filteredCapsules.forEach((capsule, index) => { + const capsuleItem = document.createElement('div'); + capsuleItem.classList.add('capsule-item'); + + const nameSpan = document.createElement('span'); + nameSpan.textContent = capsule.name; + capsuleItem.appendChild(nameSpan); + + const dateSpan = document.createElement('span'); + dateSpan.textContent = capsule.openDate.toDateString(); + capsuleItem.appendChild(dateSpan); + + const tagsSpan = document.createElement('span'); + tagsSpan.textContent = capsule.tags.join(', '); + capsuleItem.appendChild(tagsSpan); + + const countdownSpan = document.createElement('span'); + countdownSpan.id = `countdown${index}`; + capsuleItem.appendChild(countdownSpan); + + const editButton = document.createElement('button'); + editButton.classList.add('edit-btn'); + editButton.textContent = 'Delete'; + editButton.addEventListener('click', () => editCapsule(index)); + capsuleItem.appendChild(editButton); + + capsuleItem.addEventListener('click', (e) => { + if (e.target.tagName !== 'BUTTON') { + showCapsuleDetails(capsule); + } + }); + + capsuleList.appendChild(capsuleItem); + updateCountdown(capsule, index); + }); + } + + function updateCountdown(capsule, index) { + const countdownElement = document.getElementById(`countdown${index}`); + const interval = setInterval(() => { + const now = new Date(); + const distance = capsule.openDate - now; + + if (distance < 0) { + clearInterval(interval); + countdownElement.textContent = 'Available to open'; + return; + } + + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + + countdownElement.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s`; + }, 1000); + } + + function showCapsuleDetails(capsule) { + const modal = document.getElementById('capsuleModal'); + const modalCapsuleName = document.getElementById('modalCapsuleName'); + const modalCapsuleMessage = document.getElementById('modalCapsuleMessage'); + const modalCapsuleImage = document.getElementById('modalCapsuleImage'); + const modalCapsuleVideo = document.getElementById('modalCapsuleVideo'); + const closeBtn = document.querySelector('.close'); + + if (new Date() < capsule.openDate) { + alert('This capsule cannot be opened yet.'); + return; + } + + modalCapsuleName.textContent = capsule.name; + modalCapsuleMessage.textContent = capsule.message; + + if (capsule.image) { + modalCapsuleImage.style.display = 'block'; + } else { + modalCapsuleImage.style.display = 'none'; + } + + if (capsule.video) { + modalCapsuleVideo.style.display = 'block'; + } else { + modalCapsuleVideo.style.display = 'none'; + } + + modal.style.display = 'block'; + + closeBtn.onclick = function () { + modal.style.display = 'none'; + }; + + window.onclick = function (event) { + if (event.target == modal) { + modal.style.display = 'none'; + } + }; + } + + function editCapsule(index) { + const capsule = capsules[index]; + document.getElementById('capsuleName').value = capsule.name; + document.getElementById('openDate').value = capsule.openDate.toISOString().split('T')[0]; + document.getElementById('tags').value = capsule.tags.join(', '); + document.getElementById('message').value = capsule.message; + capsules.splice(index, 1); + updateDashboard(); + updateStatistics(); + } + + function showNotification(message) { + notification.textContent = message; + notification.style.display = 'block'; + setTimeout(() => { + notification.style.display = 'none'; + }, 3000); + } + + function updateStatistics() { + const totalCapsules = capsules.length; + const tagCounts = capsules.reduce((acc, capsule) => { + capsule.tags.forEach(tag => { + acc[tag] = (acc[tag] || 0) + 1; + }); + return acc; + }, {}); + + const mostCommonTags = Object.entries(tagCounts) + .sort((a, b) => b[1] - a[1]) + .slice(0, 5) + .map(([tag, count]) => `${tag} (${count})`) + .join(', '); + + const dateCounts = capsules.reduce((acc, capsule) => { + const date = capsule.openDate.toDateString(); + acc[date] = (acc[date] || 0) + 1; + return acc; + }, {}); + + const distribution = Object.entries(dateCounts) + .map(([date, count]) => `${date}: ${count}`) + .join('
      '); + + statisticsContainer.innerHTML = ''; + const statsTitle = document.createElement('h3'); + statsTitle.textContent = 'Capsule Statistics'; + statisticsContainer.appendChild(statsTitle); + + const totalCapsulesP = document.createElement('p'); + totalCapsulesP.textContent = `Total Capsules: ${totalCapsules}`; + statisticsContainer.appendChild(totalCapsulesP); + + const mostCommonTagsP = document.createElement('p'); + mostCommonTagsP.textContent = `Most Common Tags: ${mostCommonTags}`; + statisticsContainer.appendChild(mostCommonTagsP); + + const distributionP = document.createElement('p'); + distributionP.innerHTML = `Distribution by Opening Date:
      ${distribution}`; + statisticsContainer.appendChild(distributionP); + } + + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', function () { + document.querySelectorAll('.page').forEach(page => page.classList.remove('active')); + document.querySelector(this.getAttribute('href')).classList.add('active'); + }); + }); + + document.getElementById('addCapsule').classList.add('active'); +}); \ No newline at end of file diff --git a/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/style.css b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/style.css new file mode 100644 index 00000000..298de640 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Time-Capsule-Center/style.css @@ -0,0 +1,156 @@ +body { + font-family: 'Roboto', sans-serif; + background-color: #f0f2f5; + margin: 0; + padding: 0; + color: #333; +} +header { + background-color: #4a90e2; + color: white; + padding: 20px; + text-align: center; +} +header nav ul { + list-style: none; + padding: 0; +} +header nav ul li { + display: inline; + margin: 0 10px; +} +header nav ul li a { + color: white; + text-decoration: none; + font-weight: bold; +} +header nav ul li a:hover { + text-decoration: underline; +} +.container { + max-width: 900px; + margin: 40px auto; + padding: 20px; + background: #fff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} +h1, h2 { + text-align: center; + color: #4a90e2; + margin-bottom: 20px; +} +.form-container { + margin-bottom: 30px; +} +form { + display: flex; + flex-direction: column; + gap: 15px; +} +label { + font-weight: bold; + margin-bottom: 5px; +} +input, textarea, button { + padding: 12px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; +} +input:focus, textarea:focus { + border-color: #4a90e2; + outline: none; + box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); +} +button { + background-color: #4a90e2; + color: white; + border: none; + cursor: pointer; +} +button:hover { + background-color: #357ab8; +} +.dashboard-container { + margin-bottom: 30px; +} +#capsuleCount, #lastCapsuleTime, #nextCapsuleCountdown { + font-size: 18px; + margin-bottom: 15px; +} +#capsuleList { + margin-top: 20px; +} +.capsule-item { + padding: 15px; + border-bottom: 1px solid #ddd; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; +} +.capsule-item span { + display: block; + font-size: 16px; +} +.capsule-item span:first-child { + font-weight: bold; + color: #4a90e2; +} +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.4); +} +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 600px; + border-radius: 8px; +} +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} +.chart-container { + position: relative; + margin: 20px auto; + height: 400px; + width: 80%; +} +.notification { + display: none; + position: fixed; + bottom: 20px; + right: 20px; + background-color: #4a90e2; + color: white; + padding: 15px; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} +.page { + display: none; +} +.page.active { + display: block; +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index d9294454..c99c9fe2 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -116,7 +116,7 @@ | 89 | [Travel-Journal](./Intermediate/Travel-Journal/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 90 | [Bulb-On-Off](./Basic/Bulb-On-Off/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 91 | [Theme Cake Order Form](./Basic/Theme-Cake-Order-Form/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | - +| 92 | [Time-Capsule-Center](./Intermediate/Time-Capsule-Center/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |