This year, I started learning Javascript in the Web Development class I am taking for my fall semester of sophomore year. I’ve experimented with it once before, specifically using React, during the Nueva Hackathon in 9th grade. My team and I coded more than 600 lines of Javascript in React Native in a matter of two days in order to put our app together, and though it wasn’t completed we had a solid working interface and an entire page of the app done.

The codes that we worked on during the hackathon, though not completed, can be found here.

I realized that I enjoyed the process of making websites/apps, so I decided to take the new Web Development Class. I’ve done a couple of things so far.

First, I spent around two weeks experimenting with the Canvas option of Javascript. Canvas is what the name implies—a canvas to paint on using code and to play around with. The coding was relatively simple, as far as Javascript goes, easily beginner level. I experimented with console.log, objects, object constructors, arrays, functions, and loops, and making shapes. There was almost no HTML used, and practically all Javascript.

It can be found here.

My next project was another two week project that involved taking what I learned before and making a small game with a working interface and GUI. I decided to create a typing game that this time I would deem as between easy and medium level, because of the interface. It involved a lot more HTML and signals, and moving parts that had to work together. I used buttons, alerts, keyboard clicks, objects constructors, arrays, functions, and loops. In the end, the point of the game is to get the ball on the canvas to the bottom of the screen by typing the words in correctly. If the word is typed incorrectly, then the ball moves up.

The code for this game can be found here.

After this we started moving more into React based coding after a background in Javascript was established. We first followed a tutorial on React online that helped us make a Tic-Tac-Toe game in order to learn the basics. Some background: React is basically a coding platform that mixes Javascript and HTML into one file so that you don’t have to outline the Javascript separately in a file: they mix together. The tutorial is an excellent beginning to React—it taught us all of the basics of React and gave us a good framework for improving in the future.

From here we moved away from front-end and into backend. This was basically our first full on Fullstack project. We had a couple of weeks to edit this into a different app, but I got sick and ended up using the original calculator code.

Making a back-end has several steps. First a testAPI file has to be made in order to put down the POST, PUT, DELETE, and GET functions. These are basically functions that the main code document pulls in in order to add stuff to the main database. We used MongoDB to host the database, which again took us a bit to set up. From here we have to make a schema for our data and then code these database functions into the main code. For example, in the tic-tac-toe, whenever I made a move, it had to POST to the database in order to retain the information. A POST is basically like a save. A GET takes something from the database, a PUT puts a new schema of data into the database, and a DELETE removes something from the database. This all has several steps that are done in several files.

My Tic-Tac-Toe game, complete with both working frontend and backend, can be found here.

For all of this to be done, I had to use a lot of terminal. I don’t recommend the original terminal computers provide, but iTerm, an Apple program that is much better in my opinion. Definitely I had to understand how to at least navigate around my laptop using the terminal instead of the regular User Interface (UI), which I already knew how to do. This made me adept at commands such as ls, cd, mkdir, and more.

My final project was a repeat of my previous React project, but this time I had more time. I was told to create a program from scratch and give it a fully working front end and back-end, with comments and annotations on what part of my program did what. This time I created a pixel art app similar to ones on the apple store—coloring in squares in different colors, but allowing one to make their own artwork. It went fantastically. I got it working and saving to the database all the way, and am currently working on retrieving old artworks. This project was a lot more fulfilling, because I had to think of an idea and execute it from scratch without the help of a tutorial. I also explored a lot more CSS in this particular code.

The code can be found here.

The class was definitely an advanced coding class, though beginners could enter it. We worked in Javascript, HTML, and CSS, and I found that people with previous coding background fared much better than the beginners. I found it incredibly interesting, and though I didn’t plan on taking another coding course during the spring semester, I ended up signing up for Intro to Algorithms just because I enjoyed this so much.