DEV Community

anderu
anderu

Posted on • Updated on

Today i build annoying popup form from Scrimba

Annoying popup form
This is how the popup form look like.

setTimeout(function(){
    modal.style.display = 'inline'
}, 1500)
Enter fullscreen mode Exit fullscreen mode

Firstly, I set the display: none and then use setTimeout 1.5 second and the form will popup

consentForm.addEventListener('submit', function(e){
    e.preventDefault()

    const consentFormData = new FormData(consentForm)
    const fullName = consentFormData.get('fullName')

    modalText.innerHTML = `
    <div class="modal-inner-loading">
        <img src="images/loading.svg" class="loading">
        <p id="upload-text">Uploading your data to the dark web...</p>
    </div>` 

    setTimeout(function(){
        document.getElementById('upload-text').innerText = `
        Making the sale...`
    }, 1500)


    setTimeout(function(){
        document.getElementById('modal-inner').innerHTML = `
        <h2>Thanks <span class="modal-display-name">${fullName}</span>, you sucker! </h2>
        <p>We just sold the rights to your eternal soul.</p>
        <div class="idiot-gif">
            <img src="images/pirate.gif">
        </div>
    `
    modalCloseBtn.disabled = false
    }, 3000)

}) 
Enter fullscreen mode Exit fullscreen mode

Then the user MUST write down their name and email as i set the closed button disable status. The disable status will turn into false after user submit the form.

Accept and decline button

declineBtn.addEventListener('mouseenter', function(){
    modalChoiceBtns.classList.toggle('modal-btns-reverse')
}) 
Enter fullscreen mode Exit fullscreen mode

The 'Decline' button also can't work as i addEventListener mouse over action on the 'Decline' button. The 'modal-btns-reverse' class which is flex-direction: row-reverse will shift the 'Accept' and 'Decline' button position with the use of classList.toggle('className'). So user have no choice but have to click 'Accept' button to submit the form.

Status 1 after submit
submit form status 2

Status 2 after submit
submit form status 2

Status 3 after submit
submit form status 3

The use of setTimeout method change the status of the form by modify the innerText and innerHTML. Then the last status also took the form data of 'fullName' with the use of FormData.Get() method and then the closed button work again.

Eat, sleep, code, repeat!
Andrew Tan

Top comments (0)