13 Problem Set

The web page 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("#chorus-brand > span")

//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")

//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"

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *