Forem: michael-neis

Some Helpful Ruby Gems

michael-neis — Fri, 07 Jan 2022 21:57:21 +0000

If you have started working with Ruby or Ruby on Rails, you are probably familiar with the fact that the language itself was built for making a programmer's life easier. You may also already be familiar with some of the helpers that you can install to make it even easier. I've discovered a handful of helpers, or 'gems' as they are called in Ruby, as I've worked in the language, and hopefully some of these gems can prove helpful to you.

Byebug and Pry

As far as debugging tools go, the Byebug and Pry are two of the best gems I have found. They are used in different contexts, but for all intents and purposes, including them in your code will halt an operation and allow you to access whatever point in the code you halted within your terminal with a REPL.

For Pry, you simply need to install it with gem install pry and make sure the gem is included in your gemfile. Pry is considered an IRB alternative to allow developers runtime access within their console. Here's an example of it's usage:

require 'pry'

class Greet
   greeting = 'Hello'
   person = 'Bob'
   puts '#{greeting}, #{person}!'
end

binding.pry

In order to use Pry, first we must require it with require 'pry'. Now, wherever we decide to place binding.pry will be the point at which our code halts. In this case, running this file will open a REPL in our terminal with the Greet class fully loaded, so we are able to access it and see if it is operating how it should. Alternatively, we could place the pry here:

require 'pry'

class Greeting
   phrase = 'Hello'
   binding.pry
   person = 'Bob'
   puts '#{greeting}, #{person}!'
end

Now when we run the file, the code will halt within the class Greeting, and once again we will have access to a REPL. In this case, however, because person has not yet been assigned, we will only have access to phrase within our terminal. This is a helpful way to break apart any classes or methods that may be failing to find exactly where it is that our code is bugged.

Byebug works in a very similar way, but is used for adding bindings to files that are being invoked in an active server. Install it with gem install byebug and make sure it is included in your gemfile. Byebug is extremely helpful for debugging Ruby files that are being called upon by front end languages such as JavaScript. Let's say we had a greetings_controller that was being used to handle fetch requests to the '/greetings' POST route. Here's an example of how we could debug it:

class GreetingsController
def create
   new_greeting = User.create(phrase: params[:phrase], person: 
   params[:person])
   byebug
   render json: new_greeting, status: :created
end
end

Right now, the byebug would halt the code and open a terminal, in which you would be able to access new_greeting. But let's say there's a problem with new_greeting, for some reason it cannot be defined, and we still have an error. We could add our byebug a little earlier:

class GreetingsController
def create
   byebug
   new_greeting = User.create(phrase: params[:phrase], person: 
   params[:person])
   render json: new_greeting, status: :created
end
end

Now, we are able to check in our terminal what exactly are being passed in with params. If the data object does not contain phrase and person key value pairs, we know that something must be wrong with the way data is being passed. Byebug is incredibly helpful in this way in determining whether or not the error with the data is happening on the front end or the back end.

Faker

If you are working on a new project in Ruby and want to seed it with data, but don't have the time or energy to manually seed every piece of data, Faker is a great gem. Install it with gem install faker, and include it in your gemfile.

Faker is a gem with an impressive library of data that you are able to access at random when invoking it in your seed data. From random names, to pop culture references, to game titles and more, Faker is able to fill your database with all kinds of data. Here's a few examples of it's use:

Faker::Movies::Lebowski.quote
Faker::Music::Prince.unique.song
Faker::Games::Minecraft.biome

As you could imagine, each of these lines pulls a Big Lebowski quote, Prince song, and Minecraft biome at random from the Faker database. Using a unique tag in front of the Prince song will ensure that no song is used twice in the seeding. Running .clear will clear the uniqueness tag, allowing repeats again.

Hopefully these few gems will help in your progress as a Ruby developer. New gems are always being created, so keep an eye out for gems that you might find helpful.

Sources

Faker
Pry
Byebug

Cerealizing with Serializers

michael-neis — Fri, 17 Dec 2021 23:24:32 +0000

If you are reading this, you might, like me, be relatively new to Ruby on Rails, and are still getting familiar with some of the features it has to offer. Personally, when I first heard about serializers, they seemed a bit redundant. We are already handling what we are rendering in our controller, so why add an extra layer? While it may seem like extra work in a small application, as you expand your database, you will start to realize that sorting through your data in the controllers becomes increasingly difficult.

For now, let's just take a look at a smaller application to understand the basics. Let's say we've built out the basics for a database for cereal companies, and we want to show those cereals to users buying them online (for now, we won't worry about creating users, we will just focus on the cereal side). Right now, we aren't using serializers, we just have a controller and a model for Company, CEO, Charity, and of course, Cereal. For our purposes, a Company has_many CEOs, Charities and Cereals.

We just have some simple models for now:

class Company < ApplicationRecord
  has_many :ceos
  has_many :charities
  has_many :cereals
end

class Ceo < ApplicationRecord
  belongs_to :company
end

class Charity < ApplicationRecord
  belongs_to :company
end

class Cereal < ApplicationRecord
  belongs_to :company
end

Alright, now let's take a look at our routes.rb.

Rails.application.routes.draw do
  resources :cereals
  resources :companies
  resources :charities
  resources :ceos
end

Using resources will automatically include all RESTful routes, which means we can define index and show in our cereal controller. (You should typically only include routes that you intend on using, but for now, we'll leave it as is)

class CerealsController < ApplicationController

    def index
        cereals = Cereal.all
        render json: cereals
    end

    def show
        cereal = Cereal.find(params[:id])
        render json: cereal
    end

end

Note: using a .find in the show route on its own is not best practice, because if an incorrect id is provided, there will be no rescue from the error. If you would like to know more about handling errors, check out the Rails documentation for info on error handling and validations. Since we are only focused on setting up serializers, we'll skip this for now.

Ok, so as it stands right now, let's take a look at what returns to us on a GET request to '/cereals'.

[
    {
        "id": 1,
        "name": "Cheerios",
        "company_id": 1,
        "price": 3.49,
        "ingredients": "*list of ingredients*",
        "time_to_make": 1.3,
        "transportation_schedule": "*list of schedule details*",
        "expiration_date": "Jan 12, 2022",
        "warehouse_location": "Cleveland",
        "created_at": "2021-12-17T17:55:35.618Z",
        "updated_at": "2021-12-17T17:55:35.618Z"
    },
    {
        "id": 2,
        "name": "Chex",
        "company_id": 1,
        "price": 3.99,
        "ingredients": "*list of ingredients*",
        "time_to_make": 0.9,
        "transportation_schedule": "*list of schedule details*",
        "expiration_date": "Jan 10, 2022",
        "warehouse_location": "Des Moines",
        "created_at": "2021-12-17T17:55:35.633Z",
        "updated_at": "2021-12-17T17:55:35.633Z"
    },
    {
        "id": 3,
        "name": "Lucky Charms",
        "company_id": 1,
        "price": 4.49,
        "ingredients": "*list of ingredients*",
        "time_to_make": 1.5,
        "transportation_schedule": "*list of schedule details*",
        "expiration_date": "Jan 02, 2022",
        "warehouse_location": "Minneapolis",
        "created_at": "2021-12-17T17:55:35.648Z",
        "updated_at": "2021-12-17T17:55:35.648Z"
    }
]

It works! But that is a lot of data that we don't necessarily need. If the request is being made by a user that is hoping to buy a box of cereal, there is definitely some data that can be left out. When you are buying cereal, you don't need to know the id of that particular box of cereal, how long it took to make, the transportation schedule, the warehouse it is stored in, or when it was added or updated to the database. What we could do is specify what parts of the hash we want rendered in our controller, but we would have to repeat that process on any and every request we make as we continue to build out the application. What we can do instead is use serializers. To get started, we have to install the serializers gem.

bundle add active_model_serializers

This will add the gem to your gemfile and install it at the same time. Now we can create a serializer for cereal with rails g serializer cereal. You will see that this automatically create a serializers folder in your application and add a cereal_serializer to it. I know what you may be thinking, "Generating serializers for all of my models sounds exhausting and time consuming!" And if you do it the way we just did, you'd be right. But, a bonus to the serializer gem is that if you install it at the beginning of your application, before creating any of your migrations, models, or controllers, running rails g resource cereal will also create a serializer so that you don't have to. By default, it will even include any relationships and attributes that you added to your generation. Since we didn't do that this time around, this is what our serializer looks like right now:

class CerealSerializer < ActiveModel::Serializer
  attributes :id
end

Because it only includes the attribute :id, the only thing that will be rendered it the cereal id. Taking a look at our GET request again, we see:

[
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
]

Pretty cool, but still not the information we want to show our buyers. Looking at all of the data from the previous request, the realistic attributes we might want to include are name, company_id, price, ingredients, and expiration date. So let's do that.

class CerealSerializer < ActiveModel::Serializer
  attributes :name, :company_id, :price, :ingredients,
:expiration_date
end

And see the new return results:

[
    {
        "name": "Cheerios",
        "company_id": 1,
        "price": 3.49,
        "ingredients": "*list of ingredients*",
        "expiration_date": "Jan 12, 2022"
    },
    {
        "name": "Chex",
        "company_id": 1,
        "price": 3.99,
        "ingredients": "*list of ingredients*",
        "expiration_date": "Jan 10, 2022"
    },
    {
        "name": "Lucky Charms",
        "company_id": 1,
        "price": 4.49,
        "ingredients": "*list of ingredients*",
        "expiration_date": "Jan 02, 2022"
    }
]

Sweet! Now, without changing anything in our controller, let's look at the results of a Get request to a specific cereal id, triggering the show route.

{
    "name": "Cheerios",
    "company_id": 1,
    "price": 3.49,
    "ingredients": "*list of ingredients*",
    "expiration_date": "Jan 12, 2022"
}

As you can see, the specified attributes of the cereal serializer are being used in both routes from the cereal controller. This way, we can specify what attributes we want in a scope that will affect all of our routes.

But what about that company_id that we are getting? That won't be very useful to a buyer. We want to be able to see the actual company name, not just the id.

Serializer Associations

Serializers have the ability to show associations through has_many and belongs_to, just like in our models. You may notice that if you generate a serializer using resource, a model that belongs to another will have a serializer with a has_one association instead of belongs_to. These operate the same, but I find it easier and more consistent to use belongs_to. Let's update our cereal serializer with a belongs_to and see what we get. We also remove the company_id attribute, since we won't be needing that.

class CerealSerializer < ActiveModel::Serializer
  attributes :name, :company_id, :price, :ingredients, :expiration_date
  belongs_to :company
end

On a show route, this will return:

{
    "name": "Cheerios",
    "price": 3.49,
    "ingredients": "*list of ingredients*",
    "expiration_date": "Jan 12, 2022",
    "company": {
        "id": 1,
        "name": "General Mills",
        "employees": 40000,
        "healthcare_plan": "*plan description*",
        "revenue": 17000000000.0,
        "created_at": "2021-12-17T19:05:02.950Z",
        "updated_at": "2021-12-17T19:05:02.950Z"
    }
}

Great! Now we have the company details from that association. But again, we're getting information that we don't need. There's a few ways we could handle this now.

The first way we can handle it is to create serializers for our other classes, and use them through our belongs_to association. Let's create a serializer for company with rails g serializer company, and edit the attributes it shows.

class CompanySerializer < ActiveModel::Serializer
  attributes :name
end

Here's the result of requesting now:

{
    "name": "Cheerios",
    "price": 3.49,
    "ingredients": "*list of ingredients*",
    "expiration_date": "Jan 12, 2022",
    "company": {
        "name": "General Mills"
    }
}

Sweet! We now have the company name associated with our cereal. There are a few problems with this solution, however. For one, as you can see, in order to access that company name, we have to read down two levels to the nested data. Not too ideal. Another is that this serializer will be filtering all of the company requests as well. So, a GET request to '/companies' will only give us:

[
    {
        "name": "General Mills"
    },
    {
        "name": "Kellogg's"
    },
    {
        "name": "Quaker Oats"
    },
]

If all we are using this database for is to show the company names, this is fine, but we may want to be able to access different attributes of those parent models.

Serializer Custom Methods

The second solution fixes some of those problems. We can create custom serializer methods and include them in the attributes. First we'll want to remove the belongs_to :company from our cereal serializer.

class CerealSerializer < ActiveModel::Serializer
  attributes :name, :price, :ingredients, :expiration_date, 
:company_name


  def company_name
    object.company.name
  end
end

We can define methods within our serializers to perform data handling, then all we need to do is add that method name to our attributes list. object is a moniker for the object that is being passed to the serializer, similar to self in class models. Here's what we get on this request:

{
    "name": "Cheerios",
    "price": 3.49,
    "ingredients": "*list of ingredients*",
    "expiration_date": "Jan 12, 2022",
    "company_name": "General Mills"
}

Much cleaner! Using custom methods is a pretty slick way to include associated data when we only want certain attributes of that data. Now, as you can see, the company name is on the same level as all of our other data, so no need to dig into nested data.

To show another example of custom methods, I am now going to use the CEO and Charity models that were defined earlier, but never used. Let's say a company wanted to include some details of a charitable cause they are backing and a motto from their fearless CEO on the box they are selling. Obviously, in real life, these would just be mass-printed on the boxes during packing, but since we are working in a digital world, we need to find a way to render that information. Since both are children of Company, I will just be using Ceo.first and Charity.first in reference to each instance I want to use.

class CerealSerializer < ActiveModel::Serializer
attributes :name, :price, :ingredients, :expiration_date,
:company_name, :ceo_name, :ceo_motto, :charity_name,
:charity_cause


  def company_name
    object.company.name
  end

  def ceo_name
    object.company.ceos.first.name
  end

  def ceo_motto
    object.company.ceos.first.motto
  end

  def charity_name
    object.company.charities.first.name
  end

  def charity_cause
    object.company.charities.first.cause
  end

end

And here's our render:

{
    "name": "Cheerios",
    "price": 3.49,
    "ingredients": "*list of ingredients*",
    "expiration_date": "Jan 12, 2022",
    "company_name": "General Mills",
    "ceo_name": "Jeff Harmening",
    "ceo_motto": "Cereal is our passion.",
    "charity_name": "General Mills Foundation",
    "charity_cause": "Advancing regenerative agriculture"
}

The way in which you go about receiving data will differ based on how your database is set up and nested, but hopefully this gives you an idea of how to start that process.

Custom Serializers

"But wait," you might be thinking, "what if I don't want to show ALL of that data on all of my cereal requests?" Well, there is a simple solution to that problem: custom serializers. As of right now, if we were to make a GET request to all of our cereals, the index route would return this:

[
    {
        "name": "Cheerios",
        "price": 3.49,
        "ingredients": "*list of ingredients*",
        "expiration_date": "Jan 12, 2022",
        "company_name": "General Mills",
        "ceo_name": "Jeff Harmening",
        "ceo_motto": "Cereal is our passion.",
        "charity_name": "General Mills Foundation",
        "charity_cause": "Advancing regenerative agriculture"
    },
    {
        "name": "Chex",
        "price": 3.99,
        "ingredients": "*list of ingredients*",
        "expiration_date": "Jan 10, 2022",
        "company_name": "General Mills",
        "ceo_name": "Jeff Harmening",
        "ceo_motto": "Cereal is our passion.",
        "charity_name": "General Mills Foundation",
        "charity_cause": "Advancing regenerative agriculture"
    },
    {
        "name": "Lucky Charms",
        "price": 4.49,
        "ingredients": "*list of ingredients*",
        "expiration_date": "Jan 02, 2022",
        "company_name": "General Mills",
        "ceo_name": "Jeff Harmening",
        "ceo_motto": "Cereal is our passion.",
        "charity_name": "General Mills Foundation",
        "charity_cause": "Advancing regenerative agriculture"
    }
]
...

That's a lot of data. If a user is browsing through cereal options, they do not necessarily need to see all of that information right away. If we wanted to change the data being shown in this request to only return the cereal name, the first thing we might think to do is change our serializer. But then, our show route would be missing all of that data we just worked so hard to get. What we can do is generate a new serializer. Let's call it CustomCerealSerializer. To do so, we can run rails g serializer custom_cereal. Now, let's just copy and paste all of our attributes and custom methods into the new serializer:

class CustomCerealSerializer < ActiveModel::Serializer
  attributes :name, :price, :ingredients, :expiration_date,
:company_name, :ceo_name, :ceo_motto, :charity_name, 
:charity_cause

  def company_name
    object.company.name
  end

  def ceo_name
    object.company.ceos.first.name
  end

  def ceo_motto
    object.company.ceos.first.motto
  end

  def charity_name
    object.company.charities.first.name
  end

  def charity_cause
    object.company.charities.first.cause
  end
end

And set our original serializer to only include name:

class CerealSerializer < ActiveModel::Serializer
  attributes :name
end

Now, let's see what the index request will return:

[
    {
        "name": "Cheerios"
    },
    {
        "name": "Chex"
    },
    {
        "name": "Lucky Charms"
    }
]

That looks like exactly what we wanted. But what happened to our other serializer? Right now, if we run a show request, we will also only recieve the name. What we can do is specify what serializer we want to use in our cereals_controller.

class CerealsController < ApplicationController

    def index
        cereals = Cereal.all
        render json: cereals, status: :ok
    end

    def show
        cereal = Cereal.find(params[:id])
        render json: cereal, serializer: CustomCerealSerializer, 
status: :ok
    end

end

Because the index route does not have a specified serializer, it will default to the CerealSerializer, which as we just saw, only has the attribute of name. By specifying our custom serializer on the show route, our return will render those attributes and methods that we defined within it:

{
    "name": "Cheerios",
    "price": 3.49,
    "ingredients": "*list of ingredients*",
    "expiration_date": "Jan 12, 2022",
    "company_name": "General Mills",
    "ceo_name": "Jeff Harmening",
    "ceo_motto": "Cereal is our passion.",
    "charity_name": "General Mills Foundation",
    "charity_cause": "Advancing regenerative agriculture"
}

Custom serializers and custom serializer methods are extremely useful in specifying what data you want to be returned, and when. Using has_many and belongs_to associations within your serializers can also be very useful for chaining serializers together. Just be sure that all of the data from the serializer being called in that association is pertinent to that render. You should ideally never have to change one model's serializer to adjust the data being returned in an association from another. If you ever find yourself appending loads of excludes or includes to the end of a return to get the data you want, creating a new custom serializer may not be a bad idea.

Important note: Throughout the examples above, we never specified the cereal_id in our attributes. This was mainly to show the concept of including only information that would be useful to a user. However, in actual practice, you should typically include the id in your attributes, like so:

class SomeSerializer < ActiveModel::Serializer
   attributes :id, :name, #etc...
end

Although a user might never need to see the cereal_id, in order to act upon that cereal instance, we need it's id, so including it in your attributes is always a good idea.

Resources:

RESTful routes
Rails Error Handling
Active Model Serializers GIT
Rails Serialization Docs
Serializer Class

Conceptual vs. Experimental Coding

michael-neis — Fri, 03 Dec 2021 21:13:11 +0000

Learning to code can be extremely rewarding, but also extremely frustrating. As you learn, you may see others excel in concepts that you are struggling to grasp. That can be incredibly deflating. Or maybe, you pick up concepts well and find solutions to problems early, but later you see others coming up with solutions that blow yours out of the water. That can be equally deflating. No matter which camp you may find yourself in, it is easy to feel out of place in the dev world. But you are no alone, and you are definitely not out of place.

David Galenson's Artistic Capital

Let's take a step away from coding for a second and talk about art. If you have studied art, in any of its many forms, or have been an artist yourself, you know that each and every artist has their own process of creativity. While many artists may work in similar art styles or structures, like directors of horror movies or expressionist painters, each of those artists still has their own method. But can those methods be similar?
David Galenson, currently a Professor in Economics at the University of Chicago, postulated a theory in his book Artistic Capital about two categories that artists fall into. The categories are based on the approach that each artist takes to creating their art. More specifically, the amount of time it takes for that artist to complete their final product.

Conceptual Artists

The first category, Conceptualists, are artists who are able to quickly map out a goal of their finished work in their head, and work with great precision to accomplish their goals efficiently. These are the kinds of artists that will often produce their best work early in their lives, because they know exactly what ideas they want to express, and exactly what steps it will take to express them. A perfect example of a Conceptualist is Orson Welles, who wrote, directed, and starred in Citizen Kane at the young age of 26.

Experimental Artists

In contrast, Experimentalists are artists who take a more tentative approach to their art. They have some perception of what they want to express, but know that the real expression of their ideas won't come until they are able to meticulously whittle down to it. These artists use much more of a trial-and-error approach. Not necessarily taking a start-to-finish approach like Conceptualists, Experimentalists will start somewhere in the middle, adding or subtracting to their work until it is perfect. These artists will often not produce their best work until late in their lives, and even leave some work unfinished. A perfect example of an Experimentalist is Mark Twain, who didn't publish Huckleberry Finn until he was 50, after rewriting the ending over and over.

So what does this have to do with coding?

I am a firm believer that Galenson's theory applies to much more than just artistic creativity. There are Conceptualists and Experimentalists in every aspect of life, especially coding. As you probably already know, in many problem-solving situations in coding, there is no one perfect answer. There is a lot of creativity that comes with problem solving that some people may not realize. The best thing you can do is try to identify your method, and play to your strengths.

For the Conceptualist: sometimes it may feel like you run out of your best ideas early, and have less to offer later on. The best advice I could give you is not to waste time on a problem you have already solved or a concept you have already grasped. Move on. Your strength is that you have the ability to clearly see a solution quickly, so apply yourself to more. Learn new coding languages, find new problems to solve. The more challenges you take on, the less out of place you will feel.

For the Experimentalist: maybe you feel like you are falling behind. Maybe you are in a class with some Conceptualists who really seem to be miles ahead of you in learning, and faster than you at solving problems. The advice I would give you is don't panic. Keep putting the time in. Trial and error is your best tool to building on your skills. Eventually the material will click, and that perfect solution will come. The satisfaction you will feel upon finding that perfect solution will be so much greater for you than finding a passable solution quickly.

References:

https://www.routledge.com/Artistic-Capital/Galenson/p/book/9780415701716
https://www.nber.org/papers/w16024
https://news.uchicago.edu/profile/david-galenson

Reusable JS with React

michael-neis — Fri, 19 Nov 2021 21:26:05 +0000

If you've worked with JavaScript before, you may be familiar with the idea of building out incredibly robust code just to make one small aspect of page functionality. I know this idea all to well. I had the bright idea to try to create an autocomplete dropdown form with vanilla JavaScript and some fancy CSS styling.

If you'd like to read about that experience, I wrote about it here.

React

But there are much, much easier ways to accomplish what I was trying to do. Enter React. React is a frontend JavaScript framework (well, technically it's a library) that makes creating user interfaces in JavaScript so much more efficient.

I certainly don't have time to go into the full detail of what React had to offer, so if you are completely new I would suggest checking out their website to get started. But, if you don't have time for that, here's a quick TLDR version.

Components, Props and State

React allows you to create Components containing JSX. JSX is an HTML-adjacent language for creating elements within JavaScript. React will then render that component for you. Components can be imported to each other. If a Parent Component imports and renders a Child Component, it may pass it data as Props. Children components can pass data back up to parent components by using callback functions that are received from those props. Each component can also have its own state data that can be altered, causing the component to re-render and show that new value of state.

Hooks and Libraries

React supplies us hooks. Hooks are importable functions that allow our components to use (or hook into) a variety of cool features in React. For example, using the useState() hook, we are able to set the initial state to a variable and create a function to alter it at any point and re-render the component. We are also able to create custom hooks, which you will see can be really handy. Libraries are community-built databases that house all kinds of useful data to be imported. Many of these are used for styling your components, like one I'll be using today, styled-components.

If none of this is making sense to you, I would again suggest reading up on React, since this walkthrough will not be focusing much on the nitty-gritty details of how everything works.

Creating an AutoComplete Dropdown Form

Ok, now here's the fun part. Basically, all we'll be doing is creating two files, a custom hook and a dropdown component. After that, we will be able to render a dropdown anywhere in our project with a simple import of our dropdown component. You may be thinking, "wow importing two whole separate files sounds a little complicated for something you said would be easy." If that's the case, you should definitely read my blog from earlier to see just how "easy" this would be without React. Now on to the code.

DropdownForm.js

import { useState } from "react"
import styled from "styled-components"
import useDropFill from "../hooks/useDropFill"


function DropdownForm({array, handleSubmit}){

const [letters, setLetters] = useState('')
const [selector, setSelector] = useState(-1)
const [showDrop, setShowDrop] = useState(true)

const showWords = useDropFill(array, letters, selector, showDrop, 
handleHover, handleDropEvent)

function handleDropEvent(e, showWords){
  if(letters !== ''){
    setShowDrop(true)
    if(e.key === "ArrowDown"){
       if (!showWords) return true
         e.preventDefault()
setSelector(selector >=showWords.props.children.length - 1 ? 0 : 
selector + 1)
       } else if (e.key === "ArrowUp"){
          if (!showWords) return true
          e.preventDefault()
          setSelector(selector <= 0 ? 
showWords.props.children.length - 1 : selector - 1)
            } else if ((e.key === "Enter" || e.type === "click")
&& document.getElementById('selectedWordDiv')){
            e.preventDefault()
            const newTextDiv = 
            document.getElementById('selectedWordDiv')
            setLetters(newTextDiv.innerText)
            setShowDrop(!showDrop)
            setSelector(-1)
            }
        } else {
            setSelector(-1)
        }}


    function handleHover(index){
        setSelector(index)
    }

    function handleType(e){
        const typedLetters = e.target.value
        setLetters(typedLetters)
    }

    function preventSubmit(e){
        e.preventDefault()
        handleSubmit(letters)
        setLetters('')
    }

    document.addEventListener('click', () =>{
        setSelector(-1)
        setShowDrop(false)
    })

    return(
    <DropForm onKeyDown={(e) => handleDropEvent(e, showWords)}
     onSubmit={preventSubmit}>
          <input type='text' onChange={handleType} value= 
           {letters}/>
               {showWords}
            <button type='submit'>Submit</button>
     </DropForm>
    )
}

export default DropdownForm

const DropForm = styled.form`
    display: inline-block;
    position: relative;
    input {
        font-size: 25px;
    }
    button{
        position: absolute;
        margin-left: 10%;
    }
`

useDropFill.js

import styled from "styled-components"

function useDropFill(array, input, selector, showDrop, 
handleHover, handleDropEvent){

    if (!showDrop) return false;

    const matchWords = array.filter(word => word.substr(0, 
input.length).toLowerCase().includes(input.toLowerCase()))

    if(input === ''){
        const wordDivs = null
        return wordDivs
    }else if(selector >= 0){
const wordDivs = matchWords.map(word => matchWords.indexOf(word) 
=== selector ? <SelectedDiv onClick=
{(e) => handleDropEvent(e)} key={word} id="selectedWordDiv">
<strong>{word.substr(0, input.length)}</strong>
{word.substr(input.length)}</SelectedDiv> : <DropDiv onClick=
{(e) => handleDropEvent(e)} onMouseEnter={() => 
handleHover(matchWords.indexOf(word))} key={word}><strong>
{word.substr(0, input.length)}</strong>{word.substr(input.length)}
</DropDiv>)

        const allDivs = <ContainDiv>{wordDivs}</ContainDiv>

        return(allDivs) 
    }else{
        const wordDivs = matchWords.map(word => <DropDiv onClick=
{(e) => handleDropEvent(e)} onMouseEnter={() => 
handleHover(matchWords.indexOf(word))} key={word}><strong>
{word.substr(0, input.length)}</strong>{word.substr(input.length)}
</DropDiv>)

        const allDivs = <ContainDiv>{wordDivs}</ContainDiv>

        return(allDivs)   
    }
}

export default useDropFill

const DropDiv = styled.div`
    border: 1px solid;
    text-align: left;
    background-color: white;
    cursor: pointer;
`
const SelectedDiv = styled.div`
    border: 1px solid;
    text-align: center;
    background-color: #63f0f7;
    font-size: 130%;
    cursor: pointer;
`

const ContainDiv = styled.div`
    position: absolute;
    width: 100%;
`

Here we have our component called DropdownForm and our custom hook called useDropFill. The first thing I would like to point out is the imports that are happening on both. For DropdownForm we have a couple. As I mentioned before, useState is a React hook that helps us alter state within our component. Both files are importing styled-components, a library (we have to install it prior to importing) that lets us add CSS styling within our components. If you look at the bottom of each file, under the export, you will see a few variables being defined as styled.(something). The variable will become whatever you put in 'something', followed by its styling within the backticks. For example, our ContainDiv from the bottom of our hook file will create a div called ContainDiv with an absolute position and width of 100% that can be used within the component. You will see these variables appear in the code similarly to imported components, but don't let that confuse you too much, at the core, ContainDiv is just a div. These styling variables will come in handy later.

Let's map out what the end goal is here:

function DropdownForm({array, handleSubmit}){

//A bunch of code here...

return(
   //A <form> with special features
)
}

export default DropdownForm

Basically, what we want to do is be able to import our DropdownForm into other components of our application in order to use this dropdown multiple times. As you can see, we are passing in props of array and handleSubmit. The array will be whatever array of strings we want to have the dropdown populate with, and the handeSubmit will be a callback function used to handle the text that is submitted in the form. Let's say you wanted to make a dropdown form for certain fruits and console log the fruit that is submitted. All you would have to do is:


import DropdownForm from "./DropdownForm"

function Fruits(){

    const fruitArray = ["lemon", "orange", "apple", "banana"]

    function handleSubmit(text){
        console.log(text)
    }

    return(
        <DropdownForm array={fruitArray} handleSubmit = 
         {handleSubmit}/>
    )
}

Pretty cool right? And the best part is you can do this multiple times in multiple different components. Pass it an array of your choosing and handle the results however you want. That's why React is so handy, it allows for dynamic reusability of components and hooks. One very important note is that in order for the DropdownForm to render properly, it must recieve both an array and handleSubmit prop, and the array can only include strings. Otherwise, you have free reign to use it as you please.

Now let's take a more detailed look at what is going on in Dropdownform:


const [letters, setLetters] = useState('')
const [selector, setSelector] = useState(-1)
const [showDrop, setShowDrop] = useState(true)

const showWords = useDropFill(array, letters, selector, showDrop,
handleHover, handleDropEvent)

//handleDropEvent and hanldeHover go here

function handleType(e){
        const typedLetters = e.target.value
        setLetters(typedLetters)
    }

    function preventSubmit(e){
        e.preventDefault()
        handleSubmit(letters)
        setLetters('')
    }

    document.addEventListener('click', () =>{
        setSelector(-1)
        setShowDrop(false)
    })

return(
    <DropForm onKeyDown={(e) => handleDropEvent(e, showWords)} 
     onSubmit={preventSubmit}>
          <input type='text' onChange={handleType} value=
          {letters}/>
              {showWords}
           <button type='submit'>Submit</button>
     </DropForm>
    )

We are creating three stateful variables (letters, selector, and showDrop) and one const showWords which will equal the return of our custom hook useDropFill. We will pass all of our stateful variables into the hook as well as our original array and a few callback functions, hanldeDropEvent and handleHover (we'll get into those in a bit). On our return, we create a form (remember, we're using styled-components here, so DropForm, for all intents and purposes, is just a <form>). That form includes an input and a submit button. The value (or text input) of our input is set to letters, so it will start at that initial state of ''. In order to change the value to what the user is typing, we add an onChange event which is passed the function handleType. All this function does is take the value of what is being typed (or changed) and sets letters to that value (with useState). Now we are able to target the value of the input by targeting letters, which is why we pass it into our hook. Our form also has an onKeyDown event which listens on the whole form to whenever a key is pressed, which we pass the callback function handleDropEvent (again, more on that one later). The onSubmit event passes the form submission to the callback preventSubmit, which will prevent the default of reloading the page. This function also takes the value of letters and passes it to our handleSubmit callback function. This is what is being returned to the parent component (in the fruits example, this would be the text that we are console logging). Next, we've created an eventlistener for the entire document. This will listen for a click anywhere, set selector back to its original state of -1 and set showDrop to false. showDrop will become more clear once we take a look at our hook, but its functionality is that when showDrop is true, we will see a dropdown, and when it is false, we won't. Finally, we pass our showWords const within our form, which will either be a false value or a div containing all of our matching words, depending on what happens in our hook. Now let's look at what selector is and why we need it.

Here are the two callback functions from earlier:

 function handleDropEvent(e, showWords){
        setShowDrop(true)
        if(letters !== ''){
            if(e.key === "ArrowDown"){
                if (!showWords) return true
                e.preventDefault()
                setSelector(selector >= 
showWords.props.children.length - 1 ? 0 : selector + 1)
            } else if (e.key === "ArrowUp"){
                if (!showWords) return true
                e.preventDefault()
                setSelector(selector <= 0 ? 
showWords.props.children.length - 1 : selector - 1)
            } else if ((e.key === "Enter" || e.type === "click") 
&& document.getElementById('selectedWordDiv')){
                e.preventDefault()
                const newTextDiv = 
document.getElementById('selectedWordDiv')
                setLetters(newTextDiv.innerText)
                setShowDrop(!showDrop)
                setSelector(-1)
            }
        } else {
            setSelector(-1)
        }}


function handleHover(index){
    setSelector(index)
 }

Both of these functions deal with our selector variable, which starts at -1 and will always be a number. Our handleHover function simply sets selector to an index. That index will be returned from our hook. The handleDropEvent is the function that we are calling back to on the form keyDown event. We pass it e (the event) and showWords. The first thing it does is set showDrop to true, because on any keydown event in our form, we want to see the possible words that match. We then have a blanket if statement that checks whether or not letters is an empty string. If it is (if the input is empty), all we need to do is reset our selector to -1. If it is not (if anything has been typed), then we want to be able to manipulate our selector. Here, we have three conditionals for specific keyboard keys using e.key. The three keys we want to check are the up and down arrows, and the enter key. If none of these keys have been pressed, the function does nothing else. What we want to do next is set our selector to a value that will highlight a specific word in our dropdown, with down arrow increasing (scrolling down) and up arrow decreasing (scrolling up) that value. Since our showWords will be an div with child divs, we can treat the children as an array for selector to match the index of. We also want to make sure that selector never goes below zero or becomes a higher number than the number of child divs being shown. So, we can add a ternary in our setSelector so that it will loop back to the largest number index of the array if it goes below zero, and loop back to zero if it surpasses that largest index. Now the value of selector will stay within the range of child divs. The preventDefault in both of the arrow keys is optional, all it does is stop the cursor from moving in the text input. We also have an if statement in both to prevent the selector from changing if there are no words to show. The enter key is a little different. Once we look at our custom hook, you will see that we will be assigning our selected word div an id of "selectedWordDiv", which will help with our styling but also help here. We also give the child divs click events that will call back to this function, which is why we include the or statement. We want everything here to happen if the enter key is pressed OR the div is clicked. The && statement makes sure that a div with our special id exists before performing the rest of the function. Prevent default here stops the form from being submitted (since enter is usually used for submitting forms). Now we are setting our letters to whatever text that div contained, falsifying (hiding) our showDiv, and setting our selector back to -1. Now, whatever word from our string we clicked on will populate the text box. Pretty cool, right? Now we can submit the form with that word (or words, depending on how many were in that index of the array) and our handleSubmit will receive it as an argument.

Let's have a look at how we created those dropdown divs in our useDropFill hook:

function useDropFill(array, input, selector, showDrop, 
handleHover, handleDropEvent){

    if (!showDrop) return false;

    const matchWords = array.filter(word => word.substr(0, 
input.length).toLowerCase().includes(input.toLowerCase()))

    if(input === ''){
        const wordDivs = null
        return wordDivs
    }else if(selector >= 0){
        const wordDivs = matchWords.map(word => 
matchWords.indexOf(word) === selector ? <SelectedDiv onClick={(e)
=> handleDropEvent(e)} key={word} id="selectedWordDiv"><strong>
{word.substr(0, input.length)}</strong>{word.substr(input.length)}
</SelectedDiv> : <DropDiv onClick={(e) => handleDropEvent(e)} 
onMouseEnter={() => handleHover(matchWords.indexOf(word))} key=
{word}><strong>{word.substr(0, input.length)}</strong>
{word.substr(input.length)}</DropDiv>)

        const allDivs = <ContainDiv>{wordDivs}</ContainDiv>

        return(allDivs) 
    }else{
        const wordDivs = matchWords.map(word => <DropDiv onClick=
{(e) => handleDropEvent(e)} onMouseEnter={() => 
handleHover(matchWords.indexOf(word))} key={word}><strong>
{word.substr(0, input.length)}</strong>{word.substr(input.length)}
</DropDiv>)

        const allDivs = <ContainDiv>{wordDivs}</ContainDiv>

        return(allDivs)   
    }
}

That looks like a big bundle, but lets take it step by step. Keep in mind here, the input that we are passing here will equal whatever letters we have typed (fromletters). First, as mentioned before, if showDrop is false, this hook just returns false and is done. Otherwise, we create a const matchWords that will filter our array. We are filtering each string in our array based on a substr, which will only take the same amount of letters from our word as there are letters in our input. That way when a user types, they will only see words that start with the letters that they have typed. If our input is empty, we will return a null value and be done. Skipping down a bit, if our selector hasn't changed yet (is < 0) we will map out our divs based on the matching words, create a container div for all of those, and return the container div. If the selector is >= 0, we map out divs for matchWords like before, but this time on a ternary. If the index of the word in the array matches selector, we give it that special "selectedWordDiv" id from before so that it can be selected. Each div has the onclick event, as previously mentioned, but also an onMouseEnter event, which will callback to handleHover and give it the index of the current word, setting selector to whatever div the user's mouse is hovering over. The strong tags are not necessary, but are used here to make the matching letters bold.

And that's it! In terms of styling, all of the forms that you render will have the same styling aspects, so if you want to change one, you will have to change them all. The form must have a position of relative, and the div container must have a position of absolute. Otherwise, the styling is up to you!

The JavaScript Iceberg

michael-neis — Fri, 05 Nov 2021 20:56:56 +0000

A dropdown menu. Seems like a pretty easy web component to create right? Yes, yes it is.
A text input with autofill capabilities? Piece of cake with CSS.
Putting those two things together into one efficient and alluring DOM element? Not on your life.

If you are just getting into coding, like me, you may have experienced what many refer to as the iceberg effect. What may seem like a small, insignificant little piece of user interface or page functionality can end up making up half of your code. Or at least it will if you don't use all of the resources at your disposal.

While creating a web application for a project phase at Flatiron School, I set out to create what I initially thought would be a simple HTML element with some fancy CSS styling. I wanted to create a text input box with a dropdown of searchable words in my application, but only have those words appear if they matched the letters that were being typed. You've probably seen this kind of thing before.

One very important thing to keep in mind is that at the time of making this, all I knew was basic JavaScript, HTML and some CSS styling. Now, I had found out that there were some options that CSS gave me in terms of how to style a form. They were limited, but I thought I could make do. The ability to create an autofill text box? Check. But those options would only include words you have already typed. The ability to create a dropdown of viable options? Yes again. Unfortunately, there was no way to combine these two CSS elements into what I had dreamed of. So, I turned to JavaScript to solve my problems. And while I did eventually find an answer (with a lot of help from Google, W3Schools and Stack Overflow), the code was not nearly as concise as I had initially thought. I'll just let you see for yourself:

function autoFillBoxes (text, array){
    let selectedWord;
    text.addEventListener('input', function(e) {
let dropDown
let listItem
let matchLetters = this.value;

closeAllLists();

if (!matchLetters) {return false;}

selectedWord = -1;

dropDown = document.createElement('div');
dropDown.setAttribute('id', this.id + "selectorsList");
dropDown.setAttribute('class', 'selectorsItems');

this.parentNode.appendChild(dropDown);

for (let i = 0; i < array.length; i++){
if (array[i].substr(0, matchLetters.length).toUpperCase() == 
matchLetters.toUpperCase()){ 
listItem = document.createElement('div'); 
listItem.innerHTML = "<strong>" + array[i].substr(0, 
matchLetters.length) + "</strong>";
listItem.innerHTML += array[i].substr(matchLetters.length);


listItem.innerHTML += "<input type='hidden' value='" + array[i] + 
"'>";

listItem.addEventListener('click', function(e) {

text.value = this.getElementsByTagName('input')[0].value;

selectedWord = -1;

closeAllLists();
})
listItem.setAttribute('class', 'autoListOptions')
dropDown.appendChild(listItem);
            }
        }
    })
text.addEventListener('keydown', function(keySpec) {
let wordsArray= document.getElementById(this.id + "selectorsList");

if (wordsArray) wordsArray= 
wordsArray.getElementsByTagName('div');

if (keySpec.keyCode == 40){
selectedWord++;
addActive(wordsArray);
} else if (keySpec.keyCode == 38){
selectedWord--;
addActive(wordsArray);
} else if (keySpec.keyCode == 13){
   if (selectedWord > -1){
   keySpec.preventDefault();
   if (wordsArray) wordsArray[selectedWord].click();
   selectedWord = -1;
    }
  }
});

function addActive(wordsArray){
if (!wordsArray) return false;
removeActive(wordsArray);

if (selectedWord >= wordsArray.length) selectedWord = 0;
if (selectedWord < 0) selectedWord = (wordsArray.length - 1);

wordsArray[selectedWord].classList.add('activeSelectors');
}

function removeActive(wordsArray){
for (let i = 0; i < wordsArray.length; i++){
    wordsArray[i].classList.remove('activeSelectors');
   }
}
function closeAllLists() {
var dropDown = document.getElementsByClassName("selectorsItems");
for (var i = 0; i < dropDown.length; i++) {
   dropDown[i].parentNode.removeChild(dropDown[i]);
    }
}

document.addEventListener('click', (e) => closeAllLists(e.target))
}

Wowza. Not exactly a quaint little web component now is it? Let me break this down a bit and explain how everything works.

First off, we have to determine what it is we are passing into this beast. Our text variable is the text we are typing into the form. We can target this specifically by assigning an id to the form element in HTML:

      <div class="autoComplete">
<input type="text" id="textInput" class="selectors" name="input"/>
      </div>

(The div and input classes will come in handy later, for now we're just focused on the input id)

And assigning the value of that HTML element to a variable in JS:

const textToPass = document.getElementById('textInput')

Cool, now we will be able to call an 'input' event listener on textToPass, as well as extract the value from it. The second variable we are passing represents an array. This array is filled with strings of all of the possible words you want to have populate the dropdown. It can be filled with anything of your choosing, just as long as they are strings:

const arrayToPass = ['These', 'are', 'the', 'words', 'you', 
'can', 'choose', 'from']

Now lets go back and take a look at the first chunk of that whole function:

function autoFillBoxes (text, array){
    let selectedWord;
    text.addEventListener('input', function(e) {

Note: this selectedWord variable will come in handy later, it will be the variable that determines which word in our dropdown is being focused on.

As you can see, we are passing in a text and array variable. When we initiate this function, we will use our textToPass and arrayToPass variables in these fields.

We then see our first big event listener to kick off the bulk of our function. input is a listener on text that will initiate the function(e) whenever a user adds an input (aka types) in its field. Now let's take a look at the function being initiated:

let dropDown
let listItem
let matchLetters = this.value;

closeAllLists();

if (!matchLetters) {return false;}

selectedWord = -1;

dropDown = document.createElement('div');
dropDown.setAttribute('id', this.id + "selectorsList");
dropDown.setAttribute('class', 'selectorsItems');

this.parentNode.appendChild(dropDown);

for (let i = 0; i < array.length; i++){
if (array[i].substr(0, matchLetters.length).toUpperCase() == 
matchLetters.toUpperCase()){ 
listItem = document.createElement('div'); 
listItem.innerHTML = "<strong>" + array[i].substr(0, 
matchLetters.length) + "</strong>";
listItem.innerHTML += array[i].substr(matchLetters.length);


listItem.innerHTML += "<input type='hidden' value='" + array[i] + 
"'>";

listItem.addEventListener('click', function(e) {

text.value = this.getElementsByTagName('input')[0].value;

selectedWord = -1;

closeAllLists();
})
listItem.setAttribute('class', 'autoListOptions')
dropDown.appendChild(listItem);
            }
        }
    })

There's a lot that is happening here. First, we are declaring three variables. matchLetters is assigned the value of this.value. The this keyword refers to the object it is in, in our case being text. (text.value would give use the same result, but using this allows for more dynamic and reusable code). dropDown and listItem are two variables that as you can see further down become divs using the .createElement() method. The closeAllLists() function, which we will define in detail later, makes sure that aby previous lists are closed before appending our new divs to the text parent node.

The dropDown div is the container for all of the words we want to populate in our dropdown options, and the listItem divs are the divs containing each specific word. Towards the bottom, we append each listItem div that we have created to our dropDown div.

In order to use CSS styling and refer to each div later in our function, each div must have ids and/or class names. dropDown is given a class name of "selectorsItems" and an id of this.id + "selectorsList" (there's that this keyword again, grabbing the id from our text). The listItems are all given a class name of "autoListOptions", but no id, since they will all behave the same way.

In our for loop, we are checking to see if every word in our array matches our if statement. In that if statement, we are using .substr for a given word in our array from 0 to matchLetters.length. Remember, matchLetters is the text the user has typed, so we are making sure only to check on the same amount of letters as letters we have typed. We are then comparing those letters to the letters of matchLetters itself using ===. We have to add .toUpperCase() to ensure that neither the word from the array nor the letters being typed are case sensitive. Since we are using a for loop, any of the words in our array that satisfy that if statement will be passed into the function. We don't need an else statement, because if no words match our letters, we don't need anything to happen.

Now, we could just add that matching array string to a listItem and call it a day, but it would be so much cooler if we added a little more flare than that. Again, we can fill the inner HTML of listItem first with the letters that we have typed using .substr(0, matchLetters.length) (we know these will match, otherwise thee if statement would have failed). Adding a <strong> tag will make these letters bold. We then fill the rest of the inner HTML using += and starting our .substr at our current amount of letters. With no end point defined, this will just fill until the end of the string.

Next, we have to give that newly created div a hidden input and a value. The hidden input will allow us to call an event listener on the div to access its value. We can then add a click event listener on our listItem and employ an anonymous function. That function will set the text.value (the text in our original input field) to equal the value found by searching for that hidden input within this (our listItem) div. selectedWord = -1 and closeAllLists() here are used to clear and reset our function.

Now, what we could do here is just define our closeAllLists function and call it a day. At this point, we are able to create a dropdown of autofill words from our array and click on them to fill our text box. But we can go a step further, by allowing the user to scroll through and select words using the arrow keys. This is where our selectedWord variable will finally come in handy.

text.addEventListener('keydown', function(keySpec) {
let wordsArray= document.getElementById(this.id + "selectorsList");

if (wordsArray) wordsArray= 
wordsArray.getElementsByTagName('div');

if (keySpec.keyCode == 40){
selectedWord++;
addActive(wordsArray);
} else if (keySpec.keyCode == 38){
selectedWord--;
addActive(wordsArray);
} else if (keySpec.keyCode == 13){
   if (selectedWord > -1){
   keySpec.preventDefault();
   if (wordsArray) wordsArray[selectedWord].click();
   selectedWord = -1;
    }
  }
});

function addActive(wordsArray){
if (!wordsArray) return false;
removeActive(wordsArray);

if (selectedWord >= wordsArray.length) selectedWord = 0;
if (selectedWord < 0) selectedWord = (wordsArray.length - 1);

wordsArray[selectedWord].classList.add('activeSelectors');
}

function removeActive(wordsArray){
for (let i = 0; i < wordsArray.length; i++){
    wordsArray[i].classList.remove('activeSelectors');
   }
}

Here, we are giving our text box a 'keydown' event listener, and passing a function focusing on the event cause, in our case we call that keySpec. We then want to create an array of HTML elements to sort through. To do so, we first want to declare our wordsArray to equal the dropDown div, then we need to go a step further and set the value of wordsArray to be every div element within the dropDown div. Now we have our collection of listItem HTML divs stored as an array.

The if, else if, else if statement that follows ensures that we are only passing this function if specific buttons are being pressed. We check our keySpec.keyCode to do so. Every keyboard button has a code, and .keyCode will return us that code (as a number). The keycode for the down arrow key is 40, the keycode for the up arrow is 38, and the keycode for the enter key is 13. If the down arrow key is pressed, selectWord is incremented, and if the up arrow is pressed, selectWord is decremented. In either case, the array is passed into our addActive function. This function will add a class attribute of activeSelectors to our divs so that they can be independently styled, as well as use the value of our selectedWord to sort through our array.

As you can see at the end of our addActive function, we will be applying that activeSelectors class element to whatever div is at the index of our array with the same value as selectedWord using wordsArray[selectedWord]. Because selectedWord starts at -1 for every input of text, an initial down arrow keydown will increment it to 0, making this bit of code wordsArray[0]. Another down arrow will make it wordsArray[1] and so on. The same is true of an up arrow keydown, which would change something like wordsArray[3] to wordsArray[2]. But as you may have already wondered, what happens if the up arrow is pressed first? Or what happens if selectedWord becomes a number that is longer than our array? And how do we remove the active designation once we are done with it? Well, that is what the beginning of our addActive function is for.

The first two things we want to do in our addActive function is ensure that the array we are passing has a truthy value (not undefined or null) and pass a removeActive function. This removeActive function will go through our entire wordsArray and remove any 'activeSelectors' so that we stay focused on one div. Next we have to make sure our selectedWord value never becomes a number that is not useful to us. If the user 'down arrow's all the way to the bottom of the dropdown div, and then keeps hitting 'down arrow,' we want to change the selectedWord value back to 0 so that they can start from the beginning again. The same is true for 'up arrow', but this time since selectedWord would become less than 0, we want to change it to equal the last element of the array (aka wordsArray.length -1).

Now we can finally declare that closeAllLists function that we have been using.

function closeAllLists() {
var dropDown = document.getElementsByClassName("selectorsItems");
for (var i = 0; i < dropDown.length; i++) {
   dropDown[i].parentNode.removeChild(dropDown[i]);
    }
}

document.addEventListener('click', (e) => closeAllLists(e.target))

We have to redeclare our dropDown variable since we are now in a different scope of the function. It will point to the same div, with a class name of 'selectorsItems'. We are then stating that for every element in dropDown, remove that child element from dropDown. Then we add a click event listener to the entire document so that when a user clicks anywhere, the div is cleared (including when the user clicks on the word itself).

The only thing left now is to initiate it:

autoFillBoxes(textInputField, arrayToCheck)

Those values should obviously be your own, based on the text input field and array you want to use.

The HTML formatting and CSS styling are now largely up to you, but there are a few things that need to be in place in order for all of this to work:

In HTML:
The form that your target input element is in must have autocomplete set to "off."

<form id="exampleSelection" autocomplete="off">

You must also make sure that you add an easy to remember id and class to your input to target.

In CSS:
Your base HTML input element should have position: relative, and the div you create in your function should have position: absolute (It's easiest to set these using their class name).

In your activeSelectors styling (the divs that are considered 'active' as the user uses up arrow/down arrow), make sure that the background color is marked as !important.

.activeSelectors{
    background-color: red !important;
}

Any other styling is up to you.

Conclusion

Coding can be a lot of fun, but it can also be incredibly frustrating and time consuming. Some things that make complete sense in our mind may not translate that easily into your computer. Managing and tempering expectations can be an important skill to master when starting projects, because sometimes the reality of making a goal happen may not always be worth its time.