Skip to content

Commit

Permalink
calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
John Khachian committed Nov 1, 2023
1 parent 26d0cfb commit 2c358bf
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 21 deletions.
Binary file modified assets/.DS_Store
Binary file not shown.
Binary file modified assets/img/.DS_Store
Binary file not shown.
76 changes: 76 additions & 0 deletions assets/js/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@

function renderDonut(before, after){
var options = {
chart: {
type: "bar",
stacked: true,
height: "500px",
},
// colors: ["green", "orange", "red"],
series: [
{
name: "Profit",
data: [before.profit, after.profit]
},
{
name: "Shrinkage",
data: [before.shrinkage, after.shrinkage]
},
{
name: "Cost of Goods Sold",
data: [before.cogs, after.cogs]
}
],
plotOptions: {
bar: {
dataLabels: {
total: {
enabled: true,
offsetX: 0,
style: {
fontSize: "13px",
fontWeight: 900
}
}
}
},
},
stroke: {
width: 1,
colors: ["#fff"]
},
xaxis: {
categories: ["Before", "After"],
},
legend: {
position: "top",
horizontalAlign: "center",
}
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
}

function formatNumber(x) {
let y = parseInt(x);
return y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function calculateSavings(){
const revenue = document.getElementById("revenue-input").value;
let cogs = document.getElementById("cogs-input").value;
const shrinkagePercentage = document.getElementById("shrinkage-input").value/100;
const necessaryCogs = cogs * (1 - (shrinkagePercentage-0.085));
console.log()



let savings = (cogs-necessaryCogs) * 12;
document.getElementById("savings-output").innerHTML = `$${formatNumber(savings)}`;
document.getElementById("current-cogs").innerHTML = `$${formatNumber(cogs)}`;
document.getElementById("current-profit").innerHTML = `$${formatNumber(revenue - cogs)}`;
document.getElementById("ayoda-cogs").innerHTML = `$${formatNumber(necessaryCogs)}`;
document.getElementById("ayoda-profit").innerHTML = `$${formatNumber(revenue - necessaryCogs)}`;
}
67 changes: 46 additions & 21 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<head>
<title>Ayoda</title>
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="./assets/img/logo/png/Logo.png">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
</head>
Expand Down Expand Up @@ -88,37 +89,59 @@ <h2 class="title has-text-orange">How much are we talking?</h2>
<div class="is-flex is-flex-direction-row gap-50">
<div class="box min-width-500 is-flex is-flex-direction-column p-25 pr-50 pl-50 gap-25">
<h1 class="title is-size-4 has-text-orange m-0">Your Info</h1>
<p>Coming soon</p>
<!-- <div>
<h2 class="subtitle m-0 mb-2">Value 1</h2>
<input class="input" type="text" placeholder="value 1">
<div>
<h2 class="subtitle m-0 mb-4">Last Month's Revenue</h2>
<div class="field">
<p class="control has-icons-left has-icons-right">
<input id="revenue-input" class="input" type="text" placeholder="Revenue">
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign"></i>
</span>
</p>
</div>
</div>
<div>
<h2 class="subtitle m-0 mb-2">Value 2</h2>
<input class="input" type="text" placeholder="value 2">
<h2 class="subtitle m-0 mb-4">Last Month's Cost of Goods Sold</h2>
<div class="field">
<p class="control has-icons-left has-icons-right">
<input id="cogs-input" class="input" type="text" placeholder="COGS">
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign"></i>
</span>
</p>
</div>
</div>
<div>
<h2 class="subtitle m-0 mb-2">Value 3</h2>
<input class="input" type="text" placeholder="value 3">
<h2 class="subtitle m-0 mb-2">Last Month's Shrinkage Rate</h2>
<input id="shrinkage-input" class="input" type="text" placeholder="Ex: 10%">
</div>
<button class="button">Calculate</button> -->
<button class="button" onclick="calculateSavings()">Calculate</button>
</div>

<div class="box min-width-500 is-flex is-flex-direction-column p-25 pr-50 pl-50 gap-25">
<h1 class="title is-size-4 has-text-orange m-0">Estimate Savings</h1>
<p>Coming soon</p>
<!-- <div>
<h2 class="subtitle m-0 mb-2">Savings metric #1</h2>
<label>431,000</label>
<div class="is-flex is-flex-direction-row gap-50 is-flex-1">
<div class="is-flex is-flex-direction-column gap-15">
<h2 class="title m-0">Your Current State</h2>
<h2>Current COGS</h2>
<label id="current-cogs"></label>
<h2>Current Profit</h2>
<label id="current-profit"></label>
</div>
<div class="is-flex is-flex-direction-column gap-15">
<h2 class="title has-text-orange m-0">The Ayoda Impact</h2>
<h2>Current COGS</h2>
<label id="ayoda-cogs"></label>
<h2>Current Profit</h2>
<label id="ayoda-profit"></label>
</div>
</div>
<div>
<h2 class="subtitle m-0 mb-2">Savings metric #2</h2>
<label>43%</label>
<div class="is-flex is-flex-direction-column is-align-items-center gap-15">
<h2 class="subtitle m-0 mb-2">Total Annual Savings</h2>
<label id="savings-output" class="title"></label>
<br>
<label id="savings-percentage-output" class="title"></label>
</div>
<div>
<h2 class="subtitle m-0 mb-2">Savings metric #3</h2>
<label>1/4</label>
</div> -->
<!-- <div id="chart"></div> -->
</div>
</div>
</section>
Expand All @@ -129,6 +152,8 @@ <h2 class="subtitle has-text-white m-0">&copy; Ayoda 2023</h2>
<input class="input width-250 is-align-self-flex-start" type="text" placeholder="email">
<button class="button is-white">Contact us</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="./assets/js/index.js"></script>
</footer>
</div>
</body>

0 comments on commit 2c358bf

Please sign in to comment.