As time goes on and technology updates, HTML and CSS gain features that allow more interactivity without always using JavaScript. However, the need for JavaScript doesn’t diminish, it shifts. For example, when you’re working for a company or institution that has a set brand or template for their website, you find that there’s established CSS and HTML code that you can’t really edit, because you risk destroying other structures and styles on the site. This is where JavaScript comes in. 

I wanted to remove a class of a section that I was working on for a website, and add another one in its place to activate specific styles. I couldn’t access that element in the raw code of the content type, and if I did have access, removing it would have affected other sites using that content type. I knew that JavaScript would be my saving grace. Before coding anything, I had to plan out the logic and triple check my code that went along with it. This is a good practice to have, because even the most experienced developers skip a step or make a mistake when trying to get a job completed within a deadline. 

First, I created a function where I defined two variables: one variable used document.querySelector to select the class that was the child node (an element enclosed or nested within another: <div>the parent<p>the child</p></div> ) of the element I wanted to manipulate, and the second one held the parent node of the class that I wanted to remove the class from. I did this because the parent node had classes that were not unique to the element, so I might inadvertently remove the classes of other elements . 

Next, I checked if the parent variable existed, and then I removed the classes that were ruining the styling of that website section. Then, I added the class that I wanted to, already defined in the connected CSS stylesheet.

function removeAClass() {
  const theChild = document.querySelector(".unique-child-class"); //grab the child
  const parent = theChild.parentNode; //grab the parent of the child

  if(parent){
    parent.classList.remove("class-one", "class-two");
    parent.classList.add("class-to-add");
  }

  return;
}

I added this to a separate JavaScript file, and then uploaded it to the content area that activates and creates the site. It worked well and I was able to have the right styles show up on the page.

I like to explain how I go about solving a problem. I think it is important to always evaluate and revisit code that you did in some capacity, no matter how big or small. Doing this has helped reinforce my understanding, and I also learn how to explain my work to people; in and outside of the tech field.