dev1 – The webpage hack

Find a webpage that has a number of article previews with headlines, slug text, author attributions and more. You will then in the console select a number of these elements and modify the content, attributes, and style. Below is a list of requirements for modification:

  • Select and modify using a for loop at least four headlines. For all elements, change the text content and color.
  • Select and modify using a for loop at least four images that preview articles. Use a remotely hosted image to reset the src attribute.
  • Select and modify using a for loop at least four slug texts that previews the article. Use lorem ipsum to reset the text content.
  • Select and modify using a for loop at least four attributed authors. Use any name you wish to reset the text content.
  • Select and modify all links on the page to hyperlink to a single site of your choosing.
  • Select at least three additional individual elements and modify the contents and/or style.

You will need to test your selectors and modifiers in the console of your webpage, but working code should be saved in a JS file. Be aware that webpages occasionally reload on some set interval, so be sure to copy and paste working selectors and manipulators to your JS file. For the blog post include a code insert that names the URL in a comment and includes all working code that anyone could paste into the console of the webpage chosen. Below is an example for The Ringer website:

//visit https://www.theringer.com and copy paste the following into the console

//Selectors for elements
var menuLinks = document.querySelectorAll(".c-global-header__link a")
var social = document.querySelectorAll("svg")
var links = document.links
var articleHeading = document.querySelectorAll("a[data-analytics-link='article']")
var articleFeature = document.querySelectorAll("a[data-analytics-link='feature']")
var articleSlug = document.querySelectorAll(".p-dek")
var pictures = document.querySelectorAll(".c-picture")
var morePictures = document.querySelectorAll(".c-dynamic-image.lazy-image")
var writer = document.querySelectorAll(".c-byline__item > a")
var articleCat = document.querySelectorAll(".c-entry-box--compact__label.c-entry-box--compact__label-primary > a")
var videoPlayButton = document.querySelectorAll(".p-badge path")

//Loops to manipulate various elements
for (var i = 0; i < links.length; i++) {
    links[i].setAttribute("href", "http://www.cornify.com/")
}

for (var i = 0; i < articleHeading.length; i++) {
    articleHeading[i].textContent = "This Unicorn Thing is Really Happening!!!!"
    articleHeading[i].style.color = "pink"
}

for (var i = 0; i < articleFeature.length; i++) {
    articleFeature[i].textContent = "This Unicorn Thing is Really Happening!!!!"
    articleFeature[i].style.color = "pink"
}

for (var i = 0; i < articleSlug.length; i++) {
    articleSlug[i].textContent = "Tootsie roll candy canes halvah dragée pudding powder. Cupcake caramels topping. Gingerbread chocolate liquorice."
}

for (var i = 0; i < pictures.length; i++) {
    pictures[i].innerHTML = `<img src="http://worldartsme.com/images/rainbow-unicorn-clipart-1.jpg">`
}

for (var i = 0; i < morePictures.length; i++) {
    morePictures[i].setAttribute("src", "http://worldartsme.com/images/rainbow-unicorn-clipart-1.jpg")
}

for (var i = 0; i < writer.length; i++) {
    writer[i].textContent = "Pop Corn"
    writer[i].style.color = "red"
}

for (var i = 0; i < articleCat.length; i++) {
    articleCat[i].textContent = "Unicorn Trade Value"
    articleCat[i].style.color = "#dd8888"
    articleCat[i].style.backgroundColor = "white"
}

for (var i = 0; i < social.length; i++) {
    social[i].style.fill = "pink"
}

for (var i = 0; i < videoPlayButton.length; i++) {
    videoPlayButton[i].style.fill = "pink"
}

//Extra effort to change the logo for the ringer
//The <span> inside the <a> containing the logo is selected
var logo = document.querySelector(".c-global-header__logo")

//any elements inside the span are removed
while (logo.firstChild) {
    logo.removeChild(logo.firstChild)
}
//a new img eleement is created
var newLogo = document.createElement("img")

//a new src is set to this new img element
newLogo.setAttribute("src", "http://www.cornify.com/assets/logo.png")

//and a little padding
newLogo.style.padding = "10px"

//the new image element is added to the initially selected span
logo.appendChild(newLogo)

