This is my first journal entry.
Today we're learning how to push and publish our local code to github so that my code is saved if anything happens to my computer. In order to push the code you have to:
cd ./desktop/Ody-Shi.github.io
git add .
git commit -m "what you're doing"
git push
Helpful commands:
ls :lists things in the folder
git status :tells you what you've changed (green=already added, red=changed but haven't added)
cd :change depository
. :go in
.. :go out
Today we learned how to make animations with divs. Using attributes like animation-name, animation-duration, and animation-iteration-count, we can set the divs to different frames under the name @keyframes (animation-name). Insert percentages like 30% to set a frame for a percentage of the duration. This can help making projects and transitions look smoother and cooler.
Ex:animation-name:dance;
animation-duration:3s;
animation-iteration-count:infinite;
position:absolute;
@keyframes dance{
In this class, we started to learn the structure of Javascript. Javascript code functions in the "script" tag. We talked about console.log which creates a message in the Console Inspect of a website. Event listeners basically wait for an event like "click" or "mouseenter" and then does an action or documents the action when it hears the event.
Ex:document.addEventListener("keypress", function(event){ console.log(event)
We worked on making a jumpscare project for Halloween this class. I did this by using event listeners to display an action on click or keypress. I also used variables as part of the javascript code to make actions occur on the second click rather than on every click. In addition, I used the "audio" tag to play a jumpscare sound to make it seem more realistic. This project was pretty cool and fun to make and it was good practice for learning how to code javascript.
This week we made a cookie project that uses javascript to make the code create cookies (divs) for me and count the cookies. I did this by using "function makeCookie (){}" in addition to "createElement" and "appendChild" to make a div and putting it in the body.
Some more on functions: Functions are an action with an input and an output. Under the name of a function, you can put a placeholder in the input and the output and you can replace both placeholders with a value/phrase. The new value/phrase will have the action applied to it.
Today I finished my gift project which utilizes a number counter to progress the slides with clicks. The premise of the project is for each image to be layered by another image (goes from farmer to scope to painting). The end is damn because damn.
Using ChatGPT, I learned that to store date using code I have use a programming language like python or SQL (database). With these languages, I can use variables and groups to store specific values in the code. You can hold data in JavaScript, but this is only client-side and not the most efficient method.
Today, we used a "for-loop" to create divs to any amount that we set it to. I created chairs and used a counter to generate chair until 1000. Ex: for (var counter = 0; counter <1000; counter = counter + 1){ makeChair(counter)
For this project, I made a holiday card inspired by the pizza codesketch. It was set in a paintball field that I've actually gone to and you can shoot paintballs by clicking. There are 4 colors you can use and you can change colors by clicking on the 4 displayed.
This project was on making a random generator for any topic or prompt. I decided to make it based on what the next thing you're going to eat is. I put different foods in an array, which stores the answers.
Another project working with arrays. I thought it would cool to have an aquarium where clicking changes the fish that appears. I was able to display images in the array instead of text by just putting the file name in my folder.
This week we made cars that move on the press of arrow keys. I set an "x" and "y" change to each arrow key and added a transition time so the car appears to be moving.
This week we used reveal.js to learn how to make aesthetically pleasing slideshows using code. It has a folder with pre-written code that doesn't show up in the document. I decided to make a quick top 5 list of protein sources.
For Valentine's Day we were tasked with making a project that expressed our appreciation for someone. I was inspired by the planes that advertise by dragging banners on the beachside and decided to say "Happy Valentine's Day" through a plane like that. This required binding the movement of the plane to the left arrow key, using x and y values to change the left and top values.
This class we learned how to make input boxes and buttons. The input box holds the value you type in and by assigning an event listener to the button, you can figure out what the value is in the console. You can also rig the system by setting a certain value to 100% or whatever positive thing.
We experimented with a random color generator that uses an rgb background color. By setting a math random value (need to multiply by 255 because that's the range of rgb color), you can create a new color on every event listener.
For my final project I'm making a street fighter game. The game base should be very updatable because each action/attack should be standalone. I've been coding a basic template in Scratch which is just about done now. so far you can only punch but there's a health and stamina system and code in place to make the fight run smoother.