WebDev2 | Week: I don’t even know

Since the shut down of the world and social distancing, my motivation for everything has decreased. I feel defeated. I feel lost and I just don’t want to do any more work. I’ve realized that the process of going to class and interacting with my professor and classmates is key to my learning techniques. I need visual learning and help from others to progress. And because I do not have access to do so, I am feeling very much off-track.

I know I will eventually post my blogs at the end of the semester but as of now, I need to do my best with understanding the tutorials to get the problem sets done. I have slowed down but I will not give up on myself.

This is just a spontaneously hard time for me, my family and the world.

week 8-where your motivation?

haven’t seen outside for a month and a half…i think everything going to be ok

Video Walkthrough

I chose scene Scene 17 because I felt like it would be easy (it not but im not going to giving up)

the instruction is just to Wait eight seconds and it will continue.

Version 1 – Scene 17 Remake

still a work in progress I do need to change the h1 to something else and the skull needt to be pushed down a little bit more.

I miss outside

[FINAL] – The Moron Test – The Game Board

Hello all. I liked the video that professor put up on YouTube. I had a understanding how to place icons altering the index.html but was not that good with the JavaScript part. I liked how we can use data structures to build icons. I am finally using JavaScript to build something. Below will be the code/ notes from the video tutorial.

Video Walkthrough Video 1-6

I chose scene 25 because I felt it was the best scene to choose. I had an idea of using a clock with numbers around it but the prompt said to use three icons from FontAwesome so I had to alter my choice.

Version 1 – Scene 25 Remake — MY ATTEMPT

When creating my version, I did have a “+” icon in the center. I asked someone how it looked and they suggested that I remove the icon. I am limited to certain choices using FontAwesome. The instructions is to touch the rain icon and then the snow icon three times consecutively. The list below will be the walk through of the scene once I give the brains to the JavaScript.

  1. Rain Icon, click
  2. Instructions removed
  3. Snow Icon, click
  4. Snow Icon, click
  5. Swap Icon Snow Icon and Sun
  6. Swap the colors of Snow and Sun.
  7. Snow Icon, click

I am essentially trying to trick the user at the last click. Most impatient people will click the icons fast without thinking,

Below is an example of an “i element” in the HTML file. This “i element” has an inline style which include color, positioning and size. This specific element has a color and is positioned to the middle of the page using left 50%. This centers the icon in the x axis(left to right). The Y-axis (top to bottom) is set by stating top:25%. This makes the element show on the top. The font-size is set to 14rem. If you want to set the icon lower, you would increase the top percentage.

<i class="fas fa-cloud-showers-heavy" style="
    color: #3babfd;
    left: 50%;
    top: 25%;
    font-size: 14rem;">

I am not sure if I was supposed to remake the scene or to re design it. I tried to make something different.

[WEEK #7] – 14 Advanced DOM Manipulation + Problem Set + Blog Question

Hello guys, this is week 7’s work. I did’t have any troubles doing it. I really liked the walk through of the problem set. I just did not like how he made us write the code and then at the end he just simplified it. Overall I liked the information that I have learned.


Problem Set

This problem set was pretty fun to create. I created a game that I can play on my free time. I like projects like these.

Blog Question

Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

When using addEventListeners, there are two arguments passed. The first one is the listener event (something that is being listened to) and the other is the function. When the listener event is fulfilled, then the function is activated.

Click Event

button.addEventListener("click", function () {

//An alert is being run when you click on the button.

Change Event

numberInput.addEventListener("change", function() {
  //Change event will run anything a change happens.
  winningScoreDisplay.textContent = numberInput.value;
  winningScore = Number(numberInput.value);

//Whenever a change event happens in a <input> or <textarea> element, the function is run.

Mouseover Event

for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener("mouseover", function () {

//This event happens when you move your mouse over the element which are the li element. Once you move your mouse over it, a class is added to the element.

Mouseout Event

for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener("mouseout", function () {

//This event happens when you move your mouse away from the element which are li elements. This works together with the mouse over element. The class "selected" is removed from the element.

I hope you understand what I was trying to explain.

Dom Game — Start of it..

I did not break the versions into different files I did all of the work in one just because I did not know to break it up, but I am getting the gist of it.

I chose to switch up the icons a bit like I was supposed to do. For the first scene, I chose to use the apple logo and changed the positions which were fun to accomplish.

Describe and link to the scene you chose from the breakdown. Give an explanation of the positioning of your i elements and additional icon values.

Click on the ghost was changed to this which I liked. I used the same positioning that was in the code along. I played around with numbers while coding so I can see how it look but converted it back to how it was.

This is an example using the i:

<i class="fab fa-apple" style="
                color: #FC0D1B;
                left: 70%;
                top: 43%;"></i>

dev2 – Get Actor/Credits Revisited

A little bit of a reset with the change in HTML/CSS.

The change is going to help us reach the final goal of building our six degrees of separation game. That linked version is an old prototype, but it works and you can get a feel for how the game works.

So I’ve uploaded the code for the new layouts of the get actor original assignment (zip) as well as the get actor/credits assignment (zip). Download both sets of zip files and review the code. I’d like for you to write inline comments for 13.5-fetch-actor-credits-new-layoutdescribing how the following functions work:

  • getActor(nameStr)
  • clearCardBox()
  • buildMainCard(img, main, detail)

For the Blog

Link to your commented version of game.js. Also add an enlighter sourcecode block in the post giving just the comments, no code. It should look something like the block below.

   //first comment
      //second comment
      //third comment
         //fourth comment
      //fifth comment
//same for clearCardBox() and buildMainCard(img, main, detail)

WebDev2 | AJAX – XHR and Fetch: Week 5

Tutorials: Git Hub.Zen , Random Dog , Bit Coin
Problem Set: Fetch Actor Movie DB (with Credits)
*despite the drastic change of the semester, this was the most fun project I’ve worked on. Mainly because my family are “Movie Buffs” so it was fun learning and doing the work around my family
Blog Question: An API stands for Application Programming Interface, and basically it allows you request all of the work a specific actor has done. Including movies and tv shows, the data displays the title along with images and credits of all of their work. I imagined using this data to familiarize myself with actors and how to use the API to retrieve certain data.

week 7- 28 Days Later….

This has been a hell of a few weeks. no movie theaters, can’t go outside and when you do go outside it looks like all life has been wiped out

but at least we have coding


for 14 advanced dom manipulation

for Problem set

Blogging Questions

Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

Its a method attaches an event handler to an element without overwriting existing event handlers.  You can add many event handlers to one element two “click” events for example

var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";

Section 14 Advanced DOM Manipulation + Problem Set

Blogging Questions

when adding an event listener methods there are two arguments that are passed, the first is the event being listened for while the other argument is a function. These two rely on one another. The event being listened for, when activated such as a “click” causes the function to run.

//examples with anonymous function

for(var i = 0; i < squares.length; i++){ 
 squares[i].addEventListener("click", function(){
			var clickedColor = this.style.backgroundColor = "red";

  squares[i].addEventListener("mouseover", function(){

                      var transparent = this.style.opacticy = 0;

// these two event listeners accomplish two different goals, the first one changes backgroud color of an elemt when clicked while the second one changes the opacity when hover over

// its important to note that anonymous function can only be used in the instance that is was created in while a declared function can be used every where. in other word anonymous functions can only be used where they are declared. 

function f_one(){
   //random code

function f_two(){
   //random code


for(var i = 0; i < squares.length; i++){ 
      squares[i].addEventListener("mousemove", f_one())
      squares[i].addEventListener("mouseover", function())

// these event listeners will execute code stated in function declaration