HackerRank 2021 - Assessment Science - Front End React: Part 3

• notes • javascript • hackerrank

The last part of the seven-item front end exam by HackerRank consists of five multiple choice questions with topics on JavaScript, CSS and overall DOM manipulation.

Table of Contents

Missing Code for Hover Color Green to Red

Problem

Consider the files file.html, file.css and file.js.

<a href="#">Link</a>
<button>Click</button>

body {
  padding: 50px;
  font-size: 24px;
}

a { color: blue; }
a:hover { color: green; }

function injectStyles(magic) {
  var div = $("<div/>", {
    html: '&shy;<style>' + __________ + '</style>'
  }).appendTo("body");
}

The following jQuery should change the link hover color to red when the button is pressed.

$("button").on("click", function() {
  injectStyles('a:hover { color: red; }');
})

Pick ONE option:

  1. magic.getContent()
  2. magic.parent().getContent()
  3. magic
  4. magic.getParent().getContent()

Solution

Item # 3 magic completes the injectStyles() function:

function injectStyles(magic) {
  var div = $("<div/>", {
    html: '&shy;<style>' + magic + '</style>'
  }).appendTo("body");
}

All the methods getContent(), parent() and getParent() are not available for String objects in JavaScript.

I did a quick search over at MDN and I only FileSystemEntry.getParent() using the three fictitious methods.

Ask to Download

Problem

Which statement will show an image and if a user clicks on the image, the browser will ask them to download it?

  1. <a href="/images/wallpaper.jpg" download><img src="/images/wallpaper.jpg"></a>
  2. <a href="/images/wallpaper.jpg"><img src="/images/wallpaper.jpg" download></a>
  3. <a href="/images/wallpaper.jpg"><img src="/images/wallpaper.jpg" onclick="download"></a>
  4. <a href="/images/wallpaper.jpg" onClickAction=download><img src="/images/wallpaper.jpg"></a>

Solution

Item # 2 with the download attribute attached only to the image is the answer.

The first works differently as the download attribute is in the anchor tag. If the link is of the same-origin, then it will prompt a file download; otherwise it will just navigate to the destination URL.

The third fires an error Uncaught ReferenceError: download is not defined at HTMLImageElement.onclickgo because onclick="downlod" is not declared so it just navigates to the destination URL.

The fourth goes to the linked URL in the anchor tag. onClickAction will just be ignored because it is not a standard attribute.

Start at Page Element

Problem

When a web page is loaded, the user’s cursor should be in the only text field on the page. How is this accomplished using HTML5?

  1. <input type="text" focus=True>
  2. <input type="text" autofocus>
  3. <input type="text" focus="onPageLoad">
  4. It cannot be accomplished with only HTML5.

Pick ONE option.

Solution

This is possible with native HTML using the autofocus attribute on input elements so item # 2 is the answer. In Chrome, the textfield will have an orange border as the cursor is focused in it upon load.

autofocus is applicable to input, select and textarea elements.

The first and third’s focus attributes will just be ignored because it is not a standard attribute.

Field Creation

Problem

Which code produces the following? Width and height are 100px.

Pick ONE option.

  1. <fieldSet style="height: 100px; width: 100px;"><Legend>Coding is Fun</Legend></fieldSet>
  2. <fieldSet style="height: 100px; width: 100px;"><Header>Coding is Fun</Header></fieldSet>
  3. <fieldSet style="height: 100px; width: 100px;"><Caption>Coding is Fun</Header></fieldSet>
  4. <fieldSet style="height: 100px; width: 200px;"><Legend>Coding is Fun</Legend></fieldSet>

Solution

The first item is the correct answer.

Both items # 2 and 3 do not produce the same result because <header> and <caption> will not behave the same was as a <fieldset> element.



The fourth one has valid markup but it has 200px width which does not satisfy the requirements.

Which is the right answer to the following?

Problem

<p id="test" name="hacker">Hello</p>

Which os the following JavaScript code snippets will append “Mr. Bob” after “Hello”?

Pink ONE OR MORE options.

  1. document.getElementById("test").innerHTML += " Mr. Bob";
  2. document.getElementsById("hacker").innerHTML += " Mr. Bob";
  3. document.getElementsById("test")[0].innerHTML += " Mr. Bob";
  4. document.getElementsById("hacker")[0].innerHTML += " Mr. Bob";

Solution

The first item is the answer.

The getElementsById() method used in the other three does not exist under the Document object.

References

Twitter, LinkedIn