bongodev · dipuMojumder · Dec 7, 2024 · Dec 7, 2024 · Dec 7, 2024
diff --git a/001-counter-app/Dipu/index.html b/001-counter-app/Dipu/index.html
@@ -0,0 +1,33 @@
+<!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>
+  <!-- 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>
+      <button id="reset" class="bg-green-500 hover:bg-red-600 text-white flex-col font-bold py-2 px-4 rounded ml-2">Reset</button>
+    </div>
+  </div>
+
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/001-counter-app/Dipu/script.js b/001-counter-app/Dipu/script.js
@@ -0,0 +1,34 @@
+let count=0;
+const counterElement=document.getElementById('counter');
+const incrementButton=document.getElementById('Increment');
+const resetButton=document.getElementById('reset');
+function increaseCount(){
+    if(count ==10)
+    {
+        alert('Overflow');
+    }
+    else{
+    count=count+1;
+    counterElement.innerText=count;
+    }
+}
+incrementButton.addEventListener('click', increaseCount);
+function decreaseCount()
+{
+    if(count==0)
+    {
+        alert('Count can not be negative');
+    }
+    else{
+    count=count-1;
+    counterElement.innerText=count;
+    }
+}
+function reset(){
+    count=0;
+    counterElement.innerText=count;
+}
+resetButton.addEventListener('click',reset)
+
+const decrementButton=document.getElementById('decrement');
+decrementButton.addEventListener('click',decreaseCount );
diff --git a/002-number-comparator/Dipu/index.html b/002-number-comparator/Dipu/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Number Comparator App</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">Number Comparator App</h1>
+        <!-- Input Fields for Numbers -->
+        <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 to Compare Numbers -->
+        <button id="compare" class="mt-4 bg-blue-500 text-white py-2 px-4 rounded">Compare</button>
+        <button id="reset" class="mt-4 bg-red-500 text-white py-2 px-4 rounded">Reset</button>
+        <!-- Display Result -->
+        <div id="result" class="mt-4 text-xl font-bold"></div>
+    </div>
+
+    <!-- Include JavaScript -->
+    <script src="number-comparator.js"></script>
+</body>
diff --git a/002-number-comparator/Dipu/number-comparator.js b/002-number-comparator/Dipu/number-comparator.js
@@ -0,0 +1,47 @@
+const inputNum1 = document.getElementById('number1');
+const inputnum2 = document.getElementById('number2');
+const comparatorButton = document.getElementById('compare');
+const result = document.getElementById('result');
+const Erro_Message = 'border-red-500';
+function ErrorStyle() {
+    inputNum1.classList.remove(Erro_Message);
+    inputnum2.classList.remove(Erro_Message);
+    return;
+
+}
+function isvalidnumber() {
+    ErrorStyle();
+    if (!inputNum1.value) {
+        inputNum1.classList.add(Erro_Message);
+
+        return false;
+    }
+    if (!inputnum2.value) {
+        inputnum2.classList.add(Erro_Message);
+        return false;
+    }
+    return true;
+}
+comparatorButton.addEventListener('click', function () {
+    if (!isvalidnumber()) {
+        return;
+    }
+    const number1 = parseFloat(inputNum1.value);
+    const number2 = parseFloat(inputnum2.value);
+    if (number1 > number2) {
+        result.innerText = 'First number is Greater';
+    }
+    else if (number1 < number2) {
+        result.innerText = 'Second Number is Greater';
+    }
+    else {
+        result.innerText = 'Both are Equal';
+    }
+});
+const resetButton = document.getElementById('reset');
+resetButton.addEventListener('click', function () {
+    inputNum1.value = '0';
+    inputnum2.value = '0';
+    result.innerText = ' ';
+    ErrorStyle();
+});
diff --git a/003-grade-calculator/Dipu/grade-calculator.js b/003-grade-calculator/Dipu/grade-calculator.js
@@ -0,0 +1,83 @@
+const numberInput = document.getElementById('score');
+const calculatorButton = document.getElementById('calculate-btn');
+const result = document.getElementById('result');
+
+calculatorButton.addEventListener('click', function () {
+
+    if (isEmptyInput()) {
+        errormessge();
+        result.innerText = 'Please enter valid marks';
+
+        return;
+    }
+    const number = parseFloat(numberInput.value);
+    if (isInvalid(number)) {
+
+        result.innerText = 'Please enter valid marks';
+
+        return;
+    }
+
+    const grade = calculateGrade(number);
+    result.innerText = grade;
+});
+const ERROR_MESS = 'border-red-500';
+function errormessge() {
+    numberInput.classList.add(ERROR_MESS);
+
+}
+function isEmptyInput() {
+    if (!numberInput.value) {
+        return true;
+    }
+    return false;
+
+}
+function isInvalid(marks) {
+    if (marks > 100 || marks < 0) {
+        return true;
+    }
+    return false;
+}
+
+function calculateGrade(marks) {
+    let grade = ' ';
+    if (marks > 100 || marks < 0) {
+        grade = 'Invalid Marks';
+    }
+    else if (marks <= 100 && marks >= 80) {
+        grade = 'A+';
+    }
+    else if (marks < 80 && marks >= 70) {
+        grade = 'A';
+    }
+    else if (marks < 70 && marks >= 60) {
+        grade = 'A-';
+    }
+    else if (marks < 60 && marks >= 50) {
+        grade = 'B';
+    }
+    else if (marks < 50 && marks >= 40) {
+        grade = 'C';
+    }
+    else if (marks < 40 && marks >= 33) {
+        grade = 'D';
+    }
+    else {
+        grade = 'F';
+    }
+    return grade;
+
+
+
+}
+const resetButton = document.getElementById('reset');
+resetButton.addEventListener('click', function () {
+    numberInput.value = '0';
+    result.innerText = ' ';
+    removeErrormessage();
+
+});
+function removeErrormessage() {
+    numberInput.classList.remove(ERROR_MESS);
+}
diff --git a/003-grade-calculator/Dipu/index.html b/003-grade-calculator/Dipu/index.html
@@ -0,0 +1,26 @@
+<!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="border p-2 rounded w-full" max="100" />
+        <p id="error-message" class="hidden"></p>
+        <!-- Button to Calculate Grade -->
+        <button id="calculate-btn" class="mt-4 bg-blue-500 text-white py-2 px-4 rounded">Calculate Grade</button>
+        <button id="reset" class="mt-4 bg-red-500 text-white py-2 px-8 rounded">reset</button>
+        <!-- Display Result -->
+        <div id="result" class="mt-4 text-xl font-bold"></div>
+    </div>
+
+    <!-- Include JavaScript -->
+    <script src="grade-calculator.js"></script>
+</body>