Skip to content

Commit

Permalink
add history and cup calculation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Asyasyarif
Asyasyarif committed Jun 10, 2024
1 parent ef724d8 commit ab0aa3c
Showing 1 changed file with 184 additions and 41 deletions.
225 changes: 184 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,190 @@
<!DOCTYPE html>
<html lang="id">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧋 Kalkulator Takaran Minuman </title>
<title>Kalkulator Takaran Minuman</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
@keyframes rotateLeftRight {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}

<style>
@keyframes rotateLeftRight {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}

.rotate-animation {
display: inline-block;
animation: rotateLeftRight 2s infinite;
}
</style>
.rotate-animation {
display: inline-block;
animation: rotateLeftRight 2s infinite;
}
</style>
</head>
<body>
<div class="container mt-5 pa-5">
<div class="container mt-5">
<h1 class="mb-4"><span class="emoji">🧋</span> Kalkulator Takaran</h1>
<form id="calculator-form">
<div id="ingredients">

</div>
<button type="button" class="btn btn-success" id="addIngredient">Tambah Bahan</button>
<div class="form-group mt-4">
<label for="totalVolume">Volume Total Resep (ml)</label>
<input min="0" type="number" class="form-control" id="totalVolume" placeholder="Masukkan volume total resep" value="0">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="calculator-tab" data-toggle="tab" href="#calculator" role="tab" aria-controls="calculator" aria-selected="true">Kalkulator</a>
</li>
<li class="nav-item">
<a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">Histori</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="calculator" role="tabpanel" aria-labelledby="calculator-tab">
<div class="card">
<div class="card-body">
<form id="calculator-form" class="mt-4">
<div id="ingredients"></div>
<button type="button" class="btn btn-success" id="addIngredient">Tambah Bahan</button>
<div class="form-group mt-4">
<label for="totalVolume">Volume Total Resep (ml)</label>
<input type="number" class="form-control" id="totalVolume" placeholder="Masukkan volume total resep" readonly>
</div>
<div class="form-group">
<label for="desiredVolume">Volume yang Diinginkan (ml)</label>
<input type="number" class="form-control" id="desiredVolume" placeholder="Masukkan volume yang diinginkan" min="0">
</div>
<div class="form-group">
<label for="numberOfCups">Total Jumlah Gelas/Cup</label>
<input type="number" class="form-control" id="numberOfCups" placeholder="Masukkan jumlah cup" min="1" value="1">
</div>
<button type="button" class="btn btn-primary" id="calculateButton">Hitung</button>
</form>

<h2 class="mt-4">Hasil</h2>
<ul id="resultList" class="list-group"></ul>
</div>
</div>
</div>
<div class="form-group">
<label for="desiredVolume">Volume yang Diinginkan (ml)</label>
<input min="0" type="number" class="form-control" id="desiredVolume" placeholder="Masukkan volume yang diinginkan">
<div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
<div class="card">
<div class="card-body">
<h2 class="mt-4">Histori</h2>
<ul id="historyList" class="list-group"></ul>
</div>
</div>

</div>
<button type="button" class="btn btn-primary" id="calculateButton">Hitung</button>
</form>
<hr>
<h2 class="mt-4">Hasil</h2>
<ul id="resultList" class="list-group">
</ul>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('h1 .emoji').addClass('rotate-animation');

function calculateTotalVolume() {
var totalVolume = 0;
$('.ingredient-amount').each(function() {
var amount = parseFloat($(this).val());
if (!isNaN(amount)) {
totalVolume += amount;
}
});
$('#totalVolume').val(totalVolume);
}