//menu links get unique names
menuLinks[0].textContent = "Popcorn"
menuLinks[1].textContent = "Cupcakes"
menuLinks[2].textContent = "Frosting"
menuLinks[3].textContent = "Sprinkles"
menuLinks[4].textContent = "Bubble Gum"
menuLinks[5].textContent = "Toffee"

dev2 – Closures and keyword ‘this’

Tutorials

  • ADV Section 11, videos 117 – 131
  • Exercises files to publish on your server as HTML / JS pairs
    • closure-code-a-long.html / closure.js
    • closure-exercise.html / closure-exercise.js (instructions)
    • this-code-a-long.html / this.js
    • this-exercise.html / this-exercise.js (instructions)

Blogging Questions

Declaring a new object creates a new instance of this. Describe how you can access this within an object. Use a code snippet to illustrate your example. It should have an object with a method that when called returns the object itself.

dev1 – DOM Manipulation

Tutorials

  • Section 13, videos 121 – 129
  • 13 DOM Manipulation tutorial notes
  • Exercise files to publish on your server as HTML / JS pairs
    • selectors.html / selectors.js
    • exercise.html / exercise.js
    • demo.html / demo.js

Blogging Questions

  • 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.

dev2 – fetch actor with movie database API

Introduce yourself to the movie database API. You’ll need to create an account so that you can get yourself a unique API key. And with that in-hand use the search people endpoint and my epic list of famous actors to rework the random user assignment into the random actor generator. Use fetch(apiURL) to make your requests and .then and .catch syntax to resolve the data returned from the API.

You can use the HTML / CSS files that I’ve created so you don’t have to rework those if you do not want to. But you’ll need to add your own JS file to complete the assignment. Also to concatenate all the different arrays of actors into a single array to generate a random actor string value, consider using spread syntax, it’s super helpful!

dev1 – JS Objects problem set

Create a single HTML / JS pair students.html / students.js which you can download from here (or copy/paste the code from the snippet below). It includes descriptions of the problems and the array of objects needed to write the following functions:

  • CT course count for loop – Create a function ctCourseCount(studArr) that takes the supplied array of objects data structure as a value. When called, use a for loop to print a value for each student and the number of CT courses taken. For example: “Voski Dreher has taken 9 courses in CT.”
  • CT course count forEach – Create a function ctCourseCountforEach(studArr) that takes the supplied array of objects data structure as a value. When called, use a forEach method to print a value for each student and the number of CT courses taken. For example: “Voski Dreher has taken 9 courses in CT.”
  • CT students not enrolled – Create a function isNotEnrolled(studArr) takes the supplied array of objects data structure as a value. When called, the console prints a list of students that are not enrolled. For example, “Wolf Shepard” should be on that list.
  • CT courses taken – Create a function coursesTaken(studArr) that takes the supplied array of objects data structure as a value. When called, the console prints a list of students and every course that student has taken. For example, “Wolf Shepard has taken: CT 101, CT 201, CT 137, CT 160, CT 360”
var students = [{
        name: "Diksha Dohman",
        age: 20,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 210", "CT 137", "CT 205"],
        totalCredits: 75,
        enrolled: true
    },
    {
        name: "Voski Dreher",
        age: 24,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 160", "CT 201", "CT 210", "CT 137", "CT 205", "CT 240", "CT 355", "CT 345"],
        totalCredits: 110,
        enrolled: true
    },
    {
        name: "Divya Glas",
        age: 19,
        major: "Communications Technology",
        coursesTaken: ["CT 101"],
        totalCredits: 15,
        enrolled: false
    },
    {
        name: "Theofanis Sandoval",
        age: 20,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 201", "CT 137", "CT 160", "CT 360", "CT 370", "CT 381", "CT 385"],
        totalCredits: 95,
        enrolled: true
    },
    {
        name: "Wolf Shepard",
        age: 21,
        major: "Communications Technology",
        coursesTaken: ["CT 101", "CT 201", "CT 137", "CT 160", "CT 360"],
        totalCredits: 45,
        enrolled: false
    }
]

//Complete the functions below

//All functions take the above students array of objects as an argument.

//create a ctCourseCount function that console logs the student's name and the number of courses taken.
//use a for loop for this function
//For example: “Voski Dreher has taken 9 courses in CT.”
function ctCourseCount(studarr) {

}

//Create a second version of the function above but use 
//a forEach method instead of a for loop
function ctCourseCountforEach(studarr) {

}

//CT students not enrolled function
//the console prints a list of students that are not enrolled. 
function isNotEnrolled(studarr) {

}

//CT courses taken listed function
//When called, the console prints a list of students and every course that student has taken. 
//For example, “Wolf Shepard has taken: CT 101, CT 201, CT 137, CT 160, CT 360”
function coursesTaken(studarr) {

}

dev2 – AJAX – XHR and fetch

Tutorials

  • Section 07, videos 072 – 083
  • Exercise files to publish on your server as HTML/JS pairs:
    • github-zen.html / github-zen.js (added challenge post the quote to the page as well as the console)
    • random-dog.html / random-dog.js
    • bitcoin.html / bitcoin.js
    • random-user.html / random-user.js

Blog Questions

Describe your understanding of what an API request is. What is an API? Find an API out there in the “internet wilds” that looks interesting to you. What does that API allow you to request? What data do you get in return? How might you imagine using that data?

dev1 – JS Objects

Tutorials

  • Section 12, videos 114 – 120
  • 12 JS – Objects tutorial notes
  • Exercise files to publish on your server as HTML/JS pairs:
    • object-examples.html / object-examples.js
    • movie-db-exercise.html / movie-db-exercise.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.

Here’s an example:

var tweet = {
    user_avatar: "ryan.jpg",
    user_name: "ryanseslow",
    user_handle: "@ryanseslow",
    content: {
        date: "Sep 30",
        text: "#wip - and a #sneakpeek for the new @brooklynwineco #mural taking shape this week in #parkslope - #brooklynwineco - this is some of the fresh concept art, mock-up process and inspiration. I hope y’all dig it! #brooklyn #nyc #art #comingsoon",
        media: "wall.jpg",
        links: {
            reply: function(){},
            retweet: function(){},
            like: function(){},
            share: function(){}
        }
    }
}

dev2 – promises problem set

You will need the completed solution to last week’s advanced array methods problem set to complete this week’s problem set. Create a copy of that solution’s HTML / JS pair and rename them promises.html / promises.js. You will need to add to that completed code solutions to the following:

//Write a new promise saved as fetchStudents that checks if the variable students exists. It resolves with the value of students and rejects with a string value "couldn't find students. try again"

//your solution



//Using .then and .catch syntax call fetchStudents and console.log the students array or console.log the error message.
//for example if students is not commented out, the entire array will logged or if it is commented out, the error message is logged in the console.

//your solution



//Using .then chaining and .catch syntax call fetchStudents 
//and using our student array method functions
//then return the students enrolled
//then return the students that have taken CT 101
//then console.log those students
//catch if students doesn't exist

//your solution

dev1 – JS Arrays problem set

Create single HTML / JS pair arr-prob.html / arr-prob.js which includes the following functions:

  1. Reverse Array – Create a function reverseArray(arr) which takes an array as an argument. The function returns a new array with the values reversed. For example: reverseArray([1,2,3]) returns [3,2,1].
  2. Range Array – Create a function rangeArray(start, end) which takes two numbers as arguments. The function returns an array containing all the numbers from the start up to and including the end. For example: rangeArray(3, 9) returns [3,4,5,6,8,9].
  3. Longest Username – Create a function longestUser(ar) which takes an array of string values (usernames) as an argument. The function returns the value of the longest username. For example: longestUser(["Tony", "Syeda", "Affroz", "Tatiana”]) returns "Tatiana".
  4. Only Numbers – Create a function onlyNums(arr) which takes an array as an argument. The function returns an array that has removed any values except numbers. For example: onlyNums(["fun", 23, 45, undefined, "a", 4]) returns [23, 45, 4].

webDev2 – Async Foundations

Tutorials

  • ADV 06 Async Foundations, videos 059 – 071
  • Please write code for the code-alongs as well as complete the two exercises. Link the JS files to a single HTML file.
    • async-found.html
    • callback-basics.js
    • foreach.js
    • findindex-intro.js
    • findindex-exercise.js (download)
    • stack-heap.js
    • settimeout.js
    • countdown-exercise.js (download)
    • promises.js

Blogging Questions

Describe the difference between how using an anonymous function vs. a declared function works as a callback. Use the Enlighter tool to write an example to include as part of your description.

css.php