molymaker/index.html at main · bukhariayan/molymaker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
<title>Molymaker</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="jumbotron">
				<h2>
					Molymaker by Ayan Bukhari
				</h2>
				<h5>
					This is a website that allows users to enter a simple covalent compound, such as H2O or CH4. It will then display a structural formula of the compound, the VSEPR structure. Other relevant information such as the compound name, number of sigma and pi bonds, and hybridization orbital will also be displayed.
				</h5>

			</div>

			<div class="row">
				<div class="col-md-4">
                    <p>Please input a compound and then press the button. Make sure that the compound has 1 central atom. More complex compounds such as C2H4 are not supported yet.</p>
					<p> Example compounds to try: CO2, N2, O3, PCl3, PCl5, SF6</p>
					<input type="text" class="compound" placeholder="enter a compound" id="compoundInput">
					<button type="button" id="submitbtn">
						Generate
					</button>

					<p> VSEPR Diagram: </p>
                    <div class="plot_container2">
                    <div id='plot2' style="width: 300px;height: 300px;"></div>
                    </div>

					<div class="info-box">
					<h6><strong>Name of compound:</strong> <span id="name">-</span></h6>
					<h6><strong>Central atom:</strong> <span id="center-atom">-</span><h6>
					<h6><strong>Number of sigma bonds:</strong> <span id="sigma-bonds">-</span></h6>
					<h6><strong>Number of pi bonds:</strong> <span id="pi-bonds">-</span></h6>
					<h6><strong>Hybridization orbital:</strong> <span id="hybridization">-</span><h6>
					<h6><strong>VSEPR shape:</strong> <span id="vsepr-shape">-</span><h6></h6>
					<h6><strong>Bond type:</strong> <span id='bond-type'>-</span></h6>

					</div>
				</div>
				<div class="col-md-8">
					<h3 class="text-center">
Structural Formula:
                    </h3>
                    <div class="plot_container">
                    <div id='plot' style="width: 200px;height: 200px;"></div>
                    </div>


				</div>
			</div>
		</div>
	</div>
</div>
<script src="jscode.js"></script>
</body>
</html>