# JS- Assignment 3 - Sharat Sachin

## Question 1

As I am using my own instance of [CORS-Anywhere](https://github.com/Rob--W/cors-anywhere/), it make take some seconds for the first card to render as the Heroku server will have a cold start.

### Adding cities, cards stacked in flexbox style

### Mobile version

### Error message when city not found

### Working of Clear cities button

## Question 2

Also hosted this on Heroku for a quick demo:
https://shielded-falls-06579.herokuapp.com/

### CSR endpoint - `/`


### SSR endpoint - `/posts`


When Javascript is disabled and the `Submit` button is clicked, we are redirected to the `/posts` endpoint.

On both the pages, you can use the form to add blog posts to the list under the form.


### CSR mode

On clicking the edit button in CSR mode, the `contenteditable` attribute is enabled and you can make required changes.


On clicking the save button, the changes are saved and an ajax request is sent to the `/edit` endpoint to save the changes in the server.


### SSR mode

On clicking the edit button in SSR mode, the whole post element gets replaced by a version of the post element where each of the editable text elements is wrapped up in a input element.


On clicking the save button, an ajax request is sent to the `/edit` endpoint to save the changes in the server, then the whole page is refreshed, and rendered again. (In the image below, the author name is edited)


Similarly, all of the buttons, up, down, edit, and save work in both CSR and SSR mode and use the `/edit` endpoint to save their changes in the server so that all changes persist on a page refresh.

### Current limitations
* form input element rendering is not perfect in SSR mode -> CSS needs more work
* all the form fields are only validated on client side, which can be easily bypassed -> needs server side validation
* no validation at all on editing using the edit button, so any of the fields can take any value, vulnerable to XSS attacks -> needs server side validation and input sanitization.