Coding Journal

Sam Klein

Journal Entry #1
Q: What you have leared so far — about bout the structure and syntax of html and css, about how coding has made you feel so far, the terminal and the graphical user interface

So far, I have learned a lot about HTML, CSS, and coding in general. The biggest thing I have learned is that coding requries very specific inputs to make sure what you code does what you intend. I also learned that if something doesn't work, there is probably a very good reason like forgetting a semi-colon or bracket.

Its very exciting writing things down on an empty sheet and seeing it come to life on a website. Coding has made me feel exciited, but also confused at times and everytime I do something, I know there is a lot more to learn and imrove.

I also learned about what computers and interfaces used to be like before the invention of a GUI. Its hard to believe that all computers looked like the terminal and you had to manually type in each action. I found it interesting how Xerox's lack of capitalization on their new idea lead to some of the biggest companies in the world today

Journal Entry #2
Throughout the class I have also learned that what you write and where you write it is very important. Every piece of text matter, especially semi colons. I also learned that it takes a while to figure out why things are working, and it is possible to solve things on your own. So far, most of my issues in HTML have been because I forget to add a ; or bracket. So far, the most fun I have had coding is when I figure out a problem on my own. There are also some parts of coding which I haven't been able to fully understand yet like some of the positioning of different elements on the website. It was really difficult trying to allign the bar at the top of my screen because it kept changing with the dimension of the screen. I am excited to keep learning about HTML and hopefully I will be able to fluidly write code one day when I have a vision of what I want something to look like.

Journal Entry #3
I think my code works because it follows the program is was written in to. If it didn't follow the specific syntax of the coding language, it wouldn't have worked. I chose to make the animation I did because it was simple, but also demonstrated my ability to make one. I also liked the colors that it was changing too and how it looped around the entire screen and not just one corner. The website that was on classes which showed how to make the animation was very helpful and it was really easy to follow the instructions to make something cool and unique. I also made it loop back around so it kind of looks like it is boucning back and fourth against an invisible wall. I want to learn how to make my buttons on the top of my screen that link to other parts of my website more animated. I am curious how big companies and cool websites code their websites and if it is similar to what I am doing on HTML.

Journal Entry #4
The last code sketch I did was an event listener which made a picture follow my mouse. It was cool having to figure out what went wrong with my code when it wouldn't work for a while. The picture then started to follow my mouse, but would do the inverse of where the mouse went. If I brought my mouse up, the picture went down and so on. I went back through all my code and then looked in the console to see what was happening when I was moving my mouse. The event listener was still tracking my mouse movement, but I had mixed up the X and Y axises with the top and side of the picture on when to move it across the page. The X and Y was messed up in the event listener so it moved the picture to the opposite side as my mouse. I flipped the X and Y in the code and then the picture started to follow my mouse. I then adjusted the transition time in the div style of the picture from 2 seconds to 1 second to make it more responsive. Another issue I ran into was that the ball had a backround even though it was supposed to be transparent. Overall, I think event listeners are a very helpful thing to know how to use and I will countinue to try getting better at using them.

Journal Entry #5
For my code sketch, I made a baseball that is pitched and when you click on the screen, you hit the ball into the field. It then displays the text, "Single!." It took me a while to make the whole codesketch even though it is pretty simple. The most difficult part for me was making the event listener make the ball move into the outfield when you press down on the mouse. At first I made a seperate keyframe and tried to somehow attatch it to the ball div, but it wouldn't work and I got stuck. I kept looking up different ways on how to make something move through an event listener, and I ended up just using one keyframe animation which was the ball pitching from the mound to homeplate. I then made the eventlistener edit the style of the ball div to make it go into the outfield where I wanted it to be hit. The ball glided there because it was still going through the keyframe when it's top and left location was changed. I know there is probably a better way to make it work, but I haven't figured it out yet. The main issue with the codesketch is if you don't click fast enough, the ball will not be part of the keyframe animation anymore so it will instantly teleport to the location in the outfield. The next step to improving the code is making it two seperate animations so you don't have to do it in the alloted time from the keyframe. I also want to make the location of the ball going into the outfield random and make it so you have to click specifically on the ball for it to move.

