bongodev · Zubayer03Mahmud · Nov 25, 2024 · Dec 7, 2024 · Dec 7, 2024 · Dec 7, 2024
diff --git a/001-counter-app/bongo-dev/index.html b/001-counter-app/bongo-dev/index.html
@@ -1,32 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Counter App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Counter App</title>
-  <!-- Tailwind CSS -->
-  <script src="https://cdn.tailwindcss.com"></script>
-</head>
-
-<body class="bg-gray-100 flex items-center justify-center min-h-screen">
-
-  <!-- Counter App Container -->
-  <div class="bg-white shadow-lg rounded-lg p-8 text-center">
-    <h1 class="text-2xl font-bold text-gray-800 mb-4">Counter App</h1>
-
-    <!-- Counter Display -->
-    <div id="counter" class="text-4xl font-bold text-gray-700">0</div>
-
-    <!-- Counter Controls -->
-    <div class="mt-6">
-      <button id="increment"
-        class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mr-2">+</button>
-      <button id="decrement" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded ml-2">-</button>
+  <body class="bg-gray-100 flex items-center justify-center min-h-screen">
+    <div class="bg-white shadow-lg rounded-lg p-8 text-center">
+      <h1 id="title" class="text-2xl font-bold text-gray-800 mb-4"></h1>
+      <div id="counter" class="text-4xl font-bold text-gray-700">0</div>
+      <div class="mt-6">
+        <button
+          id="increment"
+          class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mr-2"
+        >
+          +
+        </button>
+        <button
+          id="decrement"
+          class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded ml-2"
+        >
+          -
+        </button>
+      </div>
     </div>
   </div>
 
   <script src="./script.js"></script>
 </body>
 
