{"action":"closed","issue":{"url":"https://api.github.com/repos/girlcodeakl/girlcode16-3/issues/7","repository_url":"https://api.github.com/repos/girlcodeakl/girlcode16-3","labels_url":"https://api.github.com/repos/girlcodeakl/girlcode16-3/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/girlcodeakl/girlcode16-3/issues/7/comments","events_url":"https://api.github.com/repos/girlcodeakl/girlcode16-3/issues/7/events","html_url":"https://github.com/girlcodeakl/girlcode16-3/issues/7","id":174432233,"number":7,"title":"Display each post's time","user":{"login":"mgatland","id":364886,"avatar_url":"https://avatars.githubusercontent.com/u/364886?v=3","gravatar_id":"","url":"https://api.github.com/users/mgatland","html_url":"https://github.com/mgatland","followers_url":"https://api.github.com/users/mgatland/followers","following_url":"https://api.github.com/users/mgatland/following{/other_user}","gists_url":"https://api.github.com/users/mgatland/gists{/gist_id}","starred_url":"https://api.github.com/users/mgatland/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mgatland/subscriptions","organizations_url":"https://api.github.com/users/mgatland/orgs","repos_url":"https://api.github.com/users/mgatland/repos","events_url":"https://api.github.com/users/mgatland/events{/privacy}","received_events_url":"https://api.github.com/users/mgatland/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":{"login":"rue23","id":21235825,"avatar_url":"https://avatars.githubusercontent.com/u/21235825?v=3","gravatar_id":"","url":"https://api.github.com/users/rue23","html_url":"https://github.com/rue23","followers_url":"https://api.github.com/users/rue23/followers","following_url":"https://api.github.com/users/rue23/following{/other_user}","gists_url":"https://api.github.com/users/rue23/gists{/gist_id}","starred_url":"https://api.github.com/users/rue23/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rue23/subscriptions","organizations_url":"https://api.github.com/users/rue23/orgs","repos_url":"https://api.github.com/users/rue23/repos","events_url":"https://api.github.com/users/rue23/events{/privacy}","received_events_url":"https://api.github.com/users/rue23/received_events","type":"User","site_admin":false},"assignees":[{"login":"rue23","id":21235825,"avatar_url":"https://avatars.githubusercontent.com/u/21235825?v=3","gravatar_id":"","url":"https://api.github.com/users/rue23","html_url":"https://github.com/rue23","followers_url":"https://api.github.com/users/rue23/followers","following_url":"https://api.github.com/users/rue23/following{/other_user}","gists_url":"https://api.github.com/users/rue23/gists{/gist_id}","starred_url":"https://api.github.com/users/rue23/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rue23/subscriptions","organizations_url":"https://api.github.com/users/rue23/orgs","repos_url":"https://api.github.com/users/rue23/repos","events_url":"https://api.github.com/users/rue23/events{/privacy}","received_events_url":"https://api.github.com/users/rue23/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2016-09-01T04:06:22Z","updated_at":"2016-09-01T08:17:43Z","closed_at":"2016-09-01T08:17:43Z","body":"**This task can only be done after #4**\r\n\r\n\r\n# ACT 1\r\n\r\nNow that ideas are objects we can add other information to the ideas.\r\n\r\n- [ ] When an idea is saved on the server (index.js), as well as saving the text into `idea.text`, create a new name-value pair with `idea.time = \"test\";`\r\n- [ ] Restart you server and test that it's working: in your web browser, post some new ideas, then go to http://localhost:3000/ideas and look at the raw list of ideas. You should see that each idea now has a time as well as a text.\r\n- [ ] Instead of always setting the time to \"test\", get the actual date and time - try googling \"How to get current date time javascript\"…\r\n- [ ] There are two places in index.js where you need to set idea.time - once for the example idea that's created at the start, and once for the code when a user creates an idea. Make sure you've done both cases.\r\n- [ ] Now In feed.html add the idea.time so it displays after the idea text (note: it will need to be between the ```<h2> </h2>``` tags). After this change, when you look at http://localhost:3000/feed.html you should see the time for each post - but it's not pretty yet.\r\n\r\n# ACT 2\r\n\r\nWorking in *feed.html*\r\n\r\nRight now, it looks like this: `2015-09-09T03:42:18.991Z`. Only good if you are a robot  🤖\r\n\r\nWe can make that nicer, but it will take a lot of code. *Fortunately, someone else has already written the code for us!* I found a plugin that will work, it's called jquery-dateFormat.\r\n\r\n- [ ] Include jquery-dateFormat by adding this line to the *head* section of feed.html\r\n\r\n`<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.js\"></script>`\r\n\r\n(It should go just below the other `<script>` line in the head section)\r\n\r\nNow we have jquery-dateFormat, we can use some new commands. The full documentation is at https://github.com/phstc/jquery-dateFormat, but I pulled out the interesting parts for you here:\r\n\r\n- [ ] to display the post time nicely, replace `idea.time` with this:\r\n\r\n`$.format.prettyDate(idea.time)`\r\n\r\n- [ ] check that your times are now pretty! They should say something like \"11 minutes ago\"\r\n\r\nThis is a good time to commit your changes\r\n\r\n# ACT 3\r\n\r\nIt's kind of confusing that the time is the same color as the text and author name.\r\n\r\nLet's give the time its own html tag, with a class so we can give it a different CSS styles.\r\n\r\nIn feed.html, in the javascript, You will need to add an opening tag before the time, and a closing tag after the time.\r\n\r\n- [ ] Add `<div class='time'>` before the time value, and `</div>` after the time value.\r\n\r\nBecause we're writing in javascript, not in real HTML, we need to put the HTML tags inside speech marks so they become a string. (They will turn green in the Atom text editor.) Also, the string needs to be connected to the time with a plus in between.\r\n\r\n- [ ] Add a css rule to `style.css` that makes the time display in a different colour.\r\n\r\nCheck the feed to see that the time is now in a different colour."}}
{"actor":{"display_login":"rue23"}}