search

pedram-am / Coursework-Planner

Your coursework planner
0 stars 1 forks source link

[TECH ED] CYF Blocks #22

Open pedram-am opened 11 months ago

pedram-am commented 11 months ago

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.

pedram-am commented 10 months ago

Modifying html dynamically: changing text:

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'2qIa%60Wn%3Bjy%25a%5BDD)LHB.'~x!16~y!8~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')~inputs!('HANDLER%7F%24%25B%2C%7BR%5BFWI%3A%60UeOO2A0P%C2%81ID!'adjective%22!'7z%2B%2C'1-6O9q(0Wr%5DmLZ%7CM%26_t%2B4ckYc_UIfwzufE*2%5E%C2%83big')))))))~next%7FqFgy(odvdq*GeT(DO_LR%C2%81ID!'verb%22!'Li-bvx%5B0eUJ%7B8el2LX%3Bo%26bSg%3AAiD%2F(%7CAsGE(zt9%252%C2%83saw%C2%80n%23v%2C'%5Dtg6a%2CtVpc%3BbG1ph%C2%81TYPE!'VERB')))))))~next%7FY%600%2FZ_%2F%2C'RrewKGwRA-%5Bv%C2%81ID!'noun2%22!'d%40EsH'%3Ar4ga%2C'%3A%7D%2FJ%24Z%7D5m%264%23'%3A216zQrJFWuK(%7BlcI%2C'%C2%83%C2%80F7zif55SB0P.S(UruTCj%C2%84~next%7F'%3A6H%25Ax%5Bp%2C'%7B3%7D%5DYywZfQ8%C2%81ID!'noun1%22!'%5E%3BIh%3DtsL_Y37BU%25q%23KIa%26XCrr%25Pw%2Fm0lQpNB%3D'%3AW%5BR%C2%83%C2%80hl%5Ek2%2Bw1f%5EUug%3FT7A%4044%C2%84))))))))))%5D))~h!'%3Cp%3E%5Cn%20%20The%C2%82noun1%5C'%3Edog%3C%2Fu%3E%C2%82verb%5C'%3Esaw%3C%2Fu%3E%20the%C2%82adjective%5C'%3E___%3C%2Fu%3E%5Cn%20%C2%82noun2%5C'%3Ecat%3C%2Fu%3E%5Cn%3C%2Fp%3E')%22')~inputs!('STACK!('%C2%85set_content'~id%26'~inputs!('VALUE!('shadow!('type!'text'~id!'%7F!('%C2%85with_element_by_id'~id!'%C2%80'))~%C2%85get_randomWord'~id!'%C2%81'~fields!('%C2%82%20%3Cu%20id%3D%5C'%C2%83%C2%81TEXT!'%C2%84%C2%81TYPE!'NOUN')))))))%C2%85block!('type!'%01%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_

pedram-am commented 10 months ago

Modifying html dynamically: setting colours:

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'POi0%7D%7BgLNJU'%3Ab-q-DmPr'~x!13~y!29~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D%C2%84HANDLER%C2%80c%7DG.vFdV18%3FN(Clt_tM%23%7FID!'banana%C2%84STACK%26h%7Be%23IKr*GS%5D0u%255rn1QA%C2%86c%22er'~id!'%24D%2F%3Ac64HGAZ%2C'aFBQ(kXV%C2%82ffff33%C2%87h6xVAi%3Fk8%5EXru%24pFL%2Caz%C2%83%22er'~id!'FZZT%3Db7PLr%7C'%3A%7B.l%2C%7D%5E%7Dc%C2%82666666')))))))))~next%C2%80BQ9%7CX3-OCvJ37ds.%604%2C2%7FID!'apple%C2%84STACK%26%3Bh27ddwnJwXu8%3F%7DuUSZv%C2%86c%22er'~id!'t%24Ly1%3FS(.G%7BsA%5B%2C'%3D'%3AnyO%C2%82009900%C2%87%3DYDeJ56RSpV%5E%40LihkC%25H%C2%83%22er'~id!!eY)%3B%5BM'%3AJ3N%3FfP6Ky*q6%C2%8299ffff')))))))))~next%C2%80T6r5%608Fdc7ML5%23wzVz%40Y%7FID!'strawberry%C2%84STACK%26GeSy%3BS%5E9_aJYlr%5DyW1op%C2%86c%22er'~id!'7DXi8%5BWC%3F%3B%24*t%25%7CPM*%3BN%C2%82ff0000%C2%87x%23MJnIaK.Yv%23hvV%5DK%2Crd%C2%83%22er'~id!'%24tad%3AjR%40%2B5KI1Y%23faLbB%C2%82ffccff')))))))))))))))))%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%5Cn')%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_

pedram-am commented 10 months ago

Creating html dynamically: lists of fruit:

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'%5DJ%24Mw'%3Ah%5DduIxlz%7DiS5K.'~x!16~y!8%26TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')~inputs!('HANDLER%7Fwith_element_by_id'~id!'rnY%7CryPWFuHH%25%7C%2Fzf9e'%3A'%26ID!'list3add_element'~id!'GSAw%25((xsEUBSVr%5BmhmZ%C2%813%C2%80_%3Bpd%23hgQV%3F%5B%2CYvP*kON)%22%3F(_jVQ%7CR%7D(%3F'%3AnW%3A5ts.*'%26TEXT!'Banana%40XaQZ%23tvpEU%3D%7DDrSq%7D-Tv%C2%813%C2%80tCH(%60%23*R%5DY'%3A5Z)i%24rC%3Ab%22WSPNC%5EDti29F%7C2q7_lxG'%26TEXT!'Orange%406N%25RJrVKC%5B6-0jYvj(U8%C2%813%C2%80DG%5EN%7DpAH%3A1C%7DE%25v)Mew4%22ml4rC%7B%2Bff%2B%7BsL%2FA%2CUucS'%26TEXT!'Blueberry'))))))))))))))))))%5D))~h!'%3Cul%20id%3D%5C'list%5C'%3E%5Cn%20%20%3Cli%3EApple%3C%2Fli%3E%5Cn%3C%2Ful%3E')3')~inputs!('STACK%7F%22'~inputs!('VALUE!('shadow!('type!'text'~id!'%26~fields!('%40')))))))~next%7Fadd_element'~id!'%7F!('block!('type!'%C2%80set_content'~id!'%C2%81'%26ELEMENT!'li%01%C2%81%C2%80%7F%40%26%223_

pedram-am commented 10 months ago

Creating html dynamically: lists of links:

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'%5D%2CmM%25f0jR1X%40)'%3A%7C3%2FW%3B%3B'~x!16~y!8~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')~inputs!('HANDLER%22with_element_by_id'~id!'Szi%7Djy0c%23Ll%7CITM%7D%3B%2FM%5E%26ID!'list%7F%C2%82%2Bj0sQRck1Ob%3Dg-FaL)RT%C2%85li%7F%C2%82lH.tDi49Cug)*h7_%2FIkS%C2%85a%7F%C2%86yN2C95R8X%40%251H%23%25*ls9T%26%C2%81ext'~id!'royhnA%5E%7DI%40hvZnZCa%5Ewp%C2%84codeyourfuture.io%C2%83AtwtORIgoU_%3F%7CPaRN(rO%C2%80Oz-%5B%3AYtF%40(b%7Bh6%3Dh2Jb_%26TEXT!'Code%20Your%20Future'))%C2%87pA*_A%40_BQh41%25vIs.%7D%40K%C2%85li%7F%C2%82QJO%2C'wxqGUc%7B_B%5Dgel-%7C%23%C2%85a%7F%C2%86%2C'%3D%24zvQ%3D-Nr2.vFn%2Cg_jw%26%C2%81ext'~id!'AIo4D6mmB'%3AMUf'%3A%60E4%2C'Et%C2%84www.youtube.com%C2%83nM%7DKS%23.u7l%2B%5EQ(81%2Ff'%3A6%C2%80p%7B%3D%7D%2CHH%60Fj%2BmH.C%7BtFLA%26TEXT!'You%20Tube'))%C2%878MJy-Fnao-9wW0bJ0%2BlV%C2%85li%7F%C2%82%3FC4R%2B_QD%5EadMAl%60%5EkKx2%C2%85a%7F%C2%86%3Fl%5D10f*2'%3Ad2HI%23zQ)R%60%3F%26%C2%81ext'~id!'3q'%3AwKet4au6B%24Mc)G%2C'j%40%C2%84www.wikipedia.org%C2%835pt*Xc%24ISiBx%60NfobnGC%C2%80W3%24iaO%5D'%3AVj.%7C%2FxRt%7Cvi%3B%26TEXT!'Wikipedia')))))))))))))))))))))))%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%2F'))))~next%22set_content'~id!'%C2%84%26TEXT!'https%3A%2F%2F%C2%85%26ELEMENT!'%C2%86set_attribute'~id!'%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_

