Projects in jQuery Mobile: Learn by building Real World Apps

Discover jQuery mobile, a cross-platform framework that combines HTML5, CSS3, and jQuery UI to build mobile web sites and hybrid apps, with responsive design, Ajax navigation, and touch-optimized widgets.

Explore the official jQuery Mobile API documentation, CSS classes, events, and theme customization to build real-world apps with buttons, nav bars, icons, forms, lists, and images.

Create a jQuery mobile boilerplate with the 1.4.5 js and css, an images folder, and a npm-based live server to run on localhost port 80.

Create a very simple static mobile website using jQuery Mobile to learn setup and ui elements, including a header, navigation, collapsible sections, a services list, and a contact form.

Build a simple jQuery Mobile site by copying the boilerplate, creating a single-page structure with a navbar, icons, and slide transitions between home, about, and services.

Build a mobile site with a home and about page in jQuery Mobile, implementing a header, main content, footer, navigation, and social buttons.

Create a services page featuring a list view with icons, plus a collapsible contact section and a functional contact form with name, email, and message.

Fetch movie data from the NDB API, the open movie database, including image, title, runtime, and release date, and display results in a list view with IMDB ID search.

Set up Mmdb home page user interface for a jQuery mobile movies app, including a header, search form, and a dynamic list generated by JavaScript from an application programming interface.

Build a jQuery mobile search form that uses AJAX to fetch movies from the OMDb API and render a dynamic list with posters, titles, and year.

Add a click handler on movie items to capture the movie ID, store it in session storage, and navigate to the movie details page; implement a get movie function.

Fetch and display a single movie by retrieving its ID from session storage, triggering a before show event, and rendering via AJAX with template-driven markup in a jQuery mobile app.

Build a remote MongoDB-backed event manager app on mLab, using X Yost's front-end http client for get, post, and delete operations.

Set up a free remote MongoDB database on mLab, create an event manager database with a user and an events collection, and use the mLab API to manage data.

Add an event form to the create page, capture name, date, location, and description, and post it to a remote MongoDB database using ajax, then redirect to the events page.

Fetch events via a get request, process the response data, and render an interactive event list on the home page using jQuery, including event IDs for selection.

Click an event on the home page to view its details. The page uses session storage to save event id and fetch the event name, date, and description for display.

Delete events by tapping the delete icon in the split item, use a data-id attribute with event delegation, send a delete request to MongoLab, then refresh the list.

Build a meal tracker app with jQuery Mobile and local storage to save meals, view details, delete entries, add meals, and track total calories, plus a custom theme with roller.

Build a meal tracker app with a custom theme using the theme roller, then create home and add pages with meal and calorie lists ready for local storage.

Learn to add meals to local storage by handling a form submit, generating a unique id, and saving each meal to a meals array in local storage.

populate a list view on the home page by retrieving meals from local storage and displaying each meal; use session storage to pass the meal id to the details page.

Create a meal details page, fetch the selected meal by id from session storage, render its date, description, and calories, and enable deleting the meal from local storage.

Showcases building a calorie counter in a jQuery Mobile app by loading meals from local storage, parsing JSON, summing calories, and updating a list view display.