AcadeCoders Blog 2016: Building Applications with JavaScript

3066 0

Building Applications with JavaScript

Welcome to the sixth week of the AcadeCoders session: Building Applications with JavaScript. This blog post will cover each daily activity of each camp day with various pictures and descriptions. JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers. This week will focus on using various JavaScript libraries that are tailored in creating animations and games.


Day 1: Tuesday, August 2nd, 2016

Due to the week starting off on a Tuesday, the AcadeCoders did not have their jiu-jitsu session. The AcadeCoders started off their morning with doing introductory games to get to know each other and to go over camp rules. Following this, the AcadeCoders began on learning the syntax and different JavaScript libraries to have an overall understanding of how animations or games are created. They did three mini projects to get familiar with the new syntax.

IMG_3511

story challenge

IMG_3516

useless button

IMG_3523

button animations

 

 

 

 
Following lunch, the AcadeCoders took to Morrison Park for outdoor activities! The AcadeCoders played various games such as kickball and soccer; while spending time on the play structure during free play

IMG_3529

IMG_3532

IMG_3558

IMG_3564

IMG_3565

IMG_3579

Following outdoor activities and free-play, the AcadeCoders were ready to learn about games and animations with JavaScript. The AcadeCoders were taught how to use buttons within games and transitions between characters in various games.

IMG_3512

transition salvation

IMG_3521

orange

IMG_3519

sun


 Day 2: Wednesday, August 3rd, 2016

Second day of the AcadeCoders building applications with JavaScript! The AcadeCoders started off strong this morning with a lesson and set challenges on 3D shapes. This is an important aspect of building applications with JavaScript as the most common animations and designs use 3D shapes and they are to be rotated or shifted.

IMG_3630

pic1

IMG_3616

pic2

IMG_3610

pic3

Following snack, the AcadeCoders were ready to head to Morrison Park for outdoor activities and free-play! The AcadeCoders enjoyed playing kickball, flinch, and soccer! In addition to this, the AcadeCoders had free-play on the structure and swings.

IMG_3619

IMG_3621

IMG_3622

IMG_3623

IMG_3625

IMG_3626

Following lunch, the AcadeCoders were ready to start their afternoon strong with the continuation in understanding the basics of animations and application development with JavaScript! They were given two challenges. The first challenge was to build a game of tic-tac-toe and they had use what they learned about grid and tile animations using JavaScript. The second challenge was to build their own memory game of their choice. They had the choice to choose the context of their flip memory game whether it was cartoon or movie related.

IMG_3613

pic4

IMG_3631

pic5

IMG_3633

pic6

 

 

 

 

 

 

 

 

 


 

Day 3: Thursday, August 4th, 2016

Third day of building applications with JavaScript for the AcadeCoders! The AcadeCoders started off the morning strong with finishing up any challenges they had left in learning how to create their own memory game using transitions and animations. Following this, the AcadeCoders were being introduced to learning how to build the application “Patatap“. Patatap is an application where you press on specific keys and each key has its own sound an animation. The AcadeCoders were taught to use Atom, a professional code text editor and how to use paper.js and howler.js for their sound and animations.

IMG_3726

atom1

IMG_3719

paper

IMG_3730

hower

 

 

 

 

 

 

 

 

 

 

 

 

 

Following morning snack, the AcadeCoders usually spend time at Morrison Park for outdoor activities and free-play, but due to the heat wave warning, it was best for the AcadeCoders to have indoor activities. The activity of the day was Speed Stacks, where the AcadeCoders were put in singles and doubles tournaments to see who has the fastest time to stack up and stack down speed cups.

IMG_3637

IMG_3644

IMG_3647

IMG_3678

IMG_3687

IMG_3697

After lunch, the AcadeCoders were ready for an afternoon filled with application development with JavaScript! They continued with learning how to build their own Patatap games where they were taught file structuring, how to bind an HTML, CSS, and JavaScript files, and how to implement paper.js and howler.js within their framework. Following this, they were taught the syntax used for both paper.js and howlers.js due to them being different even though they both derive from the JavaScript language.

IMG_3716

paps1

IMG_3721

paps2

IMG_3722

paps3


Day 4: Friday, August 5th, 2016

Fourth and final day of building applications with JaaScript for the AcadeCoders! They started the morning by teaming up with AcadeCamp for outdoor activities and free-play. The AcadeCoders had a great time at the splash pad while participating in organized sporting activities and free-play.

13898529_10209234916090888_1313248747_o

13901631_10209234915330869_1132329905_o

13902180_10209234913890833_1759779696_o

13931681_10209234914890858_2049716422_o

13932343_10209234914690853_1302920219_o

13939995_10209234913850832_1115790194_o

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Following outdoor activities, splash pad, and free-play at Morrison Park, the AcadeCoders had lunch and enjoyed ice cream bars to cool them down from the warm weather. After lunch, the AcadeCoders were ready to continue on building upon their Patatap game. They added the howel.js library and use the correct syntax. In addition to this, they added the correct functions for the animations.

IMG_3738

m1

IMG_3734

m2

IMG_3736

 

 

 

 

 



m3

 

 

 

 

 

Once they finished the code, the AcadeCoders were then ready to deploy the application with a cloud-based service called Cloud9. Cloud9 is a cloud-based development environment for coders to create applications and websites, while share and work with other developers.

IMG_3735

9

IMG_3737

c9

IMG_3740

aft1

About The Author

No Comments on "AcadeCoders Blog 2016: Building Applications with JavaScript"

Leave a Comment

Your email address will not be published. Required fields are marked *