Skip to content

Commit 10845e7

Browse files
author
pseudocode88
committed
Add basic position size calculator
1 parent 333573d commit 10845e7

File tree

7 files changed

+3144
-816
lines changed

7 files changed

+3144
-816
lines changed

‎calc.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
var el = {}, data = {};
2+
3+
function cacheSelectors() {
4+
el.sl = document.getElementById('sl');
5+
el.ps = document.getElementById('ps');
6+
el.lev = document.getElementById('lev');
7+
el.minRisk = document.getElementById('min-risk');
8+
el.maxRisk = document.getElementById('max-risk');
9+
el.capital = document.getElementById('capital');
10+
el.margin = document.getElementById('margin');
11+
el.risk = document.getElementById('risk');
12+
}
13+
14+
function eventBindings() {
15+
el.sl.addEventListener('keyup', calc);
16+
el.ps.addEventListener('keyup', calc);
17+
el.lev.addEventListener('keyup', calc);
18+
el.minRisk.addEventListener('keyup', calc);
19+
el.maxRisk.addEventListener('keyup', calc);
20+
el.capital.addEventListener('keyup', calc);
21+
}
22+
23+
function updateData() {
24+
data.sl = el.sl.value;
25+
data.ps = el.ps.value;
26+
data.lev = el.lev.value || 1;
27+
data.minRisk = el.minRisk.value;
28+
data.maxRisk = el.maxRisk.value;
29+
data.capital = el.capital.value;
30+
}
31+
32+
function calc() {
33+
updateData();
34+
35+
data.margin = data.ps / data.lev;
36+
data.risk = ((data.sl / 100) * data.lev) * data.margin
37+
38+
el.margin.innerHTML = data.margin;
39+
el.risk.innerHTML = data.risk;
40+
41+
if (data.risk < data.minRisk) {
42+
el.risk.style.color = "green";
43+
} else if (data.risk > data.minRisk && data.risk < data.maxRisk) {
44+
el.risk.style.color = "orange";
45+
} else {
46+
el.risk.style.color = "red";
47+
}
48+
}
49+
50+
function init() {
51+
console.log('init')
52+
cacheSelectors();
53+
eventBindings();
54+
calc();
55+
}
56+
57+
window.onload = init;

‎index.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
* {
2+
-webkit-font-smoothing: antialiased;
3+
font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4+
}
5+
6+
body {
7+
margin: 0;
8+
padding: 0;
9+
color: #333
10+
}
11+
12+
main {
13+
max-width: 400px;
14+
padding: 32px;
15+
margin: auto;
16+
}
17+
18+
.Size {
19+
width: 100%;
20+
display: flex;
21+
width: 100%;
22+
gap: 20px;
23+
flex-direction: column;
24+
}
25+
26+
.Settings {
27+
width: 100%;
28+
display: flex;
29+
width: 100%;
30+
gap: 20px;
31+
}
32+
33+
.Settings__Capital {
34+
flex-grow: 1;
35+
}
36+
37+
.Settings__Risk {
38+
width: 20%;
39+
}
40+
41+
.Settings__Risk-Min,
42+
.Settings__Risk-Min {
43+
width: 50%;
44+
}
45+
46+
h1 {
47+
font-size: 32px;
48+
letter-spacing: -0.02em;
49+
margin: 0px 0 32px 0;
50+
}
51+
52+
input[type=text] {
53+
border: 1px solid #ccc;
54+
border-radius: 4px;
55+
padding: 10px 12px;
56+
font-size: 14px;
57+
box-sizing: border-box;
58+
width: 100%;
59+
}
60+
61+
label {
62+
font-size: 14px;
63+
font-weight: 600;
64+
margin-bottom: 8px;
65+
display: block;
66+
}
67+
68+
.sub-label {
69+
font-size: 14px;
70+
font-weight: 400;
71+
color: #808080;
72+
margin-bottom: 4px;
73+
display: block;
74+
margin: 0 0 8px 0;
75+
}
76+
77+
hr {
78+
border: 0;
79+
border-top: 1px solid #ddd;
80+
margin: 24px 0;
81+
}
82+
83+
input[type=range] {
84+
width: 100%;
85+
margin-top: 12px;
86+
}
87+
88+
.Value p {
89+
font-size: 18px;
90+
font-weight: 700;
91+
margin: 16px 0;
92+
}

‎index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
8+
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
9+
<title>Position Size Calc</title>
10+
<link rel="stylesheet" href="index.css" type="text/css" />
11+
</head>
12+
13+
<body>
14+
<main>
15+
<h1>PS Calculator</h1>
16+
17+
<hr />
18+
<section class="Value">
19+
<p>Risk: <span id="risk">0.00</span></p>
20+
<hr />
21+
<p>Margin: <span id="margin">0.00</span></p>
22+
</section>
23+
<hr />
24+
25+
<section class="Size">
26+
<div>
27+
<label>Stop Loss</label>
28+
<input type="text" id="sl" value="100" />
29+
</div>
30+
31+
<div>
32+
<label>Stop Loss</label>
33+
<input type="text" id="sl" value="100" />
34+
</div>
35+
36+
<div>
37+
<label>Position Size</label>
38+
<input type="text" id="ps" value="100" />
39+
</div>
40+
41+
<div>
42+
<label>Leverage</label>
43+
<input type="text" id="lev" value="10" />
44+
<!-- <input type="range" value="10" min="1" max="175" step="1" /> -->
45+
</div>
46+
</section>
47+
48+
<hr />
49+
50+
<section class="Settings">
51+
<div class="Settings__Capital">
52+
<label>Capital</label>
53+
<input type="text" id="capital" value="100" />
54+
</div>
55+
<div class="Settings__Risk">
56+
<label>Min% Risk</label>
57+
<input type="text" id="min-risk" value="3" placeholder="Min %" />
58+
</div>
59+
<div class="Settings__Risk">
60+
<label>Max% Risk</label>
61+
<input type="text" id="max-risk" value="5" placeholder="Max %" />
62+
</div>
63+
</section>
64+
</main>
65+
66+
<script type="text/javascript" src="calc.js"></script>
67+
</body>
68+
69+
</html>

‎index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const { app, BrowserWindow } = require('electron');
2+
3+
const createWindow = () => {
4+
const win = new BrowserWindow({
5+
width: 440,
6+
height: 700,
7+
})
8+
9+
win.resizable = false;
10+
win.setAlwaysOnTop(true);
11+
12+
win.loadFile('index.html')
13+
}
14+
15+
app.whenReady().then(() => {
16+
createWindow()
17+
18+
app.on('activate', () => {
19+
if (BrowserWindow.getAllWindows().length === 0) createWindow()
20+
})
21+
})
22+
23+
app.on('window-all-closed', () => {
24+
if (process.platform !== 'darwin') app.quit()
25+
})

0 commit comments

Comments
 (0)