diff options
| author | Kamal Wickramanayake <kamal@inbox.lk> | 2026-06-27 19:30:40 +0530 |
|---|---|---|
| committer | Kamal Wickramanayake <kamal@inbox.lk> | 2026-06-27 19:30:40 +0530 |
| commit | d678dd98e4ab9b45e3e941e9002054ef639d1cfb (patch) | |
| tree | 4ed4aafc70ce29472f23d9090d1b8e684c7a73d7 | |
| parent | d7ce2a3ea234de3a040e762083db88aa3610f320 (diff) | |
Added some JavaScript sample projects
| -rw-r--r-- | javascript/01-console-print/index.html | 17 | ||||
| -rw-r--r-- | javascript/02-button-click/index.html | 25 | ||||
| -rw-r--r-- | javascript/03-calculator/index.html | 44 |
3 files changed, 86 insertions, 0 deletions
diff --git a/javascript/01-console-print/index.html b/javascript/01-console-print/index.html new file mode 100644 index 0000000..2b8156a --- /dev/null +++ b/javascript/01-console-print/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Page Title</title> +</head> + +<body> + <p>Hello world!</p> + + <script> + // This is a simple comment explaining the code + console.log("Hello, World!"); + </script> +</body> + +</html> diff --git a/javascript/02-button-click/index.html b/javascript/02-button-click/index.html new file mode 100644 index 0000000..335d7d9 --- /dev/null +++ b/javascript/02-button-click/index.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Page Title</title> +</head> + +<body> + <h1 id="heading">Welcome to my page!</h1> + <button id="myButton">Click Me</button> + + <script> + // Find the button and the heading on the webpage + const button = document.getElementById("myButton"); + const heading = document.getElementById("heading"); + + // Listen for a click event on the button + button.addEventListener("click", function() { + // Change the text content of the heading + heading.textContent = "Hello from JavaScript!"; + }); + </script> +</body> + +</html> diff --git a/javascript/03-calculator/index.html b/javascript/03-calculator/index.html new file mode 100644 index 0000000..fc2398b --- /dev/null +++ b/javascript/03-calculator/index.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Calculator</title> +</head> + +<body> + <h1>Calculator</h1> + + Number 1: <input type="text" id="num1" value="0"/><br/> + Number 2: <input type="text" id="num2" value="0"/><br/> + + <button onclick="calculate()">Add</button><br/> + + Result: <span id="resultArea"></span> + + <script> + const addButton = document.getElementById("addButton"); + const resultArea = document.getElementById("resultArea"); + + function calculate() { + // 1. Fetch values from the text fields using their IDs + let value1 = document.getElementById("num1").value; + let value2 = document.getElementById("num2").value; + + // 2. Convert strings to floating-point numbers + let number1 = parseFloat(value1); + let number2 = parseFloat(value2); + + // 3. Handle empty fields or invalid inputs (fallback to 0) + if (isNaN(number1)) number1 = 0; + if (isNaN(number2)) number2 = 0; + + // 4. Perform math addition + let sum = number1 + number2; + + // 5. Output the final sum to the page + resultArea.innerText = sum; + } + </script> +</body> + +</html> |