Bug : Negative input in logarithmic calculator fixed

Rakesh9100 · May 19, 2024 · 3613dbc · 3613dbc
1 parent 22c3c46
commit 3613dbc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/Calculators/Logarithm-Calculator/index.html b/Calculators/Logarithm-Calculator/index.html
@@ -17,8 +17,10 @@ <h1>Logarithm Calculator</h1>
         <hr>
         <div class="content">
             <p>Calculate Logarithm of a number to any base:</p>
-            <div id="base1"><input type="number" id="base" placeholder="Enter base"></div>
-            <div id="number1"><input type="number" id="number" placeholder="Enter number"></div>
+            <div id="number1"><input type="number" id="number"  min="0" step="any" oninput="validity.valid && value!=0 || (value='');" placeholder="Enter number" required></div>
+
+            <div id="base1"><input type="number" id="base" min="0.000001" step="any"   oninput="validity.valid && value!=0 || (value='');" onchange="validateBaseInput(this)" placeholder="Enter base" required><br><span id="baseError">INVALID INPUT *Base can't be 1*</span></div>
+
             <button onclick="calculateLog()" id="button">Calculate Log</button>
             <h3>Result:</h3>
             <p id="result"></p>

diff --git a/Calculators/Logarithm-Calculator/script.js b/Calculators/Logarithm-Calculator/script.js
@@ -8,4 +8,13 @@ function calculateLog() {
 	} else {
 		alert('Invalid input. Please enter positive numbers for both the base and the number, and ensure that the base is not equal to 1.')
 	}
+}
+
+function validateBaseInput(base) {
+	const errorElement = document.getElementById('baseError');
+	if (base.value == 1) {
+		errorElement.style.display = 'inline';
+	} else {
+		errorElement.style.display = 'none';
+	}
 }
diff --git a/Calculators/Logarithm-Calculator/style.css b/Calculators/Logarithm-Calculator/style.css
@@ -8,7 +8,6 @@ body {
 
 #heading {
     text-align: center;
-
 }
 
 .content {
@@ -28,12 +27,19 @@ body {
     margin-bottom: 15px;
 }
 
+#baseError {
+    color: rgb(241, 63, 63);
+    display: none;
+    font-size : 15px ;
+}
+
 #number {
     padding: 10px 15px 10px 10px;
     margin-bottom: 10px;
 }
 
 #button {
+    margin-top: 20px;
     padding: 20px 20px 20px 20px;
     font-size: 20px;
 }