Giter Site home page Giter Site logo

fsw-school-classes's Introduction

School Classes Management

Introduction

In this lab you will be developing a server that stores data for a school, and a simple frontend. The school has the following data models:

  • Classes
  • Students

Setup

  • Create a new project from scratch on your computer
  • Install express and write the boilerplate code to get it running
  • Create a new repository on github. DO NOT check the box to create a README file.
  • Follow the instructions on github for setting up a new project

Overview

  1. Take a look at the JavaScript Classes in the files Class.js, School.js and Student.js. They will be our models for creating objects.

  2. In your server instantiate a School as a global variable. Something like:

    let mySchool = new School();
  3. As you saw in School.js a School object has a method called addClass(). You will use this method to add a class to the school. Example:

    mySchool.addClass('physics', 'Henry Roman'); // Creates a Class Object with the name physics
  4. It is your responsibility to implement and write the code for all the School methods outlined in School.js. The comments above the methods document what the methods should do and return. You will use these methods in your server routes.

Code Details

Classes

  • Classes objects will be stored in the classes(this.classes) property of the School instance.

  • The classes property of a School is itself an object where the property key is the name of the class and the property value will be a Class object.

  • Each Class object has a name property, a teacher property with a string that represents the name of the instructor and a students property that holds an array of Students currently enrolled in that class. Class.js is as follows:

    class Class {
      constructor(name, teacher) {
        this.name = name
        this.teacher = teacher
        this.students = []
      }
    }
    
    module.exports = Class;

Students

  • Each student within a class is an object that stores four data points or properties:
    • name
    • age
    • city
    • grade
  • The Student class found in Student.js has:
    class Student {
      constructor(name, age, city, grade) {
        this.name = name
        this.city = city
        this.age = age
        this.grade = grade
      }
    }
    
    module.exports = Student;
  • A student can be enrolled in multiple classes. A student's grade is class dependant.

Technical Requirements

Routes

Creating a new class

Method Endpoint Request Body
POST /class Class properties: name, teacher
  • Create an Express route/endpoint to handle the request as seen above.
  • The method addClass() in the School has already been implemented for you. Make sure you understand how it works. Use the addClass() method in your route handler.
  • If the class already exists, respond with an error message.

A successful response should look like:

{ 
  "class": { "name": "Physics", "teacher": "Henry Roman", "students": []},
  "message": "Created a new class",
  "timestamp": "YYYY, MM/DD HH:MM:SS"
}

An error response should look like:

{ 
  "error": "Please fill out all the information or Class already exists",
  "timestamp": "YYYY, MM/DD HH:MM:SS"
}

Enrolling students in a class

Method Endpoint Request Body
POST /class/<class-name>/enroll Student properties: name, age, city, grade
  • Create an Express route/endpoint to handle the request as seen above.
  • Add the new student to <class-name> class.
  • If the student is already enrolled in the given class, update/rewrite the student's information with the new data passed.
  • Implement the method enrollStudent() in the School object for accomplishing this. This method should add the student to the students array within the Class object.

A successful response should look like:

{ 
  "student": { "name": "John", "age": 30, "city": "NYC", "grade": 75 },
  "className": "physics",
  "message": "Enrolled Student",
  "timestamp": "YYYY, MM/DD HH:MM:SS"
}

An error response should look like:

{ 
  "error": "Please fill out all the information for the student",
  "timestamp": "YYYY, MM/DD HH:MM:SS"
}

List all students enrolled in a Class

Method Endpoint Query Parameters
GET /class/<class-name>/students failing=true|false, city=nyc
  • Create an Express route/endpoint to handle the request as seen above.
  • This endpoint should return all the students enrolled on <class-name>.
  • If query parameters are passed:
    • If failing=true, return all students that are failing the class, that is all students whose grade is less than 70.
    • If a city is passed return students whose city match the city passed.
    • If both failing and city are passed return students that are failing and that live in the specified city.
  • If not matches for students failing or in a given city are found, the students property of the response should have an empty array.
  • If the given class <class-name> doesn't exist and error should be returned.
  • Implement the methods getStudentsByClass() and getStudentsByClassWithFilter() in the School class for accomplishing this.
{
  "students": [
    { "name": "John", "age": 30, "city": "NYC", "grade": 75 },
    { "name": "Emily", "age": 28, "city": "LA", "grade": 80 }
  ],
  "message": "Retrieved Students",
  "timestamp": "YYYY, MM/DD HH:MM:SS"
}

An error response should look like:

{ 
  "error": "Class physicslol doesn't exist.",
  "timestamp": "YYYY, MM/DD HH:MM:SS"
}

Frontend

Build three separate forms, for using each of the different routes:

Form 1: Add Class

Have text inputs for:

  • class name
  • teacher

Have a button to submit the form to your server. Display the response below the form.

Form 2: Add Student

Have text inputs for:

  • class
  • name
  • age
  • city
  • grade

Have a button to submit the form to your server. Display the response below the form.

Form 3: List Students

Have inputs for:

  • class
  • city (optional)

Have a checkbox input for:

  • Show Failing Students Only

Have a button to submit the form to your server. Route and retrieve the appropriate information given your inputs. Display the response below the form.

Rubric

expressProjectRubric

fsw-school-classes's People

Contributors

alejo4373 avatar benstone1 avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  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.