Today I finished my person card using html and css. I used two gifs, one of a concert and one of a drum and I used a ease-in-out transition between them. Along with that, I finished hyperlinking my home page to my projects and journal page and I experienced with different transitions. I am struggling with getting a div for a menu bar.
Now, I began working on my menu and utilizing hover affects in order to change the colors. I also made a menu bar in my journal and worked on centering the text and using line breaks. I also tried to use divs in order to make a background image for my index page. I found an image of instruments and used that as a background but I struggled with placing it below the menu bar as it keeps being placed above. Lastly, I've worked on changing font size, type, and color.
This entry is to celebrate the eureka moments I've just had! I have spent an hour and a half tonight working on stylistic elements of my website and hyperlinks too. I feel a lot more comfortable using CSS and HTML than I thought I would. I also created an animation of a circular shape that changes color and moves and am moderately proud of that. I also began to hyperlink things to my project page and my next project is to create of a music note moving around the home page that can be hyperlinked!
Recently, I have been working on editting my projects page in order to make it more visually appealing. I used more CSS in order to code it. I have also been working on understanding variables, functions, and event listeners, and have been watching videos in order to help. I applied this understanding to a project where squares would appear in different colors and if clicked on, would disappear.
I have continued to familiarize myself with javascript as a language as I feel comfortable in CSS yet feel apprehensive in java. I have made another project using an event listener, this time inspired by a stormy day. Furthermore, I used multiple event listeners and utilized a gif. I also have began working on my square quilt by changing the colors and adding images to different squares. The collection and insertion of every process was tedius but I am proud of the product!
My favorite project so far has been the array! I was inspired by a tiktok trend that I was doing with my friends and I thought I could apply it to javascript. The radomization aspect made sense and was easy to understand but the harder part was successfully making the emojis appear where I clicked. Despite this, after guidance from Molly, it began to work and it came out exactly how I wanted it to! Additionally, I also found a new song I liked that was free to upload and made a project that played it!
Recently, I have been exploring the rgb scales and messing around with color combinations with backgrounds of my projects. In addition, I made a code sketch with some of images I love that change their color distortion based on where you hover over the image. I used the function "mousemove" along with filter "hue rotate" in order to create the color distortions.
Another one of my favorite projects has been the study set array. I made study cards for my geometry quiz on sketchbook and then converted the files to jpg and put them in the github file. This array project was different from my last as I didn't want the divs to follow where I click and instead I wanted them to remain stationary. In order to this, I removed the tracking of the mousevemount and mainly used Math.round and Math.random.
These past two weeks have been dedicated to valentines related activities. I made a heartslinky and a valentines card for one of my close friends. For the heart slinky, an event listener was used so that when the mouse moved across the page, the div would be placed wherever it moved. The code tracked where the mouse was using event.Client and then it added the div whereever the mouse was detected. I also made a valentines card for one of my friends, Maddie, where I depicted some of my favorite memories in gifs with hover affects and I ended with one of my favorite pictures of us.
This week the class has been working on the moving car project and this is an anaylsis of the code! The code in javascript starts with making the div start all the way to the left with buggy.style.left = "0px", which is a string variable. From there the next line, which is parseInt, rounds the string to an integer. Next, an event listener is added, which is keydown; therefore, when you press a key, the event is triggered. From there, four if statements are created, one for each arrow key. They use the keynumber in order to change the location of the div depending on the direction of the arrow key pressed. For the arrow keys on the horizontal axis, buggy.style.left is utilized in order to move the div from left to right while buggy.style.top is used for vertical movement.
This is the last journey ahhh! Writing this feels extremely bittersweet. This whole year in comp sci has been so enjoyable and such a great learning experience. I have had moments of exhausting challenge, such as with my first array, yet also had great triumphs like my rock paper scissors game! I feel like I left the course with a pretty good understanding of CSS, HTML, and of event listners, rgb, arrays, functions, strings, audio, variables, and for loops. Not only have I really enjoyed learning comp sci, but I have also loved the class environment. I always found myself looking forward to class and the unexpected nature of the people and reactions! I am going to miss comp sci next year but want to apply it to other interests in STEM. Thank you for an amazing year Molly!!!!!!!