Forem: Michael Burrows

How to get the file extension from an upload using JavaScript

Michael Burrows — Wed, 21 Jun 2023 01:22:59 +0000

This tutorial will help you understand the process involved in getting a file extension using JavaScript. If you’re building a web app that allows user file uploads this can be used to validate any file type restrictions you may want to implement.

Let’s get started by creating a form with a file input field, a button that’ll call a function to check the file extension, and a paragraph with a empty span that we’ll inject the file extension string inside once it has been established:

<form>
  <fieldset>
    <legend>Check file extension:</legend>
    <input type="file" id="input-file-upload" />
    <input type="button" id="btn-check-extension" value="Check" />
  </fieldset>
</form>

Next the JavaScript starting with an event listener to detect when the button is clicked:

const btn = document.querySelector("#btn-check-extension");
btn.addEventListener('click', () => getExtension());

This event listener then calls a getExtension function that looks like this:

const getExtension = () => {
  const file = document.querySelector("#input-file-upload").value;
  const extension = file.split(".").pop();
  document.querySelector("#result").textContent = extension;
};

What we’re doing here is getting the filename from input field, using the split() method to split the filename and extension into an array, then using the pop() method which gets the last item from an array (the file extension).

That’s all for this tutorial. While you’re here why not check out some of these other JavaScript tutorials.

Creating keyboard shortcuts for web apps with JavaScript

Michael Burrows — Tue, 23 May 2023 04:21:33 +0000

In this tutorial we’ll be creating keyboard shortcuts that can be used in web apps. These are particularly handy when you want to give users the ability to save or copy data, navigate, or control playback of media all via the keyboard.

First thing we’ll do is create an object with the keys we want to use as shortcuts:

let keyDown = {
  'c': false,
  'p': false,
  's': false,
  'Meta': false,
  'Control': false
};

The shortcuts we are creating will be triggered using the control or command keys in conjunction with another alphabetical key. Control here represents the control key whilst Meta represents the command key on macOS devices.

Next we’ll setup a keydown event listener that calls a handleKeydown function:

document.addEventListener("keydown", handleKeydown);
function handleKeydown(e) {
  e.preventDefault();
  keyDown[e.key] = true;
  if (keyDown["c"] && (keyDown["Control"] || keyDown["Meta"])) {
    console.log("Shortcut Activated");
  }
}

This function sets the value of the key in the keyDown object to true. In this example we are checking if the “c” key has been pressed along with either the “Control” or “Meta” keys. As we’ve built it this way we could check for any number of key combinations pressed simultaneously.

To finish we just need to add a keyup event listener that resets the key value to false:

document.addEventListener("keyup", handleKeyup);
function handleKeyup(e) {
  keyDown[e.key] = false;
}

That’s all for this tutorial, you should now have a good understanding of how to create keyboard shortcuts using JavaScript. If you enjoyed this tutorial we also have a number of other JavaScript tutorials for both new and experienced developers.

Exporting a React component to a PDF file on click

Michael Burrows — Tue, 18 Apr 2023 01:18:33 +0000

In this tutorial we’ll covering the process of exporting a React component to a PDF file.

We’ll be using jsPDF to generate the PDF which can be installed by running:

npm install jspdf

For the purposes of this tutorial we’ll create a simple “shipping label” component which will contain an address and barcode image. Here’s what the basic structure of our ShippingLabel.js component will look like:

import { jsPDF } from "jspdf";
import Barcode from "./barcode.png";

const ShippingLabel = () => {    
    const createPDF = async () => {
        // TODO
    }; 
    return (<>{/* TODO */}</>);
};

export default ShippingLabel;

We’ve used an asynchronous function here so we can use the await keyword which will allow us to wait until all the HTML markup has been captured from the component before moving onto the generation of the PDF document.

Now let’s complete the return statement with the HTML markup that we’ll export to the PDF along with a button that’ll generate the PDF when clicked:

return (
  <div className="shipping">
    <h1>Download Shipping Label</h1>
    <p>Nihil quam soluta sed enim aut omnis voluptatem reprehenderit.</p>
    <div id="pdf">
        <p>TO: John Citizen</p>
        <p>123 Random Street</p>
        <p>Oak Creek, Colorado (CO), 80467</p>
        <p><img src={Barcode} alt="Barcode" /></p>
    </div>
    <button onClick={createPDF} type="button">Download</button>
  </div>
);

