Weaverse - JS Dev Test [L2]

by Leo Huynh

HTML

<h1>Weaverse JS Dev Test (Level 2)</h1>
<p>UNCOMMENT the test you want to run then click Run or Cmd/Ctrl + Enter</p>
<pre id="output">---</pre>

<!-- Test 3: Button element -->
<button id="click-me">Click Me</button>

<!-- Test 5: App container for infinite scroll -->
<div id="app"></div>

<script>
  // Capture console.log output and display in the page
  const outputElement = document.getElementById('output');
  const originalConsoleLog = console.log;
  let output = '';

  console.log = function (...args) {
    const message = args.map(arg =>
      typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
    ).join(' ');
    output += message + '\n';
    outputElement.textContent = output;
    originalConsoleLog.apply(console, args);
  };
</script>

CSS

body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 40px auto;
      padding: 20px;
      background-color: #fff;
    }

    p {
      color: #333;
      border-bottom: 2px solid #007bff;
      padding-bottom: 10px;
    }

    #output {
      background-color: #1e1e1e;
      color: #d4d4d4;
      padding: 20px;
      border-radius: 5px;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      line-height: 1.6;
      overflow-x: auto;
    }

    /* Test 3: Button styles */
    #click-me {
      display: none;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      margin: 10px 0;
    }

    /* Test 5: Infinite scroll styles */
    #app {
      margin-top: 20px;
    }

    .item {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 5px;
    }

JavaScript

// ============================================================
// UNCOMMENT the test you want to run
// ============================================================
// test1();
// test2();
// test3();
// test4();
// test5();
// test6();

/**
 * CHALLENGE 1: Fix a bug with object mutation
 * The code below should create two separate objects:
 * - foo with {a: 1, b: 2}
 * - bar with {a: 1, b: 5}
 * But currently both objects end up with b: 5
 * Fix the bug and explain why it happens.
 * Is there any alternative solution? Explain the difference.
 */
function test1() {
  const foo = { a: 1, b: 2 };

  // ============================================================
  const bar = foo;
  bar.b = 5;
  // Write your code here




  // ============================================================

  // Do not change below this line
  console.log("Test 1:");
  console.log("-----------");
  console.log("1 + 2 = ", foo.a + foo.b);
  console.log("1 + 5 = ", bar.a + bar.b);
}

/**
 * CHALLENGE 2: Implement a count function
 * Should console.log numbers starting from "start" to "stop",
 * with delay between output "interval" (in milliseconds).
 * The first number should appear immediately!
 */
function test2() {
  function count(start = 0, stop = 10, interval = 1000) {
    // ============================================================
    // Write your code here






    // ============================================================
  }

  // Do not change below this line
  console.log("Test 2:");
  console.log("-----------");
  count(2, 15, 100);
}

/**
 * CHALLENGE 3: Extract lightness from HSL color code using regex
 * HSL color values are specified with: hsl(hue, saturation, lightness)
 * Example: "hsl(0, 8%, 18%)" - the lightness value is 18
 */
function test3() {
  function getLightness(hslColor) {
    // ============================================================
    // Write your code...