Test for front end engineers

I'm starting with a warm-up exercise.

Create a function to reverse a string

My solution

// reverse('Hello'); // olleH
const testString = "Hello";

function reverse(str) {
    const len = str.length;
    let newstr = "";

    for (let i = (len - 1); i >= 0; i--) {
        newstr += str[i];
    }
    return newstr;
}

reverse(testString);

Example solution

// reverse('Hello'); // olleH
const testString = "Hello";

function reverse(str) {
    return str.split("").reverse().join("");
}

reverse(testString);

Create a function that takes a string and returns a new string with duplicates removed.

My solution

const str = "This is is a test test string";

function removeDuplicates(val) {
	let isString = false;
	if (typeof val === "string") {
		val = val.split(" ");
		isString = true;
	}

	const breadcrumbs = {};
	const result = [];

	for (let i = 0; i < val.length; i++) {
		if (!breadcrumbs[val[i]]) {
			result.push(val[i]);
			breadcrumbs[val[i]] = true;
		}
	}
	return isString ? result.join(" ") : result;
}

console.log(removeDuplicates(str));

Example solution

const str = "This is is a test test string";

function removeDuplicates(str) {
  const arr = str.split(" ");

  const set = new Set(arr);
  const newString = [...set].join(" ");

  return newString;
}

console.log(removeDuplicates(str));

Without using .flat(), create a function to flatten an array

My solution

const arr = [1, 2, [3, 4, [5, 6, 7], 8], 9, 10];
const newarray = [];

function flatten(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (!Array.isArray(arr[i])) {
      newarray.push(arr[i]);
    }
    else {
      flatten(arr[i]);
    }
  }
  return newarray;
}

console.log(flatten(arr));

Example solution

const arr = [1, 2, [3, 4, [5, 6, 7], 8], 9, 10];
const newarray = [];

function flatten(arr) {
  return arr.reduce((acc, item) => {
    if (Array.isArray(item)) {
      acc = [...acc, ...flatten(item)];
    }
    else {
      acc.push(item);
    }
    return acc;
  }, []);
}

console.log(flatten());

Implement debounce

Example solution

const debounceFn = debounce(cb, 500);

function debounce(fn, time) {
	let setTimeoutId;

	return function() {
		if (setTimeoutId) {
			clearTimeout(setTimeoutId);
		}

		setTimeoutId = setTimeout(() => {
			fn();
			setTimeoutId = null;
		}, time);
	}
}

function cb() {
	console.log("fired");
}

debounceFn();
debounceFn();
debounceFn(); // Only this function logs "fired"

Create a function to move an elememt. The function arguments are distance, duration and the element to move (window.requestAnimationFrame())

My solution

function moveElement(duration, distance, element) {
	const pixelPerMil = distance / duration * 10;
	let total = 0;
	let lock = false;
	window.requestAnimationFrame(move);

	function move() {
		if (!lock) {
			total += pixelPerMil;
			element.style.transform = `translateX(${ total }px)`;
			window.requestAnimationFrame(move);
		}
	}

	setTimeout(() => {
		lock = truel
	}, duration);
}

moveElement(1000, 500, document.getElementById("input"));

Example solution

function moveElement(duration, distance, element) {
	const start = performance.now();

	function move(currentTime) {
		// The callback method is passed a single argument (currentTime in this example), a DOMHighResTimeStamp, which indicates the current time (based on the number of milliseconds since time origin).

		const elapsed = currentTime - start;
		const progress = elapsed / duration;
		const amountToMove = progress * distance;

		element.style.transform = `translateX(${ amountToMove }px)`;
		if (amountToMove <= distance) {
			requestAnimationFrame(move);
		}
	}

	requestAnimationFrame(move);
}

moveElement(1000, 500, document.getElementById("input"));

(Promise) Create a sleep function that takes one parameter (time) and will wait "time" ms

Example solution

async function run() {
	await sleep(500);
	console.log("Hello");
	await sleep(500);
	console.log("world!");
}

function sleep(time) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve();
		}, time);
	});
}

run();  // (500ms)
		// Hello
		// (500ms)
		// world!