Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HDWD

WEconomicForumβ€’ 40

@WEconomicForum

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have a problem to learn how to connect Javascript with HTML and CSS

Community feedback

P
visualdennisβ€’ 8,375

@visualdenniss

Posted

Good job on completing the challenge and implementing the logic! Overall it works, but there could be some improvement. To answer your question:

you can add external js file to your html by adding before </body>.

I'd also say try to avoid having the result in a new page like so: newWindow.document.write("<h1>Thank you for your rating!</h1>"); newWindow.document.write("<p>" + selectedText + "</p>");

But instead try to update the DOM by rendering new state of values. e.g. you can use Element.innerHTML = "..." https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML for that etc.

Hope this was helpful!

0
Bentaher malekβ€’ 730

@malek-bt

Posted

Hey !, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:

1.To center the <div class="box">, you can use grid like: display:grid;place-items: center; or you can use flexbox like this: display:flex;justify-content: center;align-items: center.

2.Implement the mobile first approach.

3.Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers.

The rest is good, I hope those tips will help you! πŸ‘

0

Please log in to post a comment

Log in with GitHub
Discord logo

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