JavaScript 기초와 AI

Write vanilla JavaScript to:

1. Select the element with id="hero-title" and change its text
2. Select all elements with class="card" and add a "featured" class to the first one
3. Create a new paragraph element, set its text content, and append it to the element with id="content"

Requirements:
- Use document.querySelector and document.querySelectorAll (not getElementById)
- Use textContent for safe text updates
- No external libraries
- Add comments explaining each step

Write vanilla JavaScript to dynamically create a list of items from an array:

Data:
const items = [
  { title: "Item 1", description: "Description 1", category: "A" },
  { title: "Item 2", description: "Description 2", category: "B" },
  // ... more items
];

Requirements:
- Create an unordered list element
- For each item, create an li containing the title in a strong tag and description in a paragraph
- Append the complete list to the element with id="item-list"
- Use document.createElement and textContent for safe DOM updates
- Use a document fragment for performance (batch DOM insertions)

Vanilla JavaScript only, no dependencies.

Write vanilla JavaScript for an interactive FAQ accordion:

HTML structure:
- Multiple FAQ items, each with a question (button) and answer (div)
- Clicking a question toggles its answer visibility
- Only one answer open at a time (accordion behavior)

Requirements:
- Use event delegation (single listener on the parent container, not one per button)
- Toggle aria-expanded on the button
- Toggle a "hidden" class on the answer div
- Add smooth height transition with CSS class toggling
- Keyboard accessible (Enter and Space trigger toggle)

Vanilla JavaScript, no dependencies. Include the HTML structure in the output.

Write client-side form validation in vanilla JavaScript:

Form fields:
- Name (required, minimum 2 characters)
- Email (required, valid email format)
- Phone (optional, but if filled must match a phone pattern)
- Message (required, minimum 10 characters, maximum 500)

Validation behavior:
- Validate on form submit
- Show error messages below each invalid field using textContent (never inject raw HTML)
- Use aria-invalid and aria-describedby for accessibility
- Prevent form submission if any field is invalid
- Clear error messages when user starts correcting a field (input event)
- Show success message when form is valid

Vanilla JavaScript, no dependencies.

Write vanilla JavaScript for a simple favorites/bookmarks feature:

Behavior:
- Each card has a heart/star button
- Clicking the button toggles the item as a favorite
- Favorites are saved to localStorage
- On page load, previously favorited items are restored
- A "View Favorites" filter shows only favorited items

Requirements:
- Store an array of item IDs in localStorage (JSON.stringify/parse)
- Handle the case where localStorage is unavailable (try-catch)
- Update button visual state (filled/outline) based on favorite status
- Include aria-pressed attribute on toggle buttons

Vanilla JavaScript, no dependencies.

Review this JavaScript for security issues:

[paste your JavaScript]

Check for:
1. Unsanitized user data inserted into the DOM (XSS risk)
2. Dynamic code execution patterns (code injection risk)
3. Unvalidated URL parameters used in page logic
4. Sensitive data stored in localStorage without encryption
5. Missing input sanitization on form data
6. Event handlers that could be triggered maliciously
7. API keys or secrets hardcoded in client-side code

For each issue found, explain the risk and provide a secure alternative.