How to create WinBox app in Javascript
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.jsfile 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 thewinbox.bundle.jsfrom 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>
<h1 >Discover Your Random Quote...</h1>
<img src="cookie.jpeg" alt="cookie"/>
<div>
<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>
<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 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!
