Web Developer Online Test

A client has a web page with a series of tasks. They want to implement a reordering feature that behaves like the following example:

After performing the clicks shown in the animation above, the document's body should be:

<div>
    <span>Read emails</span>
    <button class="downButton" type="button">&darr;</button>
</div>
<div>
    <span>Prepare presentation</span>
    <button class="downButton" type="button">&darr;</button>
    <button class="upButton" type="button">&uarr;</button></div>
<div>
    <span>Monthly report</span>
    <button class="upButton" type="button">&uarr;</button>
</div>

Implement the initialize function to apply the described functionality. The body tag will be prepopulated with the initial HTML which includes all the div, span, and buttons tags. The feature should work with any number of tasks.

A website features a menu with multiple menu items. However, the borders and spacing between and within these items are not properly styled.

Update only the CSS styles for the menu-item class so that the website looks like the image below:

All borders have a thickness of 2px.

A gaming company is working on a platformer game. They need a function that will compute the character's final speed, given a map and a starting speed.

The terrain on which the game character moves forward is made from various pieces of land placed together. Implement the function calculateFinalSpeed which takes the initial speed of the character, and an array of degrees of inclination that represent the uneven terrain.

The speed of the character will increase or decrease proportionally to the incline of the land, as shown in the image below:

The magnitude of the angle of inclination will always be < 90°. The speed change occurs only once for each piece of land. The function should immediately return 0 as the final speed if an incline reduces the speed to 0 or below 0, which makes the character lose 1 life.

For example, the below code:

console.log(calculateFinalSpeed(60, [0, 30, 0, -45, 0]));

should print:

75

A megastore offers three types of discounts, which are represented as DiscountType object.

Implement the getDiscountedPrice function which should take the total weight of the shopping cart, the total price, and the discount type. It should return the final discounted price based on the discount schemes as shown in the promotional video below:

(Open full-size video in a new tab)

For example, the following code:

console.log(getDiscountedPrice(12, 100, DiscountType.Weight));

should print:

82

A turn-based strategy game has a grid with water and land. The grid contains a true value where it's water and false where it's land.

The player controls a boat unit with a particular movement pattern. It can only move to fixed destinations from its current position as shown in the image below:

The boat can only move in a direct path through water to the possible destinations, so a destination will become unreachable if there is land in the way. 

Implement the canTravelTo function, that checks whether a destination is reachable by the boat. It should return true for destinations that are reachable according to the pattern above, and false for unreachable or out of bounds destinations which are outside the grid. 

For example, consider the following code:

const gameMatrix = [
  [false, true,  true,  false, false, false],
  [true,  true,  true,  false, false, false],
  [true,  true,  true,  true,  true,  true],
  [false, true,  true,  false, true,  true],
  [false, true,  true,  true,  false, true],
  [false, false, false, false, false, false],
];

console.log(canTravelTo(gameMatrix, 3, 2, 2, 2)); // true, Valid move
console.log(canTravelTo(gameMatrix, 3, 2, 3, 4)); // false, Can't travel through land
console.log(canTravelTo(gameMatrix, 3, 2, 6, 2)); // false, Out of bounds

The following image shows valid and invalid destinations when the boat is in the position (3, 2):

Fix the bugs in the following HTML code.

Write CSS so that the link <a href="http://www.testdome.com">Check documentation</a> looks like the one in the image below, and the cursor looks like a question mark when hovering over the link:

You've been sent a snippet from a spreadsheet, and have been asked to re-create it for display on the company's internal website.

Re-create the following spreadsheet using HTML, in a table appropriately captioned "Purchase Orders".

An HTML div element contains a list of the most endangered species for each continent.

<div>
    <ul>
        <li data-continent="North America">California condor</li>
        <li data-continent="Europe">Cave bear</li>
    </ul>
</div>

Implement the function endangeredSpecies that returns the species's name for a particular continent.

For example, endangeredSpecies("North America") should return "California condor".

A website needs a list where users can rank their favorite foods. Write the setup function, which should register click handlers on all Up! and Down! buttons. The Up! button should move the list item one place up in the list, while Down! button should move the list item one place down in the list.

Clicking the Up! button for the top list item or clicking the Down! button for the last list item should not have any effect on the list.

For example, consider this code:

document.body.innerHTML = `<ol>
  <li><button class="up">Up!</button>Taco<button class="down">Down!</button></li>
  <li><button class="up">Up!</button>Pizza<button class="down">Down!</button></li>
  <li><button class="up">Up!</button>Eggs<button class="down">Down!</button></li>
</ol>`;

setup();

If the button Up! button in Pizza list item is clicked, Pizza should be the first item in the list, while Taco should be the second item.

With the new HTML5 features, modify the form so that:

• The formula input field suggests the following options when the user starts to type: "sin", "cos", "tan" and "cot".
• The iterations input field is a slider with possible values from 1 to 10.
• The precision input field is a number picker with possible values from 1 to 100, where 50 is the default value.

Using CSS only (without adding additional HTML attributes), style articles so that they occupy the whole browser window and have the following properties:

The following HTML represents a family tree:

