<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Basic Javascript Arrays</title>
<script src="04_BasicJavascriptArrays.js"></script>
<style>
/* HTML elemanlarının class veya id'leri üzerinden elemanlara ulaşma */
/* 1. yöntem: */
/*#oyunListesiId {
border-style: groove;
border-width: 7px;
border-radius: 10px;
font-family: 'Comic Sans MS';
font-size: 14px;
padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
}*/
/* 2. yöntem: */
.oyunListesiClass {
border-style: groove;
border-width: 7px;
border-radius: 10px;
font-family: 'Comic Sans MS';
font-size: 14px;
/* 1. yöntem: */
/* padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;*/
/* 2. yöntem: */
padding: 40px 30px 20px 10px; /* top, right, bottom, left */
}
.td1 {
width: 3%;
}
.td2 {
width: 50%;
}
/* 1. yöntem: */
/*.tbOyunAdiClass {
width: 85%;
}*/
/* 2. yöntem: */
.td2 input {
width: 85%;
}
.td3 {
text-align: right;
}
#pSonuc {
color: #ff0000; /* kırmızı renk */
}
/* HTML tag'leri üzerinden elemanlara ulaşma */
table {
width: 30%;
}
td {
padding-bottom: 10px;
}
</style>
</head>
<body onload="oyunlariListele();">
<table>
<tr>
<td colspan="3">
<div id="oyunListesiId" class="oyunListesiClass"></div>
</td>
</tr>
<tr>
<td class="td1">
<b>Adı:</b>
</td>
<td class="td2">
<input type="text" placeholder="Oyun adı giriniz..." class="tbOyunAdiClass" name="tbOyunAdiName" id="tbOyunAdiId" />
</td>
<td class="td3">
<input type="checkbox" id="cbEsitMi" /> Adı Eşit Olanlar
<button onclick="oyunAra();">Oyun Ara</button>
</td>
</tr>
<tr>
<td colspan="3">
<p id="pSonuc" class="oyunListesiClass"></p>
</td>
</tr>
</table>
</body>
</html>