Scribd
Upload
23 views2 pages

Code 3

The document is an HTML page for an audition list of bands, featuring a table that displays band names and a video player. It includes JavaScript functionality to display a selected band's video and description when clicked. The page is styled with CSS for a clean and user-friendly layout.

Uploaded by

first.wahyumaul21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views2 pages

Code 3

The document is an HTML page for an audition list of bands, featuring a table that displays band names and a video player. It includes JavaScript functionality to display a selected band's video and description when clicked. The page is styled with CSS for a clean and user-friendly layout.

Uploaded by

first.wahyumaul21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audisi Band</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
table {
border-collapse: collapse;
margin: 20px auto;
width: 80%;
}
th {
background-color: #ff99cc;
padding: 10px;
}
th img {
width: 100px;
}
td {
padding: 10px;
width: 45%;
border: 1px solid #ccc;
background-color: white;
}
[Link]-cell {
width: 55%;
max-height: 80px;
}
ol {
margin-left: 40%;
list-style-type: upper-roman;
padding-left: 20px;
}
</style>
<script>
const bandData = {
'tulip-band': {
videoSrc: 'dina-mov.mp4',
description: 'Tulip Band'
},
'mawar-band': {
videoSrc: 'dina-mov.mp4',
description: 'Mawar Band'
},
'kaktus-band': {
videoSrc: 'dina-mov.mp4',
description: 'Kaktus Band'
}
};

function displayBand(bandName) {
const bandVideo = [Link]('bandVideo');
const videoSource = [Link]('videoSource');
const bandNameElement = [Link]('bandName');
if ([Link](bandName)) {
const data = bandData[bandName];
[Link] = [Link];
[Link] = [Link];
} else {
[Link] = '';
[Link] = '';
}

[Link]();
[Link]();
}
</script>
</head>
<body>
<table>
<thead>
<th colspan="2">
<img src="[Link]" alt="Logo">
<h1>List Audisi Band</h1>
</th>
</thead>
<tbody>
<tr>
<td>
<div style="text-align: center; font-weight: bold;">Nama Grup Band</div>
<ol type="I">
<li><a href="javascript:void(0);" onclick="displayBand('tulip-
band')">Tulip Band</a></li>
<li><a href="javascript:void(0);" onclick="displayBand('mawar-
band')">Mawar Band</a></li>
<li><a href="javascript:void(0);" onclick="displayBand('kaktus-
band')">Kaktus Band</a></li>
</ol>
</td>
<td class="video-cell">
<p id="bandName" style="font-weight: bold;"></p>
<video id="bandVideo" controls style="max-width: 100%; margin: 0 auto;
display: block;">
<source id="videoSource" src="" type="video/mp4">
Browser Anda tidak mendukung pemutar video.
</video>
</td>
</tr>
</tbody>
<tfoot>
<th colspan="2">
<p>Created by <span style="font-weight: bold;">@202143500058 - Dina
Alatas</span></p>
</th>
</tfoot>
</table>
</body>
</html>

You might also like