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

directory

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

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

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] – 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(){}
        }
    }
}

Intro to DOM

This week was fun, getting into the whole notion of manipulating web pages. But the thing that sucks is that when you manipulate a web page the things you have changed is not permanent. Everything goes away and you no longer see your design or “hacks” 🙁

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 for your answer; include sample HTML and JS selectors.

querySelector() is when you select the first element that matches a given CSS style selector.

//select by ID
<li id ="hightlight> List Item 1 </li>
let tag =document.querySelector("#highlight")

querySelectorAll()is when you return a list of elements that matches a given CSS-style selector.

//select by class
<li class ="bold"> List Item 2 </li>
<li class ="bold"> List Item 3 </li>
let tags =document.querySelectorAll(".bold")

The website I used for this problem set is vsauce.

Just copy and paste in the console, I did not too much but I changed some things and you will see:

const videoThumbnail = document.querySelectorAll("img.video-thumbnail")

videoThumbnail[0]
//<img alt class=​"video-thumbnail" ng-src=​"https:​/​/​i.ytimg.com/​vi/​j94VUp6NZEg/​hqdefault.jpg" src=​"https:​/​/​i.ytimg.com/​vi/​j94VUp6NZEg/​hqdefault.jpg">​

//change of images
videoThumbnail[0].setAttribute("src", "https://parade.com/wp-content/uploads/2018/03/golden-puppy-life-national-geographic-ftr.jpg")

for(let i=0; i < videoThumbnail.length; i++)
{videoThumbnail[i].setAttribute("src", "https://parade.com/wp-content/uploads/2018/03/golden-puppy-life-national-geographic-ftr.jpg")
}

//change a tags
const aTags = document.querySelectorAll("a")
aTags[0]
//<a href=​"https:​/​/​www.youtube.com/​dingsauce">​ding!​</a>​

aTags[0].textContent =("bye")
//"bye"

for(let i=0; i < 4; i++)
{aTags[i].textContent=("bye")
}

//change p tags
const pTags = document.querySelectorAll("p")

pTags[0].textContent = ("How are you today? I really don't care LOL: dictum lorem id, lacinia orci. Morbi tempus sem velit, vitae dictum ligula condimentum in. Sed convallis eros nisl, non volutpat felis scelerisque quis.")

for(let i=0; i < pTags.length; i++)
{pTags[i].textContent=("How are you today? I really don't care LOL: dictum lorem id, lacinia orci. Morbi tempus sem velit, vitae dictum ligula condimentum in. Sed convallis eros nisl, non volutpat felis scelerisque quis.")
}
"How are you today? I really don't care LOL but do you understand :Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget velit placerat, dictum lorem id, lacinia orci. Morbi tempus sem velit, vitae dictum ligula condimentum in. Sed convallis eros nisl, non volutpat felis scelerisque quis."

//change authors

iter = 1;
const authorName = document.querySelectorAll("span.ng-binding");

for(let i = 0; i < authorName.length; i++){ 
    authorName[i].textContent = "UNANIMOUSLY" + iter++;
}

//buttons
const buttons = document.querySelectorAll(".btn");
for(let i = 0; i < buttons.length; i++){
    buttons[i].textContent = "get off my site";
}

Exercises for this week:

demo.html/demo.js

exercise.html/exercise.js

selectors.html/selectors.js

This is the problem set:

webpage-hack.html/webpage-hack.js

[WEEK #5] – 12 JavaScript Basics – Objects + Problem Set + Blog Question

Tutorials


Problem Set

BLOG QUESTION

I decided to use reddit for this blogging question,

let post = {
    reddit-community: "r/" + "community",
    reddit-user: "username",
    post-title: " uhsiughnxiugcece", 
    
    content: {
         images, medias, various link
       },

    
    upvote: function () {},
    comment: function () {},
    downvote: function () {},
    share: function () {},
    save: function () {},
        }
    }

css.php