Skip to content
Home » JQuery Image Gallery With API – Problem 04

JQuery Image Gallery With API – Problem 04

Problem Solving

Enhance your image gallery solution to. have client side rendering of html making use of jQuery and underscore library.
Major Learning Goals include the following

JQuery

jQuery is a fast, lightweight, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, and AJAX interactions for rapid web development. It was first released in 2006 and has since become one of the most widely used JavaScript libraries on the web.

jQuery allows developers to easily manipulate the Document Object Model (DOM) of an HTML page, add interactivity and animations to web pages, and handle user events such as clicks, keypresses, and mouse movements. It also provides a number of pre-built plugins and widgets, such as carousels, sliders, and date pickers, which can be easily integrated into web applications.

One of the key benefits of jQuery is its cross-browser compatibility. It provides a unified API for interacting with the DOM, regardless of the browser being used, which helps to ensure consistent behavior across different platforms.

jQuery is open source and free to use, which has helped to fuel its widespread adoption and popularity. It is actively maintained and updated by a large community of developers, and there are many resources and plugins available to help developers get started and build powerful web applications quickly and easily.

Underscore JS

Underscore.js is a lightweight JavaScript library that provides a wide range of utility functions and functional programming helpers to simplify working with arrays, objects, functions, and other data structures in JavaScript. It was first released in 2009 and has since become a popular tool for web developers.

Underscore.js provides a set of functions that can be used to manipulate and transform data, filter and search arrays, group and partition collections, and perform a wide range of other common tasks in JavaScript programming. It also provides support for functional programming constructs such as map, reduce, and filter, which can be used to write more concise and expressive code.

One of the key benefits of Underscore.js is its versatility and compatibility. It can be used in a wide range of environments, including web browsers, Node.js, and other JavaScript runtimes. It also provides a number of pre-built functions and templates that can be easily customized and integrated into web applications.

Underscore.js is open source and free to use, and is actively maintained by a community of developers. It has been widely adopted in the web development community, and is often used in conjunction with other popular libraries and frameworks such as jQuery and Backbone.js.

Exercise

Add an extra route /jquery to serve an ejs template with jQuery included

Move the image creation logic to a function returning a Promise

Promise reference 1

Promise reference 2

Add an API endpoint to express app /api/v1/image-list to return a list of created images

Make use of jQuery Ajax api to get the data from server

Define an underscore tempalte for rendering a single image with the name placed at bottom of the image

Make use of Underscore template to render the images on frontend

Implement Pagination with a url pattern /gallery/#