DEV Community: David Frempong

How I built a megamenu feature with Vanilla JavaScript

David Frempong — Fri, 04 Feb 2022 22:17:29 +0000

On one of the projects I'm working on, I want the visitor to be able to hover on a nav menu item, and a megamenu will appear. Here's how I built it.

After styling everything in CSS, I gave the original class in CSS a display: none. Then, I created another duplicate class with an ending (-visible) (example: .thisdiv and .thisdiv-visible) and gave it a display: block.

 .navmenucontent{
  display: none;
  }

 .navmenucontent-visible{
  display: block;
  }

Next, I went to JavaScript and created my variables. I then targeted the menu item itself (let's say "shop"), and gave it an EventListener of click. This lets the browser listen for a click, and then do something.

I then created another EventListener that said that if the mouse left that div, to remove the div. This event is 'mouseleave'.

From there I created a function that basically said: "When this menu item is clicked, show this menu-content, and if the mouse leaves, hide it." Here's how I built this feature.

 let navhover = 
 document.getElementsByClassName('navhover') 
 [0]



 let newselections = 
 document.getElementsByClassName('navhover', 
 'new', 'selections')[1]

 let menuitemnew = 
 document.getElementsByClassName('nav- 
 hover', 'new')[0]




 let showitemnew = function () {
 {
    newselections.classList.add('navhover', 
       'new', 'selections-visible')
    navhover.classList.add('navhover- 
       visible')
       console.log('showing')
     }
 }

 let hideitemnew = function () {
   {
 newselections.classList.remove('navhover', 
      'new', 'selections-visible')
    navhover.classList.remove('navhover- 
      visible')
    console.log('removed')
    }
  }



 menuitemnew.addEventListener('mouseover', 
    function () {
    showitemnew();
 })


newselections.addEventListener('mouseleave', 
   function () {
   hideitemnew();
 })

One thing I learned from this: Organize both your CSS and your JavaScript, because it's very easy to get things confused.

Installing Node Js. Ubuntu, and Gulp - Tips

David Frempong — Fri, 21 Jan 2022 15:15:15 +0000

I recently spent four days in the terminal trying to start a jQuery application. Here are some mistakes I made so you don't have to.

One, follow the documentation step by step. Even when I had one space or letter off, I had trouble installing the packages.

Two, when typing in your Sudo password, Windows will keep it invisible for confidentiality, so commit it to memory if possible, and don't worry if you can't see it.

Here's a very helpful tip. You know how in JS, you can use console.log to debug? Here's a easy way to debug in Ubuntu to make sure that everything is working correctly.

   gulp --version
   npm --version
   node --version
   npx --version

You should get four sets of numbers like this: 6.14.4.

Also, if running an application, and you're using npm run watch, make sure you have both a local and external access URL.

And of course, don't give up. The problem will be solved, and hopefully with these tips you won't be in the terminal as long as I was.

How I target an Element By Class Name in JavaScript

David Frempong — Thu, 13 Jan 2022 21:58:39 +0000

This concept deals with the classes you create in HTML.

IF I want to target a specific class in JavaScript, I'll do something like this first in HTML:
<div class="next"></div>

That is my HTML class. And in JavaScript,

document.getElementsByClassName('next')[0]

You want the document, or DOM, to "get" the element by it's class name in HTML. But why did I add that 0 with the brackets like this [0]?

Each class is listed as an array, or group of items. So to choose the one I want, I simply choose the specific "index" in the array which is equal to the class I'm trying to target.

This is one way you can target an HTML class in JavaScript.

How I built a dropdown cart modal in JavaScript

David Frempong — Wed, 05 Jan 2022 19:55:23 +0000

Here's how I built a feature which allows a cart modal to fade in when it's clicked.

First, I want to create a class with all my styles, and then to trigger in JS, give the first class a display: none. I then create a second class named (-visible) and give it a display: flex;.

It looks like this:

 .dropdown-cart{
background: #fafafa;
height: 57vh;
width: 25%;
top: 91px;
right: 0px;
position: fixed;
display: none; (Here's where I hide the cart)
padding-left: 4%;
z-index: 1;
animation-duration: 1s;
animation-name: fadein;  (Here is where the effect will come in)
}

.dropdown-cart-visible{
display: flex; (Here's where the cart is visible)
padding-left: 4%;
}

In JS, I made sure to create variables that would help me target the index I was looking for.

Basically, I created a variable for the cart icon and the modal itself, so when you click on the icon, it will fade in, and if you click again, it will fade out. Here's what it looks like.

let dropdowncart = 
document.getElementsByClassName('dropdown-cart')[0]

let carticon = 
document.getElementsByClassName('cart')[0]


let showdropdown = function () {
    dropdowncart.classList.add('dropdown-cart-visible')
    pagefade.classList.add('fadecart-fadein')
    console.log('hello')
}

let hidedropdown = function () {
    dropdowncart.classList.remove('dropdown-cart-visible')
    pagefade.classList.remove('fadecart-fadein')
    console.log('goodbye')
}



carticon.addEventListener('click', function () {
    showdropdown();
})

closeicon.addEventListener('click', function () {
    hidedropdown();
})

To sum it up,
1) Create your classes in CSS, and hide the original class, since you don't want it shown until clicked.

2) Create a second class of -visible, and that's what you'll use to create variables in JS.

How I center a div

David Frempong — Fri, 31 Dec 2021 14:45:06 +0000

This is one of the most commonly asked questions, so here's how I do it.

 HTML: 
 <div class='circle'></div>

 CSS:
 .circle{
 height: 24px;
 width: 24px;
 border-radius: 50%;
 background: #618ed6;
 justify-content: center; 
      (justify's content in center of page)
 text-align: center;
      (any text will be aligned to center of page)
 margin: 0 auto;
      (creates an equal amount of margin on each side, centering the object)
 padding: 0;
      (I do this if necessary to help center the object)
     }

Design tip from Apple's Website

David Frempong — Fri, 31 Dec 2021 14:40:06 +0000

Designing pages can be tricky, but here's some things I've learned from Apple's website.

1: Use Contrast. If you look at their product description, you'll notice they'll have an initial sentence in one color, and a secondary sentence in other. To me, using this slight contrast in color helps to give more information to the user, while also creating a clean layout. Because everything is not in one color, it's easier for someone to take in the information.

1: Use Cards. When you go to their store page, do you notice how they have information on individual "cards", and you can swipe left and right to learn more? Why didn't they just put everything on one page? To me, they did this to reduce the cognitive load, or in other words, make it easier for the visitor to understand what's going on.

One thing I've learned about Apple is that they make it easy for people to buy things from their website. Using contrast and cards are just two ways I've seen that they've used to create a good user experience and clean web page.

What I've learned about good UX

David Frempong — Thu, 23 Dec 2021 15:36:51 +0000

There are a lot of websites, apps, and softwares out there. But, what makes them easy to use? Here's what I've seen.

For one, most people go on the web on their cell phone, so creating a product that's mobile friendly seems like a good start.

Also, many of us use our phones with just one hand, so making sure that a website can be accessed and used with one hand is also helpful.

Another helpful idea is including tooltips in HTML. Many times, a website visitor may want more information on what is shown, so a tooltip where they can hover for more information is helpful.

These are just a few things I've noticed that help make websites and apps easy to use.