-</html>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/001-counter-app/zubayer/index.html b/001-counter-app/zubayer/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Counter App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+
+  <body class="bg-gray-100 flex items-center justify-center min-h-screen">
+    <div class="bg-white shadow-lg rounded-lg p-8 text-center">
+      <h1 id="title" class="text-2xl font-bold text-gray-800 mb-4"></h1>
+      <div id="counter" class="text-4xl font-bold text-gray-700">0</div>
+      <div class="mt-6">
+        <button
+          id="increment"
+          class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mr-2"
+        >
+          +
+        </button>
+        <button
+          id="decrement"
+          class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded ml-2"
+        >
+          -
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script src="./script.js"></script>
+</body>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/001-counter-app/zubayer/script.js b/001-counter-app/zubayer/script.js
@@ -0,0 +1,29 @@
+console.log('JavaScript added');
+let titleElement = document.getElementById('title');
+titleElement.innerText = 'Counter App';
+
+let count = 0;
+const counterElement = document.getElementById('counter');
+const incrementButton = document.getElementById('increment');
+const decrementButton = document.getElementById('decrement');
+
+function increaseCount() {
+  if (count === 10) {
+    alert('Count overflow!');
+  }
+  else{
+  count++;
+  counterElement.innerText = count;    
+  }
+
+}
+
+incrementButton.addEventListener('click', increaseCount);
+decrementButton.addEventListener('click', function () {
+  if (count === 0) {
+    alert('Count will be negative');
+  } else {
+    count--;
+    counterElement.innerText = count;
+  }
+});
diff --git a/002-number-comparator/zubayer/index.html b/002-number-comparator/zubayer/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Number Comparator App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="bg-gray-100 h-screen flex items-center justify-center">
+    <div class="bg-white p-6 rounded-lg shadow-lg text-center">
+        <h1 class="text-2xl font-bold mb-4">Number Comparator App</h1>
+        <div class="flex flex-col gap-4">
+            <input type="number" id="number1" placeholder="Enter first number" class="border p-2 rounded" value="0" />
+
+            <input type="number" id="number2" placeholder="Enter second number" class="border p-2 rounded" value="0" />
+        </div>
+
+        <button id="compare" class="mt-4 bg-blue-500 text-white py-2 px-4 rounded">Compare</button>
+        <button id="reset" class="mt-4 hover:bg-green-600 bg-yellow-500 text-white py-2 px-4 rounded">Reset</button>
+        <div id="result" class="mt-4 text-x1 font-bold"></div>
+
+        <script src="./number-comparator.js"></script>
+
+</body>
+
+</html>
+
diff --git a/002-number-comparator/zubayer/number-comparator.js b/002-number-comparator/zubayer/number-comparator.js
@@ -0,0 +1,51 @@
+// Select elements by ID
+const number1Input = document.getElementById("number1");
+const number2Input = document.getElementById("number2");
+const compareButton = document.getElementById("compare");
+const resetButton = document.getElementById("reset");
+const result = document.getElementById("result");
+
+const  ERROR_CLASS = 'border-red-500';
+function resetErrorStyles(){
+  number1Input.classList.remove(ERROR_CLASS);
+  number2Input.classList.remove(ERROR_CLASS);
+}
+
+function isValidInput(){
+  resetErrorStyles();
+
+    if(!number1Input.value){
+        number1Input.classList.add(ERROR_CLASS);
+        return false;
+    }
+    if(!number2Input.value){
+      number2Input.classList.add(ERROR_CLASS);
+      return false;
+    }
+    return true;
+}
+
+// Add event listener for the Compare button
+compareButton.addEventListener('click', function () {
+  if(!isValidInput()){
+    return;
+  }
+    const number1 = parseFloat(number1Input.value);
+    const number2 = parseFloat(number2Input.value);
+
+  if (number1 > number2) {
+    result.innerText = "First Number is larger";
+  } else if (number1 < number2) {
+    result.innerText = "Second Number is larger";
+  } else {
+    result.innerText = "Both numbers are equal";
+  }
+});
+
+resetButton.addEventListener('click', function(){
+    number1.value = '0';
+    number2.value = '0';
+    result.innerText = '';
+    resetErrorStyles();
+
+});
diff --git a/003-grade-comparator/zubayer/grade-calculator.js b/003-grade-comparator/zubayer/grade-calculator.js
@@ -0,0 +1,62 @@
+const scoreInput = document.getElementById("score");
+const calculateGradeButton = document.getElementById("calculate-btn");
+const result = document.getElementById("result");
+const resetButton = document.getElementById("reset");
+const errorMessage = document.getElementById("error-message");
+
+const ERROR_CLASS = "border-red-500";
+
+function resetErrorStyles() {
+  scoreInput.classList.remove(ERROR_CLASS);
+  errorMessage.classList.add("hidden");
+}
+
+function isValidInput() {
+  resetErrorStyles();
+  if (!scoreInput.value) {
+    scoreInput.classList.add(ERROR_CLASS);
+    errorMessage.classList.remove("hidden");
+    errorMessage.textContent = "Please enter a valid score!!";
+    return false;
+  }
+  if (scoreInput.value < 0 || scoreInput.value > 100) {
+    scoreInput.classList.add(ERROR_CLASS);
+    errorMessage.classList.remove("hidden");
+    errorMessage.textContent = "Please enter score between 0 to 100!!";
+    return false;
+  }
+  return true;
+}
+
+calculateGradeButton.addEventListener("click", function () {
+  if (!isValidInput()) {
+    return;
+  }
+
+  let score = parseFloat(scoreInput.value);
+
+  if (score >= 0 && score < 33) {
+    result.textContent = "F (You have to improve)";
+  } else if (score >= 33 && score < 40) {
+    result.textContent = "D (You barely passed, keep working harder)";
+  } else if (score >= 40 && score < 50) {
+    result.textContent = "C (Needs improvement)";
+  } else if (score >= 50 && score < 60) {
+    result.textContent = "B (Good, but aim higher)";
+  } else if (score >= 60 && score < 70) {
+    result.textContent = "A- (Well done, you are improving!)";
+  } else if (score >= 70 && score < 80) {
+    result.textContent = "A (Very good, keep up the great work!)";
+  } else if (score >= 80 && score <= 100) {
+    result.textContent = "A+ (Excellent! Keep shining!)";
+  } else {
+    result.textContent =
+      "Invalid Score (Please enter a score between 0 and 100)";
+  }
+});
+
+resetButton.addEventListener("click", function () {
+  scoreInput.value = "";
+  result.textContent = "";
+  resetErrorStyles();
+});
diff --git a/003-grade-comparator/zubayer/index.html b/003-grade-comparator/zubayer/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Grade Calculator</title>
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="bg-gray-100 h-screen flex items-center justify-center">
+  <div class="bg-white p-6 rounded-lg shadow-lg text-center">
+    <h1 class="text-2xl font-bold mb-4">Grade Calculator</h1>
+    <!-- Input Field for the Score -->
+    <input type="number" id="score" placeholder="Enter your score" class="hover:bg-yellow-100 border p-2 rounded w-full" min="0"
+      max="100" />
+    <p id="error-message" class="hidden"></p>
+    <!-- Button to Calculate Grade -->
+    <button id="calculate-btn" class="mt-4 hover:bg-red-600 bg-gray-500 text-white py-2 px-4 rounded">Calculate Grade</button>
+    <button id="reset" class="mt-4 hover:bg-blue-600 bg-green-500 text-white py-2 px-4 rounded">Reset</button>
+
+    <!-- Display Result -->
+    <div id="result" class="text-yellow-700 mt-4 text-xl font-bold"></div>
+  </div>
+
+  <!-- Include JavaScript -->
+  <script src="grade-calculator.js"></script>
+</body>
diff --git a/004-number-table/zubayer/index.html b/004-number-table/zubayer/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Multiplication Table Generator</title>
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="bg-gray-100 h-screen flex items-center justify-center">
+  <div class="bg-white p-6 rounded-lg shadow-lg text-center">
+    <h1 class="text-2xl font-bold mb-4">Multiplication Table Generator</h1>
+
+    <!-- Input field for the number -->
+    <input type="number" id="input-number" placeholder="Enter a number" class="border p-2 rounded w-full" value="1" />
+
+    <!-- Button to generate the multiplication table -->
+    <button id="generate" class="mt-4 bg-blue-500 text-white py-2 px-4 rounded">Generate Table</button>
+    <button id="reset-btn" class="mt-4 bg-blue-500 hover:bg-green-700 text-white py-2 px-4 rounded">Reset </button>
+    <!-- Display area for the multiplication table -->
+    <div id="table-container" class="mt-4">
+      <table class="table-auto border border-slate-700 w-full">
+        <tbody id="table-body">
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Include JavaScript -->
+  <script src="./multiplication-table.js"></script>
+</body>