Giter Site home page Giter Site logo

auction_ajax's Introduction

Auction App - Add AJAX

Description

Given an existing application, add AJAX for submitting information without reloading the page.

Objectives

After completing this assignment, you should...

  • Understand what AJAX is and how it can enrich a Rails application.
  • Implement AJAX to refresh information on a page.
  • Implement AJAX to accept a form submission without reloading its page.

Deliverables

  • A Repository. This README is stored in a folder with an existing Rails application. Fork this repository and do your work in this Rails app.

Normal Mode

This application is an auction site, and although it doesn't do much now, it will do more and more over time. You will note that you can view a list of all items for sale, can make new items, and can make bids on items.

Tonight, your assignment is to modify the bidding page. Currently, to see if anyone else has bid, you have to refresh the entire page. Also, if you place a bid yourself, the page refreshes to display the changes. You will be using AJAX to allow both of those behaviors to occur without page reload.

To be specific:

  • The place bid form should be remote, and should (a) update the highest bid and (b) update the next bid field to be $10 higher than the max bid.
  • Every 15 seconds, these same two areas should update if someone else places a new bid.

In order to test the case of "someone else" placing a bid, feel free to have the app open in two different tabs. You can make a bid in one and then check that the other one updates automatically.

Hard Mode

Improve the styling of the application. Feel free to make whatever modifications you see fit, but at least work on the following:

  • Foundation has more styles that could be useful. Use a few.
  • Images are sometimes shown stretched, sometimes shown with extra space on the sides. Make them always appear the same size, but do not change their native aspect ratio.
  • Modify the main items index page. Make it look nice, and remove the table. Build the whole page without any tables.
  • Color.

Notes

auction_ajax's People

Contributors

masonfmatthews avatar ssrcruz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.