Web Design Guide

This tutorial will go over a simple dynamic countdown timer using JavaScript. Example of a countdown timer using the code below HTML + JavaScript <p id="showDate"></p>     <script>         var countDownDate = new Date("Jun 18, 2019 17:37:00").getTime();         var x = setInterval(function () {         var now = new Date().getTime();         var distance = countDownDate - now;         var days = Math.floor(distance / (1000 * 60 * 60 * 24));         var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));         var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));         var seconds = Math.floor((distance % (1000 * 60)) / 1000);         document.getElementById("showDate").innerHTML = days + "d " + hours + "h "   ...

There are numerous fun things you can explore with the extensive Flickr API (Application Program Interface) , like requesting images based on tags. Click here for a full list of Flickr API services. This example is a highly primitive request that doesn't require an authorization key (or API key) to work, which you can acquire here . This request does have some serious limitations, however, like only being able to randomly request an image based on the user's query. This is still a good introduction to web-based APIs and using the JSON (JavaScript Object Notation) data format. Example of using Flickr API to pull up an image of a 'cute cat' The code below is all that was used for the example image above. The code will take the query in the textbox (txtSearch), which in this example is 'Cute cats', as a tag to request the image, which will be finally set as the source image to be displayed (selectedImage). Of course, you can get a lot more complicated w...

This post will go over the very minimum of creating a popup (modal) for mobile and desktop displays. To download the full example click here What we'll go over Create a clickable button that scrolls with the user Clicking the button will reveal some hidden HTML content Any content behind the modal element will be gray Allow the user to close the modal Example of active modal element Creating the clickable button CSS #contactButton{ position: fixed; bottom: 100px; right: 30px; } #contactButton_image:hover{ filter: brightness(50%); } The CSS code for creating the button is really simple. The position of the button is set to fixed , meaning the location that we set it to on the screen will not move (even when the user scrolls) unless otherwise stated. That fixed location is at the bottom-right. When the user hovers over the button using :hover , we apply a filter to the image turning the brightness down to 50%. HTML <div id=...