CollegeStash

Smooth Animation

Post author By Shiva Charan Devabhaktuni
Post date July 9, 2020

The following is a method to perform smooth animation of an element from left to right given the duration and distance. 60 frames per second (fps) is the minimum required frame rate for smooth animation. In this example, the element is being animated from left to right at 60 fps for a duration of 2 seconds (2000 ms) and a distance of 100px.

Javascript (ES6)

const animate = (element, duration, distance) => {

let start;

const step = (timestamp) => {

if (start === undefined)

start = timestamp;

const elapsed = timestamp - start; // milliseconds

// 60 fps min required for smooth animation. 60 fps = 60 / 1000 fpms

element.style.transform = 'translateX(' + Math.min(0.06 * elapsed, distance) + 'px)';

if (elapsed < duration) { // Stop the animation after 2 seconds

window.requestAnimationFrame(step); // See more at: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

}

window.requestAnimationFrame(step);

}

animate(document.getElementById('child') , 2000 , 100 );

HTML

</div>

CSS

#parent {

height: 200px;

width: 200px;

background-color: lightblue;

}

#child {

height: 100px;

width: 100px;

background-color: lightgreen;

}

DEMO

Tags css, facebook, frontend

interview

Random Pick Index

Post author By Shiva Charan Devabhaktuni
Post date June 29, 2020

Given an input array that consists of numbers that may consist of duplicates, return the position of the number that is picked. This position has to be a “Random Pick Index” if the picked number has duplicates.

Example: Input: [1, 2, 4, 4, 4], Pick -> 4 then you can return 2, 3, or 4 randomly with equal probability. If 1 is the pick then 0 needs to be returned as there is only one occurrence at 0.

/**

* @param {number[]} nums

var Solution = function(nums) {

this.obj = {};

for (let i = 0; i < nums.length; i++) {

if (this.obj[nums[i]] === undefined)

this.obj[nums[i]] = [];

this.obj[nums[i]].push(i);

}

};

/**

* @param {number} target

* @return {number}

Solution.prototype.pick = function(target) {

var dupes = this.obj[target].length;

return dupes === 1 ?

this.obj[target][0] :

this.obj[target][Math.floor(dupes * Math.random())];

};

/**

* Your Solution object will be instantiated and called as such:

* var obj = new Solution(nums)

* var param_1 = obj.pick(target)

Tags es5, es6, facebook, js, medium

interview

DFS DOM (ES6)

Post author By Shiva Charan Devabhaktuni
Post date June 16, 2020

<div id="root">
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</div>

const root = document.getElementById("root");

const walk = function (root) {
  let obj = root.children;
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (obj[key].textContent === "1") 
        console.log(obj[key]);
      else 
        walk(obj[key]);
    }
  }
};

walk(root);

Tags depth first search, facebook, fb, front end

interview

Find Identical Node in DOM Tree

Post author By Shiva Charan Devabhaktuni
Post date June 16, 2020

<!DOCTYPE html>

<html>

<head>

<title>DOM Traversal</title>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

const rootA = document.getElementById("rootA");

const rootB = document.getElementById("rootB");

const nodeA = document.getElementById("nodeA");

const nodeB = document.getElementById("nodeB");

const path = [];

const findPath = () => {

let currNode = nodeA;

while (currNode !== rootA) {

path.push(Array.from(currNode.parentElement.children).indexOf(currNode));

currNode = currNode.parentElement;

}

};

const findB = () => {

let currNode = rootB;

while (path.length > 0) {

currNode = currNode.children[path.pop()];

}

console.log(currNode, currNode === nodeB);

};

findPath();

findB();

Tags coderpad, es6, facebook, fb, front end, interview, js, phonescreen

interview

Find Median from Data Stream

Post author By Shiva Charan Devabhaktuni
Post date May 24, 2020

class MedianFinder {

public PriorityQueue < Integer > maxHeap;

public PriorityQueue < Integer > minHeap;

/** initialize your data structure here. */

public MedianFinder() {

this.maxHeap = new PriorityQueue < > (Collections.reverseOrder());

this.minHeap = new PriorityQueue < > ();

}

public void addNum(int num) {

this.maxHeap.add(num);

this.minHeap.add(this.maxHeap.remove());

if (this.maxHeap.size() < this.minHeap.size()) {

this.maxHeap.add(this.minHeap.remove());

}

public double findMedian() {

return this.maxHeap.size() > this.minHeap.size() ? this.maxHeap.peek() * 1.0 : (this.maxHeap.peek() + this.minHeap.peek()) * 0.5;

}

/**

* Your MedianFinder object will be instantiated and called as such:

* MedianFinder obj = new MedianFinder();

* obj.addNum(num);

* double param_2 = obj.findMedian();

Front End Engineer Interview Prep

General Interview Questions