function updateResults() {
var totalVolume = parseFloat($('#totalVolume').val());
var desiredVolume = parseFloat($('#desiredVolume').val());
var numberOfCups = parseInt($('#numberOfCups').val());

if (desiredVolume > 0) {
var ratio = desiredVolume / totalVolume;
if (desiredVolume > 0 && totalVolume > 0 && numberOfCups > 0) {
var totalDesiredVolume = desiredVolume * numberOfCups;
var ratio = totalDesiredVolume / totalVolume;
$('#resultList').empty();

var results = [];
$('.ingredient').each(function() {
var name = $(this).find('.ingredient-name').val();
var amount = parseFloat($(this).find('.ingredient-amount').val());
var result = (amount * ratio).toFixed(2);

$('#resultList').append('<li class="list-group-item">' + name + ': ' + result + ' ml/gr</li>');
results.push({ name: name, amount: result });
});

saveToHistory({
ingredients: getIngredients(),
desiredVolume: desiredVolume,
numberOfCups: numberOfCups,
results: results
});
} else {
alert('Masukkan volume yang diinginkan!');
alert('Masukkan volume yang diinginkan dan jumlah cup yang valid!');
}
}

function saveToHistory(data) {
var history = JSON.parse(localStorage.getItem('history')) || [];
history.push(data);
localStorage.setItem('history', JSON.stringify(history));
displayHistory();
}

function displayHistory() {
var history = JSON.parse(localStorage.getItem('history')) || [];
$('#historyList').empty();
history.forEach(function(entry, index) {
var historyItem = `<li class="list-group-item">
<strong>Resep ${index + 1}</strong><br>
Bahan: ${entry.ingredients.map(ing => `${ing.name} (${ing.amount} ml/gr)`).join(', ')}<br>
Volume yang Diinginkan: ${entry.desiredVolume} ml<br>
Jumlah Cup: ${entry.numberOfCups}<br>
Hasil: ${entry.results.map(res => `${res.name}: ${res.amount} ml/gr`).join(', ')}<br>
<button type="button" class="btn btn-primary edit-history btn-sm" data-index="${index}">Ubah</button>
<button type="button" class="btn btn-danger delete-history btn-sm" data-index="${index}">Hapus</button>
</li>`;
$('#historyList').append(historyItem);
});
}

function getIngredients() {
var ingredients = [];
$('.ingredient').each(function() {
var name = $(this).find('.ingredient-name').val();
var amount = parseFloat($(this).find('.ingredient-amount').val());
if (name && !isNaN(amount)) {
ingredients.push({ name: name, amount: amount });
}
});
return ingredients;
}

function editHistory(index) {
var history = JSON.parse(localStorage.getItem('history')) || [];
var entry = history[index];

// Set values from history entry to form fields
$('#desiredVolume').val(entry.desiredVolume);
$('#numberOfCups').val(entry.numberOfCups);
$('#ingredients').empty();
entry.ingredients.forEach(function(ing) {
var ingredientHtml = `
<div class="form-group ingredient">
<label>Nama Bahan</label>
<input type="text" class="form-control ingredient-name" value="${ing.name}">
<label>Takaran (ml atau gr)</label>
<input type="number" class="form-control ingredient-amount" min="0" value="${ing.amount}">
<button type="button" class="btn btn-danger remove-ingredient mt-2">Hapus</button>
</div>
`;
$('#ingredients').append(ingredientHtml);
});

// Scroll to the top of calculator tab
$('a[href="#calculator"]').tab('show');
window.scrollTo(0, 0);
}

function deleteHistory(index) {
var history = JSON.parse(localStorage.getItem('history')) || [];
history.splice(index, 1);
localStorage.setItem('history', JSON.stringify(history));
displayHistory();
}

$('#calculateButton').click(function() {
updateResults();
});
Expand All @@ -78,19 +193,47 @@ <h2 class="mt-4">Hasil</h2>
var newIngredient = `
<div class="form-group ingredient">
<label>Nama Bahan</label>
<input type="text" class="form-control ingredient-name" value="Nama bahan">
<input type="text" class="form-control ingredient-name">
<label>Takaran (ml atau gr)</label>
<input type="number" class="form-control ingredient-amount" value="0">
<input type="number" class="form-control ingredient-amount" min="0">
<button type="button" class="btn btn-danger remove-ingredient mt-2">Hapus</button>
</div>
`;
$('#ingredients').append(newIngredient);
calculateTotalVolume();
});

$(document).on('click', '.remove-ingredient', function() {
$(this).closest('.ingredient').remove();
calculateTotalVolume();
});

$(document).on('input', '.ingredient-amount', function() {
calculateTotalVolume();
});

// Edit history event listener
$(document).on('click', '.edit-history', function() {
var index = $(this).data('index');
editHistory(index);
});

// Delete history event listener
$(document).on('click', '.delete-history', function() {
var index = $(this).data('index');
deleteHistory(index);
});

// Menambahkan kelas rotate-animation ke emoji
$('h1 .emoji').addClass('rotate-animation');

// Hitung volume total saat halaman pertama kali dimuat
calculateTotalVolume();

// Tampilkan histori saat halaman pertama kali dimuat
displayHistory();
});
</script>
</body>
</html>

0 comments on commit ab0aa3c

Please sign in to comment.