pedram-am commented 10 months ago

Buttons and clicks: A button to add apples:

https://blocks.codeyourfuture.io/share.html?v=('j!('blocks!('languageVersion!0~blocks!%5B%C2%80MQAzRvwpg%2BS_%5E%3A6wrcoR'~x!19~y!13Gtton%22%7Fm%3Br%24%60L7*8%25%231Q1i%5Bg%2F1%7B'%40ID!'list4add_element'~id!'5FWo37FC%23r2NrxuMBr8n'%40ELEMENT!'li4set_content'~id!'Y%23SQI%7Bm(WM%7CYMPOoJlpH'~inputs!('VALUE!('shadow!('type!'text'~id!'e2hD7F37.aoJ%7BtAB_%7D2O'%40TEXT!'apple'))))))))))))))%2C%C2%80hcLN6%60UwV0thY%3Fq7xCb%7B'~x!22~y!196Gtton2%22%7Fh9Y6nJ-_m%2CuX%3AhZYotOF'%40ID!'list4remove_contents'~id!!ud%5DOPK6akfSo%235LmV22')))))))%5D))~h!'%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%26%5C'%3Eadd%20an%20apple%3C%2Fbutton%262%5C'%3Eremove%20all%20the%20apples%3C%2Fbutton%3E')4')~inputs!('STACK!('block!('type!'G%40TEXT1!'when%20the%20element%20with%20id'~ID!'bu%22'~TEXT2!'is%20clicked')~inputs!('HANDLER!('block!('%26%3E%5Cn%3Cbutton%20id%3D%5C'button%40~fields!('%7Ftype!'with_element_by_id'~id!'%C2%80('type!'element_clicked'~id!'%01%C2%80%7F%40%26%22G4_

pedram-am commented 10 months ago

Inputs and clicks: say something:

https://blocks.codeyourfuture.io/share.html?v=('j%22s!('languageVersion!0~blocks!%5B-element_clickedC%23%2C'%2F'%3AxBMxqd%25Kll%5EkS%7CAG'~x!16~y!948EXT1!'when%20the%20element%20with%20id'~ID!'Q'~TEXT2!'is%20clicked')%2BHANDLER%22!-text_to_speechCk*EA)0%2C'OKT%60p'%3A0d5.cj%23'%2BVALUE%22!-get_input_data_with_idCFjSb%3B%7C4_Jb%24D6S%5BcK%40%2C%25'8YPE!'string'~ID!'text'))))))))%2C-get_randomWordC%2Ckewv1%2F6y45z_pmSZc_c'~x!37~y!2348YPE!'WORD'))%5D))~h!'%3Cinput%26text%5C'%20%2F%3E%5Cn%3CQ%26Q%5C'%3Espeak%3C%2FQ%3E')-('type!'8~fields!('TC'~id!'Qbutton%22!('block%26%20id%3D%5C'%2B~inputs!('%01%2B%26%22QC8-_

pedram-am commented 10 months ago

Buttons, inputs and clicks: a todo list:

https://blocks.codeyourfuture.io/share.html?v=('j%24s!('languageVersion!0~blocks!%5B*%2B_clickedQ.8l%60YzLN_%7Do3z_Kcj%23)z'~x!28~y!269TEXT1!'when%20the%20%2B%20with%20id'~ID!'%7F'~TEXT2!'is%20clicked')OHANDLER%24!*with_%2B_by_idQassTl7RPyu.UMv%5E8YvjY'9ID!'list')OSTACK%24!*add_%2BQ3CeFVmsCDi2pwW%3F%25tBte'9ELEMENT!'li')OSTACK%24!%40%5DZ%253%3A-G%60C%3F%60T%3B%3Dau(%7CFD'%22F%3A-%5DCoeyt%7BwlHHs%3A%5B1J3'9TEXT!''))~block!*get_input_data_with_idQ%2C'D%7Cn067cB1L%60%7DYt4%7BAm%3F'9TYPE!'string'~ID!'text'))))))))))))))%2C%40%2C%25Z(2AA(%235fjx5JE%2C'%5EY%5B'~x!24~y!254~enabled!false%22%2Ftg.c%5D'%3A%2C'MK%254NIclPd57'9TEXT!'CYF%20homework')))))%5D))~h!'%3Cp%3EThings%20to%20do%3A%3C%2Fp%26ulqlist%5C'%3E%3C%2Ful%26inputqtext%5C'%20%2F%26%7Fq%7F%5C'%3Eadd%20Todo%20Item%3C%2F%7F%3E')*('type!'9~fields!('O~inputs!('Q'~id!'q%20id%3D%5C'%22OVALUE!('shadow!*textQ%24!('block%26%3E%5Cn%3C%2Belement%40*set_contentQ%7Fbutton%01%7F%40%2B%26%24%22qQO9*_