<James>
  <Dave></Dave>
  <Mike></Mike>
  <Sarah></Sarah>
</James>

Implement the closestRelative function so that when a parent HTML element is passed, the function returns the parent's closest relative whose name matches the relativeName, and obeys the following rules:

• The parent parameter is the HTML element of which the closest relative will be a descendant.
• Each member of the family, including children, may also be a parent to one or more children.
• Children are more closely related to the parent than grandchildren.
• If several children in the same generation have the same name, then the first child in the tree is considered the closer relative.
• If no matching relative is found the function should return null.

For example, the below code should print 'MIKE' for the given family tree:

let parent = document.getElementsByTagName('James')[0];
let relative = closestRelative(parent, 'Mike');
console.log(relative && relative.tagName); // prints MIKE

Implement the showCustomers function so that it renders customers as list items. The first argument to the function, customers, is an array of objects with the name and email properties. The second argument to the function, targetList, is an unordered HTML list to which each customer should be added as a separate list item.

The name and email properties should be added as two paragraphs inside the list item. At first, the email paragraph element should not be present in the DOM. The email paragraph element should be added to the DOM after the name is clicked, and it should be removed from the DOM when the name is clicked again.

For example, the following code:

document.body.innerHTML = `
<div>
  <ul id="customers">
  </ul>
</div>
`;
let customers = [{name: "John", email: "john@example.com"},
                 {name: "Mary", email: "mary@example.com"}];
showCustomers(customers, document.getElementById("customers"));

let customerParagraph = document.querySelectorAll("li > p")[0];
if(customerParagraph) {
  customerParagraph.click();
}
console.log(document.body.innerHTML);

Should render:

<div>
  <ul id="customers">
    <li>
      <p>John</p>
      <p>john@example.com</p>
    </li>
    <li>
      <p>Mary</p>
    </li>
  </ul>
</div>

A playlist is considered a repeating playlist if any of the songs contain a reference to a previous song in the playlist. Otherwise, the playlist will end with the last song which points to undefined.

Implement the method isInRepeatingPlaylist that, efficiently with respect to time used, returns true if a playlist is repeating or false if it is not.

For example, the following code prints "true" as both songs point to each other.

let first = new Song("Hello");
let second = new Song("Eye of the tiger");

first.nextSong = second;
second.nextSong = first;

console.log(first.isInRepeatingPlaylist());

As part of a data processing pipeline, complete the implementation of the pipeline function:

• The pipeline function should accept a variable number of functions, and it should return a new function that accepts one parameter arg.
• The returned function should call the first function in pipeline with the parameter arg, and call the second function with the result of the first function.
• The returned function should continue calling each function in pipeline in order, following the same pattern, and return the value from the last function.

For example, calling pipeline(x => x * 3, x => x + 1, x => x / 2), and then calling the returned function with 3 should return 5.0.

Function appendChildren should add a new child div to each existing div. New divs should be decorated by calling decorateDiv.

For example, after appendChildren is executed, the following divs:

<div id="a">
  <div id="b">
  </div>
</div>

should take the following form (assuming decorateDiv does nothing):

<div id="a">
  <div id="b">
    <div></div>
  </div>
  <div></div>
</div>

The code below should do the job, but for some reason it goes into an infinite loop. Fix the bugs.

Write the function newMessage, which receives the name of the topic as the parameter. Function should change the background color of the p tag to red where the data-topic-name is topicName. A topicName that doesn't have a matching data-topic-name should be ignored.

For example, if the HTML is:

<div>
  <p data-topic-name="discussion">General discussion</p>
  <p data-topic-name="bugs">Bugs</p>
  <p data-topic-name="animals">Animals</p>
</div>

After calling newMessage("discussion") the HTML should be:

<div>
  <p data-topic-name="discussion" style="background-color: red;">General discussion</p>
  <p data-topic-name="bugs">Bugs</p>
  <p data-topic-name="animals">Animals</p>
</div>

A blog uses several tags which are highlighted in different ways based on relevance.

Apply the CSS classes to the HTML so that the result looks like the image below:

Your company is analyzing malware which targets numerical record files.

The malware uses a sliding window over the array of numbers in a file, and tries to match the following pattern:

Tl, -, -, X, -, -, -, Tr

The entire window is moved so that 'X' passes through all the values and is compared to the numbers at the 'Tl' and 'Tr' locations, which are positioned at a constant offset to 'X'.

The malware has the following rules:

• If the value at the 'Tl' or 'Tr' position of the pattern is bigger or equal to the value at the 'X’ position, the malware replaces the value at 'X' with 0.
• If the value at the 'Tl' or 'Tr' offset is out of bounds, then the value at 'X' is only compared to the other existing value.
• The record is processed in two stages: first, all the positions that should be set to 0 are located, using the original values for comparison. Only after all positions have been identified do they get set to 0.

For example, if the values in a record file are the following:

[1, 2, 0, 5, 0, 2, 4, 3, 3, 3]

The expected values after the malware runs are:

[1, 0, 0, 5, 0, 0, 0, 3, 3, 0]

In this example, both '2's, the '4' and the last '3' were replaced by 0.

Implement the simulate function so that the malware behavior is replicated for further study.

