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 gives a reasonable amount of idea as to how winBox works and once you get the hold of it, you can develop interesting eye-catching features through it.
So, lets begin coding...
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 eachother using the link tag and script tag for the js file.
Also, you would need to add the winbox.bundle.js file to kickoff the winbox features in your app. You can download the zipfile from the website: https://nextapps-de.github.io/winbox/ or you can simply copy paste the content of winbox.bundle.js from my project repository:
https://github.com/NasreenKhalid/Random-Quotes-Winbox-Project/tree/master
In this app, I have displayed the seven days of the week, clicking on each of which will display a window on the screen showing 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 remain hidden initially but when user clicks on any day each of which is a list item than 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 the li tags. The css is very simple and straightforward and in order to avoid unnecessary details here, I am not including the styles however you can get complete code from my github repository.
Now, come to the main.js file where all the logic from winbox.js resides. Here, first we'll select all the days of the week from our index.html file (which are actually the li tags) and also the output div using the getElelmentById and querySelector selectors respectively.
Then, for each of the li tag we will define a click event listener which will make a fetch call to the random quote api and also will create a WinBox to display the output as 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 whomsoever is clicked by the user.
You can style the width, height and background color and the position (top, right, bottom, left) on the screen of the WinBox while creating it. Also, I wanted to add some custom properties to the text being shown in the window so I defined a class called text and defined the styles as per my choice in style.css file.
And the function which generates a random quote looks 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's pretty simple but teaches alot about WinBox.js.
Have a look at the finished product here
Happy coding...
Top comments (0)