SISP






JS Logo

SISP (Senior Independent Study Project) is a project that every Mass Academy senior takes part in. Each senior chooses something that they would like to learn, whether it is baking, learning to play piano, drawing, coding, or whatever else. However, there must be enough material to learn, as the project is one hundred hours long.

For my SISP, I chose to learn JavaScript, which in addition to HTML and CSS is a major web development language. HTML controls the content on a webpage, CSS controls the look of the webpage, and JavaScript controls the behavior of the webpage. When I was in eighth grade, I learned HTML and CSS, and I really wanted to learn JavaScript, but I never had time. SISP was the perfect opportunity for me to finally learn this language.

Codecademy Logo

For the first 33 hours, which I did over October Break, I used Codecademy's JavaScript course to learn about the basics of JavaScript. I learned the syntax of things like loops, conditionals, variables, objects, functions, arrays, etc. I already knew these concepts from Java, and the syntax is mostly similar to that of Java, but there are some differences. For example, there are several ways to create functions, and there are no data types. JavaScript is also much more relaxed in syntax. If you forget a semicolon at the end of a line, JavaScript does not care. It also does not care if you declare a variable before you use it.

As I was doing the Codecademy course, I realized that I needed to calculate how much time I spent during each session. Instead of having to manually calculate the amount of time, I decided to create a JavaScript program that would calculate the time for me. All I would need to do is plug in the start and end time of a session, and the JavaScript will print out the elapsed time in addition to the total amount of time I spent over the entire year.

I also added a small amount of JavaScript to this site. It can be seen in the navigation bar. As you scroll down past the header picture, the navigation bar will turn from clear to blue, and as you scroll back up, the navigation bar will turn from blue to clear. Even though this flourish seems simple (the code is also quite simple), it took me awhile to figure out how to do it properly.

Piano

For the second 33 hours, which I did over December Break, I created a website for my piano teacher. She wanted some recordings of me playing the piano before I graduate, so I decided that the easiest way was to create a website with all the recordings in one place. In this website, I learned how to make pop-up boxes using modals. In these modals, I put YouTube videos of me and others playing. I also used the YouTube APIs to stop the video when the user closes the modal. In addition, I used JavaScript to resize all the elements when the navigation bar opened or closed.

GOM Logo

For the last 33 hours, which I did over March Break, I created a parody of the Game of Life (the boardgame), called The Game of MAMS. Instead of having events that one would experience in real life, I filled the board with events which Mass Academy students may come across during their time here. Unlike the previous things that I did, which used, JavaScript as flourishes, this project consisted mostly of JavaScript. I learned how to draw and animate elements, and I got more comfortable with event listeners. Coding this game also made me realize that JavaScript code can get messy really easily. Because JavaScript is so relaxed in terms of syntax and the fact that event listeners are code isolated from the rest of the code, JavaScript can be pretty hard to follow.