1st Journal Entry

9/22 Last class (9/19) we created a photo on Github and liked our Sublime Text code to them. It is really cool to be able to look up my own website online, even though there are nothing but GIFs and images on it.

The steps to update my website online:

2nd Journal Entry

9/26 Today we went over everything we have learned thus far this year. In case I forget anything, here is the link to a slideshow with all the code we learned: bit.ly/cs1-slides . We also made our person cards and linked them to our websites. Here is the link to mine: https://codepen.io/JoseSebas2023/pen/zYyjYdK

Although the issue of my website not showing up online was resolved, the link to my journal page still doesn't work.

We also made our first project. It's just a bunch of bright boxes that hurt your eyes and change colors when you hover over them.

3rd Journal Entry

10/3 Today we worked on an animation project and put our updated websites on GitHub. I did a soccer ball on fire moving across the screen and getting bigger as it does.

4th Journal Entry

10/6 Today we worked for the whole class. I updated my projects and aboutme page. Next class Ms. Joesphs is putting our websites on the class page so I have some work to do over the weekend to finish everything up.

5th Journal Entry

10/13 I sketched out a plan for my Halloween jumpscare project. I'm going to make the user tap on a house door for trick or treating and when the door opens a scary clown comes out. Although I don't have a lot of code for the project yet I linked it to my projects page.

6th Journal Entry

10/24 I was out last class because I was sick but I'm still not really behind because I already coded my jumpscare. Some other big news that I learned when I came back to school is that Jonathan joined our class which is hype. It's great to have someone in class who is actually good at computer science.

In class we refined our jump scares. Mine is a house with text that says "click to trick or treat" but when you click a creepy clown appears and does an evil laugh. At home, I worked on centering the clown when it appeared because it isn't as scary when it shows up on the side. I also tried many times to have the text change to "BOO!" when the clown appears, but I still don't know how.

7th Journal Entry

10/27 In class we continued working on our jumpscares. I explained what it is in the last journal entry but now I will explain the code behind it. In my jumpscare, I have two divs, one for the trick-or-treat house and the other for the clown. I also have an event listener that plays a clown laugh and changes the clown's opacity to 1 when the screen is clicked (the user will click the screen because there is text at the top that says "click to trick or treat").

In class we also watched Ms. Joseph's video on event listeners. Here are 3 of my questions about event listeners:

8th Journal Entry

11/10 We used JavaScript to make a fourth project. I made a project about soccer balls that appear at every .5-second interval and disappear if you hover over them with your mouse. Soon we will be starting gratitude cards: We have to code something that says we are grateful for someone and send it to them. I'll probably make one for my parents.

9th Journal Entry

11/14 A function in code is a recipe that does something. We define it by saying function name (input){output}

I barely had time to start my gratitude card because I was taking the AMC10 for most of the class time. I couldn't answer more than half the questions and I honestly almost fell asleep.

10th Journal Entry

11/22 Today I worked on my gratitude card which is based on the trips to Peru my dad took me on. Every time a key is pushed, a different photo from our trips comes up. In the background is a picture of the Peruvian flag and instructions on how to see the photos. The first time you click, the Peruvian national anthem starts playing.

I also edited my fourth project which is mentioned in my eighth journal entry. Now when you hover over a soccer ball, a different one shows up. Before the original soccer ball would just disappear.

11th Journal Entry

11/28 Three questions (and answers) about what we learned so far:

What are some more events we can use in event listeners? -------- Here is a Chat Gpt generated list of all the possible event listeners:

Mouse Events:

  • click: Occurs when the mouse button is clicked.
  • mouseover: Triggered when the mouse pointer moves over an element.
  • mouseout: Fired when the mouse pointer moves out of an element.
  • mousemove: Occurs when the mouse pointer moves.
  • mousedown: Triggered when a mouse button is pressed over an element.
  • mouseup: Fired when a mouse button is released over an element.
  • Keyboard Events:

  • keydown: Occurs when a key is pressed down.
  • keyup: Triggered when a key is released.
  • keypress: Fired when a key is pressed.
  • Form Events:

  • submit: Occurs when a form is submitted.
  • input: Triggered when the value of an , , or element changes.
  • change: Fired when the value of an input element changes and loses focus.
  • Window Events:

  • load: Occurs when a resource and its dependent resources have finished loading.
  • resize: Triggered when the browser window is resized.
  • scroll: Fired when the document view or an element is scrolled.
  • Focus Events:

  • focus: Occurs when an element receives focus.
  • blur: Triggered when an element loses focus.
  • Media Events:

  • play: Occurs when the media begins to play.
  • pause: Fired when the media playback is paused.
  • ended: Triggered when the media has reached the end.
  • Drag and Drop Events:

  • dragstart: Occurs when the user starts dragging an element.
  • drag: Fired when an element is being dragged.
  • dragend: Triggered when the user finishes dragging an element.
  • What are the advantages of using Javascript over CSS? -------- They both have their advantages. CSS is used mostly for styling webpages while javascript is used for more interactive parts of webpages.

    What is the difference between heading and p tags? -------- Headings show up a lot bigger than p tags.

    12th Journal Entry

    12/12 Today I created another project using for loops. I took inspiration from my code from my fourth project (the soccer ball project) and Ms. Joseph's bird code. The project features repeated images of Lewandowski and Muller (players who played for my favorite soccer team). These images start with an opacity of zero (invisible) but when they are hovered over, their opacity changes to one (they appear). On every image, there is a number counter and there are 5000 in total.

    I'm also having trouble getting my website updated because there are problems with the new token I got on GitHub.

    13th Journal Entry

    12/19 Today (and yesterday in my lab with Molly) I finished up my last project of the year. I created a way for the user to rate the albums they want to listen to the most over the holidays. The albums to rate are all on the top of the page and you have to click to make a copy and paste it into the spot you want to. There is a podium for 1st, 2nd, and 3rd as well as banners for 5th, 6th, and 7th. Using event listeners, when you click on an album it stores your choice and when you click again on it makes a copy. The position of the pasted album is determined by the location of the mouse by creating the variables x and y, console logging them, and subtracting 50 pixels from each so that the mouse corresponds to the center of the album rather than the top left corner (the albums are 100px by 100px).

    14th Journal Entry

    1/9 Today we learned about arrays and how to use them. Arrays are used to generate a random element of a given list. It's sort of like a lottery, you can put many things into the list (numbers, letters, words, or literally anything) and the code will randomly pick one of the things. An example of an array is shown on my: array.html in my computer science folder.

    15th Journal Entry

    1/30 After missing a week of school because I had Covid, I utilized my knowledge of arrays to make a project that recommends tv shows. I have a bunch of images of different shows in an array and the computer randomly picks one of them to display on the screen. Some of the shows in the array are Only Murders in the Building, For all Mankind, Stranger Things, and many more. The background is a theatre to make the project more interesting and there is text at the top telling the user to reload the page to pick a show.

    16th Journal Entry

    2/9 Today I worked on my Valentines Day card but I still cannot figure out how to get the hearts to move around and display different images.

    17th Journal Entry

    2/16 Today I completed by Valentines Day project thanks to Molly teching me how to move around divs and have different photos in the same div using event listeners. I made one div for all the hearts and had separate instructions for each one. Then I made an event listener so that an image appears when the heart is hovered over (there's a different image for each one). I used math.random to make coordinates for the heart that change so that the heart moves. There is also a transition time so that it doesn't look like the hearts are teleporting

    We also used Hasin's love compatability project as inspiration to make somthing simliar. I made a crush guesser to go with the Valentines Day theme. I used if, if else, and else statements to have the computer give back different answers depending on what name the user inputs.

    Today was a really busy day. At home I finished my car project. It is a car on the screen that moves when you use the arrow keys. To do this I console logged a click of the arrow keys and had the car move either right, down, left, or right depending on which arrow key was pressed using if statements.

    18th Journal Entry

    3/5 Today we looked at a lot of the old CS1 student's final projects (including Nathan's brother who discussed how his "near death experience" influenced his projects). For my final project, I've been thinking that I want to do something soccer related. Maybe a project where the user can pick their dream team, take a test to determine their soccer knowlege, or even play a mini-game of soccer against the computer (if that's even possible). Maybe for the last idea a penalty shootout is more realistic.

    19th Journal Entry (Final Project Start)

    3/18 We began to brainstorm ideas for our final project. We wrote these ideas on a gdoc that we shared with Molly but here is the list again:

    20th Journal Entry

    3/18 I decided to not go with any of my ideas on my list from last class. Now I'm going to do a digital tennis game. I'm not sure exactly how it is going to work, and it might be a little overambitious, but it seems like it'll be fun so whatever!

    21st Journal Entry

    3/22 I'm starting my final project on Scratch rather than on sublime text. Molly thinks this little detour will be beneficial because it is easier to make the game on Scratch and then just have to translate it rather than starting in Sublime Text with CSS and Javascipt.

    22nd Journal Entry

    4/5 I've been worth on my final project in Scratch for the last couple of weeks. Even though I'm almost done, it kinda seems like I'm wasting my time and should just start working in Sublime Text. I have made good progress though, I have a ball that goes back and forth between two sprites on a tennis court. It is also interesting to learn how to use Scratch, even though we rarely use it in Computer Science.

    23rd Journal Entry

    4/19 I'm making some great progress on my final project in Sublime Text. Now I have a tennis court backdrop and two rackets that can be controlled by the arrow keys/WASD keys. I do this by making the computer get the coordinates for each player, assigning a variable for the left, right, top, and bottom sides of both players, and adding/subtracting ten px to the variables depending on which key is pressed.

    24th Journal Entry

    5/3 Getting the ball to move between the two rackets is proving to be quite a challenge. We didn't really learn any code this year that will make it work so I'll need to talk to Molly and do some independent research.

    25th Journal Entry

    5/10 After two labs with Molly, we are making progress on the ball movement but it still does not work properly. Updates soon...

    26th Journal Entry

    5/17 Two more labs with Molly have passed since my last entry and now we have a functioning game! I can't wait to present next week and finish this project.

    27th Journal Entry

    5/21 It's presentation day!! I went after Henry presented his typing test and Jonny showed off his facial recognition technology. I almost didn't get to present but we stayed in class late so it was all good. Over the weekend I made my Google Slides presentation about how my tennis season influenced my final project code. I specifically talked about how my season would have been ruined if it wasn't for an epic comeback I had in my first game. I went on to go 11W - OL on JV (2 of the 11 wins were on Varsity though). Over the weekend I also added a scoreboard to my game that counts the amount of hits in the rally. It works by checking if the ball is overlapping a player, and if it does, not only does the ball go to the other player, but 1 point is added to the scoreboard (which starts at zero).