Opinions wanted for Object basics 2 skill test

Hi there!
I’ll be happy if someone spends a minute to take a look at my pile of code. spent three days on that ))) i’ll appreciate any opinions. Thanks.

Hi @texas-triumph

I like how you did some extra work with the form. :heart_eyes:

Everything works and I just have some small things which could be improved:

  • Generally I would recommend grouping <label> and <input> with an appropriate element like <div> or using an unordered list. You could then use some margin-bottom on this new element to separate different label/input groups instead of using <br><br>.
  • When creating the initial object you could save some key strokes by directly assigning the properties:
    const bandInfo = {
                       name: bandName.value,
                       nationality: bandNationality.value,
                       ...
                     };
    
  • You could move
    let bandPrintReport = document.createElement('p');
    container.appendChild(bandPrintReport);
    
    outside the click function. This way the printed text would be replaced, if you made some changes in the form and press the button again.

I hope that helps!
Michael

Hello Michael!
Thank you kindly for the notes.
I appreciate your time and attention to my clumsy efforts.
Thanks, everithin’s well noted.
Sincerely,
Andrew.

1 Like

I wouldn’t go as far as calling it “clumsy”. :grin:
Everything worked. That’s the main goal.
Always trying to improve our coding skills is an important quality and you’ve shown your dedication. I would say you’re on the right track. :+1:

Michael

1 Like

Thanks Michael,
it’s good to have your attention and support, especially when the very first steps are made.
Andrew

1 Like

Hello Michael,
Following up the subject of this task, reviewing your suggestions and actually puttin them into the code I recalled one thing that I failed to resolve. The thing is that when the long string of Band’s info has been formed ( “bandPrintReport.textContent = ……” line 89) and further passed into the

element, I tried to find a way how to break that long line, to make it look more readable. I tried “\n” and simple breaking within tilda quotes (….) but never succeded.
Could you comment on this? Maybe I did something wrong and is there any way to do that with a single line at all? To split it.
Thank you.

In HTML spaces, tabs and newlines are displayed as spaces (even multiple occurrences in a row).
You can change this behavior in two different ways. Either use <pre> instead of <p> which also changes the font to monospace. The more flexible way is using the CSS property white-space. This property gives you different values to control how newlines are displayed or if trailing spaces are ignored.

Maybe this would be a reasonable value for your example:

p {
  white-space: pre-line;
}

Hi Michael,
Many thanks for your elaboration on the nature of spaces in HTML. I’ve looked into the subject. Shame on me, but looks like I was too ambiguous. At least I derive so from your answer.
What I was actually pursuing was the need to break that resultant line


into separate lines to make it more compact and neat.
Earlier I saw that one could use escape symbol +n (\n) inserted into the line exactly at the point where the line should break up.
Another cue was to include the resultant line into the backtick quotes ( ) and simply break the line where it is needed.
I tried both ways but my resultant line did not change and remained as it was – one long contiuous string.
Again, I apologize for making you spend your time on this, I’ll appreciate any opinion on this.
Andrew

1 Like

No need to apologize. I’m happy to help. :blush:

When reading your reply I think that I understand and answered your goal in my last reply. So maybe I was the one that wasn’t clear enough. :slightly_smiling_face:

When using backticks like in your code it’s true that you can simply break the lines to add line breaks (\n) in JS. The problem is that HTML won’t display them as line breaks by default, but simply as spaces. This behavior creates the single line of code in your example. So the newlines are there, but are converted to spaces by HTML.

When you add my CSS from the reply above to your code by putting it into an <style> tag inside <head> like this:

  ...
  <title>Object Basics 2</title>
  <style>
  p {
    white-space: pre-line;
  } 
  </style>
</head>
<body>
...

The result looks like this:
2022-07-12_19-24

Isn’t that what you’re trying to achieve?

Hello Michael!
thank you, I finally got it.
I did what you instructed and it got it right. assigning the CSS style for white-space: pre-line worked. And your initial words about html recognizing the line breakes as mere white-spaces now look reasonable to me. I addressed the relevant CSS specification for white-space and confirmed it once again. Also tried it on my code and now I see. In the nut shell we do implement the line breakes but HTML simplifies them into white-spaces, but css helps not to omit them. Thank you for your patience and leading me right to the solution.

1 Like

You’re welcome!

Exactly!

Feel free to come back with more exercises or questions. I’m happy to help. :slightly_smiling_face: