usp matematika

[lidiazena02]

<title>USP Matematika</title> <style> :root { --primary: #272728; --bg: #a95173; --text: #1e293b; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Quicksand', sans-serif; } body { background: var(--bg); padding: 20px; color: var(--text); } .main-container { max-width: 450px; margin: 0 auto; }

    .header-box { background: white; padding: 20px; border-radius: 20px; text-align: center; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .header-box h1 { font-size: 18px; color: var(--primary); }

    .card { background: white; padding: 25px; border-radius: 24px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); margin-bottom: 20px; }
    h2 { font-size: 18px; margin-bottom: 15px; color: var(--primary); display: flex; align-items: center; gap: 10px; border-left: 4px solid var(--primary); padding-left: 10px; }
    p { font-size: 14px; line-height: 1.6; color: #475569; }

    .input-group { margin-bottom: 15px; }
    label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: #334155; }
    input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ddd; outline: none; transition: 0.3s; font-size: 15px; }
    input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
    
    button { width: 100%; padding: 15px; border-radius: 12px; border: none; background: #181818; color: white; font-weight: 700; cursor: pointer; transition: 0.3s; margin-top: 10px; }
    button:hover { background: #090909; transform: translateY(-2px); }

    .result-box { display: none; margin-top: 20px; border-top: 2px dashed #cbd5e1; padding-top: 20px; }
    .step-by-step { background: #1e293b; color: #38bdf8; padding: 15px; border-radius: 16px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; }
    .final-answer { background: #ecfdf5; color: #090909; padding: 15px; border-radius: 12px; margin-top: 15px; font-weight: 700; text-align: center; border: 1px solid #bbf7d0; font-size: 18px; }
</style>

Matematika - Anuitas

by Kelompok 3

<div class="card">
    <h2>🚀 Studi Kasus</h2>
    <p>
        Seorang mahasiswa ingin membeli sebuah laptop gaming seharga <b>Rp15.000.000</b>. 
        Ia mengambil skema kredit anuitas tahunan dengan bunga <b>12% per tahun</b> selama <b>3 tahun</b>.
    </p>
</div>

<div class="card">
    <h2>🧮 Hitung Penyelesaian</h2>
    
    <div class="input-group">
        <label>Modal Pinjaman (M)</label>
        <input type="number" id="M" value="15000000">
    </div>
    <div class="input-group">
        <label>Bunga per Tahun (%)</label>
        <input type="number" id="bunga_val" value="12">
    </div>
    <div class="input-group">
        <label>Tenor (Tahun)</label>
        <input type="number" id="n_val" value="3">
    </div>

    <button onclick="hitungPenyelesaian()">Hitung Sekarang</button>

    <div id="hasilArea" class="result-box">
        <label style="color: var(--primary);">Langkah-Langkah:</label>
        <div class="step-by-step" id="langkah"></div>
        <div class="final-answer" id="total"></div>
    </div>
</div>

<script> function hitungPenyelesaian() { let M = parseFloat(document.getElementById('M').value); let b_persen = parseFloat(document.getElementById('bunga_val').value); let n = parseInt(document.getElementById('n_val').value); if(!M || !b_persen || !n) return alert("Mohon lengkapi data!"); // Konversi bunga persen ke desimal (b) let b = b_persen / 100; // Rumus Anuitas: A = M . b [ (1+b)^n / ((1+b)^n - 1) ] let pow = Math.pow((1 + b), n); let A = M * b * (pow / (pow - 1)); // Menampilkan Langkah-langkah sesuai rumus di gambar document.getElementById('langkah').innerHTML = ` 1. b = ${b_persen}% = ${b}
2. (1 + b)^n = (1 + ${b})^${n}
   = ${pow.toFixed(4)}
3. A = ${M.toLocaleString()} * ${b} * [ ${pow.toFixed(4)} / (${pow.toFixed(4)} - 1) ]
4. A = ${(M * b).toLocaleString()} * [ ${pow.toFixed(4)} / ${(pow.toFixed(4) - 1).toFixed(4)} ] `; document.getElementById('total').innerHTML = ` Anuitas per Tahun (A):
Rp ${A.toLocaleString('id-ID', {maximumFractionDigits: 0})} `; document.getElementById('hasilArea').style.display = 'block'; } </script>