[TECH ED] CYF Blocks

[AferePreciousOnome]

@SallyMcGrath cloned issue Migracode-Barcelona/Course-Fundamentals#23 on 2024-07-05:

Link to the coursework

https://blocks.codeyourfuture.io/

Why are we doing this?

​Pick one or more of the following projects, define its requirements by writing the user stories, iteratively develop it in CYF Blocks, and ship it! This is part of the graduation criteria.

• Commenting: Make it possible for a user to add a comment on your website (the comment won't get saved anywhere, so it will disappear when the page is refreshed - we'll work on saving later on)

• Shopping Cart Light: Make it possible to add products to a "shopping cart" (again, we won't be able to check out/pay with what we know so far)

• Image carousel: Allow the user to cycle through a set of images

• Hamburger menu: Display a dropdown menu like https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci

Maximum time in hours

10

How to submit

1. Write up one of your projects on your copy of this ticket, not forgetting to include:

   • Your user stories

   • Your CYF Blocks implementation (using the share button)

   • Your deployed website

2. Share your deployed website in your cohort's Slack channel.

[AferePreciousOnome]

User story for my project:

As a user, i want to to easily navigate the blog, view images interactively, and leave comments on posts, so that I can engage more deeply with the content and share my thoughts or feedback.

[AferePreciousOnome]

https://blocks.codeyourfuture.io/?share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B%C2%8C%5EnYb-P%23i%5Bn(nTl%23%5Ec%5DgC'~x!30~y!5%C2%85next%C2%88%C2%90'%3AkNC.Kdej%23%2Ca.s%60IjpBy'%C2%87WHERE!'END%C2%89'~id!'xK%5DrjE%7CCGHaZTIE1.y%3By%C2%8BFIRST')%C2%81%C2%84(Gf3%5Ey%24yr%3BE'%3APg_%3DHu%25*%7F%C2%91tW)q3ynftPyPXOB%2B)da*%7F%C2%83~id!'Yf%7DBCS3A7ideNhQh%24Yx4%C2%82%2C%C2%8CnU%40nlc%5D5XRnjAC%3DKtPyP'~x!21~y!19%C2%85previous%C2%88%C2%90qW%2Fnl64DfA%25%3Bo%7D9BH'%3Abl'%C2%87WHERE!'START%C2%89'~id!'IS*TvxA%7DU%23b8Mfl%60%24*sM%C2%8BLAST')%C2%81%C2%84MLzRXb%3B%25s%23O%237LY%3B.hH8%7F%C2%91Yb-WHJ%2C%40%5D45k%7DTj%3F%40kS%7B%7F%C2%83~id!'%7B8bFPQbSw%5D%3BJBVl%3FQy%60o%C2%82%2C('type!'procedures_defnoreturn'~id!'Fp%2Btm%7B%3A4'%3A)T)-rG%3A%3B5Xz'~x!48~y!-524~icons!('comment!('text!'Describe%20this%20function...'~pinned!false~height!80~width!160))%C2%87NAME!'display')%C2%8ESTACK%22with_element_by_id'~id!'ImPaD4CO0TNx%2Bb%60m%25%2Fyj'%C2%87ID!'chinatown')%C2%8ESTACK%22set_attribute'~id!'Oi(KB_7D.JB*Le%7BO%5DPUs'%C2%87PROPERTY!'src%C2%89'~id!'0lU_*Q1vZl)JT'%3A%2C'i%7Cp*x'%C2%87MODE!'GET'~WHERE!'FIRST')%C2%81%C2%84r%5D%2FTve5%3Ahw%40Qf%3Apj15*O%7F)))))))))))))%2C('type!'on_start'~id!'G8K_WK%3FlH8%5Du3L96gJOu'~x!12~y!-230%C2%87TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%C2%8EHANDLER%22variables_set'~id!'%5DR%60)51GM)ksD0P3S%60rK%7C%7F%C2%81lists_create_with'~id!'dSiY%3B%3DNTH%25SMO(n%2C'VZ%3FP'~extraState!('itemCount!4)%C2%8EADD0%C2%8DE2i%5EcV%3AZE9%25%7CM%2Fq1rgpJ%C2%80i0.wp.com%2Ftravelgangtok.com%2Fblog%2Fwp-content%2Fuploads%2F2023%2F12%2FBangkok-Thailand.jpg%3Fresize%3D741%252C437%26ssl%3D1')))~ADD1%C2%8D1%3FW%7DyrLQIZrvko%2BE%25G5T%C2%80%C2%86nb_WgYD1cbmCUN0LCZXyFVCacUt77_sonSg%26s')))~ADD2%C2%8Dzk%2B%7CD%7Bz%7Dxe6GTT%7Bub%2BU%3A%C2%80%C2%86IKMJle35LG9UwDLpRj3_plrra60MaAzr1_w%26s')))~ADD3%C2%8D%3FKHb%2C'EzBBTJVQuF)%3FBF1%C2%80images.squarespace-cdn.com%2Fcontent%2Fv1%2F5856bc666a49634cd55b0ba9%2F1621445288808-RTKP0PXT6HXYNCIU8IG0%2Fbest-cities-in-thailand.jpeg'))))%C2%83~id!'bT6L%5E%3D-%25DO%5Bcrfzp%25'%3AA%5D%C2%82%5D)~variables!%5B('name!'image'~%C2%8A%2C('name!'array'~id!'yY%3Af%5Bzo8%3AsePh%3AIUjE8D')%5D)~h!'%20%20%3Cp%3EImage%20Carousel%3C%2Fp%3E%20%20%5Cn%5Cn%3Cimg%20id%3D%5C'chinatown%5C'%20width%3D%5C'500%5C'%C2%8FId%3D%5C'previous%5C'%3EPREVIOUS%3C%2Fbutton%C2%8Fid%3D%5C'next%5C'%3ENEXT%3C%2Fbutton%3E%5Cn%20%20')%22!('block!('type!'%7F'%C2%87VAR!('%C2%8A)%C2%80'%C2%87TEXT!'https%3A%2F%2F%C2%81%C2%8EVALUE%22%C2%82'~extraState!('name!'display')))))))%C2%83)))~next%22procedures_callnoreturn'%C2%84variables_get'~id!'%C2%855%C2%87TEXT1!'when%20the%20element%20with%20id'~ID!'%C2%86encrypted-tbn0.gstatic.com%2Fimages%3Fq%3Dtbn%3AANd9GcT%C2%87~fields!('%C2%88'~TEXT2!'is%20clicked')%C2%8EHANDLER%C2%89')%C2%81arrays_getFirst%C2%8Aid!'88TjK(7RjbDUt%25%60b%23-95')%C2%8B'%C2%87MODE!'GET_REMOVE'~WHERE!'%C2%8C('type!'element_clicked'~id!'%C2%8D%22text'~id!'%C2%8E~inputs!('%C2%8F%3E%5Cn%5Cn%3Cbutton%20%C2%90%22arrays_push'~id!'%C2%91)))))~LIST%22%C2%84%01%C2%91%C2%90%C2%8F%C2%8E%C2%8D%C2%8C%C2%8B%C2%8A%C2%89%C2%88%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%22_

[AferePreciousOnome]

https://blocks.codeyourfuture.io/?share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'E_%24fD%40XM%7CM(D.Fr%3F%2FqzC'~x!17~y!-381%7FTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%C2%80HANDLER%C2%8B0%5B3-VzOV9I)%60-%3Die-%7C%2Bg%26%C2%80%C2%83Lvt%23b2pVx(iT*eK%3Bh%2BBy%C2%860%C2%88%7Bj%5EUw0%5B%606%2C'%2B%3DUiRJ4*6Q'~x!46~y!-81%C2%85hamburger%C2%8C%22controls_if'~id!''%3Ahj%7D%7CJX***D6v%7B%7Bo3oMU'~extraState!('hasElse!true)%C2%80IF0%22lists_isEmpty'~id!'(nWp%3FJ'%3Ab%7B%3B.a'%3AZmy-ZN_'%C2%92%22%C2%8D%3Fm*J21FJ2x)HU%2BVS-%2B1U%26)))))~DO0%C2%8B%5BA%5E86x1%2Cq0uQp%7B%2CwF%5E%5Ds%26%C2%80%C2%83e)2u3dMA%7CC%5EDn%24BBE%5DB0%C2%863)%C2%80ADD0%C2%90%24%3DkVuHDEm6%2BluxwLG0S%40%C2%91Home')))~ADD1%C2%90qMz%3F-d%5EIo%40%5D39*t%7DfG%3AS%C2%91About')))~ADD2%C2%90%2Cav%60yoK2YqYh36Ia%7Dnvp%C2%91Contact')))))))~next%C2%84%5Ej2*y%3B*cy*%7DJY%3Dz%7B%403aR'%7FID!'navMeun%C2%82%C2%8E)%5E7.0I%3F(%2C%5EkE%60j%3Dyuj(x'%7FELEMENT!'a%C2%82arrays_forEach'~id!')5WCmD%5EM1%2C(8aIGf%40jND'%7FVAR!('%C2%81)%C2%80LIST%22%C2%8DwE%3A%3FrODh5nD-ie(wqIZ(%26))~DO%22%C2%8EODMMCc%7C%2BOcE9%24%3F1TC%23Dk'%7F%C2%93attribute'~id!'%3BroVo35WL%3DVL_xKJLe%3AD'%7FPROPERTY!'href')%C2%92%C2%90.h1)dsNPW%3BTRs3XQGLJb%C2%91%23'))))~next%22set_content'~id!'9i9wV2oNtcdl%3DB56c*1~%C2%8A%40%3D%2CU%7Br%40fh*V_a.%60CT7%5E%2C'%C2%8F%C2%8DK1IEI.%5EtlD6%25Bb%7BDqgOj'%7FVAR!('%C2%81))))))))))))))))))))))~ELSE%C2%8BgUY%2C'9BvCXTqvJ%2B%2FL%3D%7B_d%26%C2%80%C2%83nG%5E%5DySMaT%2BXfi82.'%3AbbM%C2%860))))~next%C2%84M%3FY_1g%5D5M7AtK_WxRL%2B5'%7FID!'navMeun%C2%82remove_contents'~id!'l%2C%7D%7CDgD%3Atz%2F%2F7%2C'Q%3Dm%7BE%2F'))))%C2%88QVDLfi*%2CDh%3DX)IRVC%40Ma'~x!40~y!449%C2%85submit%C2%8C%C2%84BC%7CcDgo(.%40A%60Z%24.Zwyri'%7FID!'%C2%94%C2%82%C2%8Eo%7B7TI0Oet5%2C'NwW5ymljB'%7F%C2%93content'~id!'XskuA%2C'R48%3FK%40%7COS3tA%3Dw'%C2%8Ak%2FJYzxBy7%5EH59a%3B-cJSJ%C2%8Fget_input_data_with_id'~id!'je%7CYWH%3AG%233ji%7BW%3ApH6Fb'%7FTYPE!'string'~ID!'%C2%94'))))))))))~next%22set_attribute'~id!'g%2Fz5d%23%25aaMQwEu%60r.%256I'%7FPROPERTY!'visibility')%C2%92%22logic_boolean'~id!'O4Ia96ZPP6TMJpCoE%2C'j%3F'%7FBOOL!'FALSE'))))))))))%5D)~variables!%5B('name!'navMeun'~%C2%89%2C('name!'item'~%C2%81%2C('name!'array'~id!'Kaa%2B*%3D%5B%60h0%2F9QeKiULC%5E')%5D)~h!'%20%20%20%20%20%20%3Cbutton%C2%87hamburger%5C'%3E%E2%98%B0%C2%95%5Cn%3Cul%C2%87navMeun%5C'%3E%3C%2Ful%3E%5Cn%5Cn%3Cdiv%C2%87menu_container%5C'%3E%3C%2Fdiv%3E%5Cn%5Cn%5Cn%5Cn%3Cform%C2%87comment-form%5C'%3E%5Cn%20%3Ctextarea%C2%87%C2%94%5C'%20placeholder%3D%5C'Add%20a%20comment...%5C'%20rows%3D%5C'4%5C'%20required%3E%3C%2Ftextarea%3E%5Cn%3Cbutton%C2%87submit%5C'%3ESubmit%C2%95%3C%2Fform%3E%5Cn%3Cdiv%C2%87comments-list%3E%5Cn%3C%2Fdiv%3E%5Cn')%22!('block!('type!'%26'%7FVAR!('%C2%89)%7F~fields!('%C2%80~inputs!('%C2%81id!'rW%3F%3B(ip6FTVobdjp%3AOn)')%C2%82')%C2%80STACK%22%C2%83VALUE%22lists_create_with'~id!'%C2%84%22with_element_by_id'~id!'%C2%85%7FTEXT1!'when%20the%20element%20with%20id'~ID!'%C2%86'~extraState!('itemCount!%C2%87%20id%3D%5C'%C2%88))))))))%2C('type!'element_clicked'~id!'%C2%89id!'4NiQVKUz%5E%40%40bhIh%40%5BE'%3AO')%C2%8A%C2%92!('shadow!('type!'text'~id!'%C2%8B%22variables_set'~id!'%C2%8C'~TEXT2!'is%20clicked')%C2%80HANDLER%C2%8Dvariables_get'~id!'%C2%8Eadd_element'~id!'%C2%8F%C2%91'))~block!('type!'%C2%90%22text'~id!'%C2%91'%7FTEXT!'%C2%92%C2%80VALUE%C2%93ELEMENT!'li%C2%82set_%C2%94comment-input%C2%95%3C%2Fbutton%3E%5Cn%01%C2%95%C2%94%C2%93%C2%92%C2%91%C2%90%C2%8F%C2%8E%C2%8D%C2%8C%C2%8B%C2%8A%C2%89%C2%88%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_

[AferePreciousOnome]

https://aferepreciousmigracode.netlify.app/