// part2.js
let popupWindow = null;

function searchCharacter() {
  const content = document.getElementById("content").value;
  const searchChar = document.getElementById("searchChar").value;
  const resultArea = document.getElementById("resultArea");

  // Validate input
  if (!searchChar) {
    resultArea.className = "error";
    resultArea.textContent = "Please enter a character to search";
    return;
  }

  if (searchChar.length > 1) {
    resultArea.className = "error";
    resultArea.textContent = "Please enter only one character";
    return;
  }

  // Count occurrences (case-sensitive as not specified in requirements)
  const count = content.split(searchChar).length - 1;

  if (count > 0) {
    // Character found - display result in the result area
    resultArea.className = "success";
    resultArea.textContent = `The character '${searchChar}' appears ${count} time(s) in the content.`;

    // Close any existing popup window
    if (popupWindow && !popupWindow.closed) {
      popupWindow.close();
    }
  } else {
    // Character not found - show popup window
    resultArea.className = "";
    resultArea.textContent = ""; // Clear the result area

    // Close previous popup if exists
    if (popupWindow && !popupWindow.closed) {
      popupWindow.close();
    }

    // Calculate position for popup (top right corner)
    const left = window.screen.width - 320; // 300px width + 20px margin
    const top = 20; // 20px from top

    // Create popup window
    popupWindow = window.open(
      "",
      "CharacterNotFound",
      `width=300,height=100,left=${left},top=${top},resizable=no`
    );

    // Write content to popup
    popupWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>Character Not Found</title>
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        padding: 1rem;
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        height: 100vh;
                    }
                    .popup-content {
                        text-align: center;
                    }
                    button {
                        padding: 0.5rem 1rem;
                        background-color: #2563eb;
                        color: white;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                        margin-top: 1rem;
                    }
                    button:hover {
                        background-color: #1d4ed8;
                    }
                </style>
            </head>
            <body>
                <div class="popup-content">
                    <p>Search character '${searchChar}' not found in the content you typed</p>
                    <button onclick="window.close()">Close</button>
                </div>
            </body>
            </html>
        `);
  }
}

function clearForm() {
  document.getElementById("content").value = "";
  document.getElementById("searchChar").value = "";
  document.getElementById("resultArea").className = "";
  document.getElementById("resultArea").textContent = "";

  // Close popup if open
  if (popupWindow && !popupWindow.closed) {
    popupWindow.close();
  }
}

// Close popup when the main window is closed
window.onunload = function () {
  if (popupWindow && !popupWindow.closed) {
    popupWindow.close();
  }
};


For Part 2: 
You will create a web page with:
a heading that you can choose
a form with:
a textarea to allow the user to type a long content
an input box to allow the user to type only one letter 
TIP: in HTML, you can restrict the number of characters the user will type by using the attribute maxlength in the input type="text" element
an input box or textarea, or an element outside the form (a div or paragraph) to present the output/result
a hyperlink to return to the main page of Homework 6
You will write a script using some Script methods you learned, to solve the following:
The user will type whatever content he/she wants in the textarea for the long content, and the user will also type a single character in the input box you provided. When the user clicks the submit button, you will:
Search for the character the user typed inside the content in the textarea and you will count how many times this character is shown in the big content
If the character is found, you will present a message in the output/result area that says how many times the character X shows up in the content where X is the single character typed by the user
If the character is not found, you will present a new window (using the window.open() method you learned), the message: "Search character X not found in the content you typed", where X is the single character typed by the user. You should also make sure that, in this case, you will clear the input box or textarea that would be presenting the result of a positive search
NOTE: The new window should be 300 pixels by 100 pixels (width by height) and should be presented on a place that do not obscure any of the main content on the page the user is working with - you will choose the best place depending on your layout
TIP: when presenting the new window, it will be GREAT, if you present a button that the user can click to CLOSE that new window

This was the things that was needed to implement, but I don't think new window is 300 by 100 pixels, can you make necessary changes in js code, i realdy have html and css code.