Anything outside <div id="pdf"> will not be exported to the PDF.

We can now complete the createPDF function:

const createPDF = async () => {
  const pdf = new jsPDF("portrait", "pt", "a4");
  const data = await document.querySelector("#pdf");
  pdf.html(data).then(() => {
    pdf.save("shipping_label.pdf");
  });
};

This creates a new jsPDF object and set’s the orientation (portrait), base unit to be used when coordinates are specified (pt), and the document size (a4). You can view the full range of options available in the official documentation here.

If you test what we’ve created so far you’ll notice CSS from external style sheets are not captured in the PDF. If you do want external CSS styles to appear in the PDF you’ll either need to use CSS in JS or another library called html2canvas which captures the HTML as image before exporting to PDF.

Let modify our component to capture external CSS by first installing html2canvas:

npm install html2canvas

And then import into our component:

import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
import Barcode from "./barcode.png";

We can now update the createPDF function to capture the HTML:

const createPDF = async () => {   
  const pdf = new jsPDF("portrait", "pt", "a4"); 
  const data = await html2canvas(document.querySelector("#pdf"));
  const img = data.toDataURL("image/png");  
  const imgProperties = pdf.getImageProperties(img);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
  pdf.addImage(img, "PNG", 0, 0, pdfWidth, pdfHeight);
  pdf.save("shipping_label.pdf");
};

Now when you test the functionality you’ll see any styles from external CSS files are captured in the PDF.

That’s all for this tutorial. You should now have an understanding of how jsPDF & html2canvas can be used to export a React component to a PDF file. The full source code for the component is available on GitHub.

How to make a digital clock using JavaScript

Michael Burrows — Fri, 24 Mar 2023 04:48:42 +0000

In this tutorial we’ll be building a digital clock using JavaScript.

Let’g get started by creating a <div> element that’ll be used to display the time:

const clock = document.createElement("div");
document.body.appendChild(clock);

Next create a getTime function that’ll calculate the time:

const getTime = () => {
  const date = new Date();
  let hour = date.getHours();
  let min = date.getMinutes();
  let sec = date.getSeconds();
}

We’ve used JavaScripts built in Date() object here which represents a single moment in time. From this we then extract the hours, minutes, and seconds. Each measurement is assigned it’s own variable as we’ll need to do some manipulation in the next step.

Hours, minutes, and seconds less than 10 don’t have a leading zero digit which is commonly used when formatting digital time. To achieve this we’ll check if the unit of measure is less than 10. If it is we’ll prepend a zero otherwise the measurement is left alone:

const getTime = () => {
  const date = new Date();
  let hour = date.getHours();
  let min = date.getMinutes();
  let sec = date.getSeconds();
  hour = (hour < 10) ? "0" + hour : hour;
  min = (min < 10) ? "0" + min : min;
  sec = (sec < 10) ? "0" + sec : sec;   
};

We can now insert the time to our clock <div>:

const getTime = () => {
  const date = new Date();
  let hour = date.getHours();
  let min = date.getMinutes();
  let sec = date.getSeconds();  
  hour = ("0" + hour).slice(-2);
  min = ("0" + min).slice(-2);
  sec = ("0" + sec).slice(-2); 
  const time = hour + ":" + min + ":" + sec;
  clock.innerText = time;
};

If you were to run the getTime function at this point it would fetch the current time at execution. As we’re building a digital clock we’ll need to fetch and update the time using the SetInterval method every second (1000 milliseconds):

const getTime = () => {
  const date = new Date();
  let hour = date.getHours();
  let min = date.getMinutes();
  let sec = date.getSeconds();  
  hour = ("0" + hour).slice(-2);
  min = ("0" + min).slice(-2);
  sec = ("0" + sec).slice(-2); 
  const time = hour + ":" + min + ":" + sec;
  clock.innerText = time;
};
setInterval(getTime, 1000);

Currently the clock is displaying time in the 24 hour format. To convert to a 12 hour format clock we just need to check if the current hour is greater than 12, if true subtract 12 hours. We’ll also declare a merdiem variable and assign it either a AM or PM which will get displayed after the time:

