Progressive enhancement

Progressive enhancement is a web design method that prioritizes core web page information first. As the end-browser/Internet user's connection allows, this method gradually adds increasingly sophisticated and technically rigorous layers of presentation and functionalities on top of the information. The merits of this method are that it allows anyone with any browser or Internet connection to access the fundamental content and functionality of a web page, while also offering an improved version of the page to those with more advanced browser software or more bandwidth.

The Progressive enhancement strategy consists of the following:

• Basic content should be accessible to all web browsers
• Basic functionality should be accessible to all web browsers
• Sparse, semantic markup contains all content
• Enhanced layout is provided by externally linked CSS
• Enhanced behavior is provided by unobtrusive, externally linked JavaScript
• End-user web browser preferences are respected

My progressive enhancement

Each restaurant is displayed as a carousel of photos in my app. Clicking on the carousel's right side will take you to the next photo, while clicking on the left will take you back to the previous photo. Normally, I would accomplish this by altering the picture source with javascript. However, in accordance with the PE strategy, I decided to adopt a different approach. To allow the user to see all of the pictures even if javascript isn't working, I made the parent element scrollable and placed all of the pictures adjacent to each other.

If JavaScript is enabled, the two buttons on top of the carousel become active, allowing the user to navigate the carousel by just clicking on the sides.

In the code below you can see how the button function. By activating JavaScript the buttons get a class jsactive to get displayed. And each time the a button is clicked, 200px get added or subtracted from the scroll position.

const slider = document.querySelector("#images");
const previousBtn = document.querySelector("#option .previous");
const nextBtn = document.querySelector("#option .next");

window.addEventListener('load', () => {
  nextBtn.classList.add('jsactive')
  previousBtn.classList.add('jsactive')
})

nextBtn.addEventListener("click", () => {
  slider.scrollLeft += 200;
});
previousBtn.addEventListener("click", () => {
  slider.scrollLeft -= 200;
});