creating my website

hi! this is my first journal entry, the first thing i did in compsci this year was link my website and put it on the internet using terminal. i'm going to work on my person card for the mojopi github website! i'm very excited to keep coding this year! so far i rly like it !!

designing my homepage

i started working on my homepage and i'm playing around with different designs and styles. molly has been helping me figure out to hover over an image to transition it into a gif. it looks cool so far but i will probably continue to change it. im glad i am starting to learn some basics so i can continue to use code like this.

project for dad

this was my first real project and i used similar code to the class demo of when we moved the div around the screen. i made the photo of me and my dad as the div that moves around and i made the map a background. in the console it stores where the image lands on the map! i'm really enjoying coding so far!

animation

i used four sqaures moving arounf for my first animation. the sqaures all move together and they change colors inbetween moving from side to side!

color/square project

for this project i made lots of divs that change with random colors. i first only made a couple rows then i copied the code enough times to fill the whole screen with squares.

music player

this was the hardest project i've made so far but also my favorite. i used songs i downloaded from the internet and i also downloaded an image of the album cover. i gave the mp3 files all the same name as the cover image to keep thigs organized. then i coded the image to play the mp3 file when it was tapped. i added a little play button for design purposes and included nine songs that i've been listeneing to recently.

valentines day card

i made this card for my camp friends! i used similar code from my square quilt project and added a title! after i pushed it online i sent it to our groupchat and they loved it! happy valentines day!

car project

after discussing with my friend in class possible solutions, i realized i needed to add an event listener. i ran into a bug and learned on w3 schools that it would help to add an if/else statment if i wanted to change the image each time the direction of the car changed. i used two seperate images, for the opposite direction i just mirrored the original image.