[TECH ED] CYF Blocks

[pedram-am]

From Course-Fundamentals created by SallyMcGrath: CodeYourFuture/Course-Fundamentals#7

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.

[pedram-am]

Your user stories:

• As a user, I want to be able to comment on the website, so I can leave my messages and thoughts.
• As a user, I want to be able to use basic symbols to format my comments, so I can convey intentions more effectively.
• As an administrator, I want the comment to disappear when the page is refreshed, so I ensure that there will not be any inappropriate content.

Your CYF Blocks implementation (using the share button):

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B%26element_clicked%7Fehwoq%25XPP_%3B%5Bg8%2C'KkGP9'~x!18~y!140ZTEXT1!'when%20the%20element%20with%20id'~ID!'button'~TEXT2!'is%20clicked%22by_id%7Fh-1z2Ak0rhmW2eBFG%23vF'ZID!'list1Qadd_element%7F%247%40HOM%2CKsXWRw.PHVELl'ZELEMENT!'olQset_content%7FHoqE%2C_d9l%24E%2C'F%2C%2C%2Cg7-M'~inputs!('VALUE!('shadow!%26text%7F%5E.%3A3g%3D%7DogK'%3Aya%600%7CBd9%2B'ZTEXT!''))~block!%26get_input_data_with_id%7F%5B-%5B1)74TP%23%3F%40EbciR1M6'ZTYPE!'string'~ID!'input'))))))))))))))%2C%26on_start%7Ft%2Cqv4ocsAv%3BSDnpreJfD'~x!15~y!14ZTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D%22by_id%7Fi%3Bez1auX%40b8%3AC%5B%3A)TIW'%3A'ZID!'list1Qremove_contents%7Fo7I%24a%2F%24lILAk%7BbtFWbR1')))))))%5D))~h!'%3Cp%3E***Leave%20your%20comment%20about%20the%20website***%3C%2Fp%3E%5Cn%3Cbutton%20id%3D%5C'button%5C'%3EAdd%20comment%3C%2Fbutton%3E%20%3Cinput%20id%3D%5C'input%5C'%3E%5Cn%3Cul%20id%3D%5C'list1%5C'%3E%3C%2Ful%3E')Q')~inputs!('STACK!('block!%26Z~fields!('%22')~inputs!('HANDLER!('block!%26with_element_%26('type!'%7F'~id!'%01%7F%26%22ZQ_

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'MkPE%60D%2BU20Cd69ClO0%5Ey'~x!15~y!14~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%C2%84HANDLER%22%C2%8D3%2B%2C'ob%7Deyz)Zw%24fFEH1uA%26VAR!('%7F)%C2%84%C2%89KDe8t%5EolGFFZxUM8gWvP%C2%87%C2%80%2BCs%7B%5D%3B7%3D5%601jPP%2Fdo4e%7B%C2%85apple%C2%8B1%C2%80l19I3%24q%2C'DKF%3F%5DBib%2FP2%25%C2%85kiwi%C2%8B2%C2%80%7BIDD229%2C'%5BY%40cE8v%23BcD'%3A%C2%85banana%C2%8B3%C2%80o'%3Ay8%3BU(9'%3AQzD%3AD%40P%24l3i%C2%85cherry%C2%8B4%C2%80ji%60QJZyE'%3AUW*%40%60udS%5E%3FT%C2%85pineapple%C2%8B5%C2%80QQ%2F%3DN%7D3M0K.p%7C%5E(%5Dfr1p%C2%85watermelon'%C2%8C%C2%8Dr9eiHu%3AIk%3A%3A(XK%2CiS'%3AdZ%26VAR!('%C2%82)%C2%84%C2%89m%3A%3D%3F6%60Zdn%3B%3B%23hgCD%23.NX%C2%87%C2%80%2FmoyVdW6PvlhQCls%2CyJX%C2%85%F0%9F%8D%8E%C2%8B1%C2%80SkvWmb%40jp3gs%3BlIHR%5ED.%C2%85%F0%9F%A5%9D%C2%8B2%C2%80r4mT%23QQJV-Nm%3A4%250n*%3BJ%C2%85%F0%9F%8D%8C%C2%8B3%C2%80REJ%5EbX%3ANuS(2R%24%25%3DY%2FSH%C2%85%F0%9F%8D%92%C2%8B4%C2%80%7C6N69wCDH5m%5B0prjoCMr%C2%85%F0%9F%8D%8D%C2%8B5%C2%805BAz%5B.Dfo2%3A%233*w6RKBA%C2%85%F0%9F%8D%89'%C2%8Cwith_element_by_id'~id!'hs8sx%2F%24mzKxy%3Dyb%2C%3F%5BGc%26ID!'list')%C2%84STACK%22controls_whileUntil'~id!'X%5Bu2AHMe%3DXeP%7C9*%7B7%24Jm%26MODE!'UNTIL')%C2%84BOOL%22lists_isEmpty'~id!''%3A%3Foolm_19uwz41%2FpGOG*'%C2%81!'OU%5Eai8%40%2BxQ18R*%40gD%2C'%7CR%26VAR!('%7F))))))~DO%22add_element'~id!'-QoaI_8r%2BvC%60A0A%3BH%2Fzn%26ELEMENT!'li%C2%8A!'%5E*Yq%23M%40OVN4P%7BS%3A5%7C3wb'%C2%84VA%C2%83Yoz%C2%85%C2%86oxI13Yr9c7nV_65A%23S-9%C2%88%C2%81!'5%2C'%2Fw%7DPnCubrrU-H%2C'MV.%60%26VAR!('%7F%C2%8Cadd_element'~id!'8%24VKt9%3D'%3A.2UyRJqCM%23n'%3A%26ELEMENT!'span%C2%8A!'*-wTzf4x%3A(%7B%2C'JiJWH%2BQ'%3A'%C2%84VA%C2%83Yoz%C2%85%F0%9F%8D%8E%C2%86T_mEBDJ8%3A%3FUjqZ%2C)uW*R%C2%88%C2%81!'e40%5BaULOoPZbYbpb%5D%7D%2C'%5E%26VAR!('%C2%82)))))))))))))))))))))))))))))%5D)~variables!%5B('name!'fruits'~%7F%2C('name!'emojis'~%C2%82%2C('name!'array'~id!'3)P3Sq1C%2Fp_nM%3BB%3D7V6%25')%5D)~h!'%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%3E')%22!('block!('type!'%26'~fields!('%7Fid!'r%2C%7CZ%25K%2CORto0%24S%7Cs%2C%2537')%C2%80%22text'~id!'%C2%81%C2%84VALUE%22variables_get'~id%C2%82id!'Q2eF%7BKC2KMv6Ada%3BMuBF')%C2%83LUE!('shadow!('type!'text'~id!'mp%2C'0F4(39Cvwm*Iy%3F%C2%84~inputs!('%C2%85%26TEXT!'%C2%86'))~block!('type!'arrays_getFirst'~id!'%C2%87'~extraState!('itemCount!6)%C2%84ADD0%C2%88%26MODE!'GET_REMOVE'~WHERE!'FIRST')%C2%89VALUE%22lists_create_with'~id!'%C2%8A')%C2%84STACK%22set_content'~id%C2%8B')))~ADD%C2%8C)))))))~next%22%C2%8Dvariables_set'~id!'%01%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_

Your deployed website:

https://pedram-a-personal-website-cyf-blocks.netlify.app/