What bug did you find in the codebase?

When reviewing the last update, I noticed that the URLs to fcc forum contain double slashes

Please note this should only be worked on after #58 is completed

1. Modify the displayPostList function to accept one parameter posts - an array of posts to be displayed in the table.
2. Modify the API call chain so that the modified displayPostList function is called correctly, displaying all 30 posts when the page first loads. (Note: the posts parameter is an Array, so be sure to send the right information)
3. Modify handleFilterClick to clear the posts table of all previously displayed posts.
4. Modify handleFilterClick so that it passes a filtered version of the same array to displayPostList containing only posts with the selected category_id (i.e. 421 for JavaScript) For more help on this step, check out Array.filter()

The goal is for the user to be able to click on one of the buttons created in #57 and see only posts of the corresponding category in the table below. The figma prototype below illustrates this.

Design

Interactive Figma design

What feature would you like to see?

Please note: I would suggest working on this after #12 has been merged

The goal of this ticket is to setup the basic fetch call for our forum API.
The fetch method returns a promise that will either be fulfilled or rejected. The initial state for the fetch call will be pending.

We will need to create three variables.
One to check the current loading state which will have the value of a boolean. Ex. isLoading=true
One to check if there is an error fetching data. Ex. isError=false
One to set the data from the fetched results. Ex. forumData

If our fetch is successful, then we will want to save our json data to a variable, log a success message to the console and set our loading variable to false.
If our fetch failed, we will want to log that error to the console, set our error variable to true, and set our loading variable to false.

For this ticket, don't worry about display loading, error messages or rendering the content to the page.
That will be taken care of in other tickets.

For now, just use console.logs for success and failed states.

Here are some helpful articles on using the fetch API
https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#the-basic-fetch-api-syntax
https://dmitripavlutin.com/javascript-fetch-async-await/

Also, don't worry about the optional options object that was mentioned in the articles. For this project, we won't need it.

What changes would you like to make in the documentation?

Hey there,

I was thinking we could change a content structure of our README and CONTRIBUTION files.
Right now I feel like the content of README is addressing a little too much of everything and is a bit confusing.
I think we should give a reader some basic information about the project such as

• what it is about
• who we are
• how to install it
• how to contribute
• how to get help
• why should they join us

while keeping in mind that the average reader is a beginner who may have only basic computer literacy.

I'd keep the forking and cloning and all the other stuff about dependencies separately in the CONTRIBUTION file.

What work needs to be done?

Create a footer element and add the following elements to it.

    <footer>
        <p>Copyright &copy; <span id="copyright"></span></p>
    </footer>

Then in the JavaScript file, target that id, and use the Date function to display the full year.

This should be the result

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

What feature would you like to see?

Please note work on this should only begin after #57 has been completed

1. Create a function in index.js called handleFilterClick that takes one parameter event. This function will be called any time the user clicks one of the filter buttons.
2. Attach an onclick listener to all related buttons using addEventListener. The listener should call the handleFilterClick function created in step 1 when it fires.
3. Modify handleFilterClick to console.log the id of the category the user selected (i.e. when the user clicks the JavaScript button, the console should display '421'). This information can be found using the event parameter you set up in step 1. (Hint: the event doesn't have a value of it's own, but what triggered the event?)

What work needs to be done?

There are 4 urls we will be working with that represents the data we will be displaying to the user.

Forum topic url
https://forum.freecodecamp.org/t/

Forum category url
https://forum.freecodecamp.org/c/

Forum avatars url
https://sea1.discourse-cdn.com/freecodecamp

Forum API
https://forum-proxy.freecodecamp.rocks/latest

Inside the constants.js file, create four const variables for the urls listed above. Make sure they are in upper case snake case. Make sure all four variables are named exports.

For example,

export const VARIABLE_NAME1 = url goes here
export const VARIABLE_NAME2 = url goes here
export const VARIABLE_NAME3 = url goes here

Then in the index.js file, import all of those variables.

Here is a helpful resources for imports/exports
https://bobbyhadz.com/blog/javascript-export-function

What feature would you like to see?

Please note: Work on this should not start until the Basic Project Setup milestone is complete

Under the activity column there are a list of times in minutes and hours which represent when the post was last active.

Work with the bumped_at key found in the API to display the recent post activity for all 30 of the most recent posts.

What feature would you like to see?

Please note: Work on this should not start until the Basic Project Setup milestone is complete.

Each forum post will have the total number of views displayed

If the views are 1000 or more, then you will want to drop the zeros and add a k at the end.

Here are some examples:
1000 views = 1k
12,000 = 12k
113,000 = 113k

You are trying to mimic the same behavior that is found on the actual forum

What feature would you like to see?

Please note: Work on this should not start until the Basic Project Setup milestone is complete. It would also be best to work on this after #19 is completed

Some of the forum posts have a summary like this one

If you look at topics array from the API, it has excerpt and has_summary keys. For the some of the posts, there will be content for the excerpt key like you see here.

While others topics will have has_summary set to false without an excerpt key.

You will want to add a condition to say if has_summary is true, then show the summary underneath the forum category.

This should be the desired result where some forum posts have summaries while others don't.

When the user clicks on on a topic, it should be a link that opens up a new browser tab to that forum topic page on the fcc forum.

What work needs to be done?

Please note:
It would be best to work on this issue, when #9 has been merged.

Since we will be working with a table, we will need to add an empty tbody to start.
This is where all of the forum posts will go.

Inside the table and just after the thead, place a tbody element.
For that tbody element, add an id.
Give that id a name like posts-container or forum-posts.

Then at the top of the index.js file, target that id using getElementById and assign it to a new variable.

For example, something like this:

const postsContainer = document.getElementById("posts-container");

What work needs to be done?

Here are all of the forum categories that we will be working with.

const forumCategoriesObj = {
  299: { category: "Career Advice", className: "career" },
  409: { category: "Project Feedback", className: "feedback" },
  417: { category: "freeCodeCamp Support", className: "support" },
  421: { category: "JavaScript", className: "javascript" },
  423: { category: "HTML - CSS", className: "html-css" },
  424: { category: "Python", className: "python" },
  432: { category: "You Can Do This!", className: "motivation" },
  560: { category: "Backend Development", className: "backend" }
};

Add that object as a named export in the helpers.js file and import that object into the index.js file.

Here is a helpful article on imports/exports
https://bobbyhadz.com/blog/javascript-export-function

What feature would you like to see?

Our visitors are quite happy with the current version of the site. However, if they want to see the newest topics, they need to reload the entire page. Our survey shows that visitors expect the data to update every 30s.

Task

• let the table update with the latest data every 30s
• let the table retain all its already existing topics and keep adding new topics with each update
• it should update the content of the already existing topics (title, views, ...)
• the app should display its loading state while it's fetching the latest data
• the category counts should reflect the change
• applied filter and sort mechanisms should remain in place even after the table update
• the list of users should update as well (= add new users)

What feature would you like to see?

Please note: Work on this should not start until #54 is complete.

1. Create a function handleSortBtnClick which accepts one parameter event.
2. Select all buttons with name="sort" and attach new onclick listener to all of them with handleSortBtnClick as its callback function. You need to use .addEventListener().
3. Modify handleSortBtnClick so it console.log the value attribute of the button which was clicked on, eg. when Replies button is click it should log replies in the browser console

You should be able to access the button element via the event parameter.
Do not declare variable for each button, eg. const repliesBtn = document.getElementBy(...)

If you struggle, read more about Event listeners usage.
If you don't know what properties as in the event object passed to the listener,
here is a list of all Event's properties.

Discussed in #51

Description

Add HTML and CSS to display buttons above the posts table to support future ability to filter the posts by category.
During this issue, you will learn how to use Map object and do basic operations on it. You will practice dynamical access to object properties and working with DOM.

1. Place this between the title and the table.

<div id="filter-btns">
 // space for future buttons
</div>

