Submitted 8 months ago

Visibility toggle?

Alex-Gamarano• 350

@Alex-Gamarano

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project? My first approach was to create two HTML's, index and thanks... I was not able to cross the rating's result from index.html to thanks.html. Finally I created both cards in the index.html file and using JS I controled the visibility with the obj.classList.toggle( ), and got the result.

Which areas of your code are you unsure of? My second approach, described above is correct? Is is possible manipulate DOM crossing files?

Do you have any questions about best practices? Above described.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 8 months ago

Hello @Alex-Gamarano!

Your solution looks excellent!

I have just one suggestion:

Use <main> to wrap the main content instead of <section>.

📌 The tag <section> would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Marked as helpful

Alex-Gamarano• 350

@Alex-Gamarano

Posted 8 months ago

@danielmrz-dev

Thank you Daniel, I'll use your suggestions to optimize the project.

Cheers!

Parves Hossain Rabby• 560

@Iamparves

Posted 8 months ago

Your approach is good. This is also how single-page applications, such as React.js, work. React projects contain only one index.html file. Additionally, the content/DOM is altered with Javascript.

However, if you absolutely want to accomplish it with different html files, you can pass the rating using URL parameters.

For more information, see this article: How to Pass Value From One HTML Page To Another Using JavaScript

Marked as helpful

Alex-Gamarano• 350

@Alex-Gamarano

Posted 8 months ago

@Iamparves , thank you very much for your answer and for the link. I'll check that out.

Cheers mate!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord