JavaScript 30- Day 27 Study Notes

Day 27 of JavaScript 30 by Wes Bos involved setting up a click and drag feature to scroll through multiple divs horizontally across the viewport.

The HTML and CSS made a series of 23 divs as a slider. The divs will transform slightly when clicked on for a nice effect.

We set up several variables.

const slider = document.querySelector('.items');let isDown = false;let startX;let scrollLeft;

Next, we added event listeners with functions. Mousedown activated the slider.

slider.addEventListener('mousedown', (e) => {  isDown = true;  slider.classList.add('active');  startX = e.pageX - slider.offsetLeft;  scrollLeft = slider.scrollLeft;});

MouseLeave turned the slider off.

slider.addEventListener('mouseleave', () => {   isDown = false;   slider.classList.remove('active');});

Mouseup also turned off the slider.

slider.addEventListener('mouseup', () => {  isDown = false;  slider.classList.remove('active');});

And mousemove made the slider scroll leftward.

slider.addEventListener('mousemove', (e) => {   if(!isDown) return; //stop fn from running   e.preventDefault();   const x = e.pageX - slider.offsetLeft;   const walk = (x - startX) * 3; // *3 to move faster   slider.scrollLeft = scrollLeft - walk;});

I am still not comfortable working with offsets and positioning. I will need to use them in other programs to get better at it.

Follow my study notes as I progress through JavaScript 30.

Retired physician, writer, aspiring website designer and developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store