Journal💌

✩ Journal entry #1:

So far, I have learned many basics of HTML. I’ve learned about the general formatting, the head and the body, and what goes in which section of the code -- the body contains the material going onto the website, and the head contains the information about the details of the body material. I’ve learned how to create divs and what they are, and I’ve styled them in the head section. I’ve learned the format of HTML coding, such as using opening and closing tags, and how to use colons and semicolons. I’ve realized that I learn a lot and remember many new things by just playing around to try and fix things through trial and error by myself, and I think that helps me become less dependent on asking someone else. So far, I really enjoy coding in HTML! It is definitely tricky because there are so many different commands and the formatting has to be very specific for the code to work, but I am determined to keep practicing to become more versed in HTML and to be able to eventually navigate code much more easily and understand it more fluently!

✩ Journal entry #2:

I’ve learned so much by playing around with the code on my own! I’ve made a lot of progress by getting different basic commands or techniques from the class website or a quick internet search, and then have played around with my code to replicate that format and then manipulate it into what I am trying to create in my code. I think this has shown me that I’ve also become more comfortable coding on my own and more easily able to navigate the code myself. I’ve also noticed that I’ve become faster at coding because I feel more comfortable doing so. In the past week, I’ve learned how to position objects, style images and text more in-depth, how to style text as opposed to divs and images, how to insert links into code, and how to create hover effects in my code. It is so gratifying when after lots of trial and error your code starts to shape up and starts to resemble what you are envisioning. I think this is a big part of why I enjoy coding -- I am able to create virtually anything I want to through code, and when I do create that, it is through the fruits of my own labor!

✩ Journal entry #3:

The second project on my website is animation. It was a new process trying to figure out how to operate the animations and how to control it in my code. I learned that there are multiple types of animations. You can make an object move, with the command “fly,” which I was able to use to send an image of a star moving across the screen. You do this by inputting the positioning, or the coordinates of the object at different stages of the animation, and the code takes it from there and sets the object into animation. Another type of animation I used is transforming an object from one image to another. Using “from” and “to” commands, you can set an initial image and a second image to be in your animation, and the code will display the first image fading into the other. I used URLs of each of the images in my animation to embed the images into my animation code. For this project, I just played around with it and had fun using different images and objects I liked, and it turned into a very random but fun animation!

✩ Journal entry #4:

The third project on my website is my first code using javascript! On the page, you can click anywhere and the heart gif will pop up wherever you click. I was introduced to Event Listeners, and used clentX and clientY to operate the positioning of the clicker. One challenge that I had to figure out how to fix with my code was getting the div to be centered where the mouse clicks. At first, the div would appear beside the clicker, a bit high and too far to the right, and so I thought to adjust the position of the div from its automatic position, slightly lower and slightly to the left so that whenever I clicked, the div would be centered around the mouse’s positioning. A few other things that I learned about javascript is that you always write the first word of a string in all lowercase, and all following words you capitalize. I also learned about functions, using “document,” and how to format code in javascript. Although it is simple, I’m happy with how the codesketch turned out, and I’m excited to use more javascript in the future!

✩ Journal entry #5:

The fourth project on my website is a codesketch using javascript and an Event Listener. The project is a birthday card for someone, and when you click on the text that says “Click here to open,” the card “opens,” and the “happy birthday” message and gif are revealed. I did this by making it so when you click on the prompting text, the “envelope” div disappears, revealing the card behind it. I only knew how to make it so a div would be the object that activates the changing of another div, so I made a div transparent, and put a separate text over that transparent div, so that when you click on the text it activates the function because the transparent div behind it is being clicked. Another challenge I had to overcome was fighting out how to make the “envelope” div disappear on the click of the other div. Because I only knew how to change the background of the div, I made the background color transparent to simulate the effect of the div disappearing. Behind the div, I placed a solid pink div of the same size, as well as a gif of confetti to make the card more lively and fun. I had tried to put text that says “happy birthday” on the card as well, but the text would always appear in front of the envelope div, which was not ideal, so I figured out that I could put text in another div, and so I did that on the pink div that created the background of the card. I then formatted that text, and although I struggled with centering the text without moving the whole div, I was able to figure that out with a few quick google searches. This project took a lot of trial and error, but I was able to produce a simple yet effective codesketch using javascript!

✩ Journal entry #6:

My newest project is a square quilt project. Based off of the example website, I was able to style my own customized square quilt. To personalize it, I decided to use boxer commands to make the div for each box switch to a certain photo when hovered over with one’s mouse, because I decided to turn my square quilt into somewhat of a photo album. To use my own photos on the divs, I saved the images to my desktop as jpg files named in correspondence to their divs’ names in the code. Once in my desktop github folder, the photos were able to show up on the website because the code identified the code for the photos as the ones in the folder. I really enjoyed making this project because I was able to incorporate some of my own photos that I love, and create a codesketch that I like and am proud of!

✩ Journal entry #7:

My newest project is an audio player. First, I downloaded a royalty-free mp3 audio file to my desktop and placed it into my desktop github folder. To incorporate the music into the codesketch, I used an audio element. The strategy I used to get the music to play and pause upon clicking the play/pause button was through an Event Listener in javascript. I used the modulo operator to make it so a click counter would determine if the click is even or odd, and depending on which one it is, it either plays the music or pauses the music, making it so the music would play upon an odd click and pause upon an even click. I’ve found, through experimenting with many different projects and codesketches, that this strategy can be used and applied to many different situations to acheive a desired effect. In this codesketch, I had wanted to cusomize it and make the audio element and codesketch more personalized, but despite trying to research and play around with my code, i struggled to style the audio element and alter the codesketch. This is definitely something I’d like to keep working on and figure out how I can continue to make it more my own!

✩ Journal entry #8:

I really enjoyed learning about arrays! I find it fascinating how many things arrays can be applied to, and how many creative projects one can make using arrays! For my array codesketch, I decided to create my own version of a magic 8 ball, or a code that gives you a randomized answer to any question asked. I thought that this would be a fun way to utilize the random item picker function of arrays. To achieve this, I made a javascript Event Listener and created a function that would pick and display a random item within the array upon clicking. A div was used as the basis upon which the magic 8-ball responses were to be displayed. The array contained a variety of classic 8-ball answers, including “chances aren’t looking good” and “signs point to yes.” Thus, I was able to incorporate past knowledge of click functions using event listeners in javascript with my new knowledge of arrays to create a fun, functioning array codesketch!

✩ Journal entry #9:

The latest project on my website is a valentine for my mom. I had a lot of fun styling the page and making it look exactly how I envisioned it—I wanted to make this project especially perfect for my mom! I used hover commands to make it so that when your mouse hovers over one of the candy hearts, each one shows a different photo of my mom and me. Another aspect of the project I had to figure out how to accomplish was getting the divs to be transparent. At first, I had a white background, so the images of the clipart candy hearts that I was using looked transparent even with their white background. However, after I made the background pink, the white background of the hearts showed. I was determined to make the hearts’ backgrounds look transparent, so as to just show the actual hearts on the background, and so to do so, I used a tool in preview that automatically selects the background of an image and deletes it, and then I saved those modified images to my desktop as png files in my gtihub desktop folder. I then replaces the images’ links in my code with their png file names, and the hearts then showed up with no background! It felt rewarding to have solved the issue by myself with an innovative solution. Another thing I struggled with was positioning the divs so that they were all aligned with one another and so that they created an organized grid. After playing around with different positioning and formatting commands, I was able to structure them how I wanted, and through that, I learned the significance of relative versus absolute positioning of divs. Overall, I’m super happy with how this valentine came out!

✩ Journal entry #10:

For my final project, I decided to try and replicate one of my favorite games—Wordle! This project was challenging and most definitely took a lot of trial and error, but I think that the final product was very much worth it! My first step was creating and styling the divs that provided the basis upon which the javascript would function. I started by creating 16 input boxes that would serve as the place to type in guesses for the target word. I also created a little box explaining the game’s instructions, as well as a key detailing the meanings of the various colors that appeared when a guess was entered. Then I had to start working on the javascript that would actually make the game function. First, I made a button next to each row that could be pressed to check one’s answer. I used an event listener to make the button alert “correct” or “incorrect based on the correctness of the inputted guess. To have the buttons know which guess was considered correct or incorrect, I used several “if” statements to condition the buttons to check if each individual input box contained the correct letter. The next step I had to do was program the input boxes to turn different colors after each guess to indicate whether each individual letter guessed was not in the word at all, in the wrong position, or in the correct position in the word. To do this, I again used “if’ statements under event listeners, and made the input boxes check what letter they contained, and if the letter was not one of the word’s letters, its background color would not change, but if its letter was either in the word but in the wrong position, or alternatively in the correct position, its background color would change to yellow or green, respectively. This step would help players with their subsequent guesses and help them progress closer to the target word. After extensively using these event listeners and “if” commands, the project finally worked! It was so rewarding to have all of my hard work and perseverance throughout the process of making the project finally pay off. I ended by doing some final styling touch-ups, making the project look exactly how I wanted it—incorporating my signature style into it, of course—and then it was ready to be shared with the world!