DEV Community: Khwilo Kabaka

Getting started with forms in React

Khwilo Kabaka — Mon, 11 May 2020 05:31:53 +0000

Overview

Forms are an essential way of how users get to interact with software applications. Form elements facilitate operations such as collecting data and enabling the control of a user interface e.g displaying alerts, viewing menu items, interacting with dialog boxes, etc. This tutorial will guide you on the steps one takes to collect data from form fields using React.

The form elements we are going to look at are:

input - creates form controls to collect user data
select - provides a list of predefined menu options
option - represents an item on a select or datalist element

Introduction

Form elements typically consist of various attributes that facilitate the process of collecting and manipulating data. Some of the attributes on the form elements include:

id - gives a unique identifier for the form field
type - identifies the input category
name - defines the title the form field will be identified by
value - specifies the initial value

Listening to form events

There are a number of events that are triggered by the actions of users when interacting with forms. The change event is the event type we are going to listen to. This event is triggered when the value of a form element has been altered by a user. In order to tap into the change event, we provide our own custom event handling function which is mapped to the onchange property. This function has the following signature:

The event parameter on the event handling function is a wrapper around the browser native event. This event is an object which contains various properties one of which is the target. The target property refers to the object in which an event was dispatched.

For example, if the email input field dispatched the change event then it will be the target. This means that we can access the values of the attributes that are attached to the input field. In JavaScript we can store the values in variables as follows:

Handling form data

We need to determine the structure of the data that a user will be able to use on our form. In this guide, we are going to use the following definitions to store the form data.

username - text
age - number
email - text
password - text
languages - an array of objects
industry - text
country - text

Now that we have laid out the structure of the data we are going to collect from the users, we need to define the structure in code and also determine how to store the data.

Note that 'languages' is a property that represents the checkbox values. When fetching values from the checkbox elements the values are sent as key, value pairs. That is why the property is defined as an array of objects. The attributes of the checkbox are already defined as options one can choose from. The field property represents the radio button value.

For state management purposes, the form values are stored as an object. The initial value is provided so that on the first render, the fields are not undefined and thus satisfy that we are able to maintain our own state and update it as desired.

We will utilize the use of the React useState hook which gives us the capability to add state to our functional component:

Now that we have defined the initial state variable and its values, we can create the form elements. The username, age, email, and password input fields are defined in code as follows.

The attributes of the input fields are mapped to their respective formValues object property. It is important to note that for each input field, we provide an onchange property with an event handler function. The provided event handler function, handleChange has not been defined yet (It will be defined later). For every form field that provides a value attribute, an onchange event handler function is required, otherwise, the form field will be a readonly field.

The event handler function requires that an event parameter is passed to it. This function is where we will update the formValues state by getting the name and value of the target form element that the change event has been fired and placing them as key, value pairs in the formValues object.

The 'industry' field is an option where one can choose from a collection of radio button values. In order to get the given field value a user has selected, we set the checked attribute of the radio button to the result of calculating the comparison of the radio button state value (in our case it will be formValue.industry) to a given value of the same name. If the expression evaluates to true, then the checked property will be true otherwise it will be false.

The languages will be represented as checkbox elements:

The 'languages' property contains an array of objects. These objects represent the various checkbox elements' field attributes. Since the checkbox elements are stored in an array, we need to check if the input field is a checkbox before updating its state. If the input field is a checkbox, fetch the reference to the languages state property and create a new array of language objects by looping through all the properties in the languages array to see if the language's value property is the same as the one on the event.target.value. Later, set its isChecked property to the checked value of event.target.checked. Then, update the formValues state with appropriate values.

The country field represents one of an individual option in a select element. The select element expects a name, id, value, and an onChange event handler.

The logic to handle the event for the select element is the same as the one for the inputs of type name, age, email, and password defined earlier. On the first render, the country value will be set to an empty string. When selecting a given option the country value will be updated to match the value of the option field.

Conclusion

We have now completed implementing the logic for working with forms in React. There are various improvements to be done on the form. For instance, refactoring the code and putting the various form elements in their own respective components. To view the complete code with the refactoring done, you can check out this repository:

khwilo / react-forms-demo

Get started with working with forms in React

Get started with using forms in React

This repository contains code for my tutorial on working with forms in React. It's a high level overview on how one get started with handling events and data in forms. To find the tutorial for this project visit this link: Getting started with forms in React.

Demo

View on GitHub

Code Kata: Calculate the sum of consecutive odd numbers

Khwilo Kabaka — Thu, 20 Feb 2020 16:59:10 +0000

Problem

Given the triangle of consecutive odd numbers:

             1
          3     5
       7     9    11
   13    15    17    19
21    23    25    27    29
...

Calculate the row sums of this triangle from the row index (starting at index 1)

Before looking at the solution, try solving the problem by yourself first.

Solution

In order to solve the above problem, we need to look at common patterns that the above triangle produces. The first one that I arrived at is the first value of each row follows a particular pattern. To get the first value of a particular row, we multiply the row by itself, then we subtract the result of removing the value 1 from the row. If n is the row then to get the starting number we will use the following expression (n * n) - (n - 1). From this formulae, we can get the odd numbers that are in a particular row by looping n times and adding the values to an array data structure. We get the odd number by adding 2 to the current starting number value. The array data structure is used here to store the values and calculate the resultant sum.

Refactoring the code

The above code logic can be reduced to one line. If you look keenly, the sum of the values in each row results in finding the cube of the particular row. The logic will resemble this:

That is all for the challenge. If you have any questions or suggestions, feel free to ask.

Display a user's password on input

Khwilo Kabaka — Thu, 13 Feb 2020 15:36:41 +0000

When designing forms, it's important to let a user correct his/her password entry on input. There are various ways to achieve this. One solution is to provide a duplicate password input field for the user to confirm the password he/she had entered in the previous input. This may prove cumbersome for the user when asked to type the same password twice and it may also degrade the user experience. To improve the user experience, we may like to provide a choice for one to reveal his/her password.

The design of the form input field has to have a button to toggle between the states: show and hide password. In order to achieve this, append a button with a text or an icon to display the two states in your HTML form:

<div class="form__group">
  <label for="password">Password</label>
  <section class="section__input">
    <input
      type="password"
      name="password"
      id="password"
      class="form__control"
    >
    <button class="toggle-displayBtn">show<button>
  </section>
</div>

Style the forms so that they appear adjacent to each other:

.section__input {
  display: flex;
}

.form__control {
  flex: 1;
}

Adding a flex of 1 ensures the input element takes as much space as possible, the toggle button takes the remaining space.

To perform the toggling between the two states, add the following code to your JavaScript file:

const passwordInput = document.getElementById('password');
const togglePasswordDisplayBtn = document.querySelector('.toggle-displayBtn');
let revealPassword = false;

togglePasswordDisplayBtn.addEventListener('click', (event) => {
  revealPassword = !revealPassword;

  if (revealPassword) {
    togglePasswordDisplayBtn.textContent = 'hide';
    passwordInput.type = 'text';
  } else {
    togglePasswordDisplayBtn.textContent = 'show';
    passwordInput.type = 'password';
  }
});

The above code gets the references to the password input field and the button to toggle between the show and hide states and declares a variable to contain the status of the toggle button. Then we listen to the click event on the toggle button. The value of revealPassword is changed between true or false when the click event on the button is triggered. If revealPassword is true, change the toggle button text content to 'hide' and change the password input type to be text. When revealPassword is false, change the toggle button text content to 'show' and change the password input type to be password.

The demo:

The code for this demo can be found by visiting this URL: https://github.com/khwilo/password-reveal

Get started with making your Angular web app offline-capable

Khwilo Kabaka — Fri, 07 Feb 2020 04:45:20 +0000

Introduction

With the advancement of web technologies, there is a need for web applications to take advantage of new modern features that have been added in the browser in order to enhance the user experience. This concept is particularly known as progressive enhancement.

One of those requirements is the ability to enable web applications to work reliably across various network connections. This means that a web application is able to display some data even when there's no network access.

In this tutorial, we are going to through the minimum requirements to make an Angular web application offline capable. To enable this feature, we are going to make use of a service worker. A service worker is a script that acts as a network proxy by intercepting HTTP requests and usually runs in the background. A service worker can be used to cache static and dynamic files. It can also be used to provide fallback content when a network request fails.

Project Setup

To get started, we are going to use an already created Angular application. The web application displays a countries' information and enables one to filter a country by its region. You can view the live site from this URL: https://countries-info.netlify.com/.

Head to this URL, https://github.com/khwilo/countries-info and fork the repository. Once you have forked the repository switch to the branch offline-support-start.

git checkout offline-support-start

Set up Angular Service Worker

To enable the use of a service worker, install the angular service worker package. On your terminal execute the following command:

ng add @angular/pwa

This command performs the following operations:

Installs @angular/pwa and @angular/service-worker packages
Generates the application icons to be used when you decide to add the application to the home screen.
Creates a manifest file that is used for making the application installable. The generated file is named as manifest.webmanifest.
Creates the service worker configuration file. The file is named as ngsw-config.json This file defines resources to be stored in the cache.
On the index.html file, a reference to the manifest file and the application theme color is added.
The manifest file is added to the assets array in the angular.json file.
The ServiceWorkerModule is imported in the app.module.ts file. You'll notice that a service worker is registered but the reference to the file cannot be found yet. The file can be found in the dist folder when you build the application for production as ngsw-worker.js.

In the web application manifest file (manifest.webmanifest) file change the application name and short name to your desired values. In this case, I used the following values:

{
  "name": "Display info about a country",
  "short_name": "CountryInfo",
  ...
}

Test the application

To test the application if the service worker works, we are going to use a separate HTTP server to serve the application. Using ng serve with service workers does not work. For this reason, use another server. In this context, we are going to use http-server.

To install http-server, execute the following command on your terminal window:

npm install http-server --save

Build the project for production using this command:

ng build --prod

On your package.json file, write a script command to start the application. Add the following script command to this:

{
  ...
  "scripts": {
    ...
    "startPWA": "http-server -p 8080 -c-1 dist/countries-info"
    ...
  }
}

The above command configures the port number to 8080, disables caching and serves the files from the dist folder.

To start the application, run this command on your terminal window:

npm run startPWA

Now, you can visit the URL http://localhost:8080 on your Google Chrome browser. To check if the service worker has been installed, open the developer tools on the browser by using the command CTRL + SHIFT + I on your PC, and open the Application tab. Select the Service Workers tab from the sidebar to see if the service worker has been installed. You can simulate offline mode by clicking on the offline checkbox and reload the page.

When the application is online it appears as follows:

While offline, this is what is displayed:

You'll notice that while the network is not available (when offline), the application still displays a minimal UI instead of the custom error display page from the browser. The reason for this is that some files are set to be cached by default in the service worker configuration file. When you view the ngsw-config.json file, you can see that the following types of files are set to be cached:

/favicon.ico - Favicon image
/index.html - index.html file
/manifest.webmanifest - the application web manifest
/*.css - CSS files
/*.js - JavaScript files
/assets/** - Files under assets directory
Static images and fonts

One thing to keep in mind is that only static files are being cached. Dynamic files such as fonts and data from the network are not being cached yet. You can inspect this behavior from the network tab of your chrome developer tools:

On the size column, you can view the files which are being intercepted by the service worker and being loaded from the cache.

Now the application can still display some data when offline. In a separate article, I am going to demonstrate how to create a custom service worker file and add dynamic caching.

Conclusion

Thank you for your time. For any queries, do not hesitate to ask.

How to create full-screen drawer navigation in HTML, CSS, and JavaScript

Khwilo Kabaka — Fri, 24 Jan 2020 10:31:07 +0000

Introduction

In this guide, we are going to learn how to create a navigation menu that overlays other elements on a page. We will layout the structure of the page first using HTML, add styling using CSS and then add interactivity (opening and closing of the navigation drawer) using JavaScript. Let's get started.

Document Structure

First, we will add the structure of the page. In the body tag of your HTML, add the header contents as follows:

<header class="header">
  <div class="logo">
    <h1 class="logo__text">Logo</h1>
  </div>
  <button class="menu-toggle" aria-label="Menu toggle button">
    <span class="hamburger"></span>
  </button>
  <nav class="nav">
    <ul class="nav__list">
      <li class="nav__list-item">
        <a href="#home" class="nav__link">Home</a>
      </li>
      <li class="nav__list-item">
        <a href="#about" class="nav__link">About</a>
      </li>
      <li class="nav__list-item">
        <a href="#projects" class="nav__link">Project</a>
      </li>
      <li class="nav__list-item">
        <a href="#contact" class="nav__link">Contact</a>
      </li>
    </ul>
  </nav>
</header>

The header content has a logo, a button representing the hamburger menu and navigation links. Since the button element doesn't contain any text, it's important to add an aria-label associated with it.

The remaining structure will be the main content where one has to navigate to:

<main class="main">
  <div class="main__home" id="home">
    <h2 class="main__section-title">Home</h2>
    <p class="main__section-content">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia 
      magnam quod iure ex unde reiciendis adipisci sint saepe nam nostrum 
      quibusdam sit, possimus nihil expedita. Consequatur, consequuntur 
      sint. Necessitatibus, recusandae? Lorem ipsum dolor sit, amet 
      consectetur adipisicing elit. Asperiores, dolorum! Atque, nam vitae 
      qui ab commodi ullam. Mollitia expedita a quae fugit obcaecati nam 
      amet possimus magni natus, sequi vitae. Lorem ipsum, dolor sit amet 
      consectetur adipisicing elit. Possimus, nobis consectetur alias odit 
      laboriosam fugiat voluptas, molestias vitae itaque excepturi 
      perferendis necessitatibus consequuntur deleniti. Quas incidunt 
      officia provident reiciendis sed!
    </p>
  </div>
  <div class="main__about" id="about">
    <h2 class="main__section-title">About</h2>
    <p class="main__section-content">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia 
      magnam quod iure ex unde reiciendis adipisci sint saepe nam nostrum 
      quibusdam sit, possimus nihil expedita. Consequatur, consequuntur 
      sint. Necessitatibus, recusandae? Lorem ipsum dolor sit, amet 
      consectetur adipisicing elit. Asperiores, dolorum! Atque, nam vitae 
      qui ab commodi ullam. Mollitia expedita a quae fugit obcaecati nam 
      amet possimus magni natus, sequi vitae. Lorem ipsum, dolor sit amet 
      consectetur adipisicing elit. Possimus, nobis consectetur alias odit 
      laboriosam fugiat voluptas, molestias vitae itaque excepturi 
      perferendis necessitatibus consequuntur deleniti. Quas incidunt 
      officia provident reiciendis sed!
    </p>
  </div>
 <div class="main__projects" id="projects">
    <h2 class="main__section-title">Projects</h2>
    <p class="main__section-content">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia 
      magnam quod iure ex unde reiciendis adipisci sint saepe nam nostrum 
      quibusdam sit, possimus nihil expedita. Consequatur, consequuntur 
      sint. Necessitatibus, recusandae? Lorem ipsum dolor sit, amet 
      consectetur adipisicing elit. Asperiores, dolorum! Atque, nam vitae 
      qui ab commodi ullam. Mollitia expedita a quae fugit obcaecati nam 
      amet possimus magni natus, sequi vitae. Lorem ipsum, dolor sit amet 
      consectetur adipisicing elit. Possimus, nobis consectetur alias odit 
      laboriosam fugiat voluptas, molestias vitae itaque excepturi 
      perferendis necessitatibus consequuntur deleniti. Quas incidunt 
      officia provident reiciendis sed!
    </p>
 </div>
 <div class="main__contact" id="contact">
     <h2 class="main__section-title">Contact</h2>
    <p class="main__section-content">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia 
      magnam quod iure ex unde reiciendis adipisci sint saepe nam nostrum 
      quibusdam sit, possimus nihil expedita. Consequatur, consequuntur 
      sint. Necessitatibus, recusandae? Lorem ipsum dolor sit, amet 
      consectetur adipisicing elit. Asperiores, dolorum! Atque, nam vitae 
      qui ab commodi ullam. Mollitia expedita a quae fugit obcaecati nam 
      amet possimus magni natus, sequi vitae. Lorem ipsum, dolor sit amet 
      consectetur adipisicing elit. Possimus, nobis consectetur alias odit 
      laboriosam fugiat voluptas, molestias vitae itaque excepturi 
      perferendis necessitatibus consequuntur deleniti. Quas incidunt 
      officia provident reiciendis sed!
    </p>
 </div>
</main>

The main content contains navigation target elements having a stub text.

Styling the contents

Now will be the time to add style to the contents. First, we will add some basic styling:

@import url('https://fonts.googleapis.com/cssfamily=Lato:400,700|Pacifico&display=swap');

:root {
  font-size: calc(0.5em + 1vw);

  --clr-cream: #f6e7c1;
  --clr-light-orange: #ffa25b;
  --clr-orange: #f4722b;
  --clr-dark: #3e3e3e;
  --clr-white: #fff;

  --fw-regular: 400;
  --fw-bold: 700;

  --fs-heading-1: 3em;
  --fs-heading-2: 1.5em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--clr-cream);
  color: var(--clr-dark);
  font-family: 'Lato', sans-serif;
  margin: 0;
}

h1 {
  margin: 0;
}

.logo__text {
  font-family: 'Pacifico', cursive;
  font-size: var(--fs-heading-1);
  color: var(--clr-orange);
}

The above code snippet adds a responsive font, the font families to use and also adds a color palette. To distinguish the main content details, add the following styling:

.main {
  width: 80%;
  margin: 0 auto;
}

.main > * { /* Target direct descendants of the .main class */
  padding: 1em;
}

.main > * + * { /* Target adjacent direct descendants of the .main class */
  margin-top: 1em;
}

.main > *:nth-child(odd) { /* Targets the odd children of the .main class */
  background-color: var(--clr-dark);
}

.main__section-title { /* Section heading */
  font-size: var(--fs-heading-2);
  color: var(--clr-light-orange);
  margin: 0;
  padding: 0;
  display: inline;
  text-decoration: underline;
}

.main__section-content { /* Section content */
  padding: 0;
  margin-top: 0.5em;
}

.main > *:nth-child(odd) > .main__section-title { /* Odd main element child heading */
  background-color: var(--clr-dark);
}

.main > *:nth-child(odd) > .main__section-content { /* Odd main element child content */
  background-color: var(--clr-dark);
  color: var(--clr-white);
}

Style the navigation drawer

Make the header element have a display of flex and let the navigation element position be fixed and bring it to the front by declaring a z-index of 1.

.header {
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--clr-dark);
  z-index: 1;
}

Style the navigation item list by removing the default style type for list items and centering the items on the page. Adding a margin 0 ensures that the background color covers the entire page.

.nav__list {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  background-color: var(--clr-dark);
  margin: 0;
}

To make the navigation links visible, we are going to make them have a white color and a font-size of 1.5em. When a user hovers over the links, make the links to have a color of light orange and underline the text. On focus, the links will have an orange color:

.nav__link {
  text-decoration: none;
  padding: 1em 2em;
  background-color: var(--clr-dark);
  color: var(--clr-white);
  font-size: var(--fs-heading-2);
  font-weight: var(--fw-bold);
  padding: 0;
  margin: 0;
}

.nav__link:hover {
  text-decoration: underline;
  color: var(--clr-light-orange);
}

.nav__link:focus {
  color: var(--clr-orange);
}

We are then going to add a hamburger menu using CSS. Position the button element to the top right of the page. Bring it to the front by adding a z-index of 2. Add a background of transparent and remove its border:

.menu-toggle {
  padding: 1.5em;
  background: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 2;
}

The hamburger is wrapped inside a span in the button element. The span is displayed as a block element. Declare a relative position to the span since we are going to add 3 horizontal bars to it.

.hamburger {
  display: block;
  position: relative;
}

Declare the width, height and background color of the horizontal bars:

.hamburger,
.hamburger::before,
.hamburger::after {
  width: 2.5em;
  height: 2px;
  background-color: var(--clr-orange);
}

The pseudo-elements :before and :after of the .hamburger class represents the bottom and top horizontal bars.

For the to bottom and top horizontal bars, let them have an absolute positioning with a left and right of zero.

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
}

Move the bottom horizontal bar 8px from the top and the top horizontal bar to be 8px from the bottom of the middle horizontal bar.

.hamburger::before {
  top: 8px;
}

.hamburger::after {
  bottom: 8px;
}

Add interactivity

Hide the navigation drawer by moving it further to the right along the x-axis.

.nav {
  transform: translateX(100%);
}

Get the reference of the toggle menu button using JavaScript and add a class of nav-open to the body when the button is clicked.

const toggleMenu = document.querySelector('.menu-toggle');

toggleMenu.addEventListener('click', () => {
  document.body.classList.toggle('nav-open');
});

When the navigation drawer is open, we display the navigation menu by moving it to the view using CSS. Then, have the menu toggle button to be fixed to the top when scrolling.

.nav-open .nav {
  transform: translate(0);
} 

.nav-open .menu-toggle {
  position: fixed;
}

Change the hamburger menu to an X character by rotating the horizontal bars. The hamburger menu is rotated to 45 degrees. The bottom horizontal bar is rotated to 90 degrees and then is aligned by moving it 8px away from the x-axis so that the X character is displayed. This because we declared it to be 8px from the top. The top horizontal bar is set to have an opacity of zero.

.nav-open .hamburger {
  transform: rotate(45deg);
}

.nav-open .hamburger::before {
  transform: rotate(90deg) translateX(-8px);
}

.nav-open .hamburger::after {
  opacity: 0;
}

Currently, when clicking the navigation links the URL changes but we are not being taken to the desired section. To do so, we need to remove the class nav_open from the body when the links are clicked as follows:

const navigationLinks = document.querySelectorAll('.nav__link');

navigationLinks.forEach(link => {
  link.addEventListener('click', () => {
    document.body.classList.remove('nav-open');
  });
});

All navigation links references are fetched from the document then we loop over each link and remove the class nav-open when a link is clicked.

Now the navigation drawer is fully functional.

Bonus

We are going to add simple animation for good user experience. When scrolling, instead of a straight jump to an individual item, make the scroll behavior appear to be gradual. The navigation slides in from the left when the hamburger menu is clicked. The hamburger transitions to an X by accelerating on easing in and decelerates on easing out.

html {
  scroll-behavior: smooth;
}

.nav {
  transition: transform 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.hamburger::before,
.hamburger::after {
  transition: transform 300ms ease-in-out;
}

The source code of the application can be found here https://github.com/khwilo/drawer-navigation. Access the live site using the link https://drawer-navigation.netlify.com/.