Creating Simple Interactions with JavaScript: PopUp Buttons

JavaScript programming language is a great tool for creating engaging user experiences on your website. Creating simple interactions with JavaScript helps improve the user experience, increase engagement and conversion rates, and make your website or application more accessible. Simple interactions such as hovering over an image to see a tooltip or clicking a button to reveal more content can make a website feel more intuitive and responsive. It also helps users easily navigate the website.

With JavaScript, you can add interactive features that respond to user input, such as animations, sliders, and pop-ups. In this article, we'll explore:

How to set up your environment for coding.
And how to use JavaScript to create popups to bring your website to life.

I recommend reading further even if you are new to coding.

Setting Up Your Environment

Before coding, we need to set up the environment to be sure we have all the necessary tools. For all coding projects, you'll need a code editor to write the code, a web browser to run your code (Google Chrome or Mozilla Firefox), and basic knowledge of HTML and CSS. If you lack knowledge of HTML and CSS, follow the instructions step by step to achieve desirable results. Here's how to get started:

Figure 1: VS Code's Welcome Page

Step 1:

Download a Code Editor: A code editor is a tool where you write code and edit code. It provides helpful features such as autocompletion, code formatting, and syntax highlighting. Some code editors include Visual Studio Code, Sublime Text, Atom, etc. For this tutorial, I am making use of Visual Studio Code (VS Code). You are welcome to use whichever one you are comfortable with.

Step 2:

Open your code editor and click "Open Folder". Select a folder on your laptop where you wish to save your code or create a new folder and open. Within that folder, create a new file and save as a .html extension (e.g, index.html).

Step 3:

Add basic HTML structure to your file, including a head and body tag as such:

<!DOCTYPE html>

<html>

<head>

<title>My Website</title>

</head>

<body>

<h1>Welcome to my website</h1>

<p>This is some sample text for my website.</p>

</body>

</html>

This code contains the basic structure which you can customize to fit your needs and add or remove code where necessary. Make sure to save the changes.

Step 4:

If this is your first time using VS Code, download the Extension called Live Server. In VS Code, go to the Extensions Tab circled in red in Figure 2 below, search for Live Server and install.

Figure 2: Live Server

After installing, restart VS Code to have it ready. Then right click on your HTML file and click "Open With Live Server" to have your web browser run the code as such. That option will only appear after youve installed Live Server.

Figure 3: Web Output

Step 5:

Create a JavaScript file and link it to your HTML file using the script tag. Here's how:

1.) Create a JavaScript file with a .js extension within the same folder as your .html extension (e.g, script.js).

2.) Write your JavaScript code in the .js file.

3.) Add the following code to the head section of your HTML code:

<head>

</head>

Replace "script.js" with the name of your JavaScript file. Save the changes and check your browser.

Figure 4: Linking the JavaScript file

Note that it is necessary to include the script tag within the head section of your HTML file. This ensures that the JavaScript code is loaded before the rest of the page. If you need to load your page before the JavaScript code has loaded, you should make use of the defer attribute on the script tag, as so:

<head>

This tells the browser to defer loading and executing the JavaScript code until the rest of the page has loaded.

Creating PopUp Buttons

After you've been able to set up your environment, it shouldn't be hard for you to edit code according to what your needs. First use HTML to set up what you want your button and popup to say.

HTML

<!DOCTYPE html>

<head>

<title>Creating PopUp Buttons</title>

</head>

<body>

<button type="Download CV" class="btn" onclick="openPopup()">Download CV</button>

<h2>Thank You!</h2>

<h3> Successfully Downloaded</h3>

</div>

</body>

</html>

In the code above, when linking our .js extension we used the defer tag because we want to execute the code after our page has loaded.

Next we should design the button and popup using CSS. Feel free to copy my code and tweak it according to your preference.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container{
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #f4f7fa, #29323c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn{
    padding: 10px 35px;
    background-color: rgb(255, 74, 2);
    border: 1px solid white;
    color: white;
    outline: none;
    margin: 30px 0;
    transition: .6s ease;
    border-radius: 10px;
    cursor: pointer;

}

.btn:hover{
    cursor: pointer;
    background-color: white;
    color: black;
    box-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
    font-weight: bold;
}

.btn:active{
    transform: scale(0.95);
}

.popup{
    width: 400px;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 60px;
    color: #333;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.open-popup{
    visibility: visible;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}

.popup img{
    width: 100px;
    margin-top: -50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.popup h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.popup button{
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    background-color: rgb(255, 74, 2);
    color: #fff;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

Finally, call your code with JavaScript functions openPopup() and closePopup().

The openPopup() function is used to open a popup element on the page while the closePopup() function closes the popup element.

JAVASCRIPT

let popup = document.getElementById('popup')

function openPopup(){

popup.classList.add('open-popup')

}

function closePopup(){

popup.classList.remove('close-popup')

}

Remember to edit my code according to what you desire to have as your output. At this final stage you should have a button looking similar to this at the center of your page.

Figure 5: The Button

Which changes to white on hover and white box shadow. Your popup should look like figure 6 below.

Figure 6: The PopUp

The OK button closes the popup.

Conclusion

In this article, we discussed the basics of creating simple interaction with JavaScript through pop-up buttons. We first looked at how to set up your environment for coding in general, and then went through the steps of creating pop-up buttons. By following the code examples and instructions provided, you should be able to create your own pop-up buttons in no time.

As we've seen, such simple interactions with JavaScript can greatly improve the user experience of your website or web application. Pop-up buttons are just one example of how you can use JavaScript to create engaging and interactive elements that users will enjoy. By taking the time to learn and implement these techniques, you can create a more dynamic and engaging web experience for your users.

Search This Blog

Michelle's Portfolio