index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Interview and Coding Challenges</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    pre {
      background-color: #f4f4f4;
      padding: 10px;
      border-radius: 5px;
      overflow: auto;
    }
    textarea {
      width: 100%;
      height: 100px;
    }
    button {
      padding: 10px 15px;
      margin-top: 10px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    .output {
      margin-top: 20px;
      padding: 10px;
      background-color: #e9ecef;
      border: 1px solid #ddd;
      border-radius: 5px;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>

<div class="container">
  <h1>JavaScript Interview and Coding Challenges</h1>

  <section id="call-apply-bind">
    <h2>1. Call, Apply, and Bind Methods</h2>
    <p>In JavaScript, the <code>call</code>, <code>apply</code>, and <code>bind</code> methods are used to change the <code>this</code> context of a function.</p>
    <h3>Example:</h3>
    <pre><code>
const person = {
  name: 'John',
  greet: function(age) {
    return `Hello, my name is ${this.name} and I'm ${age} years old.`;
  }
};

const anotherPerson = { name: 'Jane' };

// Using call
console.log(person.greet.call(anotherPerson, 25)); // Hello, my name is Jane and I'm 25 years old.

// Using apply
console.log(person.greet.apply(anotherPerson, [30])); // Hello, my name is Jane and I'm 30 years old.

// Using bind
const boundGreet = person.greet.bind(anotherPerson);
console.log(boundGreet(35)); // Hello, my name is Jane and I'm 35 years old.
    </code></pre>

    <h3>Try it yourself:</h3>
    <textarea id="code1">// Write your code here</textarea>
    <br />
    <button onclick="runCode('code1', 'output1')">Run Code</button>
    <div id="output1" class="output"></div>
  </section>

  <section id="factorial">
    <h2>2. Find Factorial</h2>
    <p>A factorial of a number is the product of all positive integers less than or equal to that number. Here's an example of how to find the factorial of a number:</p>
    <h3>Example:</h3>
    <pre><code>
function factorial(n) {
  if (n === 0 || n === 1) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120
    </code></pre>

    <h3>Try it yourself:</h3>
    <textarea id="code2">// Write your code here</textarea>
    <br />
    <button onclick="runCode('code2', 'output2')">Run Code</button>
    <div id="output2" class="output"></div>
  </section>

  <!-- Add more sections for other topics like Find GCD, Reverse Array, etc. -->

</div>

<script>
  function runCode(inputId, outputId) {
    const code = document.getElementById(inputId).value;
    let output;
    try {
      output = eval(code);
    } catch (error) {
      output = error;
    }
    document.getElementById(outputId).textContent = output;
  }
</script>

</body>
</html>