---
# System prepended metadata

title: JS- Assignment 3 - Sharat Sachin

---

# 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
![](https://i.imgur.com/TrfUAqi.png)

### Mobile version
![](https://i.imgur.com/zB3kJZi.png)

### Error message when city not found
![](https://i.imgur.com/LFfBozF.png)

### Working of Clear cities button
![](https://i.imgur.com/DPiHYfU.png)

## Question 2

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

### CSR endpoint - `/`

![](https://i.imgur.com/54dBPZT.png)

### SSR endpoint - `/posts`

![](https://i.imgur.com/JUea8yI.png)

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.

![](https://i.imgur.com/cazKt5D.png)

### CSR mode

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

![](https://i.imgur.com/lmJBirs.png)

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.

![](https://i.imgur.com/sYX2cAH.png)

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

![](https://i.imgur.com/qVl8YWB.png)

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)

![](https://i.imgur.com/ntjwhot.png)

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.