)
Merhaba,
Ekran Görüntüsü :
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webailesi.com - Taha KOÇAK</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="https://www.webailesi.com/yonlendir.php?link=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.4.1%2Fcss%2Fbootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<style>
:root {
--lightBlue: #95b8d1;
--mainwhite: #f5f5f5;
--mainBlack: #333333;
}
.max-height {
min-height: 100vh;
}
body {
background: var(--lightBlue);
}
.message-container {
background: var(--mainwhite);
}
.message-content {
color: var(--lightBlue);
}
#submitBtn {
background: var(--lightBlue);
color: var(--mainwhite);
}
#submitBtn:hover {
color: var(--lightBlue);
color: var(--mainBlack);
}
.feedback {
display: none;
}
.show {
display: block;
}
</style>
<div class="container">
<div class="row max-height align-items-center">
<div class="col-10 mx-auto col-md-8 message-container text-center p-3">
<h4 class="text-capitalize">Bir Mesaj Yaz!</h4>
<form id="message-form">
<input type="text" name="" id="message" class="w-100 my-3 p-2">
<input type="submit" id="submitBtn" class="btn btn-lg" value="Yazdır!">
</form>
<h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">Lütfen boş mesaj göndermeyiniz!</h5>
<h4 class="text-capitalize my-3">Son Mesaj</h4>
<h4 class="message-content text-uppercase">WebAilesi.Com</h4>
</div>
</div>
</div>
<script>
const form = document.querySelector('#message-form')
// Butonu seçiyoruz
form.addEventListener('submit', function(e){
// Kendi Fonksiyonunu Devre Dışı Bırakıyoruz
e.preventDefault()
// Kullanıcıdan gelen verileri alıyoruz
const message = document.querySelector('#message')
const feedback = document.querySelector('.feedback')
const messageContent = document.querySelector('.message-content')
if (message.value === ''){
feedback.classList.add('show')
setTimeout(function(){
feedback.classList.remove('show')
}, 2000)
} else {
// MEsajı son mesajlara ekliyoruz ve inputu boşaltıyoruz
messageContent.textContent = message.value
message.value = ''
}
})
</script>
</body>
</html>Son Düzenleme: 02-05-2020, 19:53, Düzenleyen: T1xLnN
