Color Game Project

THIS IS THE GAME PROJECT THAT IS ACTUALLY WORKING.

I struggled to do this work just because it was difficult following all of this code and plus its javascript. I wish we were actually in class again. It is definitely hard to work with code independently without the professor there to help. But I guess this is the chance to learn more about coding independently. 🙁

color-game.html/color-game.css/color.js

Preparing for Remote Classes

This is our first remote problem set that will be the beginning of what will likely be remote lessons for remainder of the semester. We are going to focus on two things this first week. Setting up SSH and reviewing work that needs to have been completed to date.

SSH Tutorial

Or look at the blog post tutorial made by Chanesh, Ricardo and Qadeer.

Assignments Audit

For next Tuesday you’re going to review the work you should have completed to date. You can find a summary of tutorials and problem sets that should have been completed on my server:

Also, you going to need to review your blog posts and make sure you’re linking to assignments as well as answering blog post questions.

Week 6 + Problem Set

Tutorials

Problem Set

<body>
    <p> svbukbshbyudwd ugwig dkjniouhw io niwdih</p>     //1
    <p> svbukbshbyudwd ugwig dkjniouhw io niwdih diwhdiwdhiddhwihd cscx </p>     //2
    <p> svbukbshbyudwd ugwig dkjniouhw io niwdih diwhdiwdhiddhwihd cscx </p>     //3
</body>

let pTag = document.querySelector("p");   // will return the first p tag
let PTags = document.querySelectorAll("p");  // will return all three p tags

There is a difference between querySelector() and querySelectorAll(). When you pass in a value for example a “p” tag, both selectors function differently. querySelector will return the first instances of the “p” tag whereas querySelecterAll will return all instances of “p” tags.

DOM events

This week was an add-on to what we did in the intro to Dom. I enjoyed learning more about how to do CSS tricks in a javascript way which was interesting.

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.

The addEventListener is straight forward to its name and it is basically what you would do in a CSS file but doing the same thing in JS. This is adding interaction to the web page (ex: when a user clicks a button the body turns pink.) The two arguments is a type of listener and a function

//syntax for addEventListener
element.addEventListener(type,functionToCall);

mouseover is a hover event.

let lis = document.querySelectorAll("li");for (let i = 0; i < lis.length; i++) {    lis[i].addEventListener("mouseover", function () {        this.classList.add("selected");    
});

mouseout is the opposite of mouseover which happens when you hover away.

let lis = document.querySelectorAll("li");for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseout", function () {
        this.classList.remove("selected");
    });

click is when you click on an element and an action happens

p1Button.addEventListener("click", function () {
    if (!gameOver) {
        p1Score++;
        if (p1Score === winGame) {
            p1Display.classList.add("winner");
            gameOver = true;
        }
        p1Display.textContent = p1Score;
    }

});

These are the problem sets for this week:

color-toggle.html/color-toggle.js

intro-events.html/intro-events.js

score-keeper.html/score-keeper.css/score-keeper.js

to-do.html/to-do.css/to-do.js

THIS IS THE GAME PROJECT THAT IS ACTUALLY WORKING.

I struggled to do this work just because it was difficult following all of this code and plus its javascript. I wish we were actually in class again. It is definitely hard to work with code independently without the professor there to help. But I guess this is the chance to learn more about coding independently 🙁

color-game.html /color-game.css /color.js

Week 6-never give up

It has been a hard week but I did it!!!!

Tutorials

Problem Set

I chose ign because it looked like it would be easy and fun to give it a makeover. however, I did have a little changing something but overall its done

Blog Question


Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.

querySelector() is taking the CSS Style selector and It returns the first element that matches a given CSS Style Selector.

<script>
function myFunction() {
  document.querySelector("p").style.backgroundColor = "red";
}
</script>

querySelectorAll() is returns all elements in the document that matches a specified CSS selector

<script>
function myFunction() {
  var x, i;
  x = document.querySelectorAll(".example");
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
  }
}
</script>

Week #6: Tutorials + 13 DOM Manipulation + Blog Question.

Tutorials:

Blog Question:

Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.

Both of these methods return either a single element or collection of elements, just in different ways. The querySelector()method returns the first single element in the document that matches the CSS-type selector. The querySelectorAll()method returns a collection of all elements in the document that matches the selector.

querySelector()

<body>
    <h2>DOM example or whatever lol</h2>
    <h2>This is a second h2</h2>
</body>

let tag = document.querySelector("h2");
//this returns the first h2: DOM example or whatever lol

querySelectorAll()

<body>
    <h2>DOM example or whatever lol</h2>
    <h2>This is a second h2</h2>
</body>

let tag = document.querySelectorAll("h2");
//this returns all of the h2 tags

[WEEK #6] – 13 DOM Manipulation + Problem Set + Blog Question


Hey guys. This is just another weeks work. This a refresher of work to be honest. We finally get to use Javascript in real websites to change things around. Overall, I got most of the material.

Tutorials


Problem Set

I chose Walmart because it looked the most understandable. I can easily understand the HTML layout of the page compared to other websites like New York Times. Overall this problem was really fun to do. I enjoy using DOM manipulations.


Blog Question


Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.

querySelector() is a newer method that has not existed for a while,which makes our lives easier. We can basically use it instead of using getElementByID, getElementByTagName, getElementByClassName. What is basically does is take the CSS Style selector (CSS Style selectors is any selector we would use in CSS Document). It returns the first element that matches a given CSS Style Selector. It only returns the first element.

<body>
    <h1>Welcome to MY DOM Demo</h1>
    <h1>This is a second H1</h1>
</body>

let tag = document.querySelector("h1");
//Returns the first h1 which is Welcome to my DOM Demo

querySelectorAll() is the alternative to querySelector(). It works exactly the same but it returns all matching elements instead of only one.

<body>
    <h1>Welcome to MY DOM Demo</h1>
    <h1>This is a second H1</h1>
</body>

let tag = document.querySelectorAll("h1");
//Returns both the h1 tags above

Week #5: Tutorials + JS Basics: Objects + Blog Question.

Tutorials:

Problem Set:

students.html /  students.js

Blog Questions:

Link to an example dynamic webpage that likely pulls data from a database to build the site – any social media site, newspaper, blog, etc. Take a screenshot of a typical “post” and propose an object data structure to store all the elements of the post. Use the Enlighter code embed tool to include your proposed object design in a code sample.

var tweet = {
    user_avatar: "barack.jpg",
    user_name: "BarackObama",
    user_handle: "@BarackObama",
    content: {
        date: "Aug 12 2017",
        text: ""No one is born hating another person because of the color of his skin or his background or his religion..."",
        media: "babies.jpg",
        links: {
            reply: function(){},
            retweet: function(){},
            like: function(){},
            share: function(){}
        }
    }
}
css.php