Though this coding process I have learned a lot about how computers function and the difference between what is going on beind the scenes verus the interface I use. Through the terminal going in and out of files was an interesting expierence. Understand that double clicking on a file is just writing the code cd ./file name is crazy. I have also learned about html and that it is a tag based language, meaning that you have tags that set up a form for how the following code has to be written. Also in the video, I leaned a lot about how to edit text for example I can emphasize words. The coding process so far has been a little challenging but very rewarding when it goes right.
This week I learned about making a menu bar. This included the use of buttons and links. I learned that you can classify divs. By classifying them they can act as something like a button. In addition you can use < a href > to link something. This allowed me to link my journal to my menu bar. Also I wan't to learn about positioning divs on the page.
I learned about JavaScript animations. This allows you to make something that repeats. I made an animation of a team mate scoring a touchdown. It repeats infinitly. I plan to add other players into the animation so it looks more realistic. We used the code keyframes to do this. We did this in the style section by changing the language to javascript and making keyframes. Keyframes are points in the animation and guides movement. For this particular project I animated two things, one the player and two the ball. Using keyframes I set specific points to get to in a certain amount of time. This allowed me to change the speed of the movement or how a div would get from the first keyframe to the last. If we just had the first and last it would go in a straight line. By adding more and more keyframes we can adjust how the path with change between the start and the end. One of the challenging thigs in this was timing the two animations up. I needed to have the ball start offset to the player and time the animation so the ball travels at a realistic speed compared to the player. That meant waiting for the ball to move ahead of the line of scrimmage until the player was almost done with the route. At the end I had to spend some time to make it that the ball would look like it was in the players hands. To do this I positioned them as absolute instead of relative.
We made an image follow our mouse. This is part of learning about javascript. To do this we used an event listener. The listener acts upon a mouse move. This could be replaced with a click or key pressed. These functions are something that are already created in a library. To have the image follow the mouse we used the mouses x and y positions. We set the left of the image to the x cooradinate of the mouse and the top of the image to the y coordanite of the mouse. This allows the input to always be changing and keep the image moving. We used div to be this image. I styled my div in Css to have it have certain qualities. Not be too big or small and choose the image.
The next thing in Javascript we have worked on is if statements. In practical use we used the if statment to have something happen on an input and when the next input occurs another thing will happen. To do this we have to know how many times the mouse has been clicked (event we are making our input). To do this we used the console log function. To count the number of clicks that have occured we used a variable. The variable starts at 0. Everytime the function is run (mouse click) we reset the variable to the current value plus one. To document this we used the console log to record the variable value. To determine what our if statments act on we need to determine whether the amount of mouse click is odd or even. We need to do this so it can turn on on the first click and turn off on the next click. We want a sound (could be any thing) to play when the mouse was clicked and wanted it to stop when we clicked again. To determine if the amount of clicks was odd or even we divided the variable value by 2. If the remainder is 1, the sound played. if the remainder is 0, the sound paused. These was achieved using two if statments.
The next project I made was a square quilt. This is a function that generates squares throughout the page when you click. For me I decided I wanted those squares to be album covers. Onevery click I would have an album cover be added to the page. In addition, when your mouse went over the album it would change what album it was. To this I made a function and two event listeners. The Function called make square used a variable square which is a div in the body. In the function it uses javascript code using square.style followed by traits and values. Through this process I can make the div be 200 by 200 px have a 1 px border a 10px margin, a background color of blue, and gave it an image. In this function I added an event listener for mouse enter. This triggers when the mouse goes over the div. When this event happened I had it perorm another funcion which changes the background image. To run all of this I used an event listener for click. On click it ran the function. When that happens when you click the funciton runs.
This entry is for making an array. An array is something that will randomly select a value. In this case the value is a breakfast food. To do this I made a variable with multiple value listed. These values were the names of different brekfast food. Then I made an event listener. This allowed a function to happen on my click. In the function I made another variable to make a random number. We used math funciton that were already in the library. We used Math.random which selects a number between 0 and 1. Because we had six values we multiplied this by 5 (we do this because in java script the first value counts as zero). Then we rounded this number to the nearest whole. That means every time you click the function will generate a random whole number between 0 and 5. Then in the function we added the word. I made a div to put the text inside. In the function, we changed the divs inner text to be the breakfast food that corresponded to the random number created. With this code everytime you click on the page the website will generate a random 1 of the 6 values for breakfast food and type it on the page.
One of the first functions I made was a function that made divs. To do thsi I made a variable to keep track of how many divs were created. This variable is set to zero outside the function. In the function I make the another variable that makes a div. Then it makes a hundred dollar bill and sets the variable that keeps track of the divs to the current value plus one. This allows me to display how many divs were created, or on the website how much money is on the screen. This function is run on an interval of half a second. Meaning that every second two hundred dollar bills were created.
Project Euler gives math problems that would be very annoying to deal with if you had to do it by hand. Though using javascript, we are able to do these problems very simply. The problem I choose was "What is the sum of all the multiples of three that are less than 1000" To do this problem I made a variable that counted the sum of the numbers. The function goes through all of the numbers between 1-1000 and every number divisible by three is added to the sum. when this function is run you are left with the answer.
For Valentines day I made a card for Jamie. This card had two seperate parts. The first part was a heart that follows the mouse. This heart spawns divs in every new place it is, though to make the screen not get filled I added a part that deletes the div two seconds after they were made. The other part is an array that has compliments and every time you click a different compliment shows up. I ended up having to change part of it because the heart blocked the mouse, now allowing me to click to activate the array. To fix this I used a new line of code called the z-index. With the z index I brough the array forward and the heart back. This made everything work well.
This journal entry is to sum up my experience from the enitre year. I came into this class only knowing how to do block coding like scratch. In the first week we created a github account and made a webpage. After experimenting with different styling techniques, I was able to make my home page and first project. We were then introduced to JavaScript and how to create functions. This was one of the biggest moments in the year because it allowed me to expand what I could make exponentially. When we approched the end of the year we used a program called reveal . js to make slideshows, which were ultimatley used for our final project. Through the course of this year, I went from knowing nothing to being able to create anything I wanted to, the only limit being ideas.