Giter Site home page Giter Site logo

photogram-gui's Introduction

Photogram GUI

In this project, you will add a GUI on top of the API we previously built.

Click "Start web server" and visit your "Live app". The starting point is the ending point of the API project. You ought to already have data.

This is your new target. It's still a little ugly, but it's step on the path. Next week we'll add dropdowns, sign in/sign out, and CSS to polish it up.

Users should be able to see a lists of users, photos, links to details pages, links to delete, and forms to add.

Things to keep in mind:

  • When you make forms, don't forget to add a <label> for every form control (<input>, <textarea>, etc). The <label> should have a for="" attribute that matches the id="" attribute of the input. For example,

    <label for="zebra">Fan</label>
    <input id="zebra" type="text" name="qs_fan_id">

    This lets the browser know which label belongs to which input, which helps with accessibility, ergonomics, SEO, and most importantly for you right now โ€” automated tests.

  • I added some validations to try and help prevent bogus data from entering your tables. Check them out in your models.

Standard Workflow

  1. Add dummy data: rails dev:prime
  2. Start the web server by running bin/server in a Terminal.
  3. Navigate to your live application preview.
  4. As you work, remember to navigate to /git and commit often as you work.
  5. Make new branches freely to experiment! Especially before starting on a new task.
  6. Run rails grade as often as you like to see how you are doing, but make sure you test your app manually first to make sure it matches the target's behavior first.

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.