Skip to content

Commit 88d912a

Browse files
Anshul SachdevAnshul Sachdev
Anshul Sachdev
authored and
Anshul Sachdev
committed
FinMinNode: Animation completed
1 parent ee446d7 commit 88d912a

File tree

13 files changed

+345
-279
lines changed

13 files changed

+345
-279
lines changed

‎Binary Search Tree/FindMinNode/css/styles.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html {
6+
font-size: 62.5%;
7+
}
8+
9+
body {
10+
margin: 0;
11+
font-family: 'Lato', sans-serif;
12+
font-size: 1.8rem;
13+
line-height: 1.6;
14+
color: #ffffff;
15+
}
16+
17+
button {
18+
cursor: pointer;
19+
}
20+
21+
button:disabled {
22+
cursor: default;
23+
}
24+
25+
.is-active {
26+
font-weight: bold;
27+
}
28+
29+
canvas {
30+
width: 100vw;
31+
height: 100vh;
32+
}
33+
34+
.base-class{
35+
display: flex;
36+
flex-direction: row;
37+
background-color: #e14e87;
38+
padding: 3rem;
39+
justify-content: space-between;
40+
}
41+
42+
@media only screen and (max-width: 600px) {
43+
.base-class {
44+
display: flex;
45+
flex-direction: column;
46+
justify-content: center;
47+
padding: 1.5rem 0.5rem;
48+
}
49+
}
50+
51+
.content {
52+
display: flex;
53+
flex-direction: row;
54+
justify-content: center;
55+
padding: 1.5rem 0;
56+
57+
@media only screen and (max-width: 600px) {
58+
background;
59+
}
60+
}
61+
62+
.config-section {
63+
height: 15rem;
64+
background-color: #e14e87;
65+
}
66+
67+
.input-css {
68+
display: block;
69+
font-size: 1.8rem;
70+
/* width: 100rem; */
71+
width: 100%;
72+
box-sizing: border-box;
73+
border: 1px solid #4b5399;
74+
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
75+
-moz-appearance: none;
76+
-webkit-appearance: none;
77+
appearance: none;
78+
background-color: #fff;
79+
background-repeat: no-repeat, repeat;
80+
background-position: right .7em top 50%, 0 0;
81+
background-size: .65em auto, 100%;
82+
}
83+
.input-css::-ms-expand {
84+
display: none;
85+
}
86+
.input-css:hover {
87+
border-color: #888;
88+
}
89+
.input-css:focus {
90+
border-color: #aaa;
91+
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
92+
box-shadow: 0 0 0 3px -moz-mac-focusring;
93+
color: #222;
94+
outline: none;
95+
}
96+
97+
/* *[dir="rtl"] .input-css, :root:lang(ar) .input-css, :root:lang(iw) .input-css {
98+
background-position: left .7em top 50%, 0 0;
99+
padding: .6em .8em .5em 1.4em;
100+
} */
101+
102+
103+
.btn-6d {
104+
border: 2px solid #e14e87;
105+
padding: 1.5rem;
106+
color: #ffffff;
107+
font-size: 1.5rem;
108+
background: #4b5399;
109+
white-space: nowrap;
110+
}
111+
112+
.btn-6d:hover {
113+
background: transparent;
114+
border: 2px solid #ffffff;
115+
}
116+
117+
.btn-animation {
118+
border: 2px solid #e14e87;
119+
padding: 1.5rem;
120+
color: #ffffff;
121+
font-size: 1.5rem;
122+
background: transparent;
123+
}
124+
125+
.play-pause-buttons {
126+
position: absolute;
127+
left: 50%;
128+
bottom: 0;
129+
transform: translate(-50%, 0);
130+
padding: 0.5rem;
131+
}
132+
133+
.btn-animation:hover {
134+
border: 2px solid #ffffff;
135+
}
136+
137+
button:focus {
138+
outline: 0px solid #fff;
139+
}
140+
141+
@media (max-width: 45rem){
142+
.show-for-mobile {
143+
display: none;
144+
}
145+
146+
.play-pause-buttons {
147+
position: absolute;
148+
left: auto;
149+
right: 0;
150+
transform: translate(0, 0);
151+
}
152+
}

‎Binary Search Tree/FindMinNode/index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<html>
2+
<head>
3+
<title>BST - Find Min Node</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<link rel="preconnect" href="https://fonts.gstatic.com">
6+
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
7+
<link rel="stylesheet" href="css/styles.css">
8+
</head>
9+
10+
<body id="fullscreen" style="background-color: #4b5399;">
11+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13+
<script src="js/control-scripts/fullScreen.js"></script>
14+
<script src="js/control-scripts/nextStepAnimation.js"></script>
15+
<script src="js/control-scripts/pauseAnimation.js"></script>
16+
<script src="js/BinarySearchTree.js"></script>
17+
<script src="js/Node.js"></script>
18+
<script src="js/Line.js"></script>
19+
<script src="js/Circle.js"></script>
20+
<script src="js/sketch.js"></script>
21+
22+
<div style="text-align: center;background-color: #e14e87;padding-top: 1.5rem;font-size: 2.4rem;">
23+
<b>BST - Find Min Node</b>
24+
</div>
25+
26+
<div class="base-class">
27+
28+
<div style="display: flex;flex-direction: row;padding: 1.5rem 1.5rem 0 1.5rem;">
29+
<div style="padding-right: 0.5rem;white-space: nowrap;">Nodes (Preorder)</div>
30+
</div>
31+
32+
<div style="padding: 1.5rem; width: 100%;">
33+
<input type="text" id="nodesInput" placeholder="Enter comma separated node values" class="input-css"/>
34+
</div>
35+
36+
<div style="display: flex;flex-direction: row;">
37+
<div style="padding: 0 1.5rem;">
38+
<button class="btn-6 btn-6d" onclick="constructBST()" >Construct BST</button>
39+
</div>
40+
41+
<div style="padding: 0 1.5rem;">
42+
<button class="btn-6 btn-6d" onclick="startAnimation()">Start Animation</button>
43+
</div>
44+
</div>
45+
46+
</div>
47+
48+
<div style="position: absolute; left: 0; bottom: 0;">
49+
<a href="https://www.geekosophers.com">
50+
<button class="btn-animation">
51+
<div style="font-size: 1.2rem; text-align: left;">An Initiative by</div>
52+
<div style="font-size: 1.8rem; text-align: left;">Geekosophers</div>
53+
</button>
54+
</a>
55+
</div>
56+
57+
<div class="play-pause-buttons" >
58+
<button id="play-button" class="btn-animation" onclick="playAnimation();">Play</button>
59+
<button class="btn-animation" onclick="nextStep();">Next Step</button>
60+
</div>
61+
62+
<div style="position: absolute;right: 0;bottom: 0;">
63+
<button id="full-screen" class="btn-animation show-for-mobile" onclick="handleFullScreen();">Full Screen</button>
64+
</div>
65+
66+
<script>
67+
var preOrderNodes = [];
68+
var play = false;
69+
var constructBST = function(){
70+
play = false;
71+
preOrderNodes = document.getElementById("nodesInput").value.split(",");
72+
preOrderNodes = preOrderNodes.map(function(item) {
73+
return parseInt(item, 10);
74+
});
75+
setup(preOrderNodes);
76+
}
77+
78+
var startAnimation = function(){
79+
play = true;
80+
}
81+
</script>
82+
</body>
83+
</html>

