# 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)
    
})
```

{% embed url="https://www.youtube.com/watch?v=29AY8fpWxiE&list=PLT5Jhb7lgSBNl46W_y6sOb_W54C9_L6Ml&index=27" %}

```
// 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>
```
