membuat sebuah item berurutan otomatis angka dan huruf
Untuk membuat angka 1 - 10 berurutan ke bawah dan huruf A sampai Z berurutan ke bawah secara otomatis, Anda dapat menggunakan HTML, CSS, dan sedikit JavaScript. Berikut adalah contoh kode HTML, CSS, dan JavaScript untuk mencapai ini:
HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Angka dan Huruf</title>
</head>
<body>
<div class="container">
<div class="row" id="numbers">
<!-- Angka 1 - 10 akan ditambahkan di sini secara otomatis -->
</div>
<div class="row" id="letters">
<!-- Huruf A - Z akan ditambahkan di sini secara otomatis -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
css
/* Tambahan dari kode CSS sebelumnya */
/* Tambahkan CSS sesuai kebutuhan */
JavaScript (script.js):
javascript
// Fungsi untuk membuat daftar angka dari 1 hingga 10
function generateNumbers() {
const numbersContainer = document.getElementById("numbers");
for (let i = 1; i <= 10; i++) {
const numberElement = document.createElement("div");
numberElement.classList.add("number");
numberElement.textContent = i;
numbersContainer.appendChild(numberElement);
}
}
// Fungsi untuk membuat daftar huruf dari A hingga Z
function generateLetters() {
const lettersContainer = document.getElementById("letters");
for (let i = 65; i <= 90; i++) {
const letterElement = document.createElement("div");
letterElement.classList.add("number"); // Gunakan kelas yang sama dengan angka untuk styling yang sama
letterElement.textContent = String.fromCharCode(i);
lettersContainer.appendChild(letterElement);
}
}
// Panggil fungsi-fungsi untuk mengisi angka dan huruf
generateNumbers();
generateLetters();
Dalam kode di atas, kami membuat dua fungsi `generateNumbers` dan `generateLetters` untuk menghasilkan angka dan huruf. Angka dari 1 hingga 10 akan ditambahkan ke dalam elemen dengan ID "numbers", dan huruf A sampai Z akan ditambahkan ke dalam elemen dengan ID "letters" secara otomatis saat halaman dimuat. Anda dapat menyesuaikan gaya CSS sesuai kebutuhan Anda.