Binary Search Tree/Insertion/js/BinarySearchTree.js renamed to Binary Search Tree/FindMinNode/js/BinarySearchTree.js

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,53 @@ class BinarySearchTree{
66

77
insert(data){
88
var newNode = new Node(data);
9+
var width = window.innerWidth;
10+
var height = window.innerHeight;
11+
var length = null;
12+
13+
if(width>height)
14+
length = width/20;
15+
else
16+
length = height/30;
17+
18+
919
if(this.root === null){
1020
newNode.coord = coord;
1121
newNode.parentCoord = coord;
1222
newNode.level = 0;
13-
newNode.circle = new Circle(newNode.coord[0], newNode.coord[1], newNode.data.toString(), window.innerWidth/20);
23+
newNode.circle = new Circle(newNode.coord[0], newNode.coord[1], newNode.data.toString(), length);
1424
newNode.edgeToParent = new Line(newNode.parentCoord, newNode.coord);
1525
this.root = newNode;
1626
}
1727
else{
18-
this.insertNode(this.root, newNode);
28+
this.insertNode(this.root, newNode,length);
1929
}
2030
}
2131

22-
insertNode(node, newNode){
32+
insertNode(node, newNode,length){
2333
if(newNode.data < node.data){
2434
if(node.left === null){
2535
newNode.level = node.level + 1;
2636
newNode.parentCoord = node.coord;
27-
newNode.coord = [node.coord[0] - (3/newNode.level)*(window.innerWidth/20), node.coord[1] + window.innerWidth/20]
28-
newNode.circle = new Circle(newNode.coord[0], newNode.coord[1], newNode.data.toString(), window.innerWidth/20);
37+
newNode.coord = [node.coord[0] - (3/newNode.level)*(length), node.coord[1] + length]
38+
newNode.circle = new Circle(newNode.coord[0], newNode.coord[1], newNode.data.toString(), length);
2939
newNode.edgeToParent = new Line(newNode.parentCoord, newNode.coord);
3040
node.left = newNode;
3141
}
3242
else
33-
this.insertNode(node.left, newNode);
43+
this.insertNode(node.left, newNode,length);
3444
}
3545
else{
3646
if(node.right === null){
3747
newNode.level = node.level + 1;
3848
newNode.parentCoord = node.coord;
39-
newNode.coord = [node.coord[0] + (3/newNode.level)*(window.innerWidth/20), node.coord[1] + window.innerWidth/20];
40-
newNode.circle = new Circle(newNode.coord[0], newNode.coord[1], newNode.data.toString(), window.innerWidth/20);
49+
newNode.coord = [node.coord[0] + (3/newNode.level)*(length), node.coord[1] + length];
50+
newNode.circle = new Circle(newNode.coord[0], newNode.coord[1], newNode.data.toString(), length);
4151
newNode.edgeToParent = new Line(newNode.parentCoord, newNode.coord);
4252
node.right = newNode;
4353
}
4454
else
45-
this.insertNode(node.right,newNode);
55+
this.insertNode(node.right,newNode,length);
4656
}
4757
}
4858

Binary Search Tree/Insertion/js/Circle.js renamed to Binary Search Tree/FindMinNode/js/Circle.js

File renamed without changes.

Binary Search Tree/Insertion/js/Line.js renamed to Binary Search Tree/FindMinNode/js/Line.js

File renamed without changes.

Binary Search Tree/Insertion/js/Node.js renamed to Binary Search Tree/FindMinNode/js/Node.js

File renamed without changes.

‎Binary Search Tree/FindMinNode/js/control-scripts/fullScreen.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var elem = document.getElementById("fullscreen");
2+
var fullscreenview = false;
3+
function handleFullScreen() {
4+
console.log('yes',fullscreenview)
5+
if(fullscreenview==false){
6+
if (elem.requestFullscreen) {
7+
elem.requestFullscreen();
8+
} else if (elem.webkitRequestFullscreen) { /* Safari */
9+
elem.webkitRequestFullscreen();
10+
} else if (elem.msRequestFullscreen) { /* IE11 */
11+
elem.msRequestFullscreen();
12+
}
13+
fullscreenview = true;
14+
document.getElementById("full-screen").innerHTML = "Exit Full Screen";
15+
}
16+
17+
else if(fullscreenview==true){
18+
if (document.exitFullscreen) {
19+
document.exitFullscreen();
20+
} else if (document.webkitExitFullscreen) { /* Safari */
21+
document.webkitExitFullscreen();
22+
} else if (document.msExitFullscreen) { /* IE11 */
23+
document.msExitFullscreen();
24+
}
25+
fullscreenview = false;
26+
document.getElementById("full-screen").innerHTML = "Full Screen";
27+
}
28+
}

‎Binary Search Tree/FindMinNode/js/control-scripts/nextStepAnimation.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var nextStep = function(){
2+
play = true;
3+
redraw(1);
4+
play = false;
5+
document.getElementById("play-button").innerHTML = "Play";
6+
}

‎Binary Search Tree/FindMinNode/js/control-scripts/pauseAnimation.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
var playAnimation = function(){
2+
play = !play;
3+
document.getElementById("play-button").innerHTML = play==true ? "Pause" : "Play";
4+
}

0 commit comments

Comments
 (0)