Allthough I missed the first few classes of our CS class I feel like I have a somewhat strong feel on the design and emphasis of the class and html. I understand that allthough it may seem kind of easy when you know what you are doing, sometimes it can become very tedious when there is a mistake and you are struggling to figure out what is wrong. Overall I am very excited for this class and can't wait to get a firm grip on CS and html.
So far in Computer Science I have been working on making a solid frame and foundation for my website. That includes making the main page be the home page which can acess other subpages, for example, my projects, my journal and a page about myself. Although I have not really added to these subpages since I have been focusing the majority of my time on making a framework that is presentable, I plan in the near future to have these subpages contain information about my computer science experience and also store other projects that I create going forward.
Although I was out about a week with a concussion and I still have stuff to learn, I have been able to make a strong website that I feel I can now proudly present. It has been hard to be able to keep up in the class with how many classes I missed but I still feel like I have a solid grasp on the material. I hope to catch up further and be on par with everyone else when we start doing javascript. Although javascript does seem hard, at the same time it seems like there is a lot of interesting and fun stuff that can be done with it. All in all I am excited to be able to code more exciting material.
I think my code works by writing a command in the code, in this case 'hover,' and then in my code I give it instructions to perform when the command of 'hovering' is done. In this annimation, when I hover over the first image it makes a whole rotation for 2 seconds and transforms into a new image, in this case a gif. I decided to make this annimation because I wanted to see how the transition would happen and if it would slowly fade into the new image or just switch without a smooth transition. I thought the switch of images would look cool when there was a rotation. Kind of if the rotation was changing the images.
An event listener is the way to say what you want to do in your function in order for your action to run. For example this can be like a click of your mouse. An event is the attributes of where you make your action (like a click). You get it to show up in the console by saying "console.log(event)." In order to get into one aspect of the event you want is by saying, "console.log and then writing which specific aspect you want to occur." This is done by saying "event.(which aspect you want)". This basically means go from the whole event page down into the specific part you want.
For my third project, I was tasked with creating a card that played music using event listeners. To do this we had to come up with a way to make it so when we clicked once it, the music played, but when we clicked again, the music stopped. We did this by making a function that said when our click had a remainder of 1 when dividing by 2, the song played and when our click had no remainder when dividing by 2, our song stopped. This is basically just saying that on an odd click the song plays and on an even click the song pauses. Originally I was going to add a image that appeared and disappeared the same as the song, but when I did it I realized I thought it would be better if it was always there. The one frusturating thing about making it was actually positioning the image. Everytime I tried to make it stay at the center bottom of the page it would always stay at the top. I fixed this by watching one of Molly's videos and found out the correct commands for how to position it.
Basically how this project works is that your creating a function "makeSquare" with the input x. The variable in this function is a square and in that variable contains the styling for the square. We then have a second function that gives the squares a value of i. In this function we can say how many squares we want by setting a starting and ending value for i and then saying how much you want i to count by. I set i to start at 0 and to go up to 20 by incriments of 2. This creates 11 squares with the style provided. In order to change the style of an individual square, I copied and pasted that original function, except changed the background color from red to green. In order to set which square I wanted this to affect, instead of setting the input to i, I set the input to i=0 so the first square gets affected by the style change.
For this project I made a Christmas array. Basically what I did is I created a green background and an array of red names (these are the names of my family, including my cats). Basically this array works because: first we are establishing the names to equal "myNames". We are then establishing, every time we click, a random number (0-1), which is then multiplied by 6, and rounded down, this is equal to "names". We then establish that "names" and "myNames" are equivalent. Then what happens is a random number is selected, and that number corresponds with a name, and then that name is displayed on the website.
For this project I wanted to make a Valentine's day card for my mom. To do this I made some divs for background images and text. I then made an event listener that added a heart everywhere I clicked.
For this peoject I made a truck that moved left, right, up and down, corresponding to which arrow keys were pressed. Originally Molly helped us make it go right, but she did not disclose, and left it to us to figure out the rest. The first thing I did was program it to go left. To do that, I was able to keep everything relatively the same, except instead of adding 20px to the left position, I subtracted 20px from the left position and this made it go left. I then used this same code for the up and down except changed it from the left position to the top position. This kind of worked, except when I would switch from left and right to up and down, the truck would oddly reset at a position towards the center. After a few minutes of troubleshooting, I realized that I used the same variables from the left and right and the up and down. This made it so when I changed, it would start the up and down from where the left and right ended. For example, if I moved the truck to a positon (100px, 0px), where the top left corner of the screen is (0px, 0px) and the x value is right and the y value is left, when I would move the truck to this positon and then use the up and down arrows, it would start moving up and down at the position (100px, 100px). To fix this problem, I just changed the up and down variable to y so that I had two different variables.
For this project I had to make a project that incorporated one part of the circle's project that Molly had showed us in class. Thus I chose to make a project where a div followed my mouse wherever I moved it. I did this by creating a div which was just a 100px blue square. I then made an event listener where the console tracked my client x and y and moved the object accordingly to the x and y position of where my mouse was on the screen.
For my final project I decided to talk about my year in CS1. Although it was filled with ups and downs with me being out of school and in turn being behind, CS1 taught be a lot. Whether it be about Computer Science or life in general CS1 taught me to be better. I am especially grateful for how it helped me as a person as it served as an escape from the hardships of school and just be able to sit in a safa haven for 50 minutes where we could just be ourselves. This is a huge thank you to Molly as she really helped me with mental health and is a big reason for how I finished out the year strong.