Fixed issue of Two input field should not be empty while generating t…

…able LunarMarathon#33

Fixed the issue of Two input field should not be empty while generating table LunarMarathon#33
 kindly merge it. I have attached the output in the issue discussion comments

index.css

@@ -334,6 +334,17 @@ body[light-mode=dark] {
     --autoCompFontColor: #e1e1e1;
     --checkedBgColor: #404A47;
 }
+/* Changes done by Siddhesh172004 */
+
+body[light-mode=dark] .alert{
+    padding: 10px;
+    background-color: #ffffff;
+    color: rgb(0, 0, 0);
+    width: 50%;
+   margin: auto;
+}
+
+/* Changes done by Siddhesh172004 */
 
 body[light-mode="dark"] .light-mode-button span:nth-child(1) {
     background-color: #ced4e2;
@@ -387,4 +398,37 @@ body[light-mode=dark] .light-mode-button span:nth-child(2) {
     transition: .3s;
 }
 
-/* --------------------------------------------------- */
+/* --------------------------------------------------- */
+
+/* Changes done by Siddhesh172004 */
+
+/* Alert code starts  */
+.alert {
+    padding: 10px;
+    background-color: #78c992;
+    color: rgb(0, 0, 0);
+    width: 50%;
+   margin: auto;
+  }
+.hide{
+    display: none;
+}
+.showalert{
+    display: block;
+}  
+  .closebtn {
+    margin-left: 15px;
+    color: rgb(0, 0, 0);
+    font-weight: bold;
+    float: right;
+    font-size: 22px;
+    line-height: 20px;
+    cursor: pointer;
+    transition: 0.3s;
+  }
+
+  .closebtn:hover {
+    color: black;
+  }
+/* Alert code ends  */
+/* Changes done by Siddhesh172004 */

index.html

@@ -46,6 +46,16 @@ <h1>GRAPH TO TABLE</h1>
     </div>
 
     <div class="outerInputDiv">
+<!-- /* Changes done by Siddhesh172004    */ -->
+
+<div class="alert hide" id="showalert">
+  <span class="closebtn" onclick="closethealert()">&times;</span> 
+  <strong>Input field are null</strong> Please enter the some text in input field.
+</div>
+
+<!-- /* Changes done by Siddhesh172004     */ -->
+
+
         <div class="inputCont autocomplete">
             <input id="input1" type="text" placeholder="key/node1">
         </div>

index.js

@@ -135,6 +135,20 @@ function autocomplete(inp, arr) {
 
 //Code for creating the table
 function createTable() {
+/* Changes done by Siddhesh172004 */
+
+// Alert messgae code starts
+var showalert=document.getElementById('showalert')
+    if(input1.value.length==0 || input2.value.length==0){
+        showalert.classList.remove('hide')
+        showalert.classList.add('showalert')
+
+        return 0;
+    }
+
+// Alert messgae code ends
+/* Changes done by Siddhesh172004 */
+
     autocomplete(document.getElementById("input1"), tableArr);
     autocomplete(document.getElementById("input2"), tableArr);
     let key = document.getElementById("input1").value;
@@ -208,6 +222,20 @@ function createTable() {
     //----------------------------------------------------------------
 
 }
+
+
+
+// to close the alert badge starts
+
+function closethealert(){
+    var showalert=document.getElementById('showalert')
+
+        showalert.classList.remove('showalert')
+           showalert.classList.add('hide')
+       }  
+// to close the alert badge ends
+
+
 //----------------------------------------------------------------
 
 //Search table code
@@ -394,3 +422,21 @@ function generateTable() {
     });
     //----------------------------------------------------------------
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+