"Marking up a letter" assessment

Hello community.

I have finished the assessment and checked it on the “Nu HTML Checker”
But it shows some errors related with my personal codification in case of using Internet Explorer V8 or earlier. Can you analyse my code and tell me what is going on?
Thank you so much!

Here is the link: https://jsfiddle.net/Matterblacken/wrqh5Lud/

Hi there @Matterblacken!

The validator errors are mainly based around two things:

  1. The HTML comments that wrap around the IE conditional comments you’ve used are somewhat badly-formed, although that is what you have to do to write IE conditional comments.

  2. The noscript block you included in the head contains HTML markup, and the validator tends to throw an error if you include body content in the head. In my experience, people very rarely use noscript these days, as you hardly ever come across someone with no JavaScript available. In any case, this example doesn’t reply on JS, so you don’t need a noscript block.

Deleting both of the above causes the validator to throw no errors.

But having a few validator errors is not as much of a problem as you might think. The validator is a useful tool to find problems in your code, but it is not “the gospel”. Your code will still be OK in a lot of cases even if you do have validator errors.

Thank you so much for attending me @chrisdavidmills!
I know that both blocks of code were not very necessary, but I included these additional sections only to train my learning acquired in the course of MDN, specifically I got it from the article “Using HTML sections and outlines” URL: https://mzl.la / 2BeUB0C. It would be good for the community to take a look at this document again, since what I see is necessary to emphasize some important notes and update it.
Thanks again!

@Matterblacken ah, you found that article. This is largely an interesting read that isn’t very useful in the real world, given that the algorithm stuff it talks about was never implemented in real browsers, and very few people now use old IE versions.

To make it more real-world-useful, I have updated this section: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Using_HTML5_elements_in_non-HTML5_browsers. Let me know if this sounds better explained now.

1 Like

Perfect @chrisdavidmills, thanks for updating the article information.
By the way, before I read your answers, I was thinking about the Mozilla community. I am passionate about computer systems and the global network, I love working as a team, even for free. I would like to know if there is the possibility of participating in some mini projects on this vacation, the other year I will go to university and enter the career of Software and cybersecurity. I think it would be good to train a bit and in the process help as a good Samaritan.
Here is my e-mail: pablo_fonsecam@hotmail.com
I will wait for your answer!

Hi there I also just completed my Marking up a Letter assessment. I’d appreciate your feedback. Hear is the link to my code:

Hi @vbarhoskie!

Congratulations on finishing the first assessment. Apologies for not answering you sooner; I only got back to work yesterday.

Looking at your code, you have done most of this right. I did notice a few things:

  • For the dates, you should have wrapped them in <time> elements.
  • For the degree symbol, you could have just used the literal degree symbol — °, rather than using an entity reference marked up with<sup>. This will work, as the page has a character set of utf-8, so supports this just fine.
  • Our final example has title attributes on the <a> elements, but these are not vital.
  • You could have added an <abbr> element around “Esq” -> <abbr title="Esquire">Esq</abbr>, but this is a fairly small detail.

For more details, have a look at our marking guide and version of the code:

Hi, I just completed the “Marking up a letter” assessment and would appreciate a marking guide/any feedback. Thanks!

Letter

Dr. Eleanor Gaye

Awesome Science faculty

University of Awesome

Bobtown, CA 99999,

USA

Tel: 123-456-7890

Email: no_reply@example.com

20 January 2016

Miss Eileen Dover

4321 Cliff Top Edge

Dover, CT9 XXX

UK

Re: Eileen Dover university application

Dear Eileen,

Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.

Starting dates

We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

  • First semester: 9 September 2016
  • Second semester: 15 January 2017
  • Third semester: 2 May 2017

Please let me know if this is ok, and if so which start date you would prefer.

You can find more information about important university dates on our website.

Subjects of study

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

  1. Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)
  2. Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 increasing to 3 × 104.)
  3. HTML and CSS constructs for representing musical scores.

So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.

Exotic dance moves

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

Polynesian chicken dance
A little known but very influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".
Icelandic brownian shuffle
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
Arctic robot dance
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.

For more of my research, see my exotic dance research page.

Yours sincerely,

Dr Eleanor Gaye

University of Awesome motto: "Be awesome to each other." -- Bill S Preston, Esq

Hi, I just completed the “Marking up a letter” assessment and would appreciate a marking guide/any feedback. Thanks!

Dr. Eleanor Gaye
Dr. Eleanor Gaye
Awesome Science faculty
University of Awesome
Bobtown, CA 99999,
USA
Tel: 123-456-7890
Email: no_reply@example.com
      <p class="sender-column";><time> 20 January 2016</time></p>
Miss Eileen Dover
4321 Cliff Top Edge
Dover, CT9 XXX
UK
      <h1>Re: Eileen Dover university application</h1>
      <p>Dear Eileen,</p>
      <p>Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.</p>
      <h2>Starting dates</h2>
      <p>We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:</p>
      
      
      <ul>
          <li><time>First semester: 9 September 2016</time></li>
      
      
      
           <li><time>Second semester: 15 January 2017</time></li>
      
      
      
           <li><time>Third semester: 2 May 2017</time></li>
      </ul>
      
      
      
      <p>Please let me know if this is ok, and if so which start date you would prefer.</p>
      
      <p>You can find more information about <a href="http://example.com" title=" http://example.com">important university dates</a> on our website.</p>
      <h2>Subjects of study</h2>
      <p>At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:</p>
      
      
      <ol>
           <li>1.Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
      
      
            <li>2.Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3&times;10<sup>3</sup> increasing to 3&times;10<sup>4</sup>.)</li>
           
           
            <li>3.HTML and CSS constructs for representing musical scores.</li>
      </ol>
      
      
      <p>So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.</p>
      <h2>Exotic dance moves</h2>
      <p>Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:</p>
      <dt>Polynesian chicken dance</dt>
      <dd>A little known but very influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
      <dt>Icelandic brownian shuffle</dt>
      <dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
      <dt>Arctic robot dance</dt>
      <dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.</dd>
      <p>For more of my research, see my <a href="http://example.com"> exotic dance research page</a>.</p>
      <p>Yours sincerely,</p>

Dr Eleanor Gaye

University of Awesome motto: "Be awesome to each other." -- Bill S Preston, Esq

Hello @nadzeya.n and @sukurovruslan68!

Sorry for being slow to reply to your messages. I can’t review these very easily because you have put HTML directly into the discourse comment, and it has interpreted it rather than showing the code.

To show your code in the comment, the easiest way to do it is to put a line with three backticks (```) before the code block, and a line with three backticks after the code block. So something like

```
put my code here
```

Then I’ll be able to see it and review it. Thanks!

I just finished making the “letter” and would highly appreciate any feedback. Thanks

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Letter</title>
    <link rel="stylesheet" type="text/css" href="letter.css">
    <meta name="author" content="Tatsumi">
  </head>
  <body>

    <p class="sender-column"><strong>Dr. Eleanor Gaye</strong><br>
      Awesome Science faculty<br>
      University of Awesome<br>
      Bobtown, CA 99999,<br>
      USA<br>
      <strong>Tel</strong>: 123-456-7890<br>
      <strong>Email</strong>: no_reply@example.com<br>
      <br>
      <time datetime="2016-01-20">20 January 2016</time>
    </p>

    <main>

      <p><strong>Miss Eileen Dover</strong><br>
        4321 Cliff Top Edge<br>
        Dover, CT9 XXX<br>
        UK
      </p>


      <h1>Re: Eileen Dover university application</h1>

      <p>Dear Eileen,<br>
        <br>
        Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your <abbr title="Doctor of Philosophy">PhD</abbr> next year. I will answer your questions one by one, in the following sections.
      </p>

      <h2>Starting dates</h2>

      <p>We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:</p>
        <ul>
          <li>First semester:<time datetime="2016-09-09"> 9 September 2016</time></li>
          <li>Second semester:<time datetime="2017-01-15"> 15 January 2017</time></li>
          <li>Third semester:<time datetime="2017-05-02"> 2 May 2017</time></li>
        </ul>
      <p>Please let me know if this is ok, and if so which start date you would prefer.<br>
        <br>
        You can find more information about <a href="http://example.com" target="_blank">important university dates</a> on our website.
      <p>


      <h2>Subjects of study</h2>

      <p>At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we'd like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order<br> of priority:</p>
        <ol>
          <li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
          <li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 10<sup>3</sup> > 3 × 10<sup>4</sup>.)</li>
          <li><abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> constructs for representing musical scores.</li>
        </ol>
      <p>So please can you provide more information on each of these subjects, including how long you'd expect the research to take, required staff and other resources, and anything else you think we'd need to know? Thanks.
      </p>


      <h2>Exotic dance moves</h2>

      <p>Yes, you are right! As part of my post-doctorate work, I <em>did</em> study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:</p>
      <dl>
        <dt>Polynesian chicken dance</dt>
          <dd>A little known but <em>very</em> influential dance dating back as far as 300<abbr title="before Christ">BC</abbr>, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
        <dt>Icelandic brownian shuffle</dt>
          <dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>
        <dt>Arctic robot dance</dt>
          <dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.</dd>
      </dl>
      <p>For more of my research, see my <a href="http://example.com" target="_blank">exotic dance research page</a>.</p>

      <p>Yours sincerely,<br>
        Dr Eleanor Gaye<br>
        <br>
        University of Awesome motto: <cite>"Be excellent to each other."</cite> -- <em>Bill S Preston, <abbr title="Esquire">Esq</abbr></em>
      </p>


    </main>
  </body>
</html>

Everything looks good. Except for a couple of things.

  1. I would put the tag after “Re: Eileen Dover university application” because that’s where the main content start.

  2. cite>“Be excellent to each other.”</cite. This is wrong. cite> is used for telling the readers who the author is. In this case, Bill S Preston, should be cited. cite>Bill S Preston</cite

Other than those, everything looks great. Good job.

Thanks…

But I’m getting confuse with the use of element. In this website: www.html5doctor.com/blockquote-q-cite

It says there “The cite element represents the title of a work. A person’s name is not the title of a work and the element must therefore not be used to mark up people’s names.” - W3C HTML5 specification

Kindly help me.

Thanks,

@tatsumi That’s a good point. The definition of <cite> in the HTML Living Standard requires that it only be used for the title of a work. In HTML4 and HTML5, it can be used either for a work or for a person.

Therefore, we really ought to bring this assessment and the MDN reference page for <cite> into line with the living standard definition, which would also be consistent with the earlier definitions. Of course, cite is usually a purely semantic element, so it doesn’t make much difference what you use it for in most cases. (Except possibly how it’s treated by screen readers; I’m not sure about that.)

@chrisdavidmills Your thoughts?

1 Like

@tatsumi is correct. My course was going by the older definition of <cite>. I’m glad this has been pointed out!

To fix this I have:

Let me know if you think this needs anything else.

BTW, screenreaders do not read <cite> in any special way. I tested it in VoiceOver.

1 Like

Hello, please could you check out my code please i’d be grateful

</footer><!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“author” content=“Dr. Eleanor Gaye”>

<link rel=“stylesheet” type=“text/css” href=“style.css”>

<title>Document</title>

</head>

<body>

<header class=“sender-column”>

<p>

<em><strong>Dr. Eleanor Gaye</strong> <br>

Awesome Science faculty <br>

University of Awesome <br>

Bobtown, CA 99999, <br>

USA <br>

<strong>Tel: </strong> 123-456-7890 <br>

<strong>Email: </strong> no_reply@example.com <br> <br>

</em>

<time datetime=“2016-01-20” > 20 January 2016 </time>

</p>

</header>

<main>

<p>

<em> <strong> Miss Eileen Dover</strong> <br>

4321 Cliff Top Edge <br>

Dover, CT9 XXX <br>

UK

</em>

</p>

<h1> <strong>Re: Eileen Dover university application</strong></h1>

<p>

Dear Eileen,

</p>

<p>

Thank you for your recent application to join us at the University of Awesome’s science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.

</p>

<h2> <strong>Starting dates </strong></h2>

<p>

We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

</p>

<ul>

<li>First semester: <time datetime=“2016-09-09”>9 September 2016</time></li>

<li>Second semester: <time datetime=“2017-01-15”>15 January 2017</time></li>

<li>Third semester: <time datetime=“2017-05-02”>2 May 2017</time></li>

</ul>

<p>

Please let me know if this is ok, and if so which start date you would prefer.

</p>

<p>

You can find more information about <a href="#">important university dates</a> on our website.

</p>

<h2>Subjects of study </h2>

<p>

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we’d like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

</p>

<ol>

<li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.) </li>

<li>Measuring the effect on performance of funk bassplayers at temperatures exceeding 30<sup>°</sup>C (86<sup>°</sup>F), when the audience size exponentially increases (effect of 3 &#215; 10<sup>3</sup> &#62; 3 &#215; 10<sup>4</sup>.)</li>

<li> HTML and CSS constructs for representing musical scores.</li>

</ol>

<p>

So please can you provide more information on each of these subjects, including how long you’d expect the research to take, required staff and other resources, and anything else you think we’d need to know? Thanks.

</p>

<h2>

Exotic dance moves

</h2>

<p>

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

</p>

<dl>

<dt>Polynesian chicken dance</dt>

<dd> A little known but <i>very</i> influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be “fruitful”.

</dd>

</dl>

<dl>

<dt>Icelandic brownian shuffle</dt>

<dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.</dd>

</dl>

<dl>

<dt>Arctic robot dance</dt>

<dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by “robotic”, stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.

</dd>

</dl>

<p>

For more of my research, see my <a href="#">

exotic dance research page.</a>

</p>

<p>Yours sincerely,</p>

<br><br><br>

</main>

<footer>

<p> Dr Eleanor Gaye</p>

<p>University of Awesome motto: <q> Be awesome to each other.</q> <em>-- The memoirs of Bill S Preston, Esq </em></p>

</footer>

</body>

</html>

Hi there @henryhatake2, thanks for sending in your code!

This is looking pretty good overall.

Some feedback for you on what could be improved:

  • You have set the class of “sender-column” on a <header> element rather on the individual paragraphs like we did in our version, but this is totally fine. Some might argue it is better because it cuts down on the number of classes you need to set.
  • Your header elements don’t need <strong> elements inside them. Browsers already bold headings by default.
  • You don’t need <sup> elements wrapped around your degree symbols (°), as they are already up in the air. Making them into superscript results in them being placed too high.
  • For emphasis, you should use <em>, not <i>. Emphasis is semantic, whereas italic is presentational.
  • You haven’t included <abbr> elements around “HTML”, “CSS”, and “Esq”
  • The source of the motto — “The memoirs of Bill S Preston, Esq” needs a <cite> element round it, to mark it up as the source of the quote.

Please see my version of the assignment and give feedback if possible. Thank!

Eileen Dover university application
<div class="sender-column"> <p> <b> Dr. Eleanor Gaye </b>
  Awesome Science faculty <br> 
  University of Awesome <br>
  Bobtown, CA 99999,<br>
  USA<br>
  <b>Tel:</b> 123-456-7890<br>
  <b>Email:</b> no_reply@example.com<br> <br> 
  <time> 20 January 2016 </time> <br></p>
</div>

<b>Miss Eileen Dover</b><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br> 
UK<br>

Re: Eileen Dover university application

Dear Eileen,

Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your PhD next year. I will answer your questions one by one, in the following sections.

Starting dates

We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:

  • First semester: 9 September 2016
  • Second semester: 15 January 2017
  • Third semester: 2 May 2017

Please let me know if this is ok, and if so which start date you would prefer.

You can find more information about important university dates on our website.

Subjects of study

At the Awesome Science Faculty, we have a pretty open-minded research facility — as long as the subjects fall somewhere in the realm of science and technology. You seem like an intelligent, dedicated researcher, and just the kind of person we’d like to have on our team. Saying that, of the ideas you submitted we were most intrigued by are as follows, in order of priority:

  1. Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)
  2. Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 103 increasing to 3 × 104.)
  3. HTML and CSS constructs for representing musical scores.

So please can you provide more information on each of these subjects, including how long you’d expect the research to take, required staff and other resources, and anything else you think we’d need to know? Thanks.

Exotic dance moves

Yes, you are right! As part of my post-doctorate work, I did study exotic tribal dances. To answer your question, my favourite dances are as follows, with definitions:

Polynesian chicken dance
A little known but very influential dance dating back as far as 300BC, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".
Icelandic brownian shuffle
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
Arctic robot dance
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada. Later on however it was discovered that they were just moving like this because they were really cold.

For more of my research, see my exotic dance research page.

Yours sincerely,

Dr Eleanor Gaye

University of Awesome motto: “Be awesome to each other.” – The memoirs of Bill S Preston, Esq

Hi there @Atom22, welcome to the MDN learning community, and thanks for sending in your code!

Your markup is largely good, but I did notice a few things that you’ll want to fix:

  • There are a couple of places where you’ve got two <br> elements next to one another — you won’t ever need to do this. At the most, you need one.
  • You also don’t need a <br> element before a closing </p> tag, as that signals the end of a paragraph, after which subsequent content will appear on a new line.
  • All of your dates need to be wrapped in <time> elements with datetime attributes that contain an iso standard format data, so it is machine-readable. For example First semester: <time datetime="20160909">9 September 2016</time>
  • You need a <sub> element in “H2O”
  • Acronyms (e.g. HTML) need <abbr> elements.
  • The quotation at the bottom of the page needs to be markedup as such, e.g. using <q>/<cite> elements.

Hi, I finished the “Marking up a letter” assignment and put it in my github. I know it was said that no styling was required but I have put some margin in the body tag to make it look more similar to picture shown in the bottom of the assignment. I hope it is okay. Please have a look. Thanks
https://tushar9604.github.io/letter-example.html