So far, I've just been learning the basics of HTML, and a little bit of CSS. More specifically, I've learned how to make DIVs, how to style them, and how to add in transitions when the mouse hovers over them. On the 2nd day of class, I made a pretty cool page with 21 individual DIVs so that when you move your mouse across the screen from right to left, down, left to right, down, right to left, it brings up a pretty cool, abstract rainbow with a mix of shapes and sizes. It's super rewarding to finish a mini-project, especially, if like this one, there were some major struggles along the way. The same can be said for when I was working on my Picture Card, because I made some really minor errors that rendered it completely dysfunctional until I finally found the errors and fixed them. I also kind of struggled when I was using the Terminal for the first time, just because the syntax was a bit hard to understand for me. Overall, I have really enjoyed what I've been doing so far.
I have been continuing to add to my website, and while doing so, I figured out how to add a background that I liked, this cool color scheme, and I chose a different background color for this journal. I also have definitely gotten much more comfortable in terms of navigating the terminal; I think the cheat sheet was a very helpful resource to becoming more confident using terminal and coding the website as a whole. I am looking forward to creating more fun projects to add to my website.
So, I started doing some animation stuff. For the most part I was just messing around seeing what worked and what did not. For me, the changing color stuff, and hovering to activate the animation, I was able to do pretty well. I am also pretty comfortable changing the amount of times the animation runs, and the sequence in which in runs, so like reversed or straight forward. The one big thing that frankly, I just did not get at all was the movement part, which I know is kind of the biggest part in terms of animation. I tried a bunch of different stuff, it just never worked. I'm almost one hundred percent sure that there was one stupid mistake I was making throughout the whole thing which was why it was not working. Overall, I think I need some help.
Recently, I've been working on making javascript loops to put a repeating image on the screen. For this project I used one of the images that I created with Dall-E, the AI image generator and then set a code to do two things. First is to put in that image 10 times per second as long as the page is open. Second is putting a header at the top with a counter for how many faces are on the screen at all times. Basically I created a function that runs forever and constatly creates divs and I continually add I to a variable acting as a counter displayed at the top of the screen. One thing that I would be interested in possibly adding to this specific project would be limiting the number of times a new image appears or varying the rate at which new images appear
The most recent project I semi-completed was the mouse follower project which I finished about a week ago. Essentially all this program does when run is wherever your mouse moves within the page a div follows it. This div could probably be an image but for my purposes and in order to fit the black but also minimalist style of my website homepage, I used a small pink square over a black background. One big thing that surprised me when we were creating this code was how simple it was. I assumed it was going to be some in-depth thing that would majorly confuse me, but all you had to do was set the x and y coordinates of the div equal to the x and y coordinates of the mouse. This has been the first javascript project we've done in which I felt confident/comfortable with what we were doing. Rather than just writing the code people told me to write, it actually made sense why each line of code was necessary, which was kind of a nice feeling.
So I just finished the mouse follower project, and now I'm finishing up the array project. At first I was actually totally lost and did not know how the code worked nor did I have an idea as to what I was going to make using the array. Then I had the idea to do little reviews of TV shows I've watched in the past and then I kind of went from there. Originally I was intending to do shorter reviews like 4-6 sentences and not go super in depth. But then when I started getting to the shows that I really enjoy or am really connected to, I wanted to write more. So like on the array site, there are 4-5 reviews that are super long including reviews on Peaky Blinders and the Clone Wars. And then I accidentaly wrote a whole essay about Arrow; it is well over a thousand words and I was not even trying to stretch it out. Making this super enjoyable for me and not because of the code but because I got to revisit all these TV shows that I've loved. I rewatched some season finales, some pilots, and some best moments youtube videos, and that was a ton of fun for me. Eventually, I went to lab with Molly and finally got to understand how the code works which is just nice to know, and I realized the code is actually pretty simple.
I've completed two projects since my last journal entry. First was the TV show review site which I wrote about earlier that uses an array. Second is a site that plays music. So we originally learned how to do this like multiple weeks ago but I did not understand it all, did not finish it in class, and then I just ignored it for two weeks. It's okay though because now I finished it and it's pretty good. I used this track that I found from a site where you can download music for free, and the song has no words and is just pretty chill overall. I was looking through the resources that Molly gave us to look at when we didn't know what to do and I found this thing that creates a play/pause button pairing. To be totally honest I don't know how the code works on this part but it works and that's kind of all that matters. Anyway, I found this totally random image unrelated to the song that looks really odd and turned it into the background for the website and that's it.