Swiping Left and Right with JavaScript

Creating a Tinder-Like Carousel Using CSS, HTML and Vanilla Object-Oriented JavaScript

Recently, I was tasked with creating a single-page-application (SPA) using only object-oriented JavaScript (OOJS) in conjunction with HTML and CSS for the application front-end. Ruby on Rails was used as an API for the project back-end. Although these specifications may seem restrictive, fun and interactive applications can be created using JavaScript in conjunction with CSS and HTML.

For my project I created an application called WineSwipe. WineSwipe allows users to list wines for re-sale and also “swipe” left or right on wines they are potentially interested in purchasing. Wines that a user swipes right on are added to a user’s “likes” and can be viewed anytime during a particular session. This model may seem all too familiar with anyone who has been involved in the dating-world recently. Applications such as Tinder have become increasingly popular and certainly inspired the front-end functionality for WineSwipe. However, unlike modern dating applications, users of this application will not have to worry about rejection and the recent phenomena of being “ghosted”.

The JavaScript Code for Creating the Swipe Functionality

Below I will detail my process for creating a Tinder-like card carousel in JavaScript (JS). Some understanding of JS is assumed. For deeper understanding please see MDN for information regarding JS event listeners:

EventTarget.addEventListener() - Web APIs | MDN

Step-one: Creating a Card

Before an individual begins the process of swiping, cards must exist in the first place. During the initialization process, all cards are initialized with an HTML class of “card-unswiped”. Please note the class syntax and the use of instance methods and class methods in JS (any method prepended with the keyword static is a JS class method and therefore operates on the class as a whole rather than a single instance). The below method creates a single wine (card) instance:

step-two: Creating All Cards

Next we must use the instance method above in a class method in order to create all wines:

The first three lines of the method above should be ignored as they relate to the login process. Within this method we are also invoking the getWines method on an instance of an API defined in an API Service class. This method retrieves data from a Rails API which we can iterate over (the data is an array of objects) and then use the renderWineCard method to create a wine card from every object in the array. For more information please see the project GitHub repository provided below:

GitHub - jgumerove/wine_swipe_frontend

Pay close attention to the addEventListeners method used within the createWines method above — this is our third step and is explained in further detail below.

Step-three: Adding Functionality to Our Buttons for the User Interface

Without (an) event listener(s) the application would have no user interactivity — the application’s buttons would literally be useless. Therefore an event listener must be added to our buttons in order to execute some kind of response when clicked. In our case, when a user clicks the ❌ button we would like the wine card to move slightly left and then disappear. When the ✔ button is clicked, the card should move slightly right before disappearing:

Notice how previously we gave our buttons classes (within the renderWineCard method). These classes are used within the event listener to execute code if (and only if) specific criteria are met. If the ✔ button (which was assigned an HTML class of “yes-like”) is clicked the code above performs the following steps:

1. Declares a constant called changeClass and sets it equal to the closest unswiped card. Since the buttons are child elements of the “card-unswiped” HTML class, the current card will always be the closest unswiped card.
2. Performs a single animation on the card lasting approximately 1 second . Here we are telling JS to perform an animation defined within the application CSS. Notice how the name of the animation specified in the JS event listener matches the name of a specific animation within our CSS:

3. Removes the wine card from our unswiped cards after the animation is performed. It is important to note the asynchronous nature of JS. In short, JavaScript begins a task (the execution of a code block), and then starts on the next task — regardless of whether or not the previous task has been completed. This can be thought of as a kind of multi-tasking, and is in fact a comparative advantage relative to synchronous languages such as Ruby (i.e. application speed). However, it is important to be aware of JavaScript’s asynchronicity in order to prevent application bugs and errors from occurring. Note the following lines of code within our event listener:

The application is running an animation lasting (as mentioned earlier) approximately one second on the wine card — which is assigned to an HTML class of “card-unswiped”. This HTML class is assigned specific CSS properties and behaviors. Once the animation is done, the wine card is assigned to a different class (the class is changed) — which contains its own CSS properties and behaviors. This was achieved through the use of setTimeout — we specified that JavaScript should wait one second (note the function takes in milliseconds as a parameter) before executing the code inside the (built-in JS) function. If we did not wrap the code-block changing the HTML class in a setTimeout, the animation would never appear and we would see the next card (almost) immediately. This is due to processing speed — the animation would begin and almost right away the class of the wine card would be changed to an HTML class with different CSS properties and behaviors — effectively ending the animation as soon as it begins.

The code-block used to encapsulate the left-swipe feature is nearly identical. One feature not present in the left-swipe code-block is setting the style animation to null — this is done since the application tracks and allows users to view their liked wines. The animations need to be removed in order to prevent animations from occurring every time a user views their likes.

The CSS Used with Our JavaScript and HTML Explained

Notice only the first card in our HTML class of unswiped-cards is displayed. This (first) card changes every time a user clicks ❌ or ✔ by changing the class of the card and making the next unswiped-card the first card in the card deck. When a user swipes left, the card class is changed to card-swiped-disliked, which has display property of none — making the card disappear from view. When a user swipes right, the card class is changed to card-swiped-liked. Although this class has a non-hidden CSS display property, the HTML for this class is nested under a modal — which only appears under certain circumstances (and appears over the main HTML page):

This allows a user to view their likes while using the application without interfering with the application functionality.

Please feel free to download this application (GitHub repository previously provided). If there are any questions regarding implementation feel free to leave a comment and I will attempt to answer as soon as possible.