Your company assigns each customer a membership ID, and you are implementing a check digit for those IDs.

The check digit should be calculated by adding up all digits in each membership ID. If the result of the sum is a number with more than a single digit, another iteration is required, and the digits of the result also should be added together. This process should repeat until a single-digit number is calculated.

For example, for the membership ID "55555" the sum of all digits is 25. Because this is not a single-digit number, 2 and 5 would be added, and the result, 7, would be the check digit.

Fix the bugs in the registerHandlers function. An alert should display anchor's zero-based index within a document instead of following the link.

For example, in the document below, the alert should display "2" when Google anchor is clicked since it is the third anchor element in the document and its zero-based index is 2.

<body>
  In my life, I used the following web search engines:<br/>
  <a href="//www.yahoo.com">Yahoo!</a><br/>
  <a href="//www.altavista.com">AltaVista</a><br/>
  <a href="//www.google.com">Google</a><br/>
</body>

Implement the ensure function so that it throws an error if called without arguments or the argument is undefined. Otherwise it should return the given value.

Implement the removeProperty function which takes an object and property name, and does the following:

If the object obj has a property prop, the function removes the property from the object and returns true; in all other cases it returns false.

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div class="image">
  <img src="https://bit.ly/3xXPxPR" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="https://bit.ly/4de3sQr" alt="Second">
  <button class="remove">X</button>
</div>

Implement the setup function that registers a click event handler and implements the following logic: When the button of class remove is clicked, its parent <div> element should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div class="image">
  <img src="https://bit.ly/4de3sQr" alt="Second">
  <button class="remove">X</button>
</div>

Write a function that converts user entered date formatted as M/D/YYYY to a format required by an API (YYYYMMDD). The parameter "userDate" and the return value are strings.

For example, it should convert user entered date "12/31/2014" to "20141231" suitable for the API.

Update the website's HTML, without using JavaScript or CSS, to make use of semantic elements so that:

• The classless outer div element is replaced with a more appropriate element.
• The divs with the image and caption classes are replaced with self-contained content elements.
• The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.

Every user on your website has an image avatar that is displayed when they post a comment. You want to style these images differently from other images on your site. Add a CSS class named avatar that fulfils the following requirements:

1. The avatar's border is rounded, so that it appears as a circle.
2. The avatar's width and height are both 150px.
3. The avatar has a solid border, has a width of 2px, and be colored gray.

For example, the avatar in the template should look like:

Write a function that, when passed an array and a target sum, returns, efficiently with respect to time used, two distinct zero-based indices of any two of the numbers, whose sum is equal to the target sum. If there are no two numbers, the function should return null.

For example, findTwoSum([ 3, 1, 5, 7, 5, 9 ], 10) should return an array containing any of the following pairs of indices:

• 0 and 3 (or 3 and 0) as 3 + 7 = 10
• 1 and 5 (or 5 and 1) as 1 + 9 = 10
• 2 and 4 (or 4 and 2) as 5 + 5 = 10

You are working on a calculator application where users can input a mathematical expression such as: (3 + 5) * (2 - 4).

To correctly evaluate this expression, the application needs to validate the expression and ensure that the parentheses are balanced. The balanced parentheses are crucial for determining the order of operations and evaluating the expression correctly.

You have used an AI assistant to generate the following function to check if the parentheses in an expression are balanced:

function isBalanced(parentheses) {
    let stack = [];
    let opening = new Set(['(', '[', '{']);
    let closing = new Set([')', ']', '}']);
    let pairs = {
        ')': '(',
        ']': '[',
        '}': '{'
    };

    for (let c of parentheses) {
        if (opening.has(c)) {
            stack.push(c);
        } else if (closing.has(c)) {
            if (stack.length === 0 || stack[stack.length - 1] !== pairs[c]) {
                return false;
            }
            stack.pop();
        }
    }

    return stack.length === 0;
}

What is correct for the given function?

You're making the 'Buy' button for a movie ticket website, which has the class buy-button.

The buy-button class has the following CSS:

.buy-button {
  width: 100px;
  height: 100px;
  background: Orange;
  /* Make it a circle */
  border-radius: 50%;
  /* Center horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

A 1 second animation named wiggle should be added to it so the button wiggles when the mouse hovers over it.

Rotating to 25 degrees clockwise (first 0.33 s), then to 25 degrees counterclockwise (second 0.33 s) and then returning to the original position.

It should look like this:

Which of the following would produce the desired animation?

A Mathematics tutoring web application for kids has a button that highlights all even numbers (in span), using 'yellow' as the background color. Clicking the button again removes the background. All further clicks add or remove the 'yellow' background alternately.

Currently, the button doesn't work as expected. For the given HTML markup and JavaScript function, select all options that will identify and fix the bugs in the JavaScript function:

<div id='numbers'>
 <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
 <button id='btn' onclick='toggleEvenColor()'>Toggle even number highlighting</button>
</div>

1: function toggleEvenColor() {
2:   let spanElements = document.querySelectorAll('#numbers span');
3:   spanElements.forEach(function() {
4:     item.style.backgroundColor = 'transparent';
5:   });
6: }