intro js and html for pavii

intro_js_html_problems.md

Vanilla JavaScript and HTML Challenges

1. Hello World

• Problem: Create an HTML button. When clicked, it should display an alert saying "Hello, World!" using JavaScript.

2. Add Two Numbers

• Problem: Create an HTML form with two input fields (for numbers) and a button. When the button is clicked, display the sum of the two numbers below the form using JavaScript.

3. Find the Largest Number

• Problem: Create an HTML form with three input fields for numbers. Add a button that, when clicked, shows the largest of the three numbers using JavaScript.

4. Even or Odd

• Problem: Create an input field where a user can enter a number and a button. When the button is clicked, display if the entered number is even or odd using JavaScript.

5. Calculate the Area of a Rectangle

• Problem: Have two input fields for the length and width of a rectangle. Add a button that, when clicked, calculates and displays the area of the rectangle below the input fields.

6. Positive, Negative, or Zero

• Problem: Create an input field and a button. When the button is clicked, indicate if the number entered is positive, negative, or zero using JavaScript.

7. Count to N

• Problem: Have an input field where a user can enter a number 'N'. When they click a button, use JavaScript to display all numbers from 1 to N below the input field.

8. Factorial of a Number

• Problem: Provide an input field for a number. When a user clicks a button, calculate and display the factorial of that number using JavaScript.

9. Swap Two Numbers

• Problem: Create two input fields for numbers and a button. When the button is clicked, use JavaScript to swap the values in the two input fields without reloading the page.

10. Table of a Number

• Problem: Have an input field for a number and a button. When the button is clicked, display the multiplication table of the entered number up to 10 below the input field using JavaScript.

Implementation Steps:

1. Create an HTML structure (like form elements, input fields, buttons, divs for output).
2. Link a JS script to the HTML.
3. Implement the necessary JS logic to achieve the stated problem goal.
4. Ensure the user's input is taken from the input fields and the output is dynamically updated on the HTML page.
5. Add necessary error handling in JS (like handling non-numeric inputs where numbers are expected).