VID 38 - Data from Canvas Form - Learn JavaScript with Creative Coding - fun, colorful and free!
Channel: ZIM LEARN
Date: 2020-04-02

VID 38 [Lesson 09 - Data] - Dr Abstract teaches JavaScript on the Canvas with the following topics:
0:00 - intro to creative coding video 38
0:09 Dr Abstract counting to 123 in a Canvas Form! 
0:35 review of videos 
1:28 canvas code in ZIM template 
1:56 Bind object 
2:54 different than last video - just sending data 
3:28 review of the form parts name, color, count, submit 
3:58 the name field and wiggling the label
5:02 TextArea - trying out the placeholder - and TextArea issues 
6:23 binding to TextArea .bind("name", "text"); id and properties 
7:26 Emitter() sneak info about ZIM VEE (Pick) for ranges, random, etc. 
8:57 Stepper() activates emitter
9:19 Bind options - how to target specific binds - objects, ids, to, from, etc. 
11:00 ColorPicker 
11:14 Button press!  All the action - check for name and if none, pop Pane 
11:49 bind.to() and bind.toLock() discussion (but not used here)
14:33 Tower Talk example with respect to locking records for sharing JSON storage 
16:03 the filter! Adjust data before to data gets sent - or at a couple times in from()
18:27 filtering the color before sending - ZIM color 
20:53 data.report() for saved data - not for data going through filter (long story)
24:22 callback function to show the results
25:35 Accessibility for the Canvas components - screen reader ready 
26:20 PHP code - quick review and reminder of the commented files 
28:15 collecting the data - just JSON in data! 
28:44 json_decode() in PHP to turn string into PHP object 
29:17 json_decode() to PHP Associative Array (not used in this case) 
30:17 PHP Objects dash greater than instead of dot syntax
31:27 looking at the data and its information - ZIM Bind format 
32:44 Database table - auto incrementing id, name, count, color fields 
33:30 INSERT query and binding client data
34:35 storing separate data fields or storing single JSON object? 
35:34 executing query and reporting back
36:36 Dr Abstact dancing - conclusion to data lesson!
36:56 Join us at https://zimjs.com/slack and https://zimjs.com/tower ciao!

Full ZIP File: https://zimjs.com/skool/data.zip

The Learn JavaScript with Creative Coding is a video series to help left brain and right brain learners explore the wonders of programming using the fun, colorful and friendly HTML Canvas and ZIM.  Dr Abstract is a Canadian New Media Awards winner for Programmer and Educator of the Year.  He will teach the basics of programming in JavaScript from the ground up so welcome designers, artists, engineers, developers, and all.

The video lessons are supported by ZIM Skool at https://zimjs.com/skool and make an excellent introduction to code at a high school and college levels or for the #100DaysofCode movement and workshop organizations like #CanadaLearningCode.  Younger students can go to https://zimjs.com/kids.  

We hope you share these lessons with friends, family, work colleagues and any aspiring creators!  Cheers, please subscribe, share on social media and give the videos a like if you have likes to give.  You are welcome to join us at https://zimjs.com/slack/ to ask questions, discuss code and share examples.

Thanks to BigTRBL - DJ at Shaolin in Hamilton for the intro tune!

Cheers from #LearnJavaScript with #CreativeCoding and #DrAbstract founder of #ZIMjs