Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (105 sloc) 3.81 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="node.js"></script>
<script src="main.js"></script>
<title>Binary Tree</title>
<style>
.wrapper {
padding: 20px;
}
.row {
padding-top: 10px;
padding-bottom: 10px;
}
.node {
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid black;
text-align: center;
font-weight: bold;
user-select: none;
margin: 10px;
}
.node-container {
display: flex;
flex-direction: column;
align-items: center;
vertical-align: top;
border: 1px grey solid;
margin: 2px;
}
.child-container {
display: flex;
flex-direction: row;
}
#tree {
padding-top: 30px;
width: 50%;
margin: 0 auto;
}
.btn {
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="row">
<div class="col-12">
<h1>Binary Tree</h1>
</div>
</div>
<div class="row">
<form class="form-inline">
<div class="col-4">
<input id="nodeValue" class="form-control" type="text" placeholder="Node value " />
</div>
<div class="col-2">
<input type="submit" id="addNode" class="btn btn-primary form-control" value="Add node" />
</div>
<div class="col-2">
<input type="range" min="0" max="1000" id="speed" class="btn btn-primary form-control" value="Add node" />
</div>
</form>
</div>
<div class="row">
<div class="col-1">
<input type="button" id="preOrder" class="btn btn-primary" value="Preorder" />
</div>
<div class="col-1">
<input type="button" id="inOrder" class="btn btn-primary" value="Inorder" />
</div>
<div class="col-1">
<input type="button" id="postOrder" class="btn btn-primary" value="Postorder" />
</div>
<div class="col-1">
<input type="button" id="levelOrder" class="btn btn-primary" value="Levelorder" />
</div>
<div class="col-8">
</div>
</div>
<div class="row">
<div class="col-1">
<input type="number" id="amount" class="form-control" value="50" />
</div>
<div class="col-1">
<input type="button" id="randomTree" class="btn btn-primary" value="Random Tree" />
</div>
<div class="col-1">
<input type="button" id="deleteTree" class="btn btn-primary" value="Delete Tree" />
</div>
<div class="col-10">
</div>
</div>
<div id="tree"></div>
<div id="output"></div>
</div>
</body>
</html>
You can’t perform that action at this time.