- READ THE INSTRUCTIONS FIRST BEFORE PROCEEDING!
- You are provided with a skeleton code for this Mini-Challenge. You are NOT ALLOWED to modify any part of the code unless specified. Editable parts of code are marked with
TODOcomments. - For any clarifications, ask your instructor.
- This Mini Challenge is no longer graded but will serve as additional practice for working with databases, AJAX and express (with handlebars). Submission is highly encouraged.
- Make sure MongoDB is installed and running.
- Run
npm installafter cloning the forked repository. - To run the application, execute
node index.js
- Fork this repository and submit the URL of the forked repository to AnimoSpace.
- controllers - This folder contains files which defines callback functions for client requests.
- models - This folder contains files for database modeling and access.
- public - This folder contains static assets such as css, js, and image files.
- routes - This folder contains files which describes the response of the server for each HTTP method request to a specific path in the server.
- views - This folder contains all hbs files to be rendered when requested from the server.
- index.js - The main entry point of the web application.
You are to create a web application which simulates an online phonebook.
When a client requests for the root path, i.e. /, the server should display views/home.hbs. Your web browser should display the screen below:
The web application accepts two inputs - a name and a number. When the user submits the form, the web application first checks if both fields are filled. Sample user input:
The web application then saves the values in the database, then display the values in index.hbs. Use views/partials/card.hbs to render the <div> for each contact. Upon submitting the form, the contact should be displayed immediately without refreshing the page.
HINT: the client should communicate with the server asynchronously.
HINT: The server can render the handlebars template and send the rendered HTML partial. See the express documentation on res.render to know more.
The picture below shows how the web application should display the values that we have entered earlier:
Each contact may be removed using the X button on the upper right of the <div>. Upon clicking the X button, the web application deletes the contact from the database then removes the corresponding <div> of the contact from views/home.hbs. This operation should be done without refreshing the page.
Note that the number should be UNIQUE for each contact - no two contacts may have the same number. Thus, you are required to check if the current value entered by the user in the number text field has not yet been used by any other contact in the database. You need to check this EVERY TIME the user enters a number in the number text field.
If the current value in the number text field IS IN THE DATABASE:
- Change the background color of the
numbertext field tored. - Display the error message
Number already registeredin the<p id="error">element inviews/home.hbs. - Disable the
submitbutton.
Else if the current value in the number text field IS NOT YET IN THE DATABASE:
- Change the background color of the
numbertext field back to#E3E3E3 - Remove the error message in the
<p id="error">element inviews/home.hbs. - Enable the
submitbutton.
The picture below shows the changes in the form if the current value in the number text field is already in the database:
Upon refreshing the web application, all contacts in the database should be displayed.
You are already provided with the skeleton code organized in MVC architecture. Your task is to study the web application and complete the code of the files below. You are NOT ALLOWED to modify other files except the files below. Editable parts of code are marked with TODO comments, where you can insert your code.
Goodluck and stay safe! 😎
Maximize the materials uploaded for class and the resources readily available on the internet.
- ccapdev-ajax code sample
- ccapdev-mongoose code sample