Journal entry #1:
So far in this lesson I have learned about html and that tags and divs are significant to the html. Html's always starts with tags and html tags come in pairs.
Under the html tags, there are the head tags with the body tags in them. All the divs go into the body tags. The tags h1, h2, h3... are for headlines. In divs, you can add links for many things,
like songs or images for backgrounds. So far I have used this feature to add images for the background on the homepage. It is also important to add br tags for breaks in between words,
which I have used in the journal entries.
Journal Entry #2:
I have also learned about text and to make the links to the journals, about me, and projects I had to use buttons in my divs. I was able to make my desired sizing for the words and put an image background for it.
When you hover over the image, it fades into another color which I learned by using the hover tag for the button tags. It gives the buttons a background which animates. To be able to write in the button,
tags I had to create other html folders that linked to the words journal, projects, and about me.
Journal entry #3:
So far, learning about animations I can code is really interesting because I can make certain squares or images move. You have to use a tag called a keyframes in order to make the animation
the picture will have. I used a gif from the internet with an animated background color for my animation. What I also found interesting about animations is that it can be set to repeat infinite times, so it never stops. Someone in my class made their whole background a cool animation of individual shapes moving, which I would like to try one time. I also pushed my website today onto the internet which I find interesting because now its on the internet for literally anyone to see my work.
Journal entry #4
For the codesketch that includes music, the start of it was very hard and I did not understand what I was doing very well. It still is a bit confusing but I understand the basics for counting the clicks to change backgrounds. But I am especially confused about adding audio, since I can't seem to find an audio that is able to turn into an Mp3. I want to really start to make my preojects more complicated but I am just not sure how to get there. I wanted to add music for when you press on the gif in the codesketch, but I'm not sure how to go about that. I would also like some more writing on it or better patterns happening in the background. It would also be cooler if I could do the thing where there's a shape in front of a word and when you hover or click it fades away and you're able to see what you've written. There is an event listener used to play and stop the music.
Journal Entry #5
I was able to add the music how I wanted for the codesketch and it's still not the best but I like it. For the codesketch with the array, it is definietkly basic. I still don't understand these projects to the fullest, so I'm not sure how to customize it so it's different than the template code. I added pictures of flowers in rainbow order but there's no special element to it. I want to make the spaces of the pictures smoother and maybe add some sort of effect to it, like the pictures fade when you hover over it, but I can never really do that. I want to expand on the array codesketch more when I come back to class.
Journal Entry #6
With the array project, I wasn't able to figure out how to do the things I wanted. I understand how you write a list and it randomly generates it, but I was trying to use images and the urls wouldn't work. With quotes it would just write out the url, and with out quotes it wouldn't register it because with the two slashes (/), it would hide the text. I also want to be able to click it and stop the generator, so you would choose a random one but I also wasn't able to figure that out. Again, I'm hoping I can figure it out in class because my array is not fully how I want it to be.
Journal Entry #7
After making a lab to edit my array, we customized it to how I wanted it. To add photos instead of words for the array, I had to put images in my katejd.github folder and label it with png. I was then able to write the names in quotes so the images show up, like to make tacos.png show up I wrote "tacos". When it randomizes the images, you need a function with counter and have counter equal 0, this will mean the images will start at the first image at 0, and then in the event listener you add counter = counter +1, so the numbers go up 1 everytime and the images will show up in a random order. I wanted to make it start and stop when you press it, so it lands on a random image. Under the eventlistener I added, if(counter %2 ==1){play = setInterval(scrollImages, 200). This means that any number divided(%) by 2 has an odd remainder, like 1, every click that's odd will play the function. So when starting at 0 and doing your first click, when you click it'll play the function. I then had to add, else if (counter %2 == 0){clearInterval(play)};. This means that even numbered clicks like 0, will pause the function. So when you click for the 2nd, 4th, 6th, etc time, it'll pause the function and it'll land on a randomized image. Going to the lab helped and I was able to customize my project as I wanted to.
Journal Entry #8
For my Valentines day Card project, I wanted to make a card that would link to another page. I uploaded a gif of a beating heart and used that image to make it a link to another page when you click on it. For my cursor, I made a heart follow where the cursor goes and make it look like a slinky. I first added a class for this heart, and added a style section for it so I could customize what the class would look like. Then with an eventlistener of mousemove so that it follows the mouse, I added a function of creating a div for the class of the heart. Then under creating that div you add classList so the div can have the class of the style you made earlier of the heat, so it will posess the same image of the heart. Then I had to identify how far the heart is from the top and from the left so that when when it moves around it could move in a random place with the cursor. With another function of removeClass this would make the hearts dissapear after a certain time so it becomes more like a slinky then a bunch of random hearts. I set the time to 200 so the slinky quickly pulls back after the cursor moves. Now, for the divs of my dogs on the second page of the valentines day card, I had to create a function that would repeat divs. So I made a class of Bosco and uploaded an image of my dog, Bosco, so that when I make the divs in the eventlistener, it would be styled as Bosco. In the style section, I also made sure to add bosco:hover so that way when I hover my mouse over the divs of bosco they would appear. And to do that, in the style you have to add an opacity of 0, and with the hover, add an opacity of 1 so it shows again. So I made a function that would create multiple random placed pictures of my dog. The start of this div, I have to add math.round(math.random) for x and y. This means a random number of Boscos would be put on random places on the screen on the x and y axes. I made sure to add a number of how wide I want the Boscos to go and how many I wanted up and down. Then in the function you make the divs of bosco with var that have the class of bosco from what I made earlier. This way all the divs will be styled the same way. Then again you want to add x and y so it knows to place random divs on the x and y axes. Then I added a var of i=0 so that i is the variable that I'm using which will start at 0. Then you add i<20 and i=i+1. This means that only 20 random boscos will be made, and starting at 0, the variable will add one to it all the way up to 20. So from this, 20 randomly placed boscos will appear when you hover your cursor over it.
Journal Entry #9
For the moving car/bug project we had to make an image move foward and backwards to make it look like it was moving. To start, you make a div and style it in the style section with an image and size, etc. Then you make a javascript to add an eventlistener. But before the eventlistener, you say buggy.style.left = 0px, this is so your image can start on the very left side with no px moving you image from the left to the right. Then you right var x = parseint(buggy.style.left). This is because x will now be your position of the image on the left and whatever number you add to x, will be how much it moves. Adding parseint to the x means whatever number you add to x will actually add to another number on the position, not just make a trail of numbers to it. Then you add the eventlistener of "keydown", this is a function that makes whatever key you press move the image. In order to specify we want the left and right keys, you have to write that if the key code is a certain number (each key has a number on the keyboard), it will move left or right. The number for the right key is 39, so saying: if key code 39 and x = x+10, buggy.style.left = x+"px" means that the right key will move the image over 10 times because x is where the image is and when adding 10 as px means it will move to the right 10 px from the left side each time you click the right key. Then to do the same thing for the left arrow key, you say: if keycode = 37, x=x-10, buggy.style.left = x + "px", then every time you press the key, it will move -10 px towards the left side so it moves left after you've moved it right.
Journal Entry #10
For my circles project we had to try and make a circle change colors, vibrate, move, or follow the cursor. I was able to make the circle rapidly change colors. I had to first style the div of the circle, giving it a size and color. I then used javascript to add the function changecolor. Usign rgb, I added var r, var g, and var b. For each var I added the math.random and math.round function, randomizing each r g and b out of 225. This makes green, red, and blue randomized, making the colors they make also random. Then I set the background color of the circle to apply to the rgb, making the entire cirlce ranomly change colors. Then I used setinterval to make the color change at 100 speed, making it change fastly. The higher the number the slower the colors change, so 100 goes pretty fast.
Journal Entry #11
For my presentation about my favorite food places in NYC, I used a downloaded folder of a presentation that allows you to customize the slides. There were different sections for each slide you could customize. For each slide I added a background photo, using data-background-image="". I added a color to the text of the slide and used rgb to add a background color to the border of the text. I then added more text to each slide about my recommendations for each resturant.
Journal Entry #12
For my final presentation, I used the same type of slideshow that was used fo my slideshow about food places. For my trivia game itself, first I made Ids for the different buttons and input boxes. For certain Ids like the "new question" button, "submit" buttons, I added the command called "button" which makes it presseble, and the input boxes I added the command "input" so you're able to write in it. And I was able to style these in the style section. For the questions and answers I needed to match them up so when you put your answer and press submit, they will match up correctly. Under javascript, I added "var questionArray" and "var answerArray". This means that starting from 0, whatever question you input into a certain number place of "", will correlate with the answer that is also inputed into the same number place of "". Then, using an eventlistener with the Id of the "new question" button, you say that when you click a function will run that generates a random number, and whatever number is generated of where the "" is, that question will generate. Then I added an eventlistener to the Id of the "submit" button, that when clicked, it will run a function of the random answer that matches up with the number of the question. Then lastly, I made an alert, so that if the answer does equal the correct answerArray that correlates with the question, it will say correct. And if the answer does not equal the correct answer, the alert will say wrong, and give you the correct answer.