Chitter-challenge #124
Chitter-challenge #124
Conversation
| }) | ||
|
|
||
| describe('loadPosts', () => { | ||
| it('fetches notes from the server', async () => { |
There was a problem hiding this comment.
I don't think you need to use async functions in this case. I can understand why you would though
| let samplePosts = ['Peep', 'Peep2']; | ||
|
|
||
| fetch.mockResponseOnce(JSON.stringify({ | ||
| samplePosts |
There was a problem hiding this comment.
Seems pretty straightforward to include the sample posts directly rather that setting them to a variable used only once
|
|
||
| </div> | ||
|
|
||
| <script type="text/javascript" src="bundle.js"></script> |
There was a problem hiding this comment.
Alex mentioned to us that it's good practice to include the script in the head with "Defer" in the tag to do the same thing
There was a problem hiding this comment.
<script type="text/javascript" src="bundle.js" defer ></script>
| constructor(body){ | ||
| this.body = body; | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
I guess this model wasn't finished but naturally no reason to have a class without being able to return the body
| } | ||
|
|
||
| addPost(post){ | ||
| this.posts.unshift(post); |
There was a problem hiding this comment.
Is there a reason you use unshift rather than push?
| document.querySelector('#add-new-post').addEventListener('click', () => { | ||
| const newPost = document.querySelector('#input-new-post').value; | ||
| this.displayNewPost(newPost); | ||
| document.querySelector('#input-new-post').value = ""; |
| if ('errors' in data){ | ||
| this.loggedInContainer.innerText = `${data.errors.password}` | ||
| }else { | ||
| this.loggedInContainer.innerText = `${userVal} logged in` | ||
| console.log(this.user_id, this.session_key); |
There was a problem hiding this comment.
I appreciate this catch, nice one. I haven't seen 'errors' in data before
| let api; | ||
| let posts; | ||
| let view; |
There was a problem hiding this comment.
Is there a reason to why you declare them here and then give them values in the before each?
| setTimeout(() => { | ||
| try{ | ||
| expect(document.querySelectorAll('div.post').length).toEqual(1); | ||
| expect(document.querySelectorAll('div.post')[0].innerText).toEqual('Test Peep'); | ||
| done(); | ||
| } catch(error) { | ||
| done(error); |
| h1, p, * { | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| html { | ||
| /* background:#F9F7FD; */ | ||
| background: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%); | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| h1{ | ||
| color: #4eb4e2; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
|
|
||
| body { | ||
| display: flexbox; | ||
| justify-content: center; | ||
| color: #607d8b; | ||
| width: 600px; | ||
| margin: 0 auto; | ||
|
|
||
| margin-top: 20px; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .peep { | ||
| border-bottom: 1px solid #aaa; | ||
| padding: 15px; | ||
| background: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%); | ||
| border-radius: 15px; | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .peep-details { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .signup { | ||
| display: flex; | ||
| justify-content: center; | ||
| border-radius: 10px; | ||
| padding: 20px; | ||
| border-bottom: 1px solid #aaa; | ||
| } | ||
|
|
||
| .login { | ||
| display: flex; | ||
| justify-content: center; | ||
| border-radius: 10px; | ||
| padding: 10px; | ||
| border-bottom: 1px solid #aaa; | ||
| } | ||
|
|
||
| button { | ||
| font-size: medium; | ||
| font-weight: bold; |
There was a problem hiding this comment.
Great that you got to the CSS, I didn't manage to get this far
No description provided.