Scribd
Unggah
2 tayangan6 halaman

Coding HTML Konversi Numero

Dokumen ini adalah halaman HTML yang berfungsi sebagai konverter angka dari berbagai basis (desimal, biner, oktal, dan heksadesimal). Terdapat input untuk memasukkan angka dan memilih tipe basis, serta tombol untuk menghitung dan mereset. Hasil konversi ditampilkan di bawah input setelah proses konversi berhasil.

Diunggah oleh

rizkisoares10
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
2 tayangan6 halaman

Coding HTML Konversi Numero

Dokumen ini adalah halaman HTML yang berfungsi sebagai konverter angka dari berbagai basis (desimal, biner, oktal, dan heksadesimal). Terdapat input untuk memasukkan angka dan memilih tipe basis, serta tombol untuk menghitung dan mereset. Hasil konversi ditampilkan di bawah input setelah proses konversi berhasil.

Diunggah oleh

rizkisoares10
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

<!

DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>a</title>
<style>
:root {
--primary: #e80c0c;
--primary-hover: #564c4c;
--bg: #f1f5f9;
--card: #ffffff;
--text: #1e293b;
--error: #ef4444;
}

body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: var(--bg);
color: var(--text);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}

.converter-box {
background: var(--card);
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 450px;
}

h2 {
text-align: center;
margin-top: 0;
color: var(--primary);
}

.form-group {
margin-bottom: 1rem;
}

label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
}

input, select {
width: 100%;
padding: 0.75rem;
border: 2px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 1rem;
box-sizing: border-box;
transition: border-color 0.2s;
}

input:focus, select:focus {
outline: none;
border-color: var(--primary);
}

.btn-group {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 10px;
margin-top: 1.5rem;
}

button {
padding: 0.75rem;
border: none;
border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}

.btn-convert {
background-color: var(--primary);
color: white;
}
.btn-convert:hover {
background-color: var(--primary-hover);
}

.btn-reset {
background-color: #e2e8f0;
color: #475569;
}

.btn-reset:hover {
background-color: #cbd5e1;
}

#error-msg {
color: var(--error);
font-size: 0.85rem;
margin-top: 0.5rem;
display: none;
}

.result-container {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 2px solid #f1f5f9;
}

.result-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8fafc;
margin-bottom: 0.5rem;
border-radius: 0.4rem;
}

.result-label {
font-size: 0.8rem;
text-transform: uppercase;
color: #64748b;
font-weight: 700;
}

.result-value {
font-family: 'Courier New', Courier, monospace;
font-weight: 700;
word-break: break-all;
text-align: right;
padding-left: 10px;
}
</style>
</head>
<body>

<div class="converter-box">
<h2>KONVERSA NUMERO</h2>

<div class="form-group">
<label for="userInput">HATAMA NUMERO</label>
<input type="text" id="userInput" placeholder="Exemplo: 1010 ou
FF" autocomplete="off">
<div id="error-msg">Numero neebe hatama laloos!</div>
</div>

<div class="form-group">
<label for="baseSelect">TIPU NUMERO</label>
<select id="baseSelect">
<option value="10">Desimal (Base 10)</option>
<option value="2">Biner (Base 2)</option>
<option value="8">Oktal (Base 8)</option>
<option value="16">Hexadesimal (Base 16)</option>
</select>
</div>

<div class="btn-group">
<button class="btn-convert"
onclick="processConversion()">calcula</button>
<button class="btn-reset" onclick="resetAll()">Reset</button>
</div>

<div class="result-container" id="results" style="display: none;">


<div class="result-item">
<span class="result-label">Desimal</span>
<span class="result-value" id="resDec">-</span>
</div>
<div class="result-item">
<span class="result-label">Biner</span>
<span class="result-value" id="resBin">-</span>
</div>
<div class="result-item">
<span class="result-label">Oktal</span>
<span class="result-value" id="resOct">-</span>
</div>
<div class="result-item">
<span class="result-label">Hexa</span>
<span class="result-value" id="resHex">-</span>
</div>
</div>
</div>

<script>
function processConversion() {
const inputStr =
[Link]('userInput').[Link]();
const base =
parseInt([Link]('baseSelect').value);
const errorMsg = [Link]('error-msg');
const resultsDiv = [Link]('results');

// Regex untuk validasi input berdasarkan basis


const patterns = {
2: /^[01]+$/,
8: /^[0-7]+$/,
10: /^[0-9]+$/,
16: /^[0-9a-fA-F]+$/
};

// Validasi input kosong atau tidak sesuai karakter basis


if (inputStr === "" || !patterns[base].test(inputStr)) {
[Link] = 'block';
[Link] = 'none';
return;
}

[Link] = 'none';

// Konversi string input ke angka desimal (integer)


const decimalNum = parseInt(inputStr, base);

// Tampilkan semua hasil konversi


[Link]('resDec').innerText =
[Link](10);
[Link]('resBin').innerText =
[Link](2);
[Link]('resOct').innerText =
[Link](8);
[Link]('resHex').innerText =
[Link](16).toUpperCase();

[Link] = 'block';
}

function resetAll() {
[Link]('userInput').value = "";
[Link]('error-msg').[Link] = 'none';
[Link]('results').[Link] = 'none';
[Link]('baseSelect').selectedIndex = 0;
}

// Menjalankan konversi jika menekan tombol Enter pada input


[Link]('userInput').addEventListener('keypress',
function (e) {
if ([Link] === 'Enter') {
processConversion();
}
});
</script>

</body>
</html>

Anda mungkin juga menyukai