JavaScript PDF Viewer Designer - HackerRank Solution

In this article, we will discuss the solution for a HackerRank challenge, where you have to create a PDF Viewer Designer using JavaScript.

Problem Statement

You are given a container with a width of dist, which has n number of elements with their respective heights. You also have a PDF document with m pages, each with a height of 1. Your task is to create a PDF Viewer that displays only one page at a time, and the height of the page should be the maximum height of any element in the current view.

Solution Approach

We need to find the maximum height of elements present in the current view, which will be the height of the PDF page displayed. For this, we can divide the container into m equal parts, where m is the number of pages in the PDF document. Then, we can find the maximum height of elements present in each part and store it in an array. Finally, we can display the PDF page of maximum height.

Here is the code for the solution:

function pdfViewer(h, word) {
    const charCodeA = 'a'.charCodeAt(0); // ASCII value of 'a'
    const heights = word.split('').map((char) => h[char.charCodeAt(0) - charCodeA]);
    return Math.max(...heights) * word.length;
}

Explanation:

• We get the ASCII value of 'a', which is the starting value for the given array of heights.
• We split the given word into individual characters and map them to their respective heights.
• We find the maximum height of all the heights obtained above.
• Finally, we multiply the maximum height with the length of the given word to get the area of the largest rectangle that can be formed by the given word.

Conclusion

In this article, we discussed the solution approach for the HackerRank challenge of creating a PDF Viewer Designer using JavaScript. We also provided a code implementation in JavaScript, which can be used as a reference to solve the problem.