Added dialog box

Abhi-tech-09 · Abhi-tech-09 · commit 4fa9df3a0e95 · 2021-06-10T19:52:21.000+05:30
diff --git a/astar.js b/astar.js
@@ -60,6 +60,8 @@ astarE:function(startNode , finishNode , grid){
         }
 
     }
+    animate("No Path found") ; 
+    enable() ; 
 } , 
 
 astarM:function(startNode , finishNode , grid){
@@ -121,7 +123,7 @@ astarM:function(startNode , finishNode , grid){
         }
 
     }
-    alert("Path not found")
+    animate("No Path found") ; 
     enable() ; 
 } ,
 
diff --git a/bfs.js b/bfs.js
@@ -28,7 +28,7 @@ bfs : function(startNode , finishNode){
             }
         } 
     }
-    alert("Path Not found") ; 
+    animate("No Path found") ; 
     enable();
 
 } , 
diff --git a/biDijkstra.js b/biDijkstra.js
@@ -66,7 +66,7 @@ BiDijkstra:async function (start, finish , grid ) {
         }
 
     }
-    alert("Path Not found") ; 
+    animate("No Path found") ;  
     enable();
 
 },
diff --git a/concurrent.js b/concurrent.js
@@ -132,7 +132,7 @@ var CD = {
                 } 
             }
         }
-        alert("Path Not found") ; 
+        animate("No Path found") ; 
     enable();
     } , 
     mysetPath : async function (parent ,  finishNode){
diff --git a/dfs.js b/dfs.js
@@ -28,7 +28,7 @@ dfs:function(startNode , finishNode){
             }
         }
     }
-    alert("Path Not found") ; 
+    animate("No Path found") ; 
     enable();
 },
 
diff --git a/dijkstra.js b/dijkstra.js
@@ -31,7 +31,7 @@ dijkstra : async function(start , finish){
             }
         }
     }
-    alert("Path Not found") ; 
+    animate("No Path found") ; 
     enable();
     
 } ,
diff --git a/grid.css b/grid.css
@@ -91,4 +91,41 @@
     border : 1px solid white ;
 }
 
+.block{
+    pointer-events: none;
+    opacity : 0 ; 
+    display : grid ; 
+    grid-template-rows: 2fr 1fr;
+    grid-gap : 1px ; 
+    background: #f8f6f6;
+    border : 1px solid #171d2d ; 
+    margin: auto;
+    width: 20%;
+    height: 20%;
+    position: absolute;
+    top: 40%;
+    left: 40%;
+    transition : opacity 0.5s ; 
+}
+
+.text{
+    padding-top: 20px;
+}
+
+p{
+
+    text-align: center;
+}
+#ok{
+    pointer-events: none;
+    width : 20% ; 
+    border-radius: 22px;
+    position: relative;
+    left: 37%;
+    margin: 5px;
+    bottom: 11%;
+}
+
+
+
 
diff --git a/grid.js b/grid.js
@@ -6,6 +6,10 @@ var width = window.innerWidth - s;
 var height = window.innerHeight;
 document.querySelector("#canvas").width = width - 2;
 document.querySelector("#canvas").height = height - 2;
+document.querySelector("#ok").addEventListener('click' , function(){
+    document.querySelector(".block").style.opacity = 0 ;  
+    document.querySelector("#ok").style.pointerEvents = "none";
+});
 
 var startNode;
 var finishNode;
@@ -170,6 +174,14 @@ function pressed(e) {
     }
 }
 
+function animate(s){
+    document.querySelector(".block").style.opacity = 1 ; 
+    document.querySelector(".text").innerHTML = `<p>${s}</p>`;
+    document.querySelector("#ok").style.pointerEvents = "all" ; 
+    
+}
+
+
 function up() {
     canvas.onmousemove = null;
 }
@@ -435,7 +447,7 @@ async function RecursiveDivisonH() {
 
 function resetNodes() {
     if (startNode == null || finishNode == null) {
-        alert("Select Start and finsh Node.");
+        animate("Select start and finish Node.")
     }
     for (var i = 0; i < total_rows; i++) {
         for (var j = 0; j < total_cols; j++) {
diff --git a/index.html b/index.html
@@ -14,9 +14,18 @@
 </head>
 
 <body>
-   //  It works guys 
 
+  <div class="block">
+    <div class="text">
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, praesentium?
+      </p>
+    </div>
+    <button id = "ok" class = "btn btn-sm btn-dark">OK</button>
+  </div>
+  
   <div class="super">
+    
     <div class="container">
       <img class="image" src="path-finder.png" alt="LOGO">
 
@@ -112,7 +121,7 @@ <h3 style="font-weight: 100; color: whitesmoke;   ">VisitedNode
 
 
     <canvas id="canvas"></canvas>
-  </div>
+  </div> 
 
   <script src="Node.js"></script>
   <script src="dijkstra.js"></script>

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,8 @@ astarE:function(startNode , finishNode , grid){`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`}`
	`63`	`+ animate("No Path found") ;`
	`64`	`+ enable() ;`
`63`	`65`	`} ,`
`64`	`66`
`65`	`67`	`astarM:function(startNode , finishNode , grid){`
`@@ -121,7 +123,7 @@ astarM:function(startNode , finishNode , grid){`
`121`	`123`	`}`
`122`	`124`
`123`	`125`	`}`
`124`		`- alert("Path not found")`
	`126`	`+ animate("No Path found") ;`
`125`	`127`	`enable() ;`
`126`	`128`	`} ,`
`127`	`129`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ bfs : function(startNode , finishNode){`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`	`}`
`31`		`- alert("Path Not found") ;`
	`31`	`+ animate("No Path found") ;`
`32`	`32`	`enable();`
`33`	`33`
`34`	`34`	`} ,`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ BiDijkstra:async function (start, finish , grid ) {`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`}`
`69`		`- alert("Path Not found") ;`
	`69`	`+ animate("No Path found") ;`
`70`	`70`	`enable();`
`71`	`71`
`72`	`72`	`},`
Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@ var CD = {`
`132`	`132`	`}`
`133`	`133`	`}`
`134`	`134`	`}`
`135`		`- alert("Path Not found") ;`
	`135`	`+ animate("No Path found") ;`
`136`	`136`	`enable();`
`137`	`137`	`} ,`
`138`	`138`	`mysetPath : async function (parent , finishNode){`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ dfs:function(startNode , finishNode){`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`	`}`
`31`		`- alert("Path Not found") ;`
	`31`	`+ animate("No Path found") ;`
`32`	`32`	`enable();`
`33`	`33`	`},`
`34`	`34`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ dijkstra : async function(start , finish){`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`	`}`
`34`		`- alert("Path Not found") ;`
	`34`	`+ animate("No Path found") ;`
`35`	`35`	`enable();`
`36`	`36`
`37`	`37`	`} ,`