So far in Computer Science I have learned the background of HTML. I have learned that it is a sandwhich language, using angle brackets, and that the second bracket alwas has a slash before the command. The two sections main sections are the head and the body. The head is where you style and give character, such as size, color, opacity, and design, to what you put in the body. In the body there are divs. These divs are where you add to the code. For example, if I wanted to add a square I would write div id="square" and then style that square in the head. I enjoy the struggle of firguring out a difficult problem. However, I feel I know little about the language and am sometimes frustrated in class.
Mood meter at time of writing: :)
As the year progresses and my website begins to take form I am feeling nervous. Every time I go to write a peice of code it always takes me a while to debug. Even when I try to research the answer online often the code the suggest just leads to other problems. However, I am learning a lot. I have learned the difference between a id and a class and how to call upon them in the head section. I learned how to apply padding to text or an image, use rgb to defines colors, and apply background images. However, my image repeats many times on my website and I would like it to take up the entire screen. When I attempt to do this my menu bar does not work. I want to add things to my home page on my website but everytime I do somrhting else fails. For example today I tried to add a title to my website but when I did my menu bar dissapeared and the links lost all their styline. SOmething cool that I learned was how to call things from desktop into my code and then they can be hyperlinked not from the internet but from my desktop.
Mood meter at time of writing: (^_^)
The animation I made is a square that both changes color and moves using keyframe. I set a div for the animation and then named the animationa and then depending on the percent of time through the animation the square moves. I learned that animation-iteration-count, and what position-relative means as well. Using inspiration from the web site it made it much easier to learn how to use keyframe. When it did not work I was able to work through the problems and use website to see where my mistakes were.
Mood meter at time of writing: (^'_'^)
The mouse follower I made uses and event listener. It is a pre made function that track the actions I make including where my mouse is. WHen my mouse moves it notifies my computer to move the "box" div I created to my mouse. I subtract 80 pixels from my mouse locations so the image is centered on my mouse. I am very interested with using other functions in event Listener especially kep press to make new games.
Mood meter at time of writing: (^!^)
My code sketch is a program that allows the user to draw using hearts. I was struggling what to design but allowing for user interaction and creativity seamed interesting. To make this project I combined code from my image duplifyer and my mouse follower. I made it so that every time they click a new div is created which is styled to be a red heart. I imported an event listener so the heart always goes to the mouse and console logged the x and y coordinates of each click to help debug the code.
Mood meter at time of writing: :(
My square quilt did not go to plan. It worked based on styling a square inside a function. The function made a square with background image x. X Then below there was another function that made a square a certain amount of times. it ran through a loop s the variable I represented how many times the loop had ran. I named an image after each number starting at 0 so each time the function ran the correct image was used as the background. Then I incorporated a event listen to change the background. I wanted for the square quilt function to run each time i clicked but could not igure it out. I tried multiple strategies but I think I must have been missing a component.
Mood meter at time of writing: (.^.)
My music player at first did not work but after making a lab I quickly figured out my mistake of calling on the wrong variable. it works by logging the click and if the click is odd it pauses and if it is even it plays.
Mood meter at time of writing: (@:)
My array took a lot of work but in the end it worked. I wanted to be able to stop and pause the scrolling of the breakfast options. I did not know hot to do this so I asked Molly and she did it for me. However, after making a lab I now understand how and why it works and can use these concepts in the future.
Mood meter at time of writing: (:))
My valentines works my generating a div 100 times. In order to position it randomly I used math.random and muliplied by how many pixels I wanted its range to be. The hover works by making the opacity zero but when you hove the opacity becomes 1.0. You click and then a bunch of smiles generate but you have to go looking for them. I learned that I did not want to put the function inside the event listener but make the function and then when it clicked run that function 100 times. I enjoyed this project and my card is versatile and it can be used for anyone who needs it.
Mood meter at time of writing: (:!)
Moving car at the moment is just a square. At first we make a blue square and make its position absolute which allows it to move around the screen. This correlates to the div in the body titled buggy. We set the left, an attribute of buggy, to 0px. We then used a new function called parseInt which makes an output into a number that we can use later in our code. It turned buggy's left from lets say "10px", a string, to 10. We used parse into to make a variable x which equalled the numerical value for buggy's left. Then we made an event listener with the premade function of key down. We did not specify which key had to be help down so when we are on the document and any key is held down the function will run. When the event listener's function ran x, the left, became x+10 moving the left 10 pixels or the blue square 10 pixels to the right. When a key is held down the square moves repeatedly. This is the part I still have a question about as I do not know why the function is running again and again. Also, if it is repeatedly running at what interval is the function running when a key is held down.
Mood meter at time of writing: (:-(
I was very proud of my circls prject as I knew how to do it with little help. It works by followin the mouse with an event listener on mouse move. The color stwitches every set interval and the rgb values are numbers I generated randomly.
Mood meter at time of writing: (:()
My presentation is okay. I was very stressed this week but I did meet all of the requirements. My three features are font color, font size, and a fade transition. It was nive being able to look up how to do somehting in example code but when I copied and pasted the code it didn't seem to work. Hoepefully I can get better with this new tool.
Mood meter at time of writing: (:()
My final project was on a mothers day card. It was inspired by a show that me and my mom watch together. It uses an event listener and then changes the opacity. I thought the project went well and so did the presentation. I was able to keep the presentation personal while explaining my project.
Mood meter at time of writing: (:))