July 2022 IT Workshop
Instructor: Jennifer Dong
Instructor Assistant : Jacky Xiao
Student learned how to make web form UI using HTML , JavaScript to and use Google App scripts to handle http post back events
The students learned how to program HTML code to make a CRUD web app interface demonstrated in the picture . HTML is a type of web programming code designated to construct the interface of the app. From the workshop, our members learned how to correctly construct HTML code with proper grammar to add text and various functions to the web page to represent text, images, or even non-visible components such as Grammarly, etc. Students also learned how to collect information from the web app and added new students into google sheets.
As demonstrated in the right picture, we successfully added and modified text, which the special phrase used for demonstration such as “EFAQSFASD” are all texts added through HTML code from the above.
Student also leaned how to use Chrome Dev tool to trouble shoot
We learned how to identify the error by examining Elements, Console , Source. Networks Tabs of Del tool
Student learned how to make use CSS to transfer web UI
At the last day of training, the students learned how to transfer web UI from one look to another look using CSS.
The students then have to use Google App Scripts to code necessary functions that will input the information into a google sheet and also display the google sheet on the crud app.
For example, students learned how to program this function that can add records directly into a google sheet. The logic of the design is to first to get the information of name, grade, email, and COT class as the parameters from the function. The function uses an if statement to check if students inputted any text in the name. If not, then the program will not send student information but notice the student that he or she didn’t put the name.
The function also uses a loop to check all the rows in the spreadsheet to see if the student exists by checking if the student name or student email is redundant within the program. The app will print messages to student exist to inform the student have already put his or her name in the form. If no abnormalities were found, the app will successfully send the information to the spreadsheet.