[TECH ED] CYF Blocks

[fikretellek]

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

Link to the coursework

https://blocks.codeyourfuture.io/

A note on ordering

This exercise should be done after the Code.org coursework in the same sprint. The reason for this is that the Code.org course will give you skills which will help you with this coursework - this coursework depends on the other coursework.

In the future, we won't always call out dependencies between coursework - just like in real life as a software engineer, part of your sprint planning is about working out the best order to do different tasks. When planning, you should consider what the best order of approaching tasks will be.

Why are we doing this?

In this course, you will use block-based programming (CYF Blocks) to create JavaScript that changes the HTML on a web page. Work through the exercises in order, up to and including Buttons, inputs and clicks: a todo list.

You must at least attempt all those exercises before we meet. If you get stuck, don't worry. Come to the session with your questions and we will all discuss them together.

Maximum time in hours

8

How to get help

If you get stuck, don't worry. Come to the session with your questions and we will all discuss them together.

How to submit

Once you're finished, share your solution to List of links by pasting the (very long!) url onto a comment on your copy of this ticket.

Copy one URL per comment.

How to review

Share your solution on with your cohort on your cohort's slack channel and ask for critique.

Anything else?

If you have extra time, complete one of the exercises in Buttons and Clicks: consolidation (or create something entirely new) and share it with your cohort in the Slack channel.

Write down some questions to bring up next week.

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j8blocks8languageVersion!0~blocks!%5B('type!'on_start%3B_9v3B2i%2Bu%2C0hEaPNp(y%5E'~x!57~y!27%22TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%7FHANDLER8Zwith_element_by_id%3BnVEyQ%7D3uBy2z%2C_1zcb5%5B'%22ID!'adjective')%7FSTACK8Zset_content%3B.%24qj%2F%23ejDl%60nVU_O%25Xd%3D'%7FVALUE8shadow8type!'text%3BV%5Bm%2F1C'%3AmE'%3A*6%23F%25%40-HJ%3A'%22TEXT!''))~Zget_randomWord%3BhrrSGxoPac%3Fge%5BD%406%2F%2C'%7C'%22TYPE!'ADJECTIVE')))))))))))%5D))~h!'%3Cp%3E%5Cn%20%20The4noun1%26dogM4verb%26sawM%20the4adjective%26___M%5Cn%204noun2%26catM%5Cn%3C%2Fp%3E')4%20%3Cu%20id%3D%5C'8!('M%3C%2Fu%3EZblock8type!'%22~fields8%26%5C'%3E%3B'~id!'%7F~inputs8%01%7F%3B%26%22ZM84_

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'x_h0O%7BS.%24pr2WW%7BvP%40bN'~x!63~y!35~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D%C2%84HANDLER%C2%80DievY8WMA3Ja%2B%5E%23S%5B(3P%7FID!'banana%C2%84STACK%26jCSQs%2FxEkRFyVJ%5B%2FpC-%5D%C2%86c%22er'~id!'b%2Br6%3FXK%7BP%5B%2B%3AUQEVta.p%C2%82cc6600%C2%87b%5Eb4QXS.'%3A%602wZKFl.HWf%C2%83%22er'~id!'GRX%5BfRm2ZM%3A-f%24p5%606Q%40%C2%82ffff66')))))))))~next%C2%80C%25JTfre%23k%5Dgy%5EKMdcAx%7D%7FID!'strawberry%C2%84STACK%26%3B0%3B%5DD6%3FjH3.szxHYxM%40V%C2%86c%22er'~id!'%3FLFkXz(FeKgwZ%2BmR%25L%3F.%C2%82ff99ff%C2%87yW.%7C%7D%23%2CAA%405%25X%257FzN6O%C2%83%22er'~id!'qrD%600kA%24R9_f8%7D%3FTBnx%2C'%C2%82993399')))))))))~next%C2%80fJL9Y%2BjLsX%3B*M%2C'Eq%3D%3Fyl%7FID!'apple%C2%84STACK%26Jn1Z%24C7K%3FD%3A7Vqk%5Bq'%3A9y%C2%86c%22er'~id!''%3A2WXqQKts%23%23A)D%5E6'%3ARz5%C2%82990000%C2%87E%2C'N'%3A%5EbapS%233%7C%7B7J5_V.H%C2%83%22er'~id!'9b%5DTQH-%5D7ERvafuSD%2Fnk%C2%82ff6666')))))))))))))))))%5D))~h!'%3Cul%C2%81banana%5C'%3EBanana%3C%2Fli%C2%81apple%5C'%3EApple%3C%2Fli%C2%81strawberry%5C'%3EStrawberry%3C%2Fli%3E%5Cn%3C%2Ful%3E')%22olor%C2%84VALUE%C2%85colour_pick%26%C2%85set_attribute'~id!'%7F'~fields!('%C2%80%C2%85with_element_by_id'~id!'%C2%81%3E%5Cn%20%20%3Cli%20id%3D%5C'%C2%82%7FCOLOUR!'%23%C2%83%C2%86backgroundC%C2%84')~inputs!('%C2%85!('block!('type!'%C2%86%7FPROPERTY!'%C2%87'))))~next%26%01%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_star%40Q%7Bl8.k53%2BO%2C'hv%24I'%3A3%5B)o'~x!16~y!8qTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%7CHANDLER%26with_element_by_id'~id!!zJlnMra002WGB-R%3BZ%2CG'qID!'list*add_elemen%40%5EY%5EJNa)%3FU(je5hjl3%2C'Hm'q%7Fconten%40%2C'RsgH'%3A7%24KH%2CSwKEbGbp%3D%22YrFmFi5bNQ8ieE%25l%5B%608E'qTEXT!'Banana')))))))~next%26add_elemen%40xs9eU%5Dr%5B0suPFOMSMfxT'q%7Fconten%40%23_MajNQe%5B-oRkyloi4%23j%22%3F%3D%2C%5DjlA0%23Xgvb5uxPu_)'qTEXT!'Orange'))))))))))))))))%5D))~h!'%3Cul%20id%3D%5C'list%5C'%3E%5Cn%20%20%3Cli%3EApple%3C%2Fli%3E%5Cn%3C%2Ful%3E')*')%7CSTACK%26q~fields!('%22'%7CVALUE!('shadow!('type!'tex%40%26!('block!('type!'%40t'~id!'%7C~inputs!('%7FELEMENT!'li*set_%01%7F%7C%40%26%22q*_

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'u2%2C'y2K'%3A*xW%3FIxgubY%5BUZ'~x!16~y!8~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')~inputs!('HANDLER%22with_element_by_id'~id!'ed%7BAa%25G9JmTai7Ytyu*_%26ID!'list%7F%C2%82P%232R*%7Bl-%3FS%40gg%3B)vh_%7BZ%C2%84li%7F%C2%82)%2Cj7eJ9%24C%60s%2C'omGiQ%7D%7D%5B%C2%84a%7F%C2%85ui%7D-39S%7Bs5cWbR)2%24f-%5E%26%C2%81ext'~id!'d%5DjTB-X81G2%7D%3F%3D-%5D3%3FwX%26TEXT!'http%3A%2F%2Fwww.codeyourfuture.io%2F%C2%83%2BF07xmtA%3A%2FX%5DwKR%5E7Ts%3A%C2%80'%3A7%2CN%5D1'%3Al6QzkI%7Bo1FnB%5E%26TEXT!'CYF'))%C2%87%239yP%2BgYV%25hHbFYWk%3Br_i%C2%84li%7F%C2%82%7C%2CX7%5DQuOm5POO4g%7DO1%3Fz%C2%84a%7F%C2%85%7B%5BQSRxO%7B%3AB3%25%2F4peD%3A%5BZ%26%C2%81ext'~id!'%406%7C*'%3AaKv2I5tuTZ%7D%7BqCk%C2%86google.co.uk%2F%C2%83DHHTMAc)%2B'%3AOU%7Da_%3FX%5D-L%C2%80%3By%2CPJ5)%7CQLA%24bBOwk%2B%2C'R%26TEXT!'GOOGLE'))%C2%87akqY3.aE3C%24(ZJEKh%3Fa%3A%C2%84li%7F%C2%82-N%3BQ%3F%5BpMD%5E(wq%23%2C%23%2B%2B%60Q%C2%84a%7F%C2%85'%3A9%7DQO0BMX%402WaVB-KQyN%26%C2%81ext'~id!'%5B%2C'Ud%7DN%60%2C'TJ%5Emv%7CBsX2x%24%C2%86bbc.co.uk%2Fnews%C2%83.*gr%25VLe%3DVeLFda%2C'Xoih%C2%80M3p%3FeI%5EpW%7Dhkb%2CW%7Do%2B%3F6%26TEXT!'BBC')))))))))))))))))))))))%5D))~h!'%3Cul%20id%3D%5C'list%5C'%3E%5Cn%3C%2Ful%3E')%22!('block!('type!'%26'~fields!('%7F')~inputs!('STACK%22%C2%80'~inputs!('VALUE!('shadow!('type!'text'~id!'%C2%81PROPERTY!'href')~inputs!('VALUE%22t%C2%82add_element'~id!'%C2%83'))))~next%22set_content'~id!'%C2%84%26ELEMENT!'%C2%85set_attribute'~id!'%C2%86%26TEXT!'https%3A%2F%2Fwww.%C2%87))))))))))~next%22%C2%82%01%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B%C2%807%5D'%3ANRK%5Em%2C'j%2F)A%60qIWCU%3B'~x!91~y!5%22utton%25%7FB%2C%3A%7BLDpNOFz%5EZr0n%5DG*%60'%2BID!'list8add_element'~id!'%7B%40t4YcVKk9RZWGp%7Bf5ti'%2BELEMENT!'li8set_content'~id!'%5B%2C'%7Cx%23s_veH%3Al(Qu7FYp6'~inputs!('VALUE!('shadow!('type!'text'~id!'2tJ%7D4%7BlIN-5U%7CW%24%5BFfvS'%2BTEXT!'Apple'))))))))))))))%2C%C2%80%40%2C'%24Bx*%3FA%5EXixCg%2C5CcW%3F'~x!104~y!21%22utton_remove%25%7FL%7C%40%23UD1H.Cwkr%23Ig61Gh'%2BID!'list8remove_contents'~id!'Q(%2C'u%2FXP%3AEc5C30Xy0-*%2F')))))))%5D))~h!'%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%26%5C'%3Eadd%20an%20apple%3C%2Fbutton%26_remove%5C'%3Eremove%20all%20apples%3C%2Fbutton%3E')8')~inputs!('STACK!('block!('type!'%225%2BTEXT1!'when%20the%20element%20with%20id'~ID!'b%25'~TEXT2!'is%20clicked')~inputs!('HANDLER!('block!('%26%3E%5Cn%3Cbutton%20id%3D%5C'button%2B~fields!('%7Ftype!'with_element_by_id'~id!'%C2%80('type!'element_clicked'~id!'%01%C2%80%7F%2B%26%25%228_

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j*5zlanguageVersion!0~5s!%5B('FS_WMEow-tdmy%7Bj4C%3F%3DLYaeEgBx!77~y!42~GEXT18when%20the%20S%20withqBID83BTEXT28is%20W')~6zHANDLER*5*FK_to_speechMeZIEg%2B%5Ek%2C'X%7CNHdT1%5D%5DDeB6zVALUE*5*Fget_6_data_with_idM%23vt%3FQOIhfT%2Bi%2CR%3B.oH%2B%24BGYPE8stringBID8K'))))))))%5D))~h8%3C69KJ%20%2F%3E%5Cn%3C393J%3Espeak%3C%2F3%3E')*!('3button5block6input8!'9q%3DJB'~Ftype8GfieldzTJ%5C'KtextMBid8SelementWclickedq%20idzs*%01zqWSMKJGFB98653*_

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'%7F_clicked%26I9mWe)%3AWv%7B32%7BH)qWHt%2F'~x!71~y!736TEXT1!'when%20the%20%7F%20with%20id'~ID!'button'~TEXT2!'is%20clicked')%22HANDLER!('5with_%7F_by_id%26J%2BP%7DmeWx0hAjfZ%7C1(%3D%3A%40'6ID!'list')%22STACK!('5add_%7F%26Y%60M%23'%3A%60_FDe(xlpu8Z%5BU9'6ELEMENT!'li')%22STACK!('5set_content%26%7CoisLbZuv%25U%5D%604zB%2C'%2F%7B%2F'%22VALUE!('shadow!('type!'text%26Yt(O)Fo.%5B(%2C'ZX4D%25QH%5E('6TEXT!''))~5get_input_data_with_id%267G%25Q*s-V**%3BzhwF3%7D0g8'6TYPE!'string'~ID!'text'))))))))))))))%5D))~h!'%3Cp%3EThings%20to%20do%3A%3C%2Fp%3Ful%24list%5C'%3E%3C%2Ful%3Finput%24text%5C'%20%2F%3Fbutton%24button%5C'%3Eadd%20Todo%20Item%3C%2Fbutton%3E')5block!('type!'6~fields!('%22~inputs!('%24%20id%3D%5C'%26'~id!'%3F%3E%5Cn%3C%7Felement%01%7F%3F%26%24%2265_

[fikretellek]

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B%C2%95w52f2%7BYh%3Fca2-C%2F8j5Mc'~x!-584~y!26%C2%81noun1%C2%83%7F8%3FO%7DU%5Dmgr%2C'JaE%5B%2BoreBW%C2%9A1%C2%8C!'U%3A*h2Z%3BRScPw%5B09vnn%2C'f'%C2%93%C2%87-%C2%80%C2%89%24U%2C(%7D4Mo%2F_%3DN2A4%5Bh%3BzE%C2%97NOUN'%C2%85L(%7B%7BSZ(.%2C'%40%7B8w'%3A%7B%3B'%3AM%5Bu'~x!-633~y!154%C2%81verb%C2%83%7Fx4yp%7DDY0GIhvcevFekb*%C2%8Fverb%C2%8C!''%3A)eXt%23BG2K%3ATdiq%24u8up'%C2%93%C2%87-%C2%80%C2%893%5D9V%5BW%7BA'%3ABkp%24%7Co3-.8W%C2%97VERB'%C2%85n%5D%7D0LHoG%60Q%2C'3IBNj%5D(o%3D'~x!-637~y!269%C2%81adjective%C2%83%7FuqC'%3AKAjX5Aq%5BKT6Qr%5E%2C1%C2%8Fadjective%C2%8C!'P*%5Ei3S%7BvmXmPOk%25G'%3AkCB'%C2%93%C2%87-%C2%80%C2%89u%40%5BqQ%3A8Ge%24gB%7CBHs%605oq%C2%97ADJECTIVE'%C2%85%2F2H%7DdQZ%5BQ6Pa'%3AGSHdTsa'~x!-619~y!432%C2%81noun2%C2%83%7Fy%7D)%3F4%5BfSGm'%3AXh%2BvhKi%7Cd%C2%9A2%C2%8C!'mxYK5If35mC4%2CpkcE1uQ'%C2%93%C2%87-%C2%80%C2%89QSy%3F%5DPF%2C'%5Dt%60rF%5DU%3Df02e%C2%97NOUN'%C2%85%60**E4%7BwsVlRP9r%23%40*3zZ'~x!-101~y!36%C2%81btn-day%C2%83%7F.i%5E%5B1y-s%7DIlgKC%2F%3BKN%231%C2%8Fp%C2%86%26Wl%2C'%25hkmtP%5ETof4V0VARD%C2%82%22%C2%90eGI3eP4B%2C%23enm9%2FNR7%7DD%C2%9B%26-%40h%2Fc'%3A3JJNLY'%3ArMJ6fM%3F%C2%8Ac%22%C2%90Tu%5BTWkW4R%60S5%25wOvuDJB%C2%8B))%C2%91%5Bq%2FdwUHr%24uwa2jP_SAR~%C2%99ID!'noun1%C2%86%26(Z%607.h%7D%5EL%3DHOX%7D9R%3BPY7%C2%82%22%C2%90rL%5Ek'%3Aq-GOYeFeW%7Dfj'%3Am%23%C2%9B%26x*9*%2B7OiSgd8ROo7_5NT%C2%8Ac%22%C2%90qM%60nWOmc0m'%3A*5oVsmvd8%C2%8B))%C2%91O%5DxUcWVpNa-%2C'f9sx)Rhb%C2%8Fverb%C2%86%26WWnfiO(xth00qw%3DO%5B.9B%C2%82%22%C2%90-%5DA%24NvLj%3D6ND%5DlxeH%24%3D%C2%94~next%26%7CuoSVcHxw_kDv%5DY%3B%23%239E%C2%8Ac%22%C2%90iZXT-%25TAD%5E%7C%60wx%25%3B0%5DL%25%C2%8B))%C2%91WjGPQjK6%5Dv%7C6%24BAz%7BHF~%C2%99ID!'adjective%C2%86%26%23AbHc%3B%24%5D%7B%24tK._-SLln%3B%C2%82%22%C2%90zb*fIXD'%3ANsYZnN%24t5q_l%C2%9B%26z(AE%3B%5D2dT_%2C'GnT4I9H%3Da%C2%8Ac%22%C2%90%23LQej9%23d75SGpp%3Dq5%2C'%2BW%C2%8B))%C2%91Lk(peEZS%3B9inMyjZi%3Dw%24%C2%9A2%C2%86%26%2C4%3DmoWTIY4ap%3DY.%2CIw0*%C2%82%22%C2%90%7DIBjq%607%40ZQ%5Em%24E%2BGx_%7B%2B%C2%9B%262uElDnXJ9%5BiZ%23A%2BZ%7D5X%3B%C2%8Ac%22%C2%90Z5Ebm*ssV%5EKD%2C%3B*kRr5B%C2%8B))))))%C2%85d%60U3%60SsEJpwbraMm%7DYNV'~x!292~y!27%C2%81btn-night%C2%83%7Fck%3D(F%7CGRF%3ADq%7Ds*hCz7%5D%C2%8Fp%C2%86%26e(O_8%2C2X.H6%3B6%7DsMYi-P%C2%82%22%C2%90%5D%5D%7BAROA7%3Brk%2BHFu*h5%2C')%C2%96%26)a9)Woz4NU%7CG66DFVbD%40%C2%8Ac%22%C2%90Rna.P7QG%7B3%3BbQ%60'%3AAx'%3Alj%C2%8D))%C2%91%3BZSyD3r%7BhS%3Dm6q%3A-kf2R%C2%9A1%C2%86%269ta*r%5B%25Si-C*MH%3AZ%3BVam%C2%82%22er'~id!!l*HNzEdF%7D%2BYvd%40qL%40%5D0%C2%96%26%2Cc%3Fxi%2C0w'%3A)(j9sGb%7CNgT%C2%8Ac%22%C2%906RQ9sD1%5E%7Bp%3F-3RzK%7Cfmz%C2%8D))%C2%91ljC%7B%7D0SEyh%3F7X%24i%23%2BA27%C2%8Fverb%C2%86%26I'%3Ai%25E'%3AWSrljYpTwO%60g%3BY%C2%82%22%C2%90CD0R9B%2C'GA97%60Z%5B%7BI%60%3DD*%C2%96%26x-rp%2CZBjt%7B1VS6rVc6s)%C2%8Ac%22%C2%90(%2C'%5E%3Dox%40W)B%60U6-8nzeCn%C2%8D))%C2%911E9Ll%2CYASzmjD%7CHsVf%2BE%C2%8Fadjective%C2%86%26Qv5p%5E%25ev6f%7CI1%7C.%3De%60k%7B%C2%82%22%C2%90%24z66h(0ukt6vBTy%2C7%40SW%C2%96%260HHaH)%25G-C%3BEh%7DzLzIlK%C2%8Ac%22%C2%90j%3D%7BQ(%5E.G%2F*%3F%5El%25%7C%23lu%25V%C2%8D))%C2%91*%3FB1m%24oD_g%2C%5D(3YCRoLH%C2%9A2%C2%86%26arkP38SmH%5BQ2PH%25L1wb%23%C2%82%22%C2%90XJaA2Cu7rFZDWI(DU%5DuP%C2%96%26%40okt(PF02%3B*%2BVD7ZhfSx%C2%8Ac%22%C2%90(uKs%2C'7'%3Alng*.%2CEH7c16%C2%94))))))%C2%85ed%5E0o%2Bha%2FK1%7B%25C%7D%2C'%2C'M%24v'~x!182~y!546%C2%81btn-color%C2%83%7F72mQ4%7BI5K6e%5ElOrHJ%2Cr%23%C2%8Fbtn-color%C2%86%26%40az%2B%3BZEeYfL%60R9%60Dx-)t%C2%82%22%C2%90(LO.%3B0c%2CickB%25%25%5EWri(G%C2%84ff0000')))))))))))%5D))~h!'%3Cp%20id%3D%5C'p%5C'%3E%5CnThe%C2%88noun1%5C'%3Edog%C2%98verb%5C'%3Esaw%C2%8E%5Cnthe%C2%88adjective%5C'%3Ewhite%C2%98noun2%5C'%3Ecat%C2%8E%5Cn%3C%2Fp%3E%5Cn%C2%88btn-day%5C'%3E%F0%9F%8C%9E%C2%98btn-night%5C'%3E%F0%9F%8C%99%C2%98btn-color%5C'%3Ecolor%C2%8E')%22olor')%C2%93UE%C2%92colour_pick%26%C2%92set_attribute'~id!'%7F%C2%92with_element_by_id'~id!'%C2%80'%C2%99%C2%81%C2%99TEXT1!'when%20the%20element%20with%20id'~ID!'%C2%82%C2%8AbackgroundC%C2%83'~TEXT2!'is%20clicked')~inputs!('HANDLER%C2%84%C2%80COLOUR!'%23%C2%85)))))))))))%2C%C2%95%C2%86')~inputs!('STACK%C2%87UE!('shadow!('type!'text'~id!'3%7CSi3Fd7%3Dl5dg2%40Fhv%5B%C2%88%5Cn%3Cbutton%20id%3D%5C'%C2%89TEXT!''))~block!('type!'get_randomWord'~id!'%C2%8A%C2%80PROPERTY!'%C2%8B%C2%84000000'))))%C2%8C%C2%86%C2%92set_content'~id%C2%8D%C2%84ffffff'))))%C2%8E%3C%2Fbutton%3E%C2%8F%C2%80ID!'%C2%90er'~id!'%C2%91)))~next%7F%C2%92!('block!('type!'%C2%93~inputs!('VAL%C2%94~%C2%99COLOUR!'%23ffffff'))))%C2%95('type!'element_clicked'~id!'%C2%96%C2%8B~next%C2%97%C2%80TYPE!'%C2%98%C2%8E%C2%88%C2%99~fields!('%C2%9A%C2%8Fnoun%C2%9B%C2%8D~next%01%C2%9B%C2%9A%C2%99%C2%98%C2%97%C2%96%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_