Welcome to a tutorial on how to create a restaurant food ordering system with Javascript. Yes, you read that right, Javascript-only. There are no server-side databases, and only minimal NodeJS involved. But be warned, this is not a “complete ordering system”, but more of an experiment of mine to see how far we can go with …
Javascript Restaurant Food Ordering System (With Code Download) Read More »
Welcome to a tutorial on how to create responsive tabs with Javascript and CSS. There sure are a lot of “tab plugins” on the Internet, but how do we create one that loads content with AJAX? Here is a quick sharing of my version, without any dependencies on third-party frameworks. Read on! ⓘ I have …
Simple Tabs With AJAX Pure Javascript (Free Download) Read More »
Welcome to a quick tutorial on how to create a drag and drop sortable list with HTML and Javascript. Once upon a time in the Dark Ages of the Internet, implementing drag-and-drop is a massive task that involves a lot of coding with 3rd party libraries. But ever since HTML5, it has been made a …
Drag and Drop Sortable List With Javascript (Simple Example) Read More »
Welcome to a quick beginner’s tutorial on how to reset an HTML form after submission. So you are working on a form that needs to clear after the user submits it? There are 2 mechanisms in HTML and Javascript to take note of when it comes to resetting forms: Use document.getElementById(“FORM”).reset() in Javascript to reset …
Reset HTML Form After Submission – Simple Examples Read More »
Welcome to a tutorial on how to fade in and out using pure CSS and Javascript. So you may want to fade in a section on selection, or maybe fade a button out once it is clicked on. Some libraries provide a convenient fade function, but we really don’t need to load an entire library …
Fade In and Out With Pure CSS Javascript (Simple Examples) Read More »
Welcome to a quick tutorial on how to display messages in HTML and Javascript. Just started with Javascript and wondered how to display a message? The common ways to show messages in HTML and Javascript are: Alert, prompt, confirm. Output the message to the developer’s console. Dialog box (popup box). Message bar. Inline messages. Toast …
6 Ways To Display Messages In HTML Javascript (Simple Examples) Read More »
Welcome to a tutorial on how to overlap or layer HTML elements. So you want to create your own overlapping elements? Maybe a customized popup dialog boxes, a “now loading” screen, or an overlay menu. To overlap or layer HTML elements: Set the position of the elements to relative, absolute, or fixed. Then, use z-index …
How To Overlap (Or Layer) Elements In HTML & CSS Read More »
Welcome to a quick tutorial on how to create a simple popup with HTML, CSS, and Javascript. I am sure there are tons of popup plugins all over the Internet, but some of them depend on 3rd party frameworks and add too much loading bloat. So here it is – We will walk through a …
Very Simple Popup In Pure HTML CSS JS (Free Download) Read More »
Welcome to a beginner’s tutorial on how to add icons in HTML and CSS. Need to add some icons to your website? Make the contents a little easier to navigate? There are various ways to add icons in HTML and CSS: The easiest way is to use HTML symbols, simply copy-and-paste the respective HTML entity …
4 Easy Ways to Add Icons In HTML CSS (Simple Examples) Read More »
Welcome to a tutorial on how to show/hide HTML elements with animations. So you need to toggle the visibility of an element, but with bells-and-whistles? Here is an easy example to show/hide an HTML element with a fade effect: The HTML element – <div id=”fade”>TEXT</div> The CSS classes: #fade { transition: opacity 1s; } .hide …
Show/Hide HTML Elements With Animation (Simple Examples) Read More »
