Question: I store a user entry into local storage. This information is then stored inside a list as individual items. This all functions fine but the keys displayed look very ugly and I would like to know how to improve this.

[![enter image description here](https://i.stack.imgur.com/bdhSO.png)](https://i.stack.imgur.com/bdhSO.png)

The text is displayed as {"Entry":"run at the park".... How can I make this look better, for example, Entry: run at the park.....I can provide html if needed.

Answer: 
Assuming you have JSON stored in the `localStorage`, use use `JSON.parse()` to parse the JSON in the `localStorage` item and then use the keys and values to format the html how you want it.

```js
var json = JSON.parse('{"entry":"run at the park","exercise":"jogging"}');
// you'd probably do...
// var json = JSON.parse(localStorage.getItem('whatever'));

document.getElementById('list').innerHTML = '<li><strong>'+json.entry+':</strong> '+json.exercise+'</li>';
```

```html
<ul id="list"></ul>
```
I did it with only HTML and JS. For the variables I used [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals "Template literals").

```html
<!DOCTYPE html>
<html>
 <body>
 <p id="demo"></p>
 <script>
   let log = {
   "Entry": "run at the park",
   "Exercise": "jogging",
   "Date": "2017-05-03",
   "Start": `10:21am`,
   "End": `11:45pm`,
   "calories": `649`
  };
  document.getElementById("demo").innerHTML =
   `Entry: ${log.Entry}<br>
   Exercise: ${log.Exercise}<br>
   Date: ${log.Date}<br>
   Start: ${log.Start}<br>
   End: ${log.End}<br>
   calories: ${log.calories}`;
 </script>
</body>
</html>
```