Journal Entry #6
For the quilt box project, I made a timeline of different Yankee teams over the years. The loop to make the different quilts works by creating a loop that creates a box until the limit is hit. The limit is creating by only making more squares while the variable is less than 24. In order to add the pictures to each box, I labeled photos with a the number that corresponded to each box and .jpg label. I then placed those photos in the folder that my website was located in. I am working on improving the codesketch by adding elements that make the photos lower in opacity when you hover over them. I am working on creating an event listener that to make this happen. The main issue I have ran into is that I am not sure how to make one event listener that changes all the boxes at once.

Journal Entry #7
For my next project, I made a birthday card to my Dad. In this card, I incorperated a the function that lets you make a floating birthday hat become transparent or not. The floating hat is made by a keyframe that moves it around the screen. One issue I ran into was that at first the hat would not become the backound of the keyframe, but hten I realized I put the image on the wrong div. This project uses similar elements as the project which starts and stops a song.

Journal Entry #8
My array project helps me decide what I should get for breakfast in the morning. My favorite meal of the day is breakfast and I love almost every breakfast food! When creating this project, one of the problems I ran into was using math random. To pick which random food to display, the code uses math.random and math.round to pick a random number and round it to a whole number. At first, I did not understand that there were two different functions, and just put two math.randoms. I then discussed the problem with Molly and she helped me change the function from math.random to math.round. I also had to change the number that multiplies the random number to the amount of options in my array.

Journal Entry #9
For my valentines card, I utilized previous projects to create something for my Mom. I used an two different event listeners to create a heart trail on the mouse and a function that changes the backround when you click. Combined with the second event listener is also an animation with a floating heart. It was challenging to create a consistent animation. It still is not perfect though because when the tab is minimized, the animation goes off the screen and into nowhere. I am excited to send the project to my mom!

Journal Entry #10
For my circles project, I used the skills I had already developed to make the colorful and following part of the project. Overall, I knew I wouldn't be able to completely replicate the orginal circle sketch. This sketch had lots of circles that coordinated together to expand and contract depending on how long the mouse stood still. They also all followed the cursor and changed colors. Of those three components, I knew the two I would be able to do is make it rainbow and make it follow the mouse. For this project I only used one circle, but I most likely could have figured out how to make lots of them all rainbow. I used the function math.random to make the colors rainbow. I selected a random number between 1 and 255 to repesent R, G, and B. With all three of those numbers being random, I then added an interval to make them change. After the interval, I ran the function. To make the circle follow the mouse, I added an event listener that listened to the mouse moving. I then added the left and top styles to the event listener so that they changed depending on the x and y of the cursor.

Journal Entry #11
For my presentation, I wanted to incorperate a few of the features that I learned from the demo of reveal.js. My topic was why the Yankees are the best team in baseball. I had five slides that used the up and down feature of reveal.js. The first two slides were able to be skipped to by using the up and down arrow keys. I also had a backround for each slide.
Journal Entry #12 For my final project, I wanted to relate a few of my interests, playing google doodle games and baseball. Through my previous use of reveal.js, I used different functions in the code to create my slides. In part of my slides, I made it so you used the down arrow keys to go to the next slide. I also incorperated different color texts and backround images. The project I chose to present for my final presentation was my attempt to create a google doodle-esk game. I based it off of the baseball google doodle which shares many qualtiies as the cricket google doodle. The pitch is first thrown by the pitches and as it travels to home plate, the player has to press on the screen when it travels across the plate. If the batter waits too long to press on the screen of presses too early, it is a strike. If the batter times the pitch well, it is a hit. I was able to create the key elements of the game in sublime text so it is playable. While there are not 3d animations of intricate scoring systems in my game, it is still reminiscant of the google doodle. I had fun working on it and it had been an ongoing project for me all year. I enjoyed the computer science this year and it was great being able to work on a project that I had interest in and combiend my passions.