Kaba taslak ilk hesaplamalari yaparken kullandigim bir html kodlama var. Faydasi olacagini dusunuyorum ihtiyaci olan arkadaslara. Paylasmak istedim.
Kod su ise yariyor. Hangi aylarda calisacaksiniz o aylari seciyorsunuz, o aylarda pazar haric kac gun var onlarin toplam sayisini veriyor. Gunde kac saat calisacaksiniz onu giriyorsunzu ve saatlik uceri giriyorsunuz. Sliderdan da vergi icin kullanabileceginiz degerler mevcut, %25,%0,50, %75 gibi.
Sonrasinda bunlarin carpimini veriyor deger.
Ornek resimde mart ve haziran ayinda calisirsaniz, pazarlar haric calisacaginiz 51 gun var.Gunde 10 saat calisirsaniz ve saatlik 60$ ucretlendirirseniz, %25 vergi sonrasi kalacak miktar gozukuyor. (direk %75 ile carpiyor)
Az cok faydasi olacaktir kullanacaklara.
kodu burda da deneyebilirsiniz: https://jsfiddle.net/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fiyat Hesaplama</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
label {
display: block;
margin: 10px 0 5px;
color: #555;
}
.checkbox-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.checkbox-group label {
flex-basis: 48%;
padding: 5px;
margin-bottom: 10px;
background-color: #e9ecef;
border-radius: 4px;
cursor: pointer;
}
input[type="number"], input[type="range"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
.slider-label, .result {
font-weight: bold;
color: #333;
}
.result {
margin-top: 20px;
text-align: center;
font-size: 1.5em;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
border: none;
border-radius: 4px;
color: white;
font-size: 1em;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
span {
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Fiyat Hesaplama</h1>
<label>Ay Seçimi:</label><br>
<div id="month-checkboxes" class="checkbox-group">
<label><input type="checkbox" value="0" onchange="updateDays()"> Ocak</label>
<label><input type="checkbox" value="1" onchange="updateDays()"> Şubat</label>
<label><input type="checkbox" value="2" onchange="updateDays()"> Mart</label>
<label><input type="checkbox" value="3" onchange="updateDays()"> Nisan</label>
<label><input type="checkbox" value="4" onchange="updateDays()"> Mayıs</label>
<label><input type="checkbox" value="5" onchange="updateDays()"> Haziran</label>
<label><input type="checkbox" value="6" onchange="updateDays()"> Temmuz</label>
<label><input type="checkbox" value="7" onchange="updateDays()"> Ağustos</label>
<label><input type="checkbox" value="8" onchange="updateDays()"> Eylül</label>
<label><input type="checkbox" value="9" onchange="updateDays()"> Ekim</label>
<label><input type="checkbox" value="10" onchange="updateDays()"> Kasım</label>
<label><input type="checkbox" value="11" onchange="updateDays()"> Aralık</label>
</div>
<div>
<span>Seçilen Ayların Pazar Hariç Toplam Gün Sayısı: </span>
<span id="days-count">0</span>
</div>
<label for="input2">Günlük Çalışma Saati:</label>
<input type="number" id="input2" placeholder="Çalışma saatini girin" step="any">
<label for="input3">Saatlik Ücret ($):</label>
<input type="number" id="input3" placeholder="Saatlik ücreti girin" step="any">
<div class="slider-label">Çarpan Seçin:</div>
<input type="range" id="slider" min="0.25" max="1" step="0.25" value="1" list="tickmarks">
<datalist id="tickmarks">
<option value="0.25" label="0.25"></option>
<option value="0.50" label="0.50"></option>
<option value="0.75" label="0.75"></option>
<option value="1" label="1"></option>
</datalist>
<span id="slider-value">1</span>
<div class="result" id="result">Sonuç: </div>
<button onclick="calculate()">Hesapla</button>
</div>
<script>
const slider = document.getElementById("slider");
const sliderValue = document.getElementById("slider-value");
slider.oninput = function() {
sliderValue.textContent = this.value;
}
const daysCountElement = document.getElementById("days-count");
function updateDays() {
const checkboxes = document.querySelectorAll("#month-checkboxes input[type='checkbox']:checked");
let totalDays = 0;
checkboxes.forEach(checkbox => {
const month = parseInt(checkbox.value);
totalDays += getWeekdaysWithoutSundays(2025, month);
});
daysCountElement.textContent = totalDays;
}
function getWeekdaysWithoutSundays(year, month) {
const date = new Date(year, month, 1);
let totalDays = 0;
while (date.getMonth() === month) {
const dayOfWeek = date.getDay(); // 0 = Sunday, 6 = Saturday
if (dayOfWeek !== 0) { // Skip Sundays
totalDays++;
}
date.setDate(date.getDate() + 1);
}
return totalDays;
}
function calculate() {
const daysCount = parseFloat(daysCountElement.textContent);
const workingHours = parseFloat(document.getElementById("input2").value);
const hourlyRate = parseFloat(document.getElementById("input3").value);
const multiplier = parseFloat(slider.value);
if (!isNaN(daysCount) && !isNaN(workingHours) && !isNaN(hourlyRate)) {
const result = daysCount * workingHours * hourlyRate * multiplier;
document.getElementById("result").textContent = "Sonuç: " + result.toFixed(2) + " $";
} else {
document.getElementById("result").textContent = "Lütfen geçerli değerler girin.";
}
}
// Sayfa ilk yüklendiğinde gün sayısını hesaplamak için
window.onload = updateDays;
</script>
</body>
</html> 
