Back to Freecodecamp

Challenge 209: Element Size

curriculum/challenges/english/blocks/daily-coding-challenges-javascript/698a1a863194f1f4e63f6460.md

latest2.0 KB
Original Source

--description--

Given a window size, the width of an element in viewport width "vw" units, and the height of an element in viewport height "vh" units, determine the size of the element in pixels.

  • The given window size and returned element size are strings in the format "width x height", "1200 x 800" for example.

  • "vw" units are the percent of window width. "50vw" for example, is 50% of the width of the window.

  • "vh" units are the percent of window height. "50vh" for example, is 50% of the height of the window.

--hints--

getElementSize("1200 x 800", "50vw", "50vh") should return "600 x 400".

js
assert.equal(getElementSize("1200 x 800", "50vw", "50vh"), "600 x 400");

getElementSize("320 x 480", "25vw", "50vh") should return "80 x 240".

js
assert.equal(getElementSize("320 x 480", "25vw", "50vh"), "80 x 240");

getElementSize("1000 x 500", "7vw", "3vh") should return "70 x 15".

js
assert.equal(getElementSize("1000 x 500", "7vw", "3vh"), "70 x 15");

getElementSize("1920 x 1080", "95vw", "100vh") should return "1824 x 1080".

js
assert.equal(getElementSize("1920 x 1080", "95vw", "100vh"), "1824 x 1080");

getElementSize("1200 x 800", "0vw", "0vh") should return "0 x 0".

js
assert.equal(getElementSize("1200 x 800", "0vw", "0vh"), "0 x 0");

getElementSize("1440 x 900", "100vw", "114vh") should return "1440 x 1026".

js
assert.equal(getElementSize("1440 x 900", "100vw", "114vh"), "1440 x 1026");

--seed--

--seed-contents--

js
function getElementSize(windowSize, elementVw, elementVh) {

  return windowSize;
}

--solutions--

js
function getElementSize(windowSize, elementVw, elementVh) {
  const [windowWidth, windowHeight] = windowSize
    .split(" x ")
    .map(Number);

  const vw = Number(elementVw.replace("vw", ""));
  const vh = Number(elementVh.replace("vh", ""));

  const widthPx = (vw / 100) * windowWidth;
  const heightPx = (vh / 100) * windowHeight;

  return `${widthPx} x ${heightPx}`;
}