Tindog

This document contains hints for the Tindog Solo Project.

PS: Please remember that we have both a #javascript-help channel and a #html-css-help channel in our Discord community. If you have a very specific issue you’re struggling with, you should consider posting it there.

JavaScript hint scrim

If you are struggling to get started, I have created a help scrim here. In it, I have written the basic code needed to get the Dog class to work. It creates the HTML elements for the dog with the getDogHtml() method and sets the match status with the setMatchStatus() method.

In the index.js file, I’ve set the stage for creating a new Dog instance. I have also hooked up the like button with a function that sets the match status for the new Dog. The scrim also contains some very basic styling.

What my example lacks:

• The usage of badges (LIKE / NOPE). These are meant to be added on top of the dog image for a second or so when a dog has been liked or rejected.
• This will require you to use setTimeout().
• The styling is very basic, so you will need to write most of the CSS in order to complete the design spec.
• You will need to hook up the reject button ❌ with a function that sets the hasBeenSwiped and hasBeenLiked properties of the current dog accordingly.
• You will also need to decide what should happen when the the user has reached the end of the “deck” (aka the array of dogs). You can either show a message “There are no more dogs in your area”, or just send the user back to the start of the array again.

If you are still struggling for hours with this Solo Project after having used the above hints, please let the teacher Per Harald Borgen know via the #general channel on Discord, and we will consider adding more hints. Important: be sure to include a link to you scrim, so that he can understand what you are struggling with.