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>