2. Declare a Map object called categories on top of the index.js among other declarations. This will hold key value pairs representing category_id and its count.
3. Declare a function called displayCategories
4. Inside that displayCategories function
   1. loop through all items in forumData.topic_list.topics and check whether the categories Map object contains the topic's category_id. If it does, increase its value by 1, otherwise add the category_id to the map and set its value to 1.
   2. loop through categories(you declared in step 3) and for each item(=category_id, count) add the following inside the filter-btns div you created in step 1. Please note that you will need to replace the {category_id} and {count} with the variables holding its value. The following code serves as a template for you to work with.

       <button
            name="filter-button" 
            value={category_id}
            class=supportedTopicCategories[{category_id}].name
            >
                supportedTopicCategories[category_id].longName ({count})
       </button>
   

eg. the final button HTML for JavaScript category should look like this:

        <button
             name="filter-button" 
             value="421"
             class="javascript"
             >
                 JavaScript (5) // The count is made up, it can be any number
        </button>

Don't worry about styling right now. This tasks is large enough already.

Design

Interactive Figma design

What is your UI design change or proposal?

Here is the figma design
https://www.figma.com/file/zOkQa9zGyw7uyMAPVppNiW/fcc-background-color?node-id=0%3A1

You will find the hex codes for the h1 text and main background color in the figma mockup.

What is your UI design change or proposal?

The container with id of #filter-btns can be better aligned.
Currently if we open the clone site- https://fcc-forum-clone.netlify.app/,
the container is pushed to its left side-
Image below-

We can center the container and make the UI look better.

What work needs to be done?

There are used different methods for accessing object properties in many places inside the index.js.
eg. forumData["topic_list"].topics.

Fix all these inconsistencies by using only the dot notation wherever you can.
For more info - MDN - Accessing properties.

What feature would you like to see?

This issue is the first step towards creating the list of users above the table.

As you can see from the picture(display of the completed version 2), there are two places where users' avatars are displayed. One in the table for each topic and the second in the list of users we are going to build.

The thing is that we already have mechanism to create this, let's call it avatarComponent, which is implemented by the displayPosterAvatar function inside displayPost, but it cannot be accessed globally and thus cannot be used to generate avatars in the list of users we are planning to build.

Task 1

In the global scope, write a new function called getUserAvatarComponent which accepts one parameter, userId, an integer.
This function either returns an empty string when no user with such id exists in our dataset, or returns the avatar component in form of a string like shown below.
You should copy most of the code from displayPosterAvatar.

Note - You may want to change poster to user as it makes more sense inside the new function.

Task 2

Remove displayPosterAvatar function and integrate the newly created getUserAvatarComponent inside the displayPost. You will need to change some existing code inside displayPost to accomplish it.
You need to make sure that displayPost still works as before.

You are not creating the list of users in this issue. These are only preparations for it.

What feature would you like to see?

Description

This task requires you to add a single line of code to the index.html, but it may take you some time to figure out what you need to do to achieve the objective.

As you can see in this Figma design, when users clicks on any sort button, an arrow icon appears and when clicked again, the arrow changes its direction. For that, we could create some .png image, but it is better to use icons instead. There are many icon libraries and FontAwesome is one of them, offering many icons for free.

Objective

Update the index.html file so it includes version 6.x of the FontAwesome library.
Try to use CDN link rather than creating your account.

What feature would you like to see?

Please note this should only be worked on after #69 is completed

By now, we should have all the tools we need to sort the topics.
We know by what it needs to be sorted, sortingBy and in what order, sortingOrder.

Task

You should be able to modify the handleSortBtnClick to add the sorting logic for the currently displayed topics by those two criteria. There are many ways to do it. You may need to manipulate the DOM or use the data stored in forumData. You may also come up with another and better way.

Good to know

You are highly encouraged to use existing functions such as displayPostList. You are also encouraged to modify those functions as you need, just make sure everything else works as it should, or even better.

What work needs to be done?

Hello,

I think we should change the name of topics and displayTopic to something which reflects its nature better.
I suggest to change their name to posts, displayPosts, and so on for other related names.

Reasoning: the forum contains several posts that have different topics and not topics itself.

What feature would you like to see?

Please note: Work on this should not start until the Basic Project Setup milestone is complete

Each of the forum posts will have a set of avatars like this.

Those avatars represent the users who have participated in that forum post.

Work with the posters array from the API results as well as the AVATAR_URL from the constants.js file to display the avatars for each post. It might also help to look at the avatar_template key from the API results.

What feature would you like to see?

Please note: Work on this should not start until the Basic Project Setup milestone is complete

Using the results from the fetch call, and render the topic titles and forum categories to the page.
This should be the desired result.

The API returns a list of the 30 most recent topics. So make sure you see all 30 topics and forum categories rendered to the page.

When the user clicks on a forum category, it should be a link that opens up a new browser tab to the forum category page on the fcc forum.
When the user clicks on on a topic, it should be a link that opens up a new browser tab to that forum topic page on the fcc forum.

• Add prettier pre commit hook
• Add issues to board
• add editor config
• invite collaborators
• add issue template
• add browser sync

What is the issue in the documentation?

Add a short description section to the README so people will know what this project is about.
It can be 2-3 sentences long.

You can place it just before the table of contents.

Discussed in #50

Add HTML and CSS to support future functionality to sort topics by number of replies, views and activity.

Change replies, views and activity headers' names to buttons to look something like this

<th>
    <button name="sort" value="replies">Replies</button>
</th>

and add styles so it looks like in this Figma prototype.

Notice how the styles change when you hover over the Activity header. That should apply to replies and views headers too.

You can try click on it and see what it does next, but don't worry about it now, it will be included in the next issues.

What feature would you like to see?

Please note this should only be worked on after #68 is completed

Task 1

This works requires changes inside the handleSortBtnClick.
When the user clicks on any of the sorting buttons, it should store the button's value attribute in the sortingBy.
This value matches the name of the topic's property.

e.g. <button value='views' ...>Views</button> where the views are the name of its respective property in topic - topic = {id=12345, posts_count: 5, views: 21, ...}

The first time the buttons is clicked, sortingOrder is to be set to a value representing the ascending order(remember, the way you achieve it is decided by completing #68), second time it is clicked, it needs to be set to descending and when the user clicks on it for the third time, the sorting is effectively cancelled and both sortingBy and sortingOrder needs to be set to their default values.

Task 2

It is needless to say that when the user clicks on a different sort button, it should sort it ascendingly by the value of the recently clicked button.
Example: User clicks on "Replies" button two times so the topics are now sorted in descending order by the count of replies. When the user then clicks on "Views" button, it should sort the topics in ascending order by the count of views for each topic.

What feature would you like to see?

This issue follows on adding sorting functionality discussed in #50.
We have created buttons and attached click events on them so far as you can see in the Fig.1 below.
Another step is to make them do stuff.

Task 1

For this task, you need to initialise two global variables, sortingBy and sortingOrder.
You need to assign them with some meaningful value representing the default state. ( it has not been set by the user yet )

Task 2

By clicking on any of the buttons, we will need to decide whether the posts should be sorted in ascending, descending, or default order. That could be achieved by storing some value in sortingOrder. But what kind of value? It could be set of strings such as "ascending", "descending" , "default" or set of integers such as 0, 1, and 2. This is for you to decide and discuss with others.
In other words, the sorting order can have 3 states: default, ascending, and descending.
You need to come up with a solution, how to easily keep track between these 3 states using the sortingOrder.
There are no restrictions.

What work needs to be done?

Use this issue to create your first pull request(PR).

You can find and correct any typos or grammatical errors in our documentation files or inside the comments in the code.
It can be just a comma or anything. This issue mainly serves as a practice of working with git commands.

README
CONTRIBUTING_GUIDE

Hello @sparkO7

I've also noticed that you use IDs for styling, this is not inherently bad idea, however, we generate several
posts and each one them contains the same ID name, resulting in multiple IDs in the same HTML document.
id attribute is a global identifier and must be unique in the whole document.

Could you please fix it?

What feature would you like to see?

Please note this should only be worked on after #71 is completed

By now, we should have all we need to create the list of users.
In the previous issue, we wrote a function getUserAvatarComponent which either returns an empty string(when user not found) or the component as a string.

Task 1

Add new div element to the HTML which will contain the list of users.

Task 2

Write displayUsers function in which you will iterate through all the users we obtained from the FCC Forum API, create the avatar component using getUserAvatarComponent for each of them and display them inside the div container you created in Task 1.

Task 3

Call the displayUsers function in a place where it makes the most sense.

You can include some basic styling if you like but it's not necessary at this point.

What work needs to be done?

Each of the forum categories has its own color.

Please note: For this application, we are going to place all of the international forum categories into the general category because the API we are working with does not provide up to date information for international forum category colors.

Here are the categories with the corresponding colors you will need to add to the css file:

career = #f0aea9
feedback=#8bd9f6
html-css=#8bd9f6
support = #f8b172
general = #93cb5b
javascript = #f1ba33
backend = #f9aa23
python = #6bca6b
motivation = #f28373

In the :root selector, create variables for each of those colors.
For example:

--salmon-color: #f0aea9;

Then for each of the categories, create a class and add the corresponding background color
For example:

.career {
  background-color: var(--salmon-color);
}

In a later ticket, after the fetch call is made, the rest of the category styles will be added and you will see the results rendered to the page.

What is your UI design change or proposal?

Have you noticed that before the forum posts are loaded and rendered, the <footer> is in the middle of the screen as the table is empty?

We need to change this so the table takes as much space as it would with the posts there already. You can assume that space for 30 posts will be needed initially. It does not need to be the exact size as some posts can contain more content than others.
(Solution to this may bring up another issue which will be opened once you figure out what it is)

What feature would you like to see?

Now we have the sorting mechanism in place but we should provide a visual aid to the user so she knows how the topics are sorted.

• use FontAwesome icons
• when the user clicks on the button for the first time - display icon representing descending order
• when the user clicks on the button for the second time - display icon representing ascending order
• when the user clicks another button, remove the icon from any previously clicked buttons and do the same as for the first click

Example:

What work needs to be done?

We should add a table of contents to the contributing file.

What feature would you like to see?

The user should be able to filter the topics by category and then sort them by any parameter.
Right now, if the user selects a category and then applies any sort method, it renders all the topics.
And that works the other way round. If user applied any sort method and then selects a category, it renders the filtered topics unsorted.
This is not very good for the user experience and our visitors are getting frustrated by this.

SHOWCASE

What changes would you like to make in the documentation?

We need to add a CODE_OF_CONDUCT.md file to the project.

Here is an example code of conduct file you can look at to help you create one for this project.

https://github.com/DBenMoshe/contrast-ratio-repo/blob/main/CODE_OF_CONDUCT.md

What changes would you like to make in the documentation?

Since this is an open source project, we should add a CONTRIBUTING.md file to the root directory.

Here are some examples of contributing files to help you create one.
https://github.com/github/docs/blob/main/CONTRIBUTING.md
https://github.com/DBenMoshe/contrast-ratio-repo/blob/main/CONTRIBUTING.md

What feature would you like to see?

Please note: Work on this should not start until the Basic Project Setup milestone is complete

Each forum post will have a set of replies like this

Work with the API results to display the number of replies.

What is your UI design change or proposal?

Here is the figma design for the navbar

https://www.figma.com/file/zcLQ1my10Lp2yAVAIZcOWh/fcc-forum-nav?node-id=0%3A1

Make sure to use the exact hex code specified in the figma mockup needed for the background color.
For the freeCodeCamp logo, you can get it from the figma mockup or from the official fcc style guide.
In the style guide, it is listed as primary logo.

When the user clicks on the logo, it should open up a new browser tab to the actual fcc forum page.

What is your UI design change or proposal?

Please note: It would be best to wait to work on this issue, until the navbar and h1 are added to the codebase.

Here is the figma design
https://www.figma.com/file/h6C9w0Vq4xMyG94fC1qqEG/fcc-forum-table?node-id=0%3A1

I have included the desktop ,tablet and mobile designs