Interactive FAQ Page
Planning for New Functionality with Pseudocoding
A lot of people have the misconception that coding is all about typing really fast, in a basement, usually alone, etc. That’s not really the case. Most software developers say they spend at least 40% of their time planning and/or collaborating with other developers on how to design solutions in code.
Pseudocoding is essentially writing down the high-level logic of your code in plain English, rather than using a specific coding language. Before we worry about the code, let's think about how we want the user to be able to interact with this page. Think through the intended purpose of the page and really try to understand it.
- What is the user trying to do with this page?
- What do we want to change on the screen as the user interacts with the page?
Take one minute to type in the chat one thing that you would like the see happen on your page when the user interacts with something.
If you need some help getting started, use a "when... then..." statement. For example, "When the user clicks on...then...something happens."
- When the user clicks the arrow down button, the answer to the question appears.
- When the user clicks the arrow down button, the arrow rotates 180 degrees to show an arrow up.
- When the user clicks the arrow up button, the answer to the question disappears.
- When the user clicks the arrow up button, the arrow rotates 180 degrees to show an arrow down again.
document.querySelector to access that element.
- Follow my screen and do a live code-along.
We want to dynamically add the “show-text” class when the user clicks the button.
document.querySelectorto select the element with the question class and store the reference to that element in a question variable.
querySelectoron that question variable to find the button element with the “question-btn” class and store the reference to that element in a button variable.
addEventListeneron the button variable to wait for a click and then add the “show-text” class to the classList on that question.
toggleso that clicking on the button again removes the class.
- Add a CSS rule targeting the
.show text .question-btnclasses so that the arrow button rotates 180 degrees.
Now, we have it doing what we want, but it’s only the first one! At this point, your code should look like this if you want to check that you have it working as expected.
We want this to happen on every question, not just the first one!
- On line 1, change
querySelectorAll. This will store an array of all HTML elements with the
- Change the variable name question to questions (plural form).
- Write a
forEachmethod on the list of questions and pass in each question as the argument. Then, move the event listener code block inside of that function to apply the eventListener on all buttons.
console.logstatements → these are not usually included in the final production. They are only used as a tool for developers.
Now, our FAQ page is fully functional and the user can interact with each element on the screen! The final working solution can be found here.
- Event listeners allow us to wait for a user action to change something on the page.
- You likely have some gaps in fully understanding the final solution - again, that is OKAY - the goal of this was not to go deep, but spark some curiosity for what is possible!