Js2 #289
Js2 #289
Conversation
npm install bootstrap, added some content for the homepage (login/registrer)
added feed/index.html and profile/index.html and just added the ! doctype for all the pages
added some margin and col-6 for some of the content on the homepage (login/registrer
added some more content to the nav bar
added script so the bootstrap navbar etc is working proparly
forgot to add a</div>
added some placeholder information for now, so i see how it looks. also added scrpt so the header works!
adding custom colours and fonts to h1 and h2
problems with sass/scss
added hard coded comments, and profile details for the profile page. struggeling a bit with the custom scss, and striggelign a bit with some alignment.
upotadet the nav bar, so it takes you to the right place. in both the index.html and in the feed/index.html
finaly got my scss file to work, (forgot a "/" when linking stylesheet.
trying to add custom green to some of the <p> elements that is in the dark background
some alignment adcjustments and some colors that i wanted to be custom to fit my design.
forgot to add some col to make it responsive, so i had a scroll bar on the bottom of the page. resolved now
linked the right stylesheet, so i can see the changes on the homepage.
trying to get custom buttons to work.
added navbar, black background and posts to the /feed page, also adjusted some spacing and font size/apparance
adding sorting option and search bar to the feed page
added form, added the option to add picture if wanted, added the option to search for posts (sorting from newest, oldest and most poppular
trying to get scss to work, but i just get errors, and trying to get it to work, cause when i save, it worn put my custom css in dist/css/index.css
still truyiong to figur out why mu .btn-custom ikke fungerer.
cant get my custom btn to work even tho i got to add custom h1,h2,h3 coulors yuesterday.........
i don not get the accestoken, still working on it!
when logging inn, i get every thing i need in the console now, accesToken etc
local storage nows store user profile, when loggin in
added alert when the user is registerd
added an alert when you sucessfuly logg inn
got it to work, have been struggeling with a 401 error when "creating a post" turns out it was because i wrote json instead of JSON
trying to test it and fetch the posts.
now fetching 100 posts.
fetching posts, and removing some hardcoded "posts" that i used for the css-frameworks assignment
fixed form to create and edit a post.
js docs
removed every console.log used for testing the diffrent features made
updated my jsdoc to be more spesiffic and giving an even better explanation and a better example
updated navigation between login and register to make it more userfrendly
some imporvements
| return response; | ||
| } catch (error) { | ||
| console.error('Feil under fetch:', error); | ||
| throw error; |
There was a problem hiding this comment.
catch block: to suppress an error
throw: to create an error
Understand the differences, they have different purposes. Here you're basically catching an error and throwing it again.
Suggestion: remove the throw from the catch block and use the try/catch block in a UI/UX code block e.g event listener.
| body | ||
| }); | ||
|
|
||
| const {accessToken, ...user} = await Response.json(); |
|
|
||
| const action = "/auth/login"; | ||
| const method = "POST"; | ||
|
|
| const loginURL = API_SOCIAL_URL + action; | ||
| const body = JSON.stringify(profile); | ||
|
|
||
| const Response = await fetch(loginURL, { |
There was a problem hiding this comment.
-
There should be a
try/catchhere. -
A conditional statement should also be here to check if the
responseis OK or not. Response should be in small caps.
|
|
||
| const action = "/auth/register"; | ||
| const method = "POST"; | ||
|
|
| const postElement = document.createElement('div'); | ||
| postElement.className = 'card mb-3'; | ||
|
|
||
| postElement.innerHTML = ` |
There was a problem hiding this comment.
Refrain from using innerHTML for templating rather use document.createElement - it's not the most aesthetic but it's more reliable security wise. HTML injection into the API is feasible when using innerHTML.
| .catch(console.error); | ||
| }); | ||
| } | ||
|
|
There was a problem hiding this comment.
Please avoid having empty lines like this lines 90 - 99 in the future - it's bad practice.
| throw new Error(`HTTP error! status: ${response.status}`); | ||
| } | ||
|
|
||
| const post = await response.json(); |
There was a problem hiding this comment.
There should be a conditional statement here to also check the response object for post.
| throw new Error("Post ID is required"); | ||
| } | ||
|
|
||
| const updatePostURL = `${API_SOCIAL_URL}${action}/${postData.id}`; |
There was a problem hiding this comment.
-
There should be a
try/catchhere. -
There should be a conditional statement here too to check if the
responseis OK or not.
| post.appendChild(button); | ||
|
|
||
| button.addEventListener('click', () => { | ||
| console.log(postData); |
There was a problem hiding this comment.
Bad practice - remove console.log()'s in the final code.
No description provided.