A bit of simple Javascript is capable of much

I've never worked as a professional front-end developer, and although I've been writing HTML / CSS / JS for 15 years for small side projects, the projects were all pretty small. It happens that I don’t write Javascript for many years between these projects, and often I’m not sure that I’m doing everything right.

This is partly why I used libraries a lot! Ten years ago, I used jQuery, and since 2017, I've been using vue.js a lot for my small projects (you can check out the little sapper game I made as an introduction to Vue).

But last week, for the first time in a long time, I wrote simple Javascript without a library, and it was fun, so I wanted to talk a little about it!

Experimenting with plain Javascript

I really like Vue. But last week, when I started developing https://questions.wizardzines.com , I had slightly different restrictions than usual - I wanted to use the same HTML to create a PDF file (with Prince ) and create an interactive version questions.

I really didn't see how this is possible with Vue (because Vue wants to create all the HTML on its own) and since it was a small project I decided to try writing it in plain Javascript without libraries - just write some HTML / CSS and add one <script src="js/script.js"> </script>.

I haven't done this for a while, and along the way I learned a few things that would make the process easier than I thought when I started.

Do almost everything, adding and removing CSS classes

I decided to implement almost all of the UI just by adding and removing CSS classes and using CSS transitions if I want to animate the transition.

Here is a small example where clicking a button nextfor a question adds a class doneto the parent div.

div.querySelector('.next-question').onclick = function () {

It worked pretty well. My CSS, as always, is a bit chaotic, but seems manageable.

Adding / Removing CSS Classes Using .classList

I started with classes editing as follows: x.className = 'new list of classes'. It's a bit messy though and I wondered if there is a better way. And he was!

CSS classes can be added like this:

let x = document.querySelector('div');

element.classList.remove('hi') Is much cleaner than my previous method.

Find items using document.querySelectorAll

When I started learning jQuery, I remember I thought that if you need to easily find something in the DOM, you need to use jQuery (for example, $('.class')). I just found out this week that you can just write instead document.querySelectorAll('.some-class'), and then you don’t need to depend on any library!

I got curious when it was introduced querySelectorAll. I googled a bit and it looks like the Selectors API was built sometime between 2008 and 2013 - I found a post from a jQuery author discussing a proposed implementation in 2008, and a blog post from 2011 that said that it was in all major browsers at a time, so it may not have existed when I started using jQuery, but it has definitely been around for quite some time :)

Install .innerHTML

In one place, I wanted to change the HTML content of a button. Creating DOM elements with is document.createElementpretty tedious, so I tried to keep the work to a minimum and instead set the .innerHTMLHTML line I needed:

  button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
    <object data="/confetti.svg" width="30" height = "30"> </object>

Scrolling a page using .scrollIntoView

The last funny thing I found out about is this .scrollIntoView. I wanted to automatically scroll to the next question when someone clicks the “Next Question” button. It turns out this is just one line of code:

row.scrollIntoView({behavior: 'smooth', block: 'center'});

Another vanilla JS example: peekobot

Another small example of a simple JS library that I found good is peekobot , which is a small chatbot interface made up of 100 lines of JS / CSS.

As you can see from its Javascript , it uses several similar patterns - a lot .classList.add, some adding elements to the DOM, some .querySelectorAll.

From the peekobot source, I learned about the .closest element , which finds the closest ancestor that matches a given selector. It looks like it would be a good way to get rid of some .parentElement.parentElementI wrote in my Javascript that seemed a little fragile.

Simple Javascript can do a lot!

I was very surprised at how much work could be done using simple JS. As a result, I wrote about 50 lines of JS that did everything I wanted to do, and a little more to collect some anonymous indicators about user training.

As usual with my front-end posts, this doesn't have to be serious front-end development advice. My goal is to write small websites with less than 200 lines of Javascript that mostly work. If you are also in the frontend world, I hope this helps a little!

All Articles