Giter Club home page Giter Club logo

express-assessment's Introduction

Express CRUD Assessment

HEROKU DEPLOYMENT LINK##############

https://thawing-brook-7581.herokuapp.com/

Set the Stage

Why are we doing this?

This is a formative assessment. That means that the goal of the assessment is for you (and the instructors) to find whatever gaps you may have so you can take the necessary steps to improve.

Please close all open browser tabs, terminal windows and close any projects that are open in your text editor.

And remember, you've had a lot of exposure to these concepts, so if you forget something try to reason through it - throw some log statements in, take a quick break and come back etc... Ideally this reflects what you are like when you are in a normal working state, so if you are nervous, consider taking a nice walk around the block or looking at cat videos before you start :)

The Boundaries

In order to really gauge where you are, please restrict your internet access to these sites (and even then try to really wrestle with a problem for a while before consulting):

Please do not directly reference any other code. If you get totally stuck on something, that's OK! That's the whole point - to find the weak spots. So an unfinished app that you learn a lot from is better than copy/pasting code from other projects or tutorials.

Wait!!

Before you rush in, scan this whole document. Look at the designs. Read through the stories. Take your time.

Requirements

Please complete the following stories in order and complete each one before moving onto the next.

You are building a Zine for hipsters. Your zine is all about beauty - so the app has to look like the designs (yes, that means CSS).

Create the app

  1. Fork and clone this repository
  2. Create an express app (use "." to create the app in this folder)
  3. Don't forget to ignore node_modules from git.
  4. Commit and push and open a pull request

Users can create an article

Articles have:

  • A title
  • A background image URL
  • A boolean flag indicating whether the background image has dark colors (used for styling the index and show page)
  • An excerpt (which shows up on the homepage)
  • A body (which shows up on the show page)

Be sure to style this page before moving on (including the form)!!

NOTES:

Deploy to heroku

Get the app up and running on Heroku

After each story from here on out, deploy your changes to Heroku

Users can see all articles (latest first)

Each article shows:

  • The title of the article
    • If the background image is dark, the title should appear in white
    • If the background image is not dark, the title should appear in black
  • The background image should display behind the title
  • The excerpt of the article

Articles should appear with the most recent article at the top.

Don't forget to style this page before moving on :)

Users can see an article

On the index page, clicking on the title should bring you to the show page.

From anywhere in the site, clicking on "Zine" in the heading should bring you to the home page.

Users can edit / update and article

On the show page, in the article heading, users should see an edit link which brings them to the pre-filled form.

Users can delete an article

From the edit screen, users can delete an article.

Validations

On both the new/create and edit/update forms, users must enter the:

  • title
  • excerpt
  • body

When errors occur, show an unordered list of errors in Red, along with the text:

"Please correct the errors below"

Reflect

Go through each story - really take some time to read through them, click around in your app and really study the designs to make sure that yours match.

Fill out the writeup in students.galvanize.com that asks about where your weaknesses were / where you got stuck.

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.