Today we coded from the back side of our computer to connect our websites to the web. We used github to connect them and coded on terminal to publish our websites.
How to add things to my online version of my website.
Today I worked on my birthday project and made it so that when I hover over one image it turns to another. I also added a table to my homepage so that the objects do not move when I am not in fullscreen mode.
Today I learned how to make an animation using percentes. I also learned how to make my texts be highlighted in different colors.
Today I worked on my jumpscare project for Halloween. I used event listeners to make it so that when I click, an image displays. I did this through having the images opacity set at 0 but when the event listeners function is clicked the opacity becomes 100% so the image appears. My jumpscare is that when you click on an amazon box to "open" the box a cockroach comes running out. My second jumpscare is the crawling bug noise that is made when the cockroach appears making it sound like the bug is coming towards the screen.
3 questions about the event listeners video:
Last class and today I have been working on my greatful/thanksgiving project. I used the event listener "click" and opacity so that when I click on the screen another image shows up. I also added click counter to equal 0 so that the images repeat if you continue to click. I was unable to find out how to make it so the image of the house disapears. I put images of what I am greatful for such as my dad, mom, brother, food and shelter.
This class I made a variable that connects to a div, learned how to use the function "createElement" and then used "appendChild" to create an image. Also then we used counter to make the number of images more than one and less than three, which made 2 images. I also used "ball.innerText = input" to make numbers on each image. I wanted mine to be a data tracking type of thing so I chose to display the numbers of communtiy service I have done so far.
The past few classes I worked on a cookie decorating project. First I made divs for each topping and putting them under the same class so that they would all be the same size. Then I used javascript to make a variable called topping and a function called maketopping. I used an event listener to make it so that when my mouse clicks on a topping image, the image goes to where I clicked using another Eventlistener which has the function of topping, making it so that my toppings show up in the topping class. Instead of writing document.addEventListener, I said cookie (the name of my div with the image of a cookie) so that you can only put images/toppings on the cookie.
I have been working on my holiday card. A few people in my PL group decided to make our holiday cards for our PLs so I used my cookie decorater code but changed it a little bit. Using my code the I used for my cookie decorater, I changed the images to oranments of my PLs and I changed the cookie to a Christmas tree. When you click on the ornament image and then click on a place on the tree, it generates another div with the same style as the ornament. However, whenever I click on the tree the image generates but not by my mouse, it appears to be 50 left and 50px top away from my mouse. I tried changing the code but I still do not understand how to make it click right where my mouse was. This issue also occurs with my cookie decorater.
Today we worked on randomly generating things. First I used var to genrate three words. I am making a rock paper scissors game so I wrote: rock, paper, scissors. Then I used math random to randomly generate one out of three items. I then used console log so that it would show the random item selected in the console. After that I used document.innertext and an event listener to make it so when one clicks on the screen the text of random item appears on the screen.
Recently I have been working on using arrays to make a picture generating card for my mom. I used an event listener and array so that when you click a random photo out of 14 photos are generated. I used var to list the images. I also used Math.random()*13 because I had 14 images and the code starts counting at 0. Then I used an eventlistener to play music.
This week we worked on making valentines day projects. I made one for Amanda and it uses code similar to my cookie decorater project. I made a div and then set the div equal to the mouse so that when you click on the images, and then click on the picture of amandas bag, it puts the candy in her bag. My project is supposed to be similar to the valentines day exchanges we would do in kindergarden.
Today we learned about color in computers. We started by learning about rgba. The r stands for red, g stands for green, b stands for blue and a stands for alpha. We coded using a event listener so that when you click on the page it changes colors. Then I set the window to (window.innerWidth/255) meaning that we are scaling the screen to fit into the cordinates of 0 and 255 even though exceeds 255. I set variables equal to the y value and x value dependant on where you click on the screen. Then it uses the numbers of where you clicked to generate a r, b and g. This creates a color. I used the colos red and blue because we only can use two colors since there is only x and y values. Depending on where you click you will see a blue, red or purple color and different shades depending if you click higher or lower. Today we learned how to create an imput box using the word button . I made a game where you can guess a number from 1-100. I set the number equal to 18 and when you guess a number lower than 18, it says that your number is too low. When you guess a number higher than 18, it says your number is too high. I did this through alerts. I set word.value less than or greater than 18 and depending on that I changed the alert to say if the number was too high or too low.
Questions about color:
For the past few weeks we have been working on our final projects. At first I was unsure what I wanted to make for my final project. To decide, I made a list of things that I liked, including art. In the end, I decided to make visuals that repersented women inequalities statistics specifically in workplaces. I created one visual for women in sports gender pay gap statistics, one for the overall gender pay gap and one about women repersentation amoung CEO's. Through this project I learned more about inequalities that women face in many different fields and the importance of spreading awareness so that these problems can be fixed. This topic is important to me, so by making visuals that repersent the data easily, it allows me to share this information with other people. Today I presented my final project in class. I used reveal.js to code a slideshow to explain why I made my final project. Something that I could have done better while presenting would have been explaining the statistics more indepth to the class.