JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<select id="gender"></select>
<div>
	<label class="dedi">
		
	</label>
</div>

<div>
	<span>Tahun</span>
	<select id="year"></select>
</div>

<div style="border:1px solid red;padding:8px 16px;width:350px;margin:16px 0">
<div style="font-size:12px">Auto Tanggal lahir</div>
<input type="text" class="inputAngka" maxlength="2" style="border: 1px solid white;border-bottom: 1px solid;width:100px;"> -
<input type="text" class="inputAngka" maxlength="2" style="border: 1px solid white;border-bottom: 1px solid;width:100px"> -
<input type="text" class="inputAngka" maxlength="4" style="border: 1px solid white;border-bottom: 1px solid;width:100px">
</div>

<script>
// Create an object:


</script>

</body>
</html>

CSS

.inputAngka:focus{border-bottom:1px solid #f97432 !important;outline:none;outline-offset:initial}

JavaScript

var cars = {
  "adult": {
    "salutation": {
      "title": "Titel",
      "type": "list",
      "data": [
        {
          "id": 1,
          "text": "Tuan"
        },
        {
          "id": 2,
          "text": "Nyonya"
        },
        {
          "id": 3,
          "text": "Nona"
        }
      ],
      "maxlength": 1,
      "minlength": 1
    },
    "fullname": {
      "title": "Nama Penumpang",
      "type": "string",
      "data": [],
      "maxlength": 30,
      "minlength": 2
    },
    "passportNo": {
      "title": "Nomor Paspor",
      "type": "string",
      "data": [],
      "maxlength": 10,
      "minlength": 10
    },
    "passportIssuing": {
      "title": "Negara Penerbit Paspor",
      "type": "list",
      "data": [
        {
          "id": "ID",
          "text": "Indonesia"
        },
        {
          "id": "MY",
          "text": "Malaysia"
        }
      ],
      "maxlength": 2,
      "minlength": 2
    },
    "nationality": {
      "title": "Kewarganegaraan",
      "type": "list",
      "data": [
        {
          "id": "ID",
          "text": "Indonesia"
        },
        {
          "id": "MY",
          "text": "Malaysia"
        }
      ],
      "maxlength": 2,
      "minlength": 2
    },
    "passportExpires": {
      "title": "Masa Berlaku Passpor",
      "type": "date",
      "data": [
        {
          "startDate": "1990-11-20",
          "endDate": "2005-11-20"
        }
      ],
      "maxlength": 10,
      "minlength": 10
    }
  },
  "child": {
    "salutation": {
      "title": "Titel",
      "type": "list",
      "data": [
        {
          "key": 1,
          "value": "Tuan"
        },
        {
          "key": 2,
          "value": "Nona"
        }
      ],
      "maxlength": 1,
      "minlength": 1
    },
    "fullname": {
      "title": "Nama Penumpang",
      "type": "string",
      "data": [],
      "maxlength": 30,
      "minlength": 2
    },
    "birthDate": {
      "title": "Tanggal Lahir",
  ...