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

An RPG game lets you assign points to the strength and speed attributes of your character. The video below shows how 5 points are supposed to be assigned.

The available points are passed in the totalPoints parameter to initialize the UI.

Complete the initialize function so that the UI behaves as shown in the video. When initialized, all points should be available, and both attributes should start at 0.

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 video 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:

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.

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://tinyurl.com/im-gal-1st" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="https://tinyurl.com/im-gal-2nd" 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://tinyurl.com/im-gal-2nd" alt="Second">
  <button class="remove">X</button>
</div>

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:

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 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:

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

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:

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.

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.

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.

The JavaScript function getAppSettings returns the config settings for the app. The code below shows the function in use:

function getAppSettings(detailed) {
  if (detailed) {
    return {
      env: "Linux",
      language: "Python",
      userAgent: "Chromium"
    };
  }

  return "Linux";
}

const info = getSystemInfo(false);
console.log(info["env"].trim());

The code causes the following runtime error:

Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

Explain in short why the runtime error occurred.

(An answer up to 40 words is sufficient)

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: }