index.html dosyası:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LGS Score Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>LGS puan hesaplama</h1>
<form id="calculator">
<div class="form-group">
<label for="math">Matematik</label>
<input type="number" id="math-correct" name="math-correct" min="0" max="20" placeholder="Doğru Sayısı">
<input type="number" id="math-incorrect" name="math-incorrect" min="0" max="20" placeholder="Yanlış Sayısı">
</div>
<div class="form-group">
<label for="turkish">Türkçe</label>
<input type="number" id="turkish-correct" name="turkish-correct" min="0" max="20" placeholder="Doğru Sayısı">
<input type="number" id="turkish-incorrect" name="turkish-incorrect" min="0" max="20" placeholder="Yanlış Sayısı">
</div>
<div class="form-group">
<label for="chemistry">Kimya</label>
<input type="number" id="chemistry-correct" name="chemistry-correct" min="0" max="20" placeholder="Doğru Sayısı">
<input type="number" id="chemistry-incorrect" name="chemistry-incorrect" min="0" max="20" placeholder="Yanlış Sayısı">
</div>
<div class="form-group">
<label for="physics">Fizik</label>
<input type="number" id="physics-correct" name="physics-correct" min="0" max="20" placeholder="Doğru Sayısı">
<input type="number" id="physics-incorrect" name="physics-incorrect" min="0" max="20" placeholder="Yanlış Sayısı">
</div>
<div class="form-group">
<label for="biology">Biyoloji</label>
<input type="number" id="biology-correct" name="biology-correct" min="0" max="20" placeholder="Doğru Sayısı">
<input type="number" id="biology-incorrect" name="biology-incorrect" min="0" max="20" placeholder="Yanlış Sayısı">
</div>
<div class="form-group">
<label for="history">Tarih</label>
<input type="number" id="history-correct" name="history-correct" min="0" max="20" placeholder="Doğru Sayısı">
<input type="number" id="history-incorrect" name="history-incorrect" min="0" max="20" placeholder="Yanlış Sayısı">
</div>
<div class="form-group">
<label for="geography">Coğrafya</label>
<input type="number" id="geography-correct" name="geography-correct" min="0" max="20" placeholder="Doğru Sayısı">
<input type="number" id="geography-incorrect" name="geography-incorrect" min="0" max="20" placeholder="Yanlış Sayısı">
</div>
<button type="submit">Hesapla</button>
</form>
<div id="result" class="result">
<p>Net Puan: <span id="net-score">0</span></p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>app.js dosyası kodu:const calculator = document.getElementById("calculator");
const result = document.getElementById("result");
const correctInputs = document.querySelectorAll("input[id$='-correct']");
const incorrectInputs = document.querySelectorAll("input[id$='-incorrect']");
const calculateScore = (correct, incorrect) => {
const points = 100;
const maxQuestions = 20;
const correctBonus = 10;
const correctScore = Math.min(correct, maxQuestions) * points;
const incorrectScore = Math.min(incorrect, maxQuestions) * points / 2;
const netScore = correctScore - incorrectScore + correctBonus * correct;
return netScore;
};
const updateResult = () => {
const correctValues = Array.from(correctInputs).map(input => parseInt(input.value, 10));
const incorrectValues = Array.from(incorrectInputs).map(input => parseInt(input.value, 10));
const totalCorrect = correctValues.reduce((acc, curr) => acc + curr, 0);
const totalIncorrect = incorrectValues.reduce((acc, curr) => acc + curr, 0);
const netScore = calculateScore(totalCorrect, totalIncorrect);
result.querySelector("#net-score").textContent = netScore;
};
correctInputs.forEach(input => input.addEventListener("input", updateResult));
incorrectInputs.forEach(input => input.addEventListener("input", updateResult));styles.css dosyası:body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #1a1a1a; /* Arka plan rengi */
color: #fff; /* Metin rengi */
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background-color: #2a2a2a; /* Container arka plan rengi */
border-radius: 20px; /* Kenarlık yuvarlatma */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Gölge */
}
h1 {
color: #4CAF50; /* Başlık rengi */
}
.form-group {
margin-bottom: 2rem;
display: flex;
align-items: center; /* Dikey hizalama */
}
label {
display: block;
margin-right: 1rem;
color: #666; /* Label rengi */
}
.form-group input[type="number"] {
flex: 1; /* Input alanlarını esnek hale getirerek diğer alanlara göre genişliklerini ayarlar */
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f5f5f5; /* Input arka plan rengi */
color: #333; /* Input metin rengi */
margin-right: 1rem;
margin-bottom: 1rem;
}
button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease; /* Arka plan rengi geçiş efekti */
}
button[type="submit"]:hover {
background-color: #45a049; /* Hover efekti */
}
.result {
margin-top: 2rem;
border: 2px solid #4CAF50;
padding: 2rem;
border-radius: 10px;
background-color: #f5f5f5; /* Sonuç bölgesi arka plan rengi */
}
.result p {
margin: 0;
color: #666; /* Sonuç metni rengi */
}
.result #net-score {
font-size: 2rem;
font-weight: bold;
color: #4CAF50; /* Net puan rengi */
} 