😉Build User Consent Model
// Some code
// javascript
const model = document.getElementById('model');
const showModelBtn = document.getElementById('show-model');
const closeBtn = document.getElementById('modal-close-btn');
const consentForm = document.getElementById('consent-form');
const modalText = document.getElementById('modal-text');
showModelBtn.addEventListener('click', function(){
model.style.display = 'inline'
})
closeBtn.addEventListener('click', function(){
model.style.display = 'none'
})
consentForm.addEventListener('submit', function(e) {
e.preventDefault();
const form = new FormData(consentForm);
const fullName = form.get('fullName');
modalText.innerText = 'We are saving your data .. please wait ..';
setTimeout(() => {
modalText.innerText = 'uploading info..';
}, 1500);
setTimeout(() => {
document.getElementById('model-inner').innerHTML = `
Thanks for sending your info...`;
}, 3000)
})// Some code
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<h1>Hello, World</h1>
<button type="submit" id="show-model" class="modal-btn">show Model</button>
<div class="model" id="model">
<div class="close-modal-btn-container">
<button class="modal-close-btn" id="modal-close-btn">X</button>
</div>
<div class="model-inner" id="model-inner">
<h3>User Consent Form</h3>
<p class="modal-text" id="modal-text">
User Consent Form to get User pemrission to save and store
user data
</p>
<form id="consent-form">
<input
id="fullName"
type="text"
name="fullName"
placeholder="Enter your full name"
required
/>
<input
id="email"
type="email"
name="email"
placeholder="Enter your email"
required
/>
<div class="modal-choice-btns" id="modal-choice-btns">
<button type="submit" class="modal-btn">Accept</button>
<button type="button" class="modal-btn">Decline</button>
</div>
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>Last updated