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
Request failed with status code 502

Submitted

responsive and working mortgage app

@coding-astrounaut

Desktop design screenshot for the Mortgage repayment calculator coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud that i was able to complete this challenge without any help.

One problem is that on the GitHub pages the illustration won't show on that page. but locally it works just fine. If you have any idea why please let me know!

What challenges did you encounter, and how did you overcome them?

I encountered a few problems getting the javascript to work, but I could use the MDN docs to see that I was not using something right. For example, I was doing element.background-color. when it should be element.backgroundColor.

What specific areas of your project would you like help with?

I would love help with the problem mentioned above about the illustration. Also, I feel like I wrote some of the javascript a bit inefficiently so any tips on how to improve that would be useful.

Community feedback

@nathaliaif

Posted

Hey! Congrats on finishing the challenge!

If you add a dot '.' in front of your path, like this: ./assets/images/illustration-empty.svg, or remove the first slash in your path: assets/images/illustration-empty.svg, the image will appear again.

The dot and the 'assets/images/...' means "current directory", so the browser looks for the 'assets' directory relative to the current location of the HTML file.

Using the slash '/' in front of the path tells the browser to look for the 'assets' directory starting from the root folder (the root of your website), which locally works, because the root is where your index.html is in your folder. However, in a deployed environment, your project might be hosted under a subdirectory or subfolder, and the browser won't be able to find your image from there.

I found a StackOverflow post that explains it better. And here's another link that talks a bit more about file paths.

Marked as helpful

0

@coding-astrounaut

Posted

@nathaliaif It worked thanks very much!

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