Cara Membuat Pencarin Job dengan Switch Case Menggunakan javascript

Karena masih gempar-gemparnya penerimaan PNS, disini saya melihat ada ide, untuk membuat sebuah pencarian Job, jadi karena sekarang CPNS harus memilih salah satu, nah disini saya akan mencoba cara membuat pencarin job dengan switch case menggunakan javascript, dimana kasusnya akan saya jelaskan pada paragraf selanjutnya.

Oke untuk kasus cara membuat pencarin job dengan switch case menggunakan javascript, disini saya akan membuat sebuah dua inputan dimana inputan yang pertama saya buat untuk memasukan nama pengunjung, dan yang kedua itu adalah untuk pencarian jobnya, jadi ketika job itu cocok pada data kita dan ada, maka akan keluar modal, tau ya moda itu ada jendela baru yang muncul tiba-tiba ketika kita click, dan disini untuk perbandingan saya menggunakan switch case.

Disini saya menggunakan bantuan dari bootstrapnya ya, supaya tampilan lebih rapi, dan tentunya moda sendiri diambil dari bootstrap. oke langsung saja kita lihat kodenya, dan jika teman-teman bingung silahkan teman-teman ikutin saja kode di bawah, untuk kode masih mudah di pahami ko teman-teman.

<!DOCTYPE html>
<html>
<head>
	<title>Cara Membuat Pencarin Job dengan Switch Case Menggunakan javascript</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
</head>
<body>
	<div class="container">
			<div class="row">
				<div class="col-md-4"></div>
				<div class="col-md-4">
				<form>
				  <div class="form-group">
				    <label for="exampleInputName">Masukan Nama</label>
				    <input type="text" class="form-control name" placeholder="Enter Name">
				  </div>
				  <div class="form-group">
				    <label for="exampleInputJob">Masukan JOB</label>
				    <input type="text" class="form-control jobstreet" placeholder="Job yg kamu cari">
				  </div>
				  <!-- <div class="form-group form-check">
				    <input type="checkbox" class="form-check-input" id="exampleCheck1">
				    <label class="form-check-label" for="exampleCheck1">Check me out</label>
				  </div> -->
				  <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Cari</button>
				  
				</form>
				<div id="demo"></div>
			</div>
			<div class="col-md-4"></div>
		</div>
	</div>
	
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
	<script type="text/javascript">
		
		var form = document.forms[0]
		form.addEventListener('submit', function(e){
			e.preventDefault()
			var inputName = document.querySelector(".name").value
			var inputJob = document.querySelector(".jobstreet").value
			var demo = document.querySelector("#demo");
			var mulai = function(job, nama)
				{
					switch(job){
						case 'guru':
						return modalguys();
						break;
						case 'pembalap':
						return modalguys();
						break;
						case 'dokter':
						return modalguys();
						break;
						case 'koki':
						return modalguys();
						break;
						default:
						return noJob(); 
					}
					function modalguys(){
						demo.innerHTML = `<!-- Modal -->
					<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
					  <div class="modal-dialog" role="document">
					    <div class="modal-content">
					      <div class="modal-header">
					        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					          <span aria-hidden="true">&times;</span>
					        </button>
					      </div>
					      <div class="modal-body">
					        ${nama}, adalah seorang ${job}
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					        <button type="button" class="btn btn-primary">Save changes</button>
					      </div>
					    </div>
					  </div>
					</div>`
					}
					function noJob(){
						demo.innerHTML = `<!-- Modal -->
					<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
					  <div class="modal-dialog" role="document">
					    <div class="modal-content">
					      <div class="modal-header">
					        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
					        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					          <span aria-hidden="true">&times;</span>
					        </button>
					      </div>
					      <div class="modal-body">
					        Mohon Maaf Pak/ibu ${nama}, JOB "${job}" Tidak ada dalam daftar kami
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					        <button type="button" class="btn btn-primary">Save changes</button>
					      </div>
					    </div>
					  </div>
					</div>`
					}
				}				
			console.log(mulai(inputJob, inputName ))
		})

	</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat Pencarin Job dengan Switch Case Menggunakan javascript</title>

</head>

<body>

<form>

<label for="exampleInputName">Masukan Nama</label>

</div>

<label for="exampleInputJob">Masukan JOB</label>

</div>

<!-- <div class="form-group form-check">

<label class="form-check-label" for="exampleCheck1">Check me out</label>

</div> -->

</form>

</div>

</div>

var form = document.forms[0]

form.addEventListener('submit', function(e){

e.preventDefault()

var inputName = document.querySelector(".name").value

var inputJob = document.querySelector(".jobstreet").value

var demo = document.querySelector("#demo");

var mulai = function(job, nama)

{

switch(job){

case 'guru':

return modalguys();

break;

case 'pembalap':

return modalguys();

break;

case 'dokter':

return modalguys();

break;

case 'koki':

return modalguys();

break;

default:

return noJob();

}

function modalguys(){

demo.innerHTML = `

<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

</button>

</div>

${nama}, adalah seorang ${job}

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>`

}

function noJob(){

demo.innerHTML = `

<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

</button>

</div>

Mohon Maaf Pak/ibu ${nama}, JOB "${job}" Tidak ada dalam daftar kami

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>`

}

console.log(mulai(inputJob, inputName ))

})

</script>

</body>

</html>

Cukup panjang ya, dan bisa di lihat saya memanggila dua modal karena yang satu jika job itu ada dan yang satu jika joba itu tidak ada, seperti itu, oke sekarang kita lihat hasilnya ya.

Bisa dilihat ya, dan dari saya cukup sampai disini dulu, mudah-mudahan teman-teman semuanya mengerti ya, oke cukup untuk hari ini belajar cara membuat pencarin job dengan switch case menggunakan javascript, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Facebook DUMET School

Categories