[TECH ED] CYF Blocks

[Ebtesammm]

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

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.

[Ebtesammm]

Arrays: Adding, removing, and summing elements

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'Mj*'%3Ae2%7CMXqW%25srRT*)F'%3A'~x!17~y!13%7FTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D%C2%85'~id!'%2C%7BpWv%23h%3A%7C%3BGX%40AAIq%3Bqj%26%C2%87%22lists_create_with'~id!'%60%3Bj%5EwUK8o%2C'-VocMxZKJv'~extraState!('itemCount!5)%C2%83ADD0%C2%8168gX4f%3A6*K%2BiUiTJq%2BCF%C2%841%C2%81%5EU%2F29Hv'%3Ac(%2CY.*grf8H)%C2%842%C2%818dt2qaz%2C'Xh%5Dje%3DF%7CcTAC%C2%843%C2%81K%60%2CQqo%60a4-dC(vP(%2B_88%C2%844%C2%81pu%2C%2Fs4jieQ%5D'%3Atl%3FSt(5-'%7FNUM!0)))))))))))%2C('type!'element_clicked'~id!'TUoY%7DOQYc%3DwQ%3BA%23N%25%7Byr'~x!17~y!207%7FTEXT1!'when%20the%20element%20with%20id'~ID!'add_number'~TEXT2!'is%20clicked%C2%85'~id!'iccGZ3DYM%5DWoE%3BaqD5VU'%7FVAR!('%C2%80)%C2%87%22get_input_data_with_id'~id!'zfcNCVxxj%7D7TE4d*%2481%7C'%7FTYPE!'number'~ID!'number'))))~next%22arrays_push'~id!'%60%401k.-q%5DzX%23%60z*%3AEUwL*'%7FWHERE!'START')%C2%87%C2%82VOY%2B%7BAxj%3A9z7%60gmk%7DY_T'%7FVAR!('%C2%80)))~LIST%C2%826%3AV)U%5Bc%5Do34teUW%24%5D%23Ui%26)))~next%22arrays_getFirst'~id!'pWNJpJ%7DDo3aqQ%7D.%2BF-*b'~extraState!('isStatement!true)%7FMODE!'REMOVE'~WHERE!'LAST')%C2%87%C2%82K0D5rKxJ9Y1nGgsic%2BY%3D%26)))~next%22with_element_by_id'~id!'%2FU%7Dm)%2FzW%2CQo%24%7Bq%25EsU%2C'L'%7FID!'total')%C2%83STACK%22set_content'~id!'p%2BM%24DfS)HYl%60wDV*47bj'%C2%87!('shadow!('type!'text'~id!'G(wZr%23m)%7Cf-GO%40qdB%60ij'%7FTEXT!''))~block!('type!'get_sum'~id!'Nwpt'%3AWn7%3DHf~%3AV%24db.Vf'%C2%83ARRAY%C2%82jOjxfwaD%3D9s%236UW%23)8dF%26)))))))))))))))))))%5D)~variables!%5B('name!'numbers'~%C2%86%2C('name!'array'~id!')jdqJ%23)yumnmoYs%2Fv_%7CF')%2C('name!'input_number'~%C2%80%5D)~h!'%20%3Cp%3ETotal%20of%20the%20last%205%20numbers%3A%20%3Cspan%20id%3D%5C'total%5C'%3E%3C%2Fspan%3E%20%3C%2Fp%3E%5Cn%3Cinput%20id%3D%5C'number%5C'%20%2F%3E%5Cn%3Cbutton%20id%3D%5C'add_number%5C'%3Eadd%20value%3C%2Fbutton%3E%20%20%20%20%20')%22!('block!('type!'%26'%7FVAR!('%C2%86)%7F~fields!('%C2%80id!'cjHIoL%2FOmnFz%7C%7BR5%5BD(E')%C2%81%22math_number'~id!'%C2%82%22variables_get'~id!'%C2%83~inputs!('%C2%84'%7FNUM!0)))~ADD%C2%85')%C2%83HANDLER%22variables_set%C2%86id!'xzhkOC9hzH%2C1YQx_zTci')%C2%87%C2%83VALUE%01%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_

[Ebtesammm]

List of links

https://blocks.codeyourfuture.io/share.html?v=(%27j!(%27blocks!(%27languageVersion!0~blocks!%5B(%27type!%27on_start%27~id!%27%3FM%5Dp%23WR0Nq%7B%3FU%5DJmF%2C%5Dg%27~x!-5~y!-2~fields!(%27TEXT1!%27at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D%27)~inputs!(%27HANDLER%C2%84jGCaJn%3A%609bO%3Dc%23G3nLtc%26ID!%27list%C2%81!%27%7CtN%24ejXs7g%60-%5BX3%5D%23X%5Dn%C2%85li%C2%81!%27%5B%7C%2FYY*%23UDz%7C%40%3Abno%3B7D6%C2%85a%22%C2%86Uo%3B9-5f%40OWLa%7Bo%24c04j5%26%C2%82ext%27~id!%27bZq%25lnp4%25Q_%7D4o-gyT%7DE%26TEXT!%27html%20http%3A%2F%2Fwww.codeyourfuture.io%C2%83%27%3AW%5B7ers-3_p%2BoMy_w31*%C2%801s9%3Fn%2F%27%3AkO6q8sEL%5D)oA0%26TEXT!%27Code%20your%20future%20%27%C2%87~next%C2%84bU%2CKFG%3Ax%3BY1BmCHF2%25NJ%26ID!%27list%C2%81!%27Wa%60%60xDAMy9q8.D6hAk%5D%3A%C2%85li%C2%81!%27_J(%2Fnoxh%27%3Ael3%5En07%2Bn%3B8%C2%85a%22%C2%86%2C71%7BD*uMA%3AAKp)S%25I%7Cav%26%C2%82ext%27~id!%27%24%2C%7BeiVrq%5ExH%3AITf%23%25%7D4E%C2%88www.freecodecamp.org%C2%83e%7BrK_%60LSQY%7Ccf3g%7DIQ7P%C2%804HY2iZcs-ULxw_0%3BT0Yu%26TEXT!%27Free%20code%20camp%27%C2%87)))~next%C2%84%7CP4%2CNB%5BVxAc0AP%60jDV%3Dy%26ID!%27list%C2%81!%27aIzJ86%7BoD%5E%2C%27O%40sBM%2BvnQ%C2%85li%C2%81!%27%3BhZndc_b(%3Akua%7BM1%2FIwD%C2%85a%22%C2%86iLTcy%405_S%2C%27%7B%3F%2C%27_6r%5Df))%26%C2%82ext%27~id!%27aQ%60i%60q)vc0n*13l%24%2BV%3Ar%C2%88es.pinterest.com%2F%C2%83%3DxxBE86%23pwkHzSxNx%23(O%C2%80%7CBPGRH%7Cs%7C9WQRiiy%27%3AImI%26TEXT!%27Pinterest%27%C2%87%C2%87))%5D))~h!%27%20%20%20%20%20%20%3Cul%20id%3D%5C%27list%5C%27%3E%5Cn%3C%2Ful%3E%27)%22%27)~inputs!(%27STACK%7F%26%27~fields!(%27%7F!(%27block!(%27type!%27%C2%80%27~inputs!(%27VALUE!(%27shadow!(%27type!%27text%27~id!%27%C2%81%22add_element%27~id%C2%82PROPERTY!%27href%27)~inputs!(%27VALUE%7Ft%C2%83%27))))~next%7Fset_content%27~id!%27%C2%84%7Fwith_element_by_id%27~id!%27%C2%85%26ELEMENT!%27%C2%86set_attribute%27~id!%27%C2%87))))))))))))%C2%88%26TEXT!%27https%3A%2F%2F%01%C2%88%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_

[Ebtesammm]

Loops and arrays: more fun with fruit

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'qy6'%3A%7Dz%3Ad%5BF%5DJWSX%7B%252%5EG'~x!11~y!6%7FTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%C2%81HANDLER%26variables_set'~id!'qcK%255jQJdRfce.kqOxK%3A%22%C2%84lists_create_with'~id!!N-IR6%7BWg%3AiutQE6uFux'~extraState!('itemCount!3)%C2%81ADD0%C2%860%60WL%2C0H%2CrC_%7Df%3AG)1sSv'%7FTEXT!'Peach')))~ADD1%C2%869%2FvI5%5B%5B1YR)yZzN%25x9r%2C''%7FTEXT!'strawberry%20')))~ADD2%C2%86gIEFU'%3A(N%2F%2C%23oz%3D1%7C8h%7DR'%7FTEXT!'mango')))))))))))%2C('type!'with_element_by_id'~id!'w%40%3Fw%24u*HXO%2C'icau5%7DbvD'~x!13~y!134%7FID!'list')%C2%81STACK%26controls_whileUntil'~id!'N%2F-x%5B%5E%5B%2C%25%5EgJ*g%60qk(%24('%7FMODE!'UNTIL')%C2%81BOOL%26lists_isEmpty'~id!'qfZQCf9Bcv%3DcwT2%3D3%25%60V'%C2%80!'qV%3A%3A5v%2F%24HOy(0sl._Fd%3A%22)))))~DO%26arrays_push'~id!'F%5Bxd2j-G8ppV%24D8%24F4V%2F'%7FWHERE!'START')%C2%84%C2%85R)7ZJ'%3Ax*b1%24%60WLkb.%7CDF%C2%83%C2%80!'-AyrV%5Duz85'%3Az%3FSfagp9N%22)))))~LIST%26variables_get'~id!'aHFzHcUK4%5B1llzo%24VYV_%22)))~next%26add_element'~id!'-%7BZd%3B%407%7CXlkG%5DT%60%252%2C'CS'%7FELEMENT!'li')%C2%81STACK%26set_content'~id!'UFma%2FH'%3Ad9p'%3AQ%7BHu%7C9CHj'%C2%81VALUE!('shadow!('type!'text'~id!'AcDfnS%2C%2BpRSyj7RDmMfh'%7FTEXT!''))~block!('type!'%C2%85QNxMnkuRK%3Bm%40%2B'%3AJW%5E'%3A%5BB%C2%83%C2%80!'p%2BWV%3F%24E%2B30u'%3A*l%3FC7qwd%22))))))))))))))))))%5D)~variables!%5B('name!'fruits'~%C2%82%2C('name!'array'~id!'ds%2ByU(-dHv%3D%23%3DEN.S9AV')%5D)~h!'%20%20%20%20%20%20%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%3E')%22'%7FVAR!('%C2%82)%26!('block!('type!'%7F~fields!('%C2%80%C2%84variables_get'~id%C2%81~inputs!('%C2%82id!'.%24%7DzAMlo%3Bk44k%7C%24qI%5BgI')%C2%83'%7FMODE!'GET_REMOVE'~WHERE!'FIRST')%C2%84%C2%81VALUE%26%C2%85arrays_getFirst'~id!'%C2%86%26text'~id!'%01%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_

[Ebtesammm]

Arrays and buttons

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start%7F%7DsWh5Iz%25%3DA3%5EH0yZ%7CTqI'~x!4~y!7%23TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%26HANDLER9variables_set%7FaVbVdv3t-fd_o8e-3%7B%7CK'%23VAR!('%22)%26VALUE9lists_create_with%7FrvSs2Wh%5B355r(E%7C3AW%7Bu'~extraState!('itemCount!3)%26ADD09text%7FTT%7CwBot%3A~%3AC%7BKpQ%2C'*n%7DZ'%23TEXT!'orange')))~ADD19text%7FO8%25NTlk'%3ABDA6gr)*jzN%60'%23TEXT!'kiwi%20')))~ADD29text%7Fn(h7oBuL8cL'%3A%2BJWUUtp*'%23TEXT!'grapes')))))))))))%2C('type!'element_clicked%7FDPV)3%3Ab%5E%3D_Avb%60N_uw(%7C'~x!1~y!145%23TEXT1!'when%20the%20element%20with%20id'~ID!'button'~TEXT2!'is%20clicked')%26HANDLER9with_element_by_id%7Fp'%3A0pZBGX(ryc7IS%25v(%7C8'%23ID!'list')%26STACK9add_element%7F)08au%5D6sxUXTnol%3FRc%7D%3A'%23ELEMENT!'li')%26STACK9set_content%7FT%2Bdz%258B%7B%7BbW0X%2FRc%2B.%7Df'%26VALUE!('shadow!('type!'text%7F6Ur%2C*m%2FE%2C'RE%25XvG5.N%3B5'%23TEXT!''))~block!('type!'arrays_getFirst%7F(%40'%3As%3FheN7_%40.p%2BtO%24U1S'%23MODE!'GET_REMOVE'~WHERE!'FIRST')%26VALUE9variables_get%7F82Lgp%3BTY%3FY4ya7n%3AK5'%3Aw'%23VAR!('%22)))))))))))))))))%5D)~variables!%5B('name!'fruits'~%22%5D)~h!'%20%20%20%20%20%20%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%3E%5Cn%3Cbutton%20id%3D%5C'button%5C'%3Ereveal%20next%20fruit%3C%2Fbutton%3E%5Cn%5Cn%3Cdiv%20id%20%3D%5C'container%5C'%3E%3C%2Fdiv%3E')9!('block!('type!'%22id!'%7C%24KZ%24%2FpO%60w%7CsgEt%3BOxmM')%23~fields!('%26~inputs!('%7F'~id!'%01%7F%26%23%229_

[Ebtesammm]

Arrays and loops

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'Ts%5Burg1k_%2Fsd%40yy%7DjOmn'~x!-33~y!24%22TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D'%C2%80HANDLERqvariables_set'~id!'BhEOQw%238%5BZt2gmFoycZz'%22VAR!('%26%C2%80VALUEqlists_create_with'~id!'%7B%23%5ERk64P%2Bi9WGwJm%23%60MW'~extraState!('itemCount!3%C2%80ADD0qtext'~id!'kBfa7%24%5E%3Fko9%2CveGl.k1T'%22TEXT!'apple')))~ADD1qtext'~id!'r%2CAR%3B%2C'%2CkzbwYPXh%2B%3B_Q3'%22TEXT!'strawberry%20')))~ADD2qtext'~id!'g'%3A%2FnWf%2CToR%5D(%7DS%3BLom'%3Ar'%22TEXT!'lemon%20')))))))))))%2C('type!'arrays_forEach'~id!'%25Kf3'%3A%5DG8%3Fc7%7Dxzfw.M%3D.'~x!-29~y!165%22VAR!('%7F%C2%80LISTq%C2%81FI%7BlJj%23%24coW%2C')Sy6.R23'%22VAR!('%26)))~DOqwith_element_by_id'~id!'2Q7MBe%40%23w%40i7Qwj1%3BhZ%7D'%22ID!'list'%C2%80STACKqadd_element'~id!'0D%2C'%5D-r.g%24kQ%3D%7DgsUf5Q%5D'%22ELEMENT!'li'%C2%80STACKqset_content'~id!'0_T-2nfPIO2C)1vnm4%40('~inputs!('VALUE!('shadow!('type!'text'~id!'IhFo%7B%5Eym%3A%25(L%7C%40v8Xc%40M'%22TEXT!''))~block!('type!'%C2%81%2F%2Fcj'%3A.o%23%3FD*1%5BKs'%3AX%3B5'%3A'%22VAR!('%7F))))))))))))))%5D)~variables!%5B('name!'fruits'~%26%2C('name!'item'~%7F%2C('name!'array'~id!'*8(j06v%3AZW%5D%251%2B%2C'ZYl%3B-')%5D)~h!'%20%20%20%20%20%20%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%3E')q!('block!('type!'%22~fields!('%26id!'2s(_dU0%3Aaj5%5DMvRQ9%2F5A')%7Fid!'bn%5Es%7D_fMm.D5HVZt%3Bh3v')%C2%80)~inputs!('%C2%81variables_get'~id!'%01%C2%81%C2%80%7F%26%22q_

[Ebtesammm]

Arrays: Mad Libs revisited

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!''%3A%23n%25)A%3DqoR%7C%3F%60xS9Ujs%7B'~x!29~y!14%24TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%7FHANDLERWvariables_set'~id!'O%5B%2C%5Dh%2C'6%5E4%3BrT)%3AS%3FpQLk'%24VAR!('%22)%7FVALUEWlists_create_with'~id!'Lmk6aX%3FI2Xt%60-%3BEh_eyq'~extraState!('itemCount!3)%7FADD0Wtext'~id!'Lkyx)%2C'%5D5%5Bai*f%2C(plxdE'%24TEXT!'mouse')))~ADD1Wtext'~id!'F%3APGMb.%40y%3B1%3DlT%5Be6%2C'*8'%24TEXT!'Dog')))~ADD2Wtext'~id!'1%5B7(G4%23%2C%3F_8kgUJ)LjQ%60'%24TEXT!'Horse')))))))))))%2C('type!'element_clicked'~id!'rg%2FvK%2C38%7B%60Dl_KHktrkl'~x!24~y!146%24TEXT1!'when%20the%20element%20with%20id'~ID!'animal'~TEXT2!'is%20clicked')%7FHANDLERWwith_element_by_id'~id!'wgd*xH4K%2C'%25ERCxbXK2NM'%24ID!'animal')%7FSTACKWset_content'~id!'%7C3d4ws%3D'%3A%2FCTqtOkF%2B0g%2F'%7FVALUE!('shadow!('type!'text'~id!'G_Oy%3Afk6g%2C'u6oRt(B%601B'%24TEXT!''))~block!('type!'get_randomMember'~id!'R%3AT%7C5%7CXRdB4qI%5BT7ujkq'%7FARRAYWvariables_get'~id!')EMVKh%7D%5EMsOK%2C'nd7o30G'%24VAR!('%22))))))))))))))%5D)~variables!%5B('name!'animales'~%22%2C('name!'array'~id!'DXLZd3nEo_bqHF%2Bkd5b*')%5D)~h!'%20%20%20%20%20%20%3Cp%3EThe%26noun%5C'%3Eman%3C%2Fu%3E%26verb%5C'%3Esaw%3C%2Fu%3E%20the%26adjective%5C'%3Ewhite%3C%2Fu%3E%26animal%5C'%3Ecat%3C%2Fu%3E%3C%2Fp%3E')W!('block!('type!'%22id!'T8Qsr%7CO6ZS%60%7Cz%7Bsc81N5')%24~fields!('%26%20%3Cu%20id%3D%5C'%7F~inputs!('%01%7F%26%24%22W_

[Ebtesammm]

Variables consolidation: counting sheep

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'element_clicked'~id!'7nWS%60XkhfM6%7B%3B5k2q%5D%60d'~x!-256~y!74~fields!('TEXT1!'when%20the%20element%20with%20id'~ID!'button'~TEXT2!'is%20clicked')%C2%84HANDLER%C2%8BhqP9%2C'aI__JURPH*Su%3AY)%26VAR!('%7F%C2%86'RR%7DjLXBVx9A(wtXfqIFR%26NUM!0))))~next%C2%8BV%406WAR5LZ%3A%7Byu%3Avr-B%5D%7D%C2%8A%C2%86'6KUB6wNDYdmHSOm%5D_%7Dm%5D%26NUM!0))))~next%22controls_if'~id!!%3B8u%3F%2C'%2C'TD8(esBQ6i%2B36'~extraState!('hasElse!true)%C2%84IF0%22logic_compare'~id!'-%2B5)%2C'DvE2hI_Wm%5D%3F0%3DW'%3A%26OP!'EQ')%C2%84A%22get_input_data_with_id'~id!'kyuo%2F%7Du)x%3AeawT(sRoQ'%3A%26TYPE!'string'~ID!'text')))~B%22text'~id!'.L%3D%25%7D%3A..m.8'%3Aj1Xk%7Ddq8%26TEXT!'sheep'))))))~DO0%C2%8C%3F%2B8TLLx%3DK3A9Yi.u%24%3D'%3A%5D%C2%8A%C2%82!'wj%7C-PX%25TAWzur%7C6siZzg%26%C2%85'~id!'yY0P%7C%5B%3BeER85%60MXBuiFt%26ID!'sheep%C2%87nt'~id!'%7CJ%3DZ%7BVVYRNk%7BzP)%24Zp%5D%5E'%C2%84VALUE%C2%81'%26%C2%83b%3DI91s4CVyYA%7B.zAJrm%24%C2%8A)))))))))))~ELSE%C2%8CtbnzVI%2F6f6.U%23N%5En%23x%7D*%26VAR!('%7F%C2%82!'h%2B%2B.f.%25c%23IZx)p)g%3A%2FlD%26%C2%85'~id!'mKV%24)G%2C's7OVQ%7Dpf_O%259G%26ID!'other%C2%87nt'~id!'r1Iw(ds8lD._vK'%3ALLsm~%C2%84VALUE%C2%81'%26%C2%83%24NclOqtscrg7YymrKfEB%26VAR!('%7F))))))))))))))))))))%5D)~variables!%5B('name!'count'~%C2%80%2C('name!'others'~%7F%5D)~h!'%20%20%20%20%20%20%3Cp%3EThere%20have%20been%20%3Cspan%C2%89sheep%C2%88sheep%20%F0%9F%90%91%20and%20%3Cspan%C2%89other%C2%88others.%3C%2Fp%3E%5Cn%3Cinput%C2%89text%5C'%20%2F%3E%5Cn%3Cbutton%C2%89button%5C'%3Eadd%20animal%3C%2Fbutton%3E')%22!('block!('type!'%26'~fields!('%7Fid!'3%23xOrA%5D%3ALFOiN%25uH%24T%60l')%C2%80id!'Om4MT%2FgU8EF_x2H5%7Bt%2Cg')%C2%81!('shadow!('type!'text'~id!'6U9y%2F%2C'XE%7D%40%3Dv5%3Bf%7DE%5Ef%2C%C2%82)%C2%84DELTA!('shadow!('type!'math_number'~id%C2%83TEXT!''))~block!('type!'variables_get'~id!'%C2%84~inputs!('%C2%85NUM!1))))~next%22with_element_by_id%C2%86)%C2%84VALUE%22math_number'~id!%C2%87_count')%C2%84STACK%22set_conte%C2%88_count%5C'%3E0%3C%2Fspan%3E%20%C2%89%20id%3D%5C'%C2%8A%26VAR!('%C2%80%C2%8B%22variables_set'~id!'%C2%8C%22math_change'~id!'%01%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_

[Ebtesammm]

Variables: keeping track of the number of clicks

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B%26on_start%22CG%2C%7D%5DT.E347%5DYB6CkCdD'~x!18~y!15JTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')WHANDLER!('P%7F_set%222m%24Z%3Delvh-If%5B%3B%3D%25%3BMFx%2BWVALUE!('Pmath_number%22%3F6wsTa%2FpKT%5EE%2C')r%3BUmz4'JNUM!0))))))))%2C%26element_clicked%22RO7%601xc%3D0882E961-LBx'~x!18~y!118JTEXT1!'when%20the%20element%20with%20id'~ID!'%40'~TEXT2!'is%20clicked')WHANDLER!('Pmath_change%22%24sRZ%5ED%24bo4N_7%2F%3D%5D%3AX%60%60%2BWDELTA!('shadow!%26math_number'~id!!h%2CtUusnYtiyv%2Ca%3D8A%5Bn'JNUM!1))))~next!('Pwith_element_by_id%22DrSdM%5DI%5B%5Et%5E%5B%3Fh%23v)T_x'JID!'%40')WSTACK!('Pset_content%22qhfMgQ7-FTHsHp4GBgvn'WVALUE!('shadow!%26text%22a%7D%3D%2C%3FwpwAu%2C'FUQH7dM%7Co'JTEXT!''))~P%7F_get%22E1Txd_F%2C'81Xn0SxS9.wh%2B))))))))))))%5D)~%7F!%5B('name!'count'~*%5D)~h!'%20%20%20%20%20%20%3C%40%20id%20%3D%5C'%40%5C'%3E0%3C%2F%40%3E')*id!'k'%3AN04%5EGiev%2C'O%7DV46X%7CGv')J~fields!('Pblock!%26W~inputs!('%22'~id!'%26('type!'%2B'JVAR!('*)%40button%7Fvariables%01%7F%40%2B%26%22WPJ*_

[Ebtesammm]

Buttons and clicks consolidation

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B%C2%91WrmF%40u1%3B7%3Df5P6h%2B*%23.y'~x!33~y!18%22noun1%26%C2%85gyLRJ%2FeRnhY3Z%2C'%409vJ%2Bl%C2%81%C2%83%C2%88%5B%3F%2C'G7%2F(ZIzQdAzQ9.2%2C~~fields!('TYPE!'NOUN'%C2%80.cCs%2C'6%7D%5B)TiJp%7D2fExoV'~x!38~y!87%22verb%26%C2%85hh1%60%40t%60Bdn%60d%5E%7B1nY%7BWs%C2%81%C2%83%C2%888-.%3Bg'%3A%60TJ5oiQ7%7BUu%40%7CI%C2%84TYPE!'VERB'%C2%80e%2Frl%233hx(z6os(QO%24%7C%2F%3B'~x!57~y!145%22adjective%26%C2%85%3BkrZB4_j%242j6y3jg3)bc%C2%81%C2%83%C2%88'%3Ah%7BT%2C'P%3DQ%3F%3DF%23xiGrNpus%C2%84TYPE!'ADJECTIVE'%C2%80u_zz%2C%60%5B4G%24W35tAd%25s%5E%3D'~x!61~y!215%22noun2%26%C2%856%2B%25EJaz-h%24h.7(PE%2Ff%3Fl%C2%81%C2%83%C2%88ZK9qjz%25y%3F%2FLm.%5Dxx%5E2EL%C2%84TYPE!'NOUN'%C2%80uetQiGs*-%5DN(%3F_rY0Fmv'~x!79~y!298%22day%26%C2%90%2C'E%24m8JkfZ%2C(%25%2C'.0ofGs~~fields!('%C2%93ment'~id!'ga%3BLE24SNvi9y07NZbZh%C2%84ELEMENT!'li%C2%87%C2%85%2CLR%5E_9BS%7BvVpuC%7CmndSr%C2%81X%3BdM*L%2C58c8ZUH%40%5E)Zj.%C2%94%F0%9F%8C%9E%20Day%20mode%C2%82%23LL%257%40_xAT9C0qYi%5D%3B(t%C2%92%7Fer'~id!'vbD%2CZPo%2FE.%3DY99aB-%7D%5B2%C2%8Bffffff%C2%82hBoGfbos%3FB%25(e%2C'_%7DYv%2CZ%C2%89c%7Fer'~id!!OD%2C%23yt%7DcLwWr%5Dl4BX*w%C2%8B000000'))))))))))%C2%80Dlfp3-%2B4D_%7B%407tS%2B%258Pr'~x!78~y!528%22night%26%C2%90%23y%2FeGWq6fIa%60r0.r%3F.1f%C2%84%C2%93ment'~id!'P%5BH6h%60Rp%2B%2F*nWH%5B%2FZnjf%C2%84ELEMENT!'li%C2%87%C2%85%2C'.fRH%7BgU-V%3AOQCP0%2B2h'%3A%C2%81M%7B)%7C%3F6J5%2Fb%3BVGqytrub_%C2%94%F0%9F%8C%99%20Night%20mode%C2%82wXg%60fqmQA-%23a%7Bd%5EO%3DYud%C2%92%7Fer'~id!'Z.d%3A%2C'JQN61ow%7B%7DVYTbIq%C2%8B000000%C2%82gmIYnOof%3A1%7ClHM%2C't%25JfY%C2%89c%7Fer'~id!'x%2C)GktT%23jVWe5GdMOmLR%C2%8Bffffff'))))))))))%C2%80VjZ%24%24r%2Fp-'%3A%25%2B%60ZR%3BH2Nr'~x!73~y!775%22button%26%C2%8EMPgv5Y%24n%2BPBhIA%3DTc%7B'%3A%7C%C2%92%7Fer'~id!'uoh%2C%24L8%2BmDDtT%3F%3Bv%7B*d%7C%C2%8B006600%C2%82OEOA8F%3F0-%2C'-1-%3A%5D%40YVVe%C2%89c%7Fer'~id!'TTZ%7BpL9%40%7B%2C'GY%7C%5D7yJ1M)%C2%8Bffffff'))%C2%80Ja9d(%5Eyzy'%3Ao8p%5B%2C'L5%2F9j'~x!54~y!893%22img-click%26%C2%8E%408gl%3F1bkB%2BH%3DXKhW)%3FAD%C2%89src%C2%8Ftext'~id!'%3Dwb-Qt%5E8Fhb%5E%7Bvjk%3F%3B%5El%C2%94http%C2%8Ae%2Fe1%2FFullMoon2010.jpg%2F1024px-FullMoon2010.jpg'))))))))%5D))~h!'%20%20%20%20%20%20%3Cp%3E%5Cn%20%20The%20%C2%86noun1%5C'%3Edog%C2%8C%20%C2%86verb%5C'%3Esaw%C2%8C%20the%5Cn%20%20%C2%86adjective%5C'%3Ewhite%C2%95%20%20%C2%86noun2%5C'%3Ecat%C2%95%3C%2Fp%3E%5Cn%3Cul%20id%20%3D%5C'list%5C'%3E%3C%2Ful%3E%5Cn%C2%86day%5C'%3E%20day%20mode%C2%95%C2%86night%5C'%3E%20night%20mode%C2%95%3Cbr%3E%20%3Cbr%3E%5Cn%5Cn%3Cbutton%20id%20%3D%5C'button%5C'%3E%20click%20to%20change%20the%20button%20color%C2%95%5Cn%3Cbr%3E%3Cbr%3E%5Cn%5Cn%5Cn%3Cp%3E%20click%20on%20the%20image%20to%20change%20it%3C%2Fp%3E%5Cn%5Cn%3Cimg%20id%3D%5C'img-click%5C'%20src%3D%5C'http%C2%8A6%2F67%2F%C2%8Dg%2F800px-%C2%8Dg%5C'%20width%3D%5C'200%5C'%3E')%22~fields!('TEXT1!'when%20the%20element%20with%20id'~ID!'%26'~TEXT2!'is%20clicked')~inputs!('HANDLER%C2%96%7Folor%C2%8Fcolour_pick%C2%80))))))))%2C%C2%91%C2%81'~inputs!('VALUE!('shadow!('type!'text'~id!'%C2%82'))))~next%C2%96%C2%8E%C2%83'%3A.dC5eEfoC8.%5B0)%40KpEI%C2%94'))~block!(%C2%84'~fields!('%C2%85type!'set_content'~id!'%C2%86%3Cbutton%20id%3D%5C'%C2%87')~inputs!('STACK%C2%96%C2%88'type!'get_randomWord'~id!'%C2%89%C2%84PROPERTY!'%C2%8As%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F%C2%8B%C2%84COLOUR!'%23%C2%8C%3C%2Fbutton%3E%C2%8DBBSO_full-disk_H-alpha_2002-07-26_153931_color.pn%C2%8Etype!'set_attribute'~id!'%C2%8F')~inputs!('VALUE%C2%96type!'%C2%90type!'with_element_by_id'~id!'%C2%91('type!'element_clicked'~id!'%C2%92%C2%89backgroundC%C2%93ID!'list%C2%87type!'add_ele%C2%94%C2%84TEXT!'%C2%95%C2%8C%5Cn%C2%96!('block!('%01%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_

[Ebtesammm]

Buttons, inputs and clicks: a todo list

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'%7B_clicked%60Zftx9y%5E%7Cr-FbS*%3AE%5BvzP'~x!39~y!221%22TEXT1!'when%20the%20%7B%20with%20id'~ID!'button'~TEXT2!'is%20clicked')%3FHANDLER!('.with_%7B_by_id%60*Bb%7C(*ptJ58gung9hgxM'%22ID!'list%7Fadd_%7B%60%7CT%5DQlO%24D_vHk%5B%2BpL%7Dkp%7D'%22ELEMENT!'li%7Fset_content%60O36%2CuAX%3AaV%2Cdoqw47B%3B6'%3FVALUE!('shadow!('type!'text%60RtW'%3A%5D%3Ai0Z6%2FA9%3Ds%3B%3D1%25o'%22TEXT!''))~.get_input_data_with_id%60%3DOgr%2C'cav42GoSI%3A%23%24s%3Dy'%22TYPE!'string'~ID!'text'))))))))))))))%5D))~h!'%20%20%20%20%20%20%3Cp%3EThings%20to%20do%3A%3C%2Fp%26ul%40list%5C'%3E%3C%2Ful%26input%40text%5C'%2F%26button%40button%5C'%3Eadd%20Todo%20Item%3C%2Fbutton%3E').block!('type!'%22~fields!('%26%3E%5Cn%5Cn%3C%3F~inputs!('%40%20id%3D%5C'%60'~id!'%7Belement%7F')%3FSTACK!('.%01%7F%7B%60%40%3F%26%22._

[Ebtesammm]

Inputs and clicks: say something

https://blocks.codeyourfuture.io/share.html?v=('jMblocksMlanguageVersion!0~blocks!%5B('type!'%7D_clickedB%2C%5EPah0%2CVsD1WlxOF%24zvo'~x!71~y!83%25TEXT1!'when%20the%20%7D%20with%20id'~ID!'%26'~TEXT2!'is%20clicked')~QsMHANDLER*with_%7D_by_idBlhIU%3F%3D%7B_lb8%2BL%2C's%3Fo.df'%25%7F~QsMSTACK*%22%2C'bp%7B-%5DnLH%7BnrX_SpHX%7CJ'~QsMVALUE*get_Q_data_with_idB%60eq(%3B%40RykvyNGuZ1Ovs9'%25TYPE!'string'~%7F))))))))))%2C('type!'%22%23TqRq5IAXL%3FuYT4%5EI2b%3F'~x!219~y!106)%5D))~h!'%20%20%20%20%20%20%3CQ%3Atext%5C'%20%2F%3E%5Cn%3C%26%3A%26%5C'%3Espeak%3C%2F%26%3E')*MblockMtype!'B'~id!'M!('Qinput%22text_to_speechB%25~fieldsM%26button%3A%20id%3D%5C'%7Delement%7FID!'text')%01%7F%7D%3A%26%25%22QMB*_

[Ebtesammm]

Buttons and clicks: A button to add apples

https://blocks.codeyourfuture.io/share.html?v=('j7blocks7languageVersion!0~blocks!%5B('type!'v_clickedz'Rdgl0Cb%40uq%2CP(de%609%7B%3DY'~x!35~y!48QTEXT1!'when%20the%20v%20with%20id'~ID!'%26'~TEXT2!'is%20clicked')%22HANDLER%25with_v_by_idz!uHw-(k%2B%7Bf*%3D%3Alqb9xtG'QID!'listFadd_vz'%23J*KuXq(13MUin%5DZ6h%3Dk'QELEMENT!'liFset_contentz'Ourfn.iG%3B%5D%2B(JY'%3AybWTK'%22VALUE7shadow7type!'textz'3X%3DsdL4_BCA%3F.%3F%7D%3Bm%24U('QTEXT!'apple'))))))))))))))%5D))~h!'%20%20%20%20%20%20%3Cul%5Elist%5C'%3E%3C%2Ful%3E%5Cn%3C%26%5E%26%5C'%3Eadd%20an%20apple%3C%2F%26%3E')7!('F')%22STACK%25Q~fields7velementz'~id!%22~inputs7%257block7type!'%26button%5E%20id%3D%5C'%01%5E%26%25%22zvQF7_

[Ebtesammm]

Creating html dynamically: lists of fruit

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'%2Bi%60%23%5E4elhD7)pg%7DPVI7%3F'~x!26~y!91%7FTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')~inputs!('HANDLER%C2%82with_element_by_id'~id!'G%7CA%3BkB'%3A'%3A5D%7DL0%5E1u%7C%3B-y'%7FID!'list%22add_element'~id!'_O7%24Obg%23%7BC.vl%23sCqo6W'%7F%C2%81%C2%83%25.Iuwg5%40rU%5Do%2FGf3%3FA7*%26%5D_.ST%60%5DILfpd-3mPPa)R'%7FTEXT!'orange%C2%80R'%3AhY9WX%7C2%7By8%25ZVE(XA1'%7F%C2%81%C2%83i9q.XxY%2C%3Fo%7Cws%2C'xUrA0t%26rU%3BpNhB4%3Ff%3D%40%2C%3A%3BRtiKb'%7FTEXT!'kiwi%C2%80G0%24%3DC'%3A2I8%5B6eK%7D%25%5DD%2CF-'%7F%C2%81%C2%83y%3DBO%25%253-CJ%7Cgyj6gAL*n%26Zcs186G%60eaJQ'%3AF%40Zz*Tg'%7FTEXT!'strawberry%20'))))))))))))))))))%5D))~h!'%20%20%20%20%20%20%3Cul%20id%3D%5C'list%5C'%3E%5Cn%20%20%3Cli%3EApple%3C%2Fli%3E%5Cn%3C%2Ful%3E')%22')~inputs!('STACK%C2%82%26'~inputs!('VALUE!('shadow!('type!'text'~id!'%7F~fields!('%C2%80')))))))~next%C2%82add_element'~id!'%C2%81ELEMENT!'li%22set_%C2%82!('block!('type!'%C2%83content'~id!'%01%C2%83%C2%82%C2%81%C2%80%7F%26%22_

[Ebtesammm]

Modifying html dynamically: setting colours

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'6oYP3XBMDxYym%3BpDE3.-'~x!16~y!8~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D%C2%83HANDLER%5EI%7Cfb)%5B%25)coNWFDx%40l%7B%24Y%26ID!'banana%C2%83STACK%22_%2CI20-cDAVF%5BD)M6)Aov%C2%85c*er'~id!'t1%2B%40iyX9cxl6VKh%25fnP%2C'%7Fffcc00%C2%864%2F%5Dd)Wq0qnZrD-q%2Btdc-%C2%81*er'~id!'%3F044i%2C%2C'%3Bl%7C%7CMbrlS%40T%7DO%C2%82~next%5E6%2FQlXaMWUD8%7DW5S.9k%25%24%26ID!'apple%C2%83STACK%229vb0FESx6xUf%5BO%40782'%3Ap%C2%85c*er'~id!'6MWdrDXn'%3Agu2-jJLjW%5B2%7Fff0000%C2%864ZG4GllqKB%605lj%25%25_%2C%3BM%C2%81*er'~id!'v73F%2Cn(3HPUvIx9%2F8j%3Af%C2%82~next%5ET-g.m%60n%2BP%60b%3Fk%7Bw%5D_%7CTB%26ID!'strawberry%C2%83STACK%22MPS%40(_hm%5DOU%23%5DX%60x%7CAm%7D%C2%85c*er'~id!'ICeaK%2C5U%2C'mDaHba%3A%23t%7Bt%7Fff6666%C2%86X3O%3D(5NX%25F5Ic(l%3D%7C.C%2F%C2%81*er'~id!'PQvlfDbUo%3F%40EjEzw%7C-Kp%C2%82))))))))%5D))~h!'%20%20%20%20%20%20%3Cdiv%20id%20%3D%5C'background%5C'%3E%5Cn%5Cn%3Cul%C2%80banana%5C'%3EBanana%3C%2Fli%C2%80apple%5C'%3EApple%3C%2Fli%C2%80strawberry%5C'%3EStrawberry%3C%2Fli%3E%5Cn%3C%2Ful%3E%5Cn%5Cn%3C%2Fdiv%3E')*olor%C2%83VALUE%C2%84colour_pick%22%C2%84set_attribute'~id!'%26'~fields!('%5E%C2%84with_element_by_id'~id!'%7F%26COLOUR!'%23%C2%80%3E%5Cn%20%20%3Cli%20id%3D%5C'%C2%81%C2%85backgroundC%C2%82%7F000000')))))))))%C2%83')~inputs!('%C2%84!('block!('type!'%C2%85%26PROPERTY!'%C2%86'))))~next%22%01%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%5E%26%22*_

[Ebtesammm]

Modifying html dynamically: changing text

https://blocks.codeyourfuture.io/share.html?v=('j7blocks7languageVersion!0~blocks!%5B('type!'on_start'~id!'LY'%3AF%60Sa%2Cn'%3AmS%3BzCUZd%24N'~x!25~y!22%22TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%7CHANDLER7Owith_element_by_id'~id!'YDrla6mND%2FQlsG_D%25o8C'%22ID!'adjective')%7CSTACK7Oset_content'~id!!'%3A.U*-%7DJe%40C%40QFy'%3AGG%7D9'%7CVALUE7shadow7type!'text'~id!'(m-ro%24WBi%23A%3FYqC%2Biaad'%22TEXT!''))~Oget_randomWord'~id!'w%5EHjgA3xW%25r2PhW2v%7D%5Bv'%22TYPE!'ADJECTIVE')))))))))))%5D))~h!'%7F%7F%7F%3Cp%3E%5Cn%7FThe4noun1%26dogM4verb%26sawM%20the4adjective%26___M%5Cn%204noun2%26catM%5Cn%3C%2Fp%3E')4%20%3Cu%20id%3D%5C'7!('M%3C%2Fu%3EOblock7type!'%22~fields7%26%5C'%3E%7C~inputs7%7F%20%20%01%7F%7C%26%22OM74_