Cat Clicker

As the name explains, this is a web application with some cute cat pictures fetched from Unsplash.com. A side bar gives a caption list for varoius cat images. Each caption can be clicked to see the correponding cat image. If you like a cat, you can click its image and the ♥ count for the cat will increase.

MVO

This project explores the concept of separation of concerns by using Model, View, and Octopus(MVO), an architectural design pattern (also known as MVC). In the context of application programming, separation of concerns means the separation of code into few fundamentally different pieces namely Model, View, and Octopus. The rationale behind using this design pattern is that Model and View can be organized, maintained and optimized independently of each other.

The View

View is user's interface to the application and contains all the DOM elements. For Cat Clicker, view consists of two objects; catDisplayView and catListView. catDisplayView displays the image and information of cat selected by user from catListView.

The Model

Model is where all the data is stored. In Cat Clicker, model object stores cats data including cat image, caption and click count.

The Octopus

Octopus is the central hub, containing logic that keeps model and view connected to each other. Following snippet is an expample exhibiting the role of octopus object when the page first loads.

    fetch(queryUnsplash, {
    headers: {
        Authorization: `Client-ID ${apiKeyUnsplash}`
    }})
    .then(function(response){
        // Response received
        return response.json();
    })
    .then(function(response){
        // Fill Model with Data
        model.init(response);
    })
    .then(function(){
        // Render View
        catDisplayView.render(model.currentCat);
        catListView.init(model.catList);
    });

Built with

• Unsplash API - Open collection of high-quality photos.
• Fetch API - An interface for fetching resources.
• JavaScript Objects
• DocumentFragment - Avoids multiple reflow and consquently any performance impact that can occur when changes are made to DOM.
• CSS Flexbox - CSS layout module to design flexible responsive layout structure without using float or positioning.
• Google Fonts - A library of 900 libre licensed fonts
• gulp Plugins - browser-sync, gulp-sass, gulp-cssnano

Live Version

Live version of this project can be explored here.