To save my journal to the internet, I went onto my terminal and I go into my folder from my terminal by typing cd ./desktop/juliahale.github.io/ I git added, committed and pushed the font on my terminal so it was then online. I wrote "git add ." then "git commit -m "adding font" and then git push to connect it all. I then went to my journal website and I found my text that I typed on sublime there.
Today we had our fourth class of computer science. We worked on our website profiles and I made one with a blue star on it.
Today we made an animation and then we put it online. I made a square that changes colors and spins into a circle. It was really fun and I learned that I needed to make percentages (0-100) for the animation to follow. I added what I wanted it to do to each percentage and then I put it online.
Today we learned a new language, javascript. We made boxes and we inspected the page to learn about the margin, border, and padding. We then wrote "document.addEventListener" which makes the page listen for something and record the event. I chose to make it log the mousemove but I can also make it log the "keypress” and “click”. It recorded whenever I moved my mouse and the data about it in the console page when I press inspect. If I don't put event, it doesn't record the data from what I did like where on the screen my mouse was.
Today and throughout this week we learned how to use event listeners. We made it so that the website would listen for a click and then when clicked, a jumpscare gif would come up. This class we learned to add a sound by downloading it off of Youtube and adding it to the event listener so when someone would click on the website, the gif and sound would come up. We first added our jumpscare image, for example I made an oval and I made seperate divs for each oval. To make the event listener, we first wrote "document.addEventListener" and then wrote "click" so that the website would listen for the click of the mouse. It can be used for "mousemove" or other things that the website can track also. We then wrote "console.log(event)" so that whenever the website would be clicked, it would show up in the console of the website when you press inspect. Instead of event, I used x as a variable to tell the website to show my jumpscares (1-4), based on how many times the website was pressed. No jumpscares was when x=0. It would count how many times the website was clicked, represented by x and then every time my website would be clicked, the x count would go up by one. I then used the divs that I had made for each oval/jumpscare and coded it so that when x= a certain number (1-4), the ovals would show up in that order according to the clicks. I also added a sound under the box 1 variable so when x=1, the sound would play. My questions about event listeners from the video: 1. 3:10 - Does "event" refer to just like when you click or do the function or does it refer to what happens to anything on the website? what exactly is the event? 2. 6:21 - Why did you make it "bob.style.backgroundColor" and not code it like we normally would for a background color? What is the difference in the phrasing like this? 3. What is the difference between variable/"var" and "div" ? You used "var box =" and so did I but I also used div in a lot of places, and what is the difference?
My gratitude card is a birthday card for my Dad whose birthday was on the 13th. Whenever you hover over one of the emojis, it turns into a picture of my Dad and I. My biggest struggle was trying to make all of the photos work, because originally I didn't realize that the capitalizations in some parts had to match up wiht the downloaded versions on my desktop. There was also one certain photo that wouldn't show up no matter what, and we had to do a lot of trouble-shooting to get it to work. I also put a song in, so when the website was clicked anywhere, the birthday song plays.
Using ChatGPT to answer questions and what I've learned: 1. Why does html use angle brackets? Why does CSS use curly brackets? Angle brackets are used for the frame or structure of something and to tell where something starts or ends. HTML uses angle brackets to structure content like paragraphs and headings. Curly brackets are CSS and are used to decorate and style the content. CSS uses curly brackets to group together style rules and to hold those style instructions. 2. How do you position a div on a screen? What is absolute vs. relative vs. fixed? Positioning a div: A div can be positioned with three ways: relative, absolute and fixed. Relative positioning means that the div moves based on where it would be originally, without affecting the other things around it. Absolute just follows specific instructions and means that the div is positioned exactly where you tell it, and not mattering what else is around it. Fixed means that the div will always stay in the same spot even if you scroll down or up on the website. 3. What is the difference between a parent and a child and why do we have to use it? A parent element can be compared to a big box that holds other elements inside of it, and a child element is inside another element which is its parent. It's like something inside a box. Children and parents are important because they can be used to organize content on a website, styling and positioning, and to use javascript interaction. 4. What’s the difference between ‘==’, ‘===’, and ‘=’ One = is used to assign a value to the variable. 2 (double) is used to check if values are equal after they are being converted to something or changed. 3 is used to compare equalities and it can check the value and type of something and see if its like true or false.
My snowman project is a snowman where when you click on one of the elements above the snowman, you can decorate the snowman with them. I started by making divs and putting in images for my snowman and for all of my decorations. Once all of the images for the decorations were created I made an event listener so when someone clicks on the decoration and the snowman, the decoration will appear where the click is. I made a new variable called feature and added event listeners for all of the toppings under feature so when the snowman is clicked on, the div/topping will be created only on the snowman. I'm still working on sizing the decorations so they are all in accurate proportions, but my main challenge was de-bugging my code because the toppings originally didn't appear when clicked.
In class today we made a randomizer that chooses random names. I first made a variable called "people" which stores the 6 people (numbered 0-5) in our class. I then made a variable called "x" that basically makes it choose a random number and because I wrote *5, it chooses a number between 0 and 5. I added "round" so the numbers are rounded numbers. I then put the variable "x" under console log under people, so it chooses a random person. Because the people are numbered from 0-5 and the variable "x" is *5, it randomly chooses one of the people.
Today I finished my recipe generator. It basically uses the same process as the name randomizer, but instead the corresponding photos and links are listed under the same number. This makes it so when the randomizer chooses a number, the link and photo both show up. This class I worked on making the images show up, and I did this by calling the div and variable different names, and I also formatted it so the photos and links show up in seperate boxes.
Today we used event listeners to make cars move using keys. I made a div labeled "car" and an eventlistener using "keypress" so when a specific key is pressed the car moves. I used if statements to make the car move. Thea and I made matching pink porsches which was so fun. I also finished my slideshow which I found really cool to try a new thing out. I'm definitely planning on making more slideshows like that in the future. My slideshow looks very funny and I enjoyed making it.
I finished my Valentines project! It's very similar to my Mom's bday project, but because I missed a class, I didn't have a lot of time to make a brand new idea. I just started a project that flips and transforms images of me with my camp friends which I can't wait to finish and show them.
Today we worked on a color generator in class. I learned that RGB has 3 values that range to 255! We also went over math.random which was super helpful in randomizing numbers for our color generators.
These are my final project ideas: 1. pink porshe driving game (crossy road) 2. Sza universe - everytime you click on a planet a different album/song plays and the mouse is a rocket ship 3. DIY nail salon with designs 4. cat slide show/origin story 5. joint story with thea and her cat - think of a funny story 6. Teach younger kids/1st programmers the car code 7. DIY your own celcius flavor 8. hover over a box and see a different sunset image 9. build your own outfit - have a rack for jewelry, pants and tops and drag them together 10. map of the world and when you hover over each place, photos i took from that place come up - can also do with sunsets - can do with mountains and where I've skied
Today in class Thea and I started our Szaverse. I downloaded all of the songs and found and edited all of the planets, and thea started building the code by positioning all of the planets. We are making 8 planets and making it so when you click on a planet, a specific song plays. In the middle we will put the sun with Sza's face on it. After break we will upload the specific images per planet and the corresponding audios and that will be the base of our project. We will then change the size of the planet divs so some planets are the right size and bigger than others.
Today in class we worked on the stars in our project. We made a link for them after we styled them and then we made it so they appear randomly all over the screen. We also used the math.random function to set a minumum and a maximum for the size of the starts. The last thing that we did was made a google slide for our project which we will continue in the next class.
Today we added some final touches to our project. We moved around some of the planets to balance them out throughout the screen by just adjusting the sizing values. We then attatched the link from glitch onto our project page and started working on our slideshow. I made a slide about the inspiration and next class I will make a slide about the challenges that we overcame when making our project. I will also import actual photos of our szaverse into the slideshow.
Today I worked on the slideshow. I went through the code to brainstorm challenges and then I wrote about 2 of the challenges that we had. I wrote about how we originally had trouble figuring out how to code together because we originally tried using Sublime which didn't let us collaborate on the code at the same time. We eventually learned how to use Glitch to code at the same time on the same project which made coding together a lot easier. The second challenge that I wrote about was how we made the stars. Making the stars was challenging because we originally tried to make each star individually. We realized that this wouldn't work because of the amount of stars that we would have to make. We learned to code for all of the stars at once, using a function and then we could style all of the stars at once. Next class I will add the final touches to the slideshow.
Today Thea and I added finishing touches to the slideshow. We animated all of the slides and added/edited some of the images in the slideshow. We really like how our slideshow looks because of the galaxy theme and we might present today. I am now going to push my project online!!