const getTime = () => {
  const date = new Date();
  let hour = date.getHours();
  let min = date.getMinutes();
  let sec = date.getSeconds();
  hour = ("0" + hour).slice(-2);
  min = ("0" + min).slice(-2);
  sec = ("0" + sec).slice(-2);
  let meridiem;
  if (hour > 12) {
    meridiem = "PM";
    hour = hour - 12;
  } else {
    meridiem = "AM";
  }
  const time = hour + ":" + min + ":" + sec + " " + meridiem;
  clock.innerText = time;
};

You should now have a fully functioning digital clock built using JavaScript. When it comes to styling this clock it would be best to use a monospace font (font-family: monospace;). This will prevent the clock dimensions shifting due to the variable font width between the different numbers.

Creating a tab component in React

Michael Burrows — Fri, 10 Mar 2023 00:01:49 +0000

In this tutorial we’ll be building a tab component in React. Tab components allow you to break complex interfaces into smaller subsections that are easy to navigate between. Tabs are a commonly used UI element so having an understanding of how they work in React is quite beneficial.

For the purposes of this tutorial we’ll setup a project using Create React App by running the following command:

npx create-react-app react-tabs

Once the setup is complete create a new /src/components folder with a Tab.js file and tab.css file.

We’ll now create the basic structure for the tab component in the Tab.js file:

import React, { useState } from "react";
import "./tabs.css";

const Tabs = () => { 
  return (
    <>
     <h1>Hello World</h1>
    </>
  );
};

export default Tabs;

Now let’s load the component by editing the App.js file as follows:

import "./App.css";
import Tabs from "./components/Tabs";

const App = () => {
  return (
    <div className="App">
      <Tabs />
    </div>
  );
}

export default App;

Test to see that the component had been loaded successfully then move onto the next step.

Back to the Tab.js file let’s first declare the required variables:

import React, { useState } from "react";
import "./tabs.css";

const Tabs = () => {
  const [activeIndex, setActiveIndex] = useState(1);
  const handleClick = (index) => setActiveIndex(index);
  const checkActive = (index, className) => activeIndex === index ? className : "";
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
};

export default Tabs;

activeIndex – contains the index of active tab, in our case 1,2, or 3.
handleClick – sets the active index when a tab is clicked.
checkActive – adds the active class for styling and toggling visibility.

We can now add the HTML markup starting with the clickable tab elements:

const Tabs = () => {
  const [activeIndex, setActiveIndex] = useState(1);
  const handleClick = (index) => setActiveIndex(index);
  const checkActive = (index, className) => activeIndex === index ? className : "";
  return (
    <>
      <div className="tabs">
        <button
          className={`tab ${checkActive(1, "active")}`}
          onClick={() => handleClick(1)}
        >
          Product Info
        </button>
        <button
          className={`tab ${checkActive(2, "active")}`}
          onClick={() => handleClick(2)}
        >
          Customer Reviews
        </button>
        <button
          className={`tab ${checkActive(3, "active")}`}
          onClick={() => handleClick(3)}
        >
          Delivery &amp; Returns
        </button>
      </div>      
    </>
  );
};

And the panels that contain the content:

const Tabs = () => {
  const [activeIndex, setActiveIndex] = useState(1);
  const handleClick = (index) => setActiveIndex(index);
  const checkActive = (index, className) => activeIndex === index ? className : "";
  return (
    <>
      <div className="tabs">
        <button
          className={`tab ${checkActive(1, "active")}`}
          onClick={() => handleClick(1)}
        >
          Product Info
        </button>
        <button
          className={`tab ${checkActive(2, "active")}`}
          onClick={() => handleClick(2)}
        >
          Customer Reviews
        </button>
        <button
          className={`tab ${checkActive(3, "active")}`}
          onClick={() => handleClick(3)}
        >
          Delivery &amp; Returns
        </button>
      </div>
      <div className="panels">
        <div className={`panel ${checkActive(1, "active")}`}>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean erat ligula, feugiat at felis vitae, porttitor lacinia quam.</p>
        </div>
        <div className={`panel ${checkActive(2, "active")}`}>
          <p>Nulla lobortis quis massa quis lobortis. Nullam porta semper lorem, vel efficitur augue rutrum quis. Suspendisse potenti.</p>
        </div>
        <div className={`panel ${checkActive(3, "active")}`}>
          <p>Cras porta consectetur dolor porttitor fringilla. Cras vitae urna ac erat fermentum egestas. Donec egestas cursus scelerisque.</p>
        </div>
      </div>
    </>
  );
};

Now we just need to add the CSS as follows:

.tabs {  
  display: flex;  
}
.tab {  
  justify-content: center;
  align-items: center;
  width: 100%;
  background: lightsteelblue; 
  padding: 2em 0;  
  border: none;
}
.tab:not(:last-child) {
  border-right: 1px solid steelblue;  
}
.tab.active {
  background: steelblue;
  font-weight: bold;
}
.panel {
  display: none;
  background-color: #eaeaea;
  padding: 10px;
}
.panel.active {
  display: block;
}

That’s all for this tutorial. You should now have a working tab component that’s can easily be dropped into a React application. If you’re interested in learning more about building custom React components check out all our full collection of React tutorials.

Build an accordion component with Alpine.js

Michael Burrows — Fri, 03 Mar 2023 01:21:01 +0000

In this tutorial we’ll be using Alpine.js to build an accordion component. Accordions or collapsible panels as they’re also known are used to hide and show large amounts of content by clicking a heading. Please note, to keep this tutorial Alpine focused I’ve used the Tailwind CSS framework but it could easily be converted to plain CSS.

Let’s get started by creating a new HTML file and loading Alpine and Tailwind via CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Alpine.js Accordion</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/alpinejs" defer></script>
  </head>
  <body>
  </body>
</html>

Now for the accordion data which is stored in an array as follows:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('accordion', () => ({
            data: [
            {
                id: '1',
                heading: 'What is Alpine.js?',
                content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
                isOpen: false,
            },
            {
                id: '2',
                heading: 'Is Alpine.js better than jQuery?',
                content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
                isOpen: false,
            },
            {
                id: '3',
                heading: 'Who created Alpine.js?',
                content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
                isOpen: false,
            },
            ]
        }))
    });
</script>

The eventListener here is waiting for Alpine to load before creating a data object.

Next we can start with the accordion component itself:

<div x-data="accordion" class="p-3"></div>

Components in Alpine always have the x-data directive which defines a section of HTML as an Alpine component. It also provides the reactive data for a component to reference, in our case the accordion data created in the previous step.

We’ll use the <template> element for holding the HTML as it isn’t be rendered immediately:

<div x-data="accordion" class="p-3">
  <template x-for="accordion in data" :key="accordion.id"></template>
</div>

Alpine’s x-for directive iterates through the data to create the following markup:

<div x-data="accordion" class="p-3">
  <template x-for="accordion in data" :key="accordion.id">
    <div class="accordion">
      <button @click="data = data.map(i => ({ ...i, isOpen: i.id !== accordion.id ? false : !i.isOpen}))"
        class="w-full flex justify-between items-center border-b py-3">
        <h3 x-text="accordion.heading" class="font-bold"></h3>        
      </button>
      <div x-text="accordion.content" x-show="accordion.isOpen" class="py-3"></div>
    </div>
  </template>
</div>

When the button is clicked the isOpen value is toggled between true and false. The x-text directive gets the accordion content and displays it within the element it reside. The final piece of Alpine used is x-show which controls the visibility on and element so only when accordion.isOpen equals true is the content visible.

Finally let’s add an icon to indicate whether or not the accordion is open or closed:

<div class="accordion">
  <button @click="data = data.map(i => ({ ...i, isOpen: i.id !== accordion.id ? false : !i.isOpen}))"
      class="w-full flex justify-between items-center border-b py-3">
      <h3 x-text="accordion.heading" class="font-bold"></h3>
      <span x-show="accordion.isOpen">-</span>  
      <span x-show="!accordion.isOpen">+</span>            
  </button>
  <div x-text="accordion.content" x-show="accordion.isOpen" class="py-3"></div>
</div>

Once again we’ve used x-show to control the visibility of the open and closed icons based on the value of accordion.isOpen.

That’s all for this tutorial, you should now have a fully functioning accordion component powered by Alpine.js. If you enjoyed this tutorial you may also be interested in some of our other Apline.js tutorials.

How to read and write JSON files using Node.js

Michael Burrows — Tue, 28 Feb 2023 04:34:35 +0000

JSON is a lightweight format for storing and transporting data. Because JSON is easy to read and write it’s used by many programming languages not just JavaScript. In this tutorial I’ll show you how to read and write JSON files using Node.js.

Let’s start by first writing data to a JSON file.

Create new JavasScript file named index.js and include the File System (fs) module:

const fs = require("fs");

Next we’ll declare a books variable that contains our JSON data:

const books = [
  {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
  },
  {
    title: "Frankenstein",
    author: "Mary Shelley",
  },
  {
    title: "The Call of the Wild",
    author: "Jack London",
  },
];

We then need to convert the JSON object to a string:

const data = JSON.stringify(books);

Without converting to a string the data would be written as [object, object].

Now we can write the data to a file using fs.writeFile:

fs.writeFile("./data.json", data, "utf8", (error) => {
  if (error) {
    console.log(error);
  } else {
    console.log("writeFile complete");
  }
});

Run the code using node index.js and a new data.json file with the JSON data should have been created alongside the index.js file. If no file was created check the error messages that have been logged in the console to debug the problem.

Ok, now that we know how to write JSON data to a file let’s now read that data.

To read data we’ll use fs.readFile in the index.js file as follows:

fs.readFile("./data.json", "utf8", (error, json) => {
  if (error) {
    console.log(error);
    return;
  }
  try {
    const books = JSON.parse(json);
    books.forEach((book) => {
      console.log(`${book.title} by ${book.author}`);
    });
  } catch (error) {
    console.log(error);
  }
});

This loops through each of the books in our JSON file and logs that data to the console:

That’s all for this tutorial. You should now have an understanding of how to use a simple JSON file to read and store data. While you’re here you may be interested in reading some of our other Node.js tutorials.

Code a responsive step progress bar with HTML, CSS, & JavaScript

Michael Burrows — Mon, 27 Feb 2023 05:30:40 +0000

In this tutorial we’ll be creating a responsive step progress bar. These are commonly used when a large form is split into several steps. They let the user know how much of the form they have completed and how much remains.

Here’s what the completed progress bar will look like:

Let’s get started by creating the HTML markup:

<div id="progress">
  <div id="progress-bar"></div>
  <ul id="progress-num">
    <li class="step active">1</li>
    <li class="step">2</li>
    <li class="step">3</li>
    <li class="step">4</li>
  </ul>
</div>

You can easily add more steps here if required and the progress bar will remain responsive and functional. We’ll also need some buttons to control the progress through the steps as follows:

<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>

Now for the JavaScript starting with variables for the various elements:

const progressBar = document.getElementById("progress-bar");
const progressNext = document.getElementById("progress-next");
const progressPrev = document.getElementById("progress-prev");
const steps = document.querySelectorAll(".step");
let active = 1;

To navigate through the steps we’ll add an eventListener to detect clicks on each of the buttons:

progressNext.addEventListener("click", () => {
  active++;
  if (active > steps.length) {
    active = steps.length;
  }
  updateProgress();
});

progressPrev.addEventListener("click", () => {
  active--;
  if (active < 1) {
    active = 1;
  }
  updateProgress();
});

This increases or decreases the active count based on the button clicked. It also prevents the active count from going higher or lower than the number of steps. We’re also calling a updateProgress function which looks like this:

const updateProgress = () => {
  // toggle active class on list items
  steps.forEach((step, i) => {
    if (i < active) {
      step.classList.add("active");
    } else {
      step.classList.remove("active");
    }
  });
  // set progress bar width  
  progressBar.style.width = 
    ((active - 1) / (steps.length - 1)) * 100 + "%";
  // enable disable prev and next buttons
  if (active === 1) {
    progressPrev.disabled = true;
  } else if (active === steps.length) {
    progressNext.disabled = true;
  } else {
    progressPrev.disabled = false;
    progressNext.disabled = false;
  }
};

This does 3 things:

Loops through each of the steps and toggles the active class.
Set’s the progress bar width as a percentage based on the active and total steps.
Disables the appropriate button when the active step is either the first or last step.

Now we just need to add some CSS to see the progress bar in action:

#progress {
  position: relative;
  margin-bottom: 30px;   
}

Relative positioning so we can use absolute position on the children elements.

#progress-bar {
  position: absolute;
  background: lightseagreen;
  height: 5px;
  width: 0%;
  top: 50%;
  left: 0;
}

This sets the base styles for the the progress bar, we toggle it’s width in the JavaScript.

#progress-num {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

This evenly distributes the numbers within the parent <div> no matter the width.

#progress-num::before {
  content: "";
  background-color: lightgray;
  position: absolute;
  top: 50%;
  left: 0;
  height: 5px;
  width: 100%;
  z-index: -1;
}

CSS pseudo-element that represents the inactive portion of the progress bar.

#progress-num .step {
  border: 3px solid lightgray;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background-color: #fff;
  font-family: sans-serif;
  font-size: 14px;    
  position: relative;
  z-index: 1;
}

Styles each inactive steps inside a circle.

#progress-num .step.active {
  border-color: lightseagreen;
  background-color: lightseagreen;
  color: #fff;
}

Styles active steps border and background color to match the progress bar.

That’s all for this tutorial, you should now have a working responsive step progress bar that can be customised to suit your needs. As always you can find the full source code used in this tutorial on Github.

Using the HTML Geolocation API to display a users location on a map

Michael Burrows — Wed, 22 Feb 2023 05:14:21 +0000

In this tutorial we’ll be using the HTML Geolocation API to display the current location of a user on a map. While this example is quite simple it’s provides solid foundation for creating more complex location-aware web sites and applications.

Let’s get started by creating a new HTML file with the following markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Geolocation API</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  </head>
  <body>    
    <div id="map" style="height: 500px"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="script.js"></script>
  </body>
</html>

You’ll notice we’re loading Leaflet an open-source JavaScript library for creating interactive maps. When used in conjunction with OpenStreetMap it’s a powerful alternative to the Google Maps API.

Next create a new JavaScript file called called script.js. All modern browsers support Geolocation but we’ll still check that the current users browser is supported and display an alert message if that’s not the case:

(() => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  } else {
    alert("Geolocation is not supported by this browser");
  }    
})();

If Geolocation is supported we use the getCurrentPosition method to return the users current position. If successful the latitude and longitude are passed to a success() function otherwise the error() function is called:

function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  getMap(latitude, longitude);
}
function error() {
  alert("Unable to retrieve location");
}

With the users latitude and longitude captured we can create a getMap function that uses Leaflet to display a map with a marker of the users current location:

function getMap(latitude, longitude) {
  const map = L.map("map").setView([latitude, longitude], 5);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
  L.marker([latitude, longitude]).addTo(map);
}

Open the HTML file in a browser (you’ll need to allow the file to know you location). If everything worked correctly you should see a map with your current location marked:

Detect idle or active browser tabs with the Page Visibility API

Michael Burrows — Thu, 15 Sep 2022 06:35:17 +0000

In this tutorial we’ll be using the Page Visibility API to detect if a browser tab is idle (not currently being viewed) or active. To get an understanding of how the API works we’ll use it to pause a video when a tab becomes idle.

Let’s get started by setting up a HTML5 video player:

<video id="video" width="300" controls>
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />
  <p>Your browser doesn't support HTML video playback!</p>
</video>

Now for the JavaScript functionality that’ll make use of the Page Visibility API. We first need to define an EventListener that calls a toggleVideoPlayback function when the Page Visibility visibilitychange event has been fired:

document.addEventListener("visibilitychange", toggleVideoPlayback);

Now let’s create the toggleVideoPlayback function:

const toggleVideoPlayback = () => {
  const video = document.getElementById("video");        
  return document.hidden ? video.pause() : video.play();           
};

This function checks the status of document.hidden. If this equals true the video will pause and if it equals false the video will resume playing. You can go ahead and test this code in browser now, note the timestamp when you navigate to another tab whilst the video is playing to confirm the video has been paused when you return.

That’s all for this tutorial. You should now have an understanding of how the Page Visibility API works. If you’re interested in learning about some of the other uses for the Page Visibility API the MDN Web Docs is worth checking out.

Build a custom React autocomplete search component

Michael Burrows — Tue, 06 Sep 2022 06:47:37 +0000

In this tutorial we’ll be building a React autocomplete search component that provides suggestions as a user types a search query. There are a number of libraries that provide autocomplete functionality in React but we’ll be creating a custom component from scratch.

Let’s get started by setting up a basic app using Create React App:

npx create-react-app react-autocomplete-search

Next create a new data.js file in the /src folder. This file contains an array that will be used to provide the autocomplete suggestions. In the real world you might want to replace this file with an API call to provide the data:

export const autoCompleteData = [
    "Asparagus",
    "Beetroot",
    "Broccoli",
    "Cabbage", 
    "Carrot", 
    "Cauliflower", 
    "Celery", 
    "Corn", 
    "Eggplant", 
    "Lettuce", 
    "Mushroom", 
    "Onion", 
    "Parsnip", 
    "Pea", 
    "Potato", 
    "Pumpkin", 
    "Radish", 
    "Spinach",    
    "Tomato", 
    "Turnip", 
  ];

Then create a new AutoComplete.js file in the /src folder with the following structure:

import { useState } from "react";

const AutoComplete = ({ data }) => {
  return (
    <div className="autocomplete">
      <input type="text" />     
    </div>
  );
};

export default AutoComplete;

We can now start building the component starting with the State variables:

const [suggestions, setSuggestions] = useState([]);
const [suggestionIndex, setSuggestionIndex] = useState(0);
const [suggestionsActive, setSuggestionsActive] = useState(false);
const [value, setValue] = useState("");

suggestions – array of suggestions to used populate the autocomplete menu.
suggestionIndex – index of the active suggestion used for keyboard navigation.
suggestionsActive – used to toggle the visibility of the autocomplete suggestions.
value – autocomplete suggestion that the user has selected.

The autocomplete suggestions need to be triggered while the user is typing a query. For this we’ll use an onChange event that monitors for changes to the input field. We then filter the autoCompleteData to find the relevant suggestions:

const handleChange = (e) => {
  const query = e.target.value.toLowerCase();
  setValue(query);
  if (query.length > 1) {
    const filterSuggestions = data.filter(
      (suggestion) => suggestion.toLowerCase().indexOf(query) > -1
    );
    setSuggestions(filterSuggestions);
    setSuggestionsActive(true);
  } else {
    setSuggestionsActive(false);
  }
};

Users will also need to be able to click an autocomplete suggestion and have that suggestion populate the input field. For this we’ll need to add the following function that is triggered by an onClick event:

const handleClick = (e) => {
  setSuggestions([]);
  setValue(e.target.innerText);
  setSuggestionsActive(false);
};

To allow users to navigate between each of the suggestions and also select a suggestion using the keyboard we’ll use a keyDown event to listen for when either the up/down arrow and enter keys are pressed:

const handleKeyDown = (e) => {
  // UP ARROW
  if (e.keyCode === 38) {
    if (suggestionIndex === 0) {
      return;
    }
    setSuggestionIndex(suggestionIndex - 1);
  }
  // DOWN ARROW
  else if (e.keyCode === 40) {
    if (suggestionIndex - 1 === suggestions.length) {
      return;
    }
    setSuggestionIndex(suggestionIndex + 1);
  }
  // ENTER
  else if (e.keyCode === 13) {
    setValue(suggestions[suggestionIndex]);
    setSuggestionIndex(0);
    setSuggestionsActive(false);
  }
};

For the actual suggestions we’ll create a Suggestions component:

const Suggestions = () => {
  return (
    <ul className="suggestions">
      {suggestions.map((suggestion, index) => {
        return (
          <li
            className={index === suggestionIndex ? "active" : ""}
            key={index}
            onClick={handleClick}
          >
            {suggestion}
          </li>
        );
      })}
    </ul>
  );
};

This outputs the suggestions array into an unordered HTML list. Note we’ve added a conditional active class which will allow us to style the list item the user has selected using the up/down arrows on the keyword. You can add the following CSS to see this in action once the component is complete:

.active {
  background: lightgray;
}

To complete the component update the return statement as follows:

return (
  <div className="autocomplete">
    <input
      type="text"
      value={value}
      onChange={handleChange}
      onKeyDown={handleKeyDown}
    />
    {suggestionsActive && <Suggestions />}
  </div>
);

Here’s how the completed AutoComplete component should look:

import { useState } from "react";

const AutoComplete = ({ data }) => {

  const [suggestions, setSuggestions] = useState([]);
  const [suggestionIndex, setSuggestionIndex] = useState(0);
  const [suggestionsActive, setSuggestionsActive] = useState(false);
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    const query = e.target.value.toLowerCase();
    setValue(query);
    if (query.length > 1) {
      const filterSuggestions = data.filter(
        (suggestion) =>
          suggestion.toLowerCase().indexOf(query) > -1
      );
      setSuggestions(filterSuggestions);
      setSuggestionsActive(true);
    } else {
      setSuggestionsActive(false);
    }
  };

  const handleClick = (e) => {
    setSuggestions([]);
    setValue(e.target.innerText);
    setSuggestionsActive(false);
  };

  const handleKeyDown = (e) => {
    // UP ARROW
    if (e.keyCode === 38) {
      if (suggestionIndex === 0) {
        return;
      }
      setSuggestionIndex(suggestionIndex - 1);
    }
    // DOWN ARROW
    else if (e.keyCode === 40) {
      if (suggestionIndex - 1 === suggestions.length) {
        return;
      }
      setSuggestionIndex(suggestionIndex + 1);
    }
    // ENTER
    else if (e.keyCode === 13) {
      setValue(suggestions[suggestionIndex]);
      setSuggestionIndex(0);
      setSuggestionsActive(false);
    }
  };

  const Suggestions = () => {
    return (
      <ul className="suggestions">
        {suggestions.map((suggestion, index) => {
          return (
            <li
              className={index === suggestionIndex ? "active" : ""}
              key={index}
              onClick={handleClick}
            >
              {suggestion}
            </li>
          );
        })}
      </ul>
    );
  };

  return (
    <div className="autocomplete">
      <input
        type="text"
        value={value}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
      />
      {suggestionsActive && <Suggestions />}
    </div>
  );

};

export default AutoComplete;

Finally we can update App.js to load the component and the data:

import Autocomplete from "./AutoComplete";
import { autoCompleteData } from "./data.js";

function App() {
  return (
    <div className="App">
      <Autocomplete data={autoCompleteData} />
    </div>
  );
}

export default App;

That’s all for this tutorial, you should now have a working autocomplete search component that can easily be dropped into a React application. You can get the full source code for this tutorial and all tutorials published on w3collective from GitHub.

Build a tab component using Alpine.js

Michael Burrows — Thu, 04 Aug 2022 06:50:49 +0000

Welcome to another in our series of Alpine.js tutorials. Today we’ll be building a tab component that displays different content based on an active tab. If you’ve got working knowledge of JavaScript then this component is quite straight forward to build using Alpine.js.

Let’s get started by creating a HTML file and loading Alpine.js via CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alpine.js Tab Component</title>   
    <script defer src="https://unpkg.com/alpinejs"></script> 
  </head>
  <body> 
    <!-- alpine.js tab component -->   
  </body>
</html>

Then add a wrapper <div> for the component:

<div x-data="{ tab: 'description' }">
 <!-- nav -->
 <!-- content -->
</div>

x-data is used to define a chunk of HTML as an Alpine component. It also provides the reactive data for that component to reference, in this case the active tab. We’ll be building a 3 tab layout in which we want a “description” tab to be active on page load. To do this we’ve defined “description” as the default value in the x-data.

Next we’ll add the 3 tabs which are standard anchor elements within a <nav> element:

<nav>
  <a :class="{ 'active': tab === 'description' }" x-on:click.prevent="tab = 'description'" href="#">Description</a>
  <a :class="{ 'active': tab === 'dimensions' }" x-on:click.prevent="tab = 'dimensions'" href="#">Dimensions</a>
  <a :class="{ 'active': tab === 'reviews' }" x-on:click.prevent="tab = 'reviews'" href="#">Reviews</a>
</nav>

On the anchor elements we’re toggling an active class based on the tab value matching what’s currently set in the x-data directive. The tab value is updated when clicked using the x-on:click directive.

Finally let’s add <div> elements for the content of each tab:

<div x-show="tab === 'description'">
  <h3>Description</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus
    facilisis tristique. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. 
  </p>
</div>
<div x-show="tab === 'dimensions'">
  <h3>Dimensions</h3>
  <p>
    Donec placerat ullamcorper sodales. Nam congue justo sit amet erat luctus
    faucibus.
  </p>
</div>
<div x-show="tab === 'reviews'">
  <h3>Reviews</h3>
  <p>
    Sed hendrerit imperdiet accumsan. Nunc venenatis sit amet diam vel rutrum.
    Quisque interdum dui et molestie tristique.
  </p>
</div>

The x-show directive checks the current tab value and will only display the <div> when the corresponding tab value matches. If you now view this page in a browser you should be able to click each of the anchor elements and toggle the visibility of the corresponding content.

That’s all for this tutorial, you should now have a functioning tab component that just requires some CSS to match with you web page or application. If you’re interested in exploring some of the code used in this tutorial check out the offical Alpine.js documentation which can be found here.