Final Project!!!
Dear Journal,
For my final project this year, I created a manual for learning a piano piece. First, I created a homepage with an image of a cake and the three layers I believe are integral to learning a piece. I added some general instructions for using the guide as the text on this homepage. I then linked to three other pages, each of which contains details on a step in the learning process. For the first two steps' pages, I displayed an image of sheet music and annotated it for key concepts, also including text on the side as a guide. On the page for the last step, I incorporated a music player (event listener) that plays a recording of me playing a new piece. The main motivation for creating this project was to share my passion for piano.
Car project
Dear Journal,
This car project is also one of my favorite projects. First, I created a div square with a background image of a car and also set the background image of the whole page to a road. Next, I created an event listener that listens for when you press either the left or right arrow keys and then moves the car accordingly. Lastly, there was some orientation I needed to do so I could get the car exactly on the road where I wanted it to be, the right size in proportion to the road, and driving at the speed I wanted. This project was really interesting and fun, both because I like cars and also because it felt like a small, fun interactive car game in a way.
Circle blob project
Dear Journal,
I created a really cool project that is now probably my favorite project of all: the circle blob. This project first created a div circle that had other circles of many other sizes revolving around it (essentially, it made the one circle div include all of the other circles). Then it used both a function to randomize the colors of the circles and also an event listener randomizing the position of the circles around my moving mouse. This project was super fun and I felt accomplished after I finished it, especially because I had some trouble at first and along the way of creating the project.
Mouse follower project
Dear Journal,
I learned how to create an project that incorporated an image that can follow your mouse. This project also qualifies as an animation. This project first created a div box that had the background image url of a football player and then used an event listener that made the football player follow my mouse wherever it moved around on the page. Then I put background images of a football field and a field goal to make it look like the player was running around on the field in a game.
Square Quilt
Dear Journal,
I learned how to create a "quilt" or array of different images in my folder. This consisted of a function called makeSquare, which made different divs/squares with different background images. it also incorporated append child, which I thought was cool.
Array project
Dear Journal,
I learned how to create an array. My array project was a breakfast-selecting machine that had instructions to click on the images until finding a breakfast that you like and want to eat. I created an event listener that listened for my mouse click and at each one, cycled through a list/set of images in my folder. I learned more about event listeners and how to use them through this project.
Animations
Dear Journal,
I learned how to make animations, whether it was creating dancing squares or a color changing page. For my color changing page, I used event listeners for when I move my mouse and assigned different colors to this "mousemove". This was a fun project that helped me learn even more about event listeners and how to use them.
Music player
Dear Journal,
I learned how to make a page that plays music when you click on it. The piece of music I put in was Un Sospiro by Liszt. This was a fun project that helped me learn more about event listeners and how to use them.
10/16/22
Dear Journal,
I learned how to push my changes to my website online. I read the article about JavaScript. I added an animation to my projects page and I think I'm finally starting to understand how exactly to create an effective menu bar with buttons.
- Teddy
10/11/22
Dear Journal,
I learned how to create buttons on my website and make them link to different things, such as this journal, projects, and about me. I figured out how to create a menu bar, give it color, and make my stuff look cool. I am continuing to solidify my foundation in html by practicing things like various tags and the basic blueprint for a website in html: head (with a title section) and body (with everything else like paragraphs, style). I am overall having fun even though not every task in html is easy to tackle.
10/2/22
Dear Journal,
I watched the html videos and learned all about the html coding language. I learned that it is primarily made up of tags, which is text in between angle brackets < and >. I also learned about how HTML, CSS, and JavaScript work together to create a website. HTML creates the content of the website, CSS styles up the website, and Javascript makes it interactive. Coding in these languages so far makes me feel pretty empowered because I can create my own website with my own interests reflected in it. Just in writing this journal entry, I am practicing some tags like break, strong, and em.
-Teddy