Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
winbox
communitycreator

How to create WinBox app in Javascript

Nasreen

Earlier today, I developed a simple quotes generator webpage using the winBox.js library and created amazing little boxes on the screen to display the quotes. I know this is not a feature-rich application, but it will give you a good idea of how winBox works and, once you get a hold of it, you can develop interesting, eye-catching features through it.

So, let’s begin coding…

Steps

I created a new project in VS code with the usual index.html, style.css, and main.js files and linked all of them to each other using the link and script tags for the js file.

You will need to add the winbox.bundle.js file to kick off the winbox features in your app. You can download the zipfile from the website or you can simply copy paste the content of the winbox.bundle.js from my project repository.

Code

In this app, I have displayed the seven days of the week. When each one is clicked, it will display a window on the screen that shows a random quote. Below is the simple HTML structure of this app:

<body>
    <main>


    <div id="showcase">
    <div class="bg-text">
        <h1 >Discover Your Random Quote...</h1>
        <img src="cookie.jpeg" alt="cookie"/>

        <div class="days">
            <h3>Click on a day and find a random quote for that day...</h3>
            <ul>
                <li id="monday">Monday</li>
                <li id="tuesday">Tuesday</li>
                <li id="wednesday">Wednesday</li>
                <li id="thursday">Thursday</li>
                <li id="friday">Friday</li>
                <li id="saturday">Saturday</li>
                <li id="sunday">Sunday</li>
            </ul>
        </div>
    </div>
    </div>


      <div class="hidden">
    <div id="quote-content"></div>
      </div>  

    </main>
    <script src="main.js"></script>
    <script src="winbox.bundle.js"></script>
</body>

Remember the quote, "Content div will initially remain hidden, but if a user clicks on any day, each of which is a list item, then the output will be displayed in the quote content div in the form of a separate window.

The styling of this app includes some basic styles for the title, background, and li tags. The CSS is very simple and straightforward and, in order to avoid unnecessary details here, I am not going to be including the styles, however, you can get the complete code from my github repository.

Now, come to the main.js file where all the logic from winbox.js resides. Here, we’ll first select all the days of the week from our index.html file (which are actually the li tags), and then we’ll output the div using the getElelmentById and querySelector selectors. Next, for each of the li tags, we will define a click event listener that will make a fetch call to the random quote API and create a WinBox to display the output. This is shown below:


sunday.addEventListener('click',()=>{
    getRandomQuote() 
    const sundayBox = new WinBox({
        title: 'Sunday Quote',
        width:'400px',
          height:'400px',
          top:80,
          right:150,
          bottom:50,
          left:340,
          class:"text",
          mount: quoteContent, 
        })
})

Remember, we have to create a WinBox for all the seven days.

You can style the width, height, background color, and positiontop, right, bottom, left on the screen of the WinBox while creating it. Also, I wanted to add some custom properties to the text shown in the window, so I defined a class called text and defined the styles as per my choice in the style.css file.

The function, that generates a random quote, will look like this:


function getRandomQuote(){
    fetch("https://api.quotable.io/random")
    .then(response => response.json())
    .then(data => {
     quoteContent.innerHTML = `${data.content}`;
    });
}

This brings an end to this app. I know it was pretty simple, but it teaches us a lot about WinBox.js.

You can take a look at the finished product, here

Happy coding!

RELATED TAGS

javascript
winbox
communitycreator
RELATED COURSES

View all Courses

Keep Exploring