J8Ahmed Logo
J8ahmed Logo

Day 76: Projects Lead to my Best Notes

May 19, 2022

I finished working on the Library Project but in the process I took some great notes. The project consisted of a modal, table, overlapping, and form submissions. I had not taken formal notes on these topics so I took the time to try and get it right. I still need to read up on a few CSS properties because I want to know when to use what and why. So much work to do but for now I will just move on and keep the checkpoints for what I need to come back to.

TLDR;

Okay, so here are the highlights of what I did:

  • JavaScript -> Wrote notes on the implementation of a Modal element in the browser. It broke down into a few key points which I included below. The notes are based on one particularly interesting YouTube video.
  • Practice -> Finished working on the Library project. I limited my styling since that was not the focus of the project. I will come back and style it better when I actually want to add it to my portfolio. Here is the repo.

How to Construct a Modal

Constructing a modal is a very common task in front-end web development. Modals (a.k.a. popups) are used for:

  • dialog boxes

There are different approaches for constructing modals but most (if not all) include x key components:

  1. A container element that holds the modals contents (This modal’s visibility is adjusted based on user input i.e. hide/show the modal)
  2. An overlay element (either included with the modal element or as a separate element) that covers access to the regular page content.
  3. A UI element that can show (open) the modal for users
  4. A UI element that can hide (close) the modal for users
  5. A function that performs the operation of showing (opening) the modal for users (attached to the corresponding UI element)
  6. A function that performs the operation of hiding (closing) the modal for users (attached to the corresponding UI element)

What we use for each of these components can vary depending on the tools we choose but the components still remain the same.

Example Modal from YouTube Video (“Build a Popup with JavaScript”)

This example is modiifed to the bare bones necessary code for the modal to work. The styling is also adjusted to my personal preferences and left to the bare minimum as to not clutter the code.

The HTML:

<body>

  <button data-modal-target='#modal'>Open Modal</button>

  <div class='modal' id='modal'>
    <h1>Hello Modal</h1>
    <button data-close-modal-btn>&times;</button>
  </div>

 <div id='overlay'></div> 

</body>

Using data-modal-target='#target-id' allows us to have multiple modals on the page with associations to the specific modal each respective user element should be targeting. This is in contrast with writing our code to only consider having one modal. This is approach is better than manually targeting only one modal element inside of our JavaScript code. This way the same function can dynamically select the related modal target without using any information outside of what the UI element provides. One function can be used for all modal openings regardless of the modals being different. The function becomes “Idempotent” ?? I think.

The CSS:

.modal{
  position: fixed;
  /* Position it in the center of the screen */
  /* Hide it using opacity / scale / display / visibility */
}

.modal.active{
  /* show it using opacity / scale / display / visibility */
}

#overlay{
  position: fixed;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  opacity: 0;
}

#overlay.active{
  opacity: 1;
  pointer-events: all;
}

Using classes to change the properties of our modals and overlay allow us to reuse them for all modals instead of just one.

The JavaScript:

const openModalBtns = document.querySelectorAll('[data-modal-target]');
const closeModalBtns = document.querySelectorAll('[data-close-modal-btn]');
const overlay = document.getElementById('overlay');

openModalBtns.forEach(function(btn){
  btn.addEventListener('click', function(){
    const modal = document.querySelector(btn.dataset.modalTarget);
    openModal(modal);
  })
})

closeModalBtns.forEach(function(btn){
  btn.addEventListener('click', function(){
    const modal = btn.closest('.modal');
    closeModal(modal);
  })
})

overlay.addEventListener('click', function(){
  const modals = document.querySelectorAll('.modal.active');
  modals.forEach(function(modal){
    closeModal(modal);
  })
})

function openModal(modal){
  if(modal === null) return
  modal.classList.add('active');
  overlay.classList.add('active');
}

function closeModal(modal){
  if(modal === null) return
  modal.classList.remove('active');
  overlay.classList.remove('active');
}

Meta Data

Started On: 2022-05-18

References:

Goal For Round 7 of the #100DaysofCode Challenge

This is my seventh round of the “#100daysofcode” challenge. I will be continuing my work from round five and round six into round seven. I am currently working through the book “Cracking the Coding Interview” by Gayle Laakmann McDowell. My goal is to become more familiar with algorithms and data structures. This goal was derived from my goal to better understand operating systems and key programs that I use in the terminal regularly e.g. Git. This goal was in turn derived from my desire to better understand the fundamental tools used for coding outside of popular GUIs. This in turn was derived from my desire to be a better back-end developer.

I have no idea if my path is correct but I am walking down this road anyways. Worst case scenario I learn a whole bunch of stuff that will help me out on my own personal projects.

Post Views: 120