How to translate from jquery to pure javascript this finsweet hack #4 for webflow

I got a code in Jquery and need it in pure javascript. Could you help me to translate this same code in pure javascript ? I've let the comments to make it easier.

ORIGINAL JQUERY CODE:

     // when DOM's ready
$(document).ready(function() {
       const linkTextArr = []; 
    // for each filter button
       $('.navlink_button').each((index, link) => {
    // get its text content and reformat to a valid ID
       let linkText = $(link).text().replace(/\W/g,'_').toLowerCase(); 
    // set the reformatted linkText as the link href attribute
       $(link).attr('href', '#'+linkText);
    // push reformatted linkText to array 
       linkTextArr.push(linkText);
       });
    // for each section
       $('.hack4-cms-anchor-section').each((index, section) => {     

       $(section).attr('id', linkTextArr[index]);
       });
    // set up intrsection observer 
       let observer = new IntersectionObserver((entries, observer) => { 
    // for each anchor section
       entries.forEach(entry => {
    // if it's in the viewport
       if(entry.isIntersecting){
       $('.navlink_button.hack4-active').removeClass('hack4-active');
       $(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
       }
       });
    // set thrshld to 1 ensures the whole anchor section
    // is in viewport before adding active class to active link
       }, {threshold: 0});
    // start intersection observer for each anchor section
       $('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
       });
       

I tried to translate it like this, by replacing all the selectors:

// when DOM's ready
document.addEventListener('DOMContentLoaded', () => {
// create empty array that will store link text strings 
   const linkTextArr = []; 
// for each filter button
   document.querySelectorAll('.navlink_button').each((index, link) => {
// get its text content and reformat to a valid ID
   let linkText = document.querySelector(link).text().replace(/\W/g,'_').toLowerCase(); 
    // set the reformatted linkText as the link href attribute
  document.querySelector(link).attr('href', '#'+linkText);
// push reformatted linkText to array 
   linkTextArr.push(linkText);
// console.log(linkText);
   });

// for each section
// ex: hellosign > hellosign 
document.querySelectorAll('.hack4-cms-anchor-section').each((index, section) => {     
// set id attribute to linkTextArray value sequentially
// 1st section gets id: linkTextArr[0]
// 2nd section gets id: linkTextArr[1] and so on
   document.querySelectorAll(section).attr('id', linkTextArr[index]);
   });
// set up intrsctn obsrvr 
// (navlnk btn highlight when on sectn)
// 2 observ whn th anchor sectns ar in viewport
   let observer = new IntersectionObserver((entries, observer) => { 
// for each anchor section
   entries.forEach(entry => {
// if it's in the viewport
   if(entry.isIntersecting){
// remov l'active class from current active link
document.querySelector('.navlink_button.hack4-active').removeClass('hack4-active');
// add the active class to the current active link
document.querySelector(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
       }
       });
    // set thrshld to 1 ensures the whole anchor section
    // is in viewport before adding active class to active link
    // this part ', {threshold: 1}' is optional
       }, {threshold: 0});
    // start intersection observer for each anchor section
    document.querySelectorAll('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
       });

But I don't know how to translate this line with this #${ :

$(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');

after that can you tell me if there something else that is still jQuery on my translation ?

1 answer

  • answered 2022-01-21 11:00 Prakshal Shah

    Probably, this might help you but you have to unit test your code because you can't entirely depend on some online tool in case of conversion logics.

    Convert Jquery code to vanila Javascript

    Here, I have done activity for you. Please test it and replace the selectors if you find some error or glitch in it.

     document.querySelector(document).ready(function() {
       const linkTextArr = []; 
    // for each filter button
       document.querySelector('.navlink_button').each((index, link) => {
    // get its text content and reformat to a valid ID
       let linkText = document.querySelector(link).text().replace(/W/g,'_').toLowerCase(); 
    // set the reformatted linkText as the link href attribute
       document.querySelector(link).attr('href', '#'+linkText);
    // push reformatted linkText to array 
       linkTextArr.push(linkText);
       });
    // for each section
       document.querySelector('.hack4-cms-anchor-section').each((index, section) => {     
    
       document.querySelector(section).attr('id', linkTextArr[index]);
       });
    // set up intrsection observer 
       let observer = new IntersectionObserver((entries, observer) => { 
    // for each anchor section
       entries.forEach(entry => {
    // if it's in the viewport
       if(entry.isIntersecting){
       document.querySelector('.navlink_button.hack4-active').removeClass('hack4-active');
       document.querySelector(`.navlink_button[href='#${entry.target.id}']`).classList.add('hack4-active');
       }
       });
    // set thrshld to 1 ensures the whole anchor section
    // is in viewport before adding active class to active link
       }, {threshold: 0});
    // start intersection observer for each anchor section
       document.querySelector('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
       });
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum