JSFiddle - React, Tailwind, and code Playground

by Fagner Brack

HTML

<nav>
  <span>
    Navbar [Home] [About] etc.
  </span>
  <form class="feedback-form" method="post" style="display: inline">
    Feedback:
    <input type="text" class="feedback-content">
    <button type="submit">Send</button>
  </form>
</nav>
<div id="container">
  <h1>
    Open Source?
  </h1>
  <section>
    <p>
      If you go to <a href="http://github.com">Github</a>, you can find a lot of Open Source.
    </p>
    <p>
    You can also look at the <a href="https://opensource.org/">Open Source Initiative</a> and the <a href="https://www.linuxfoundation.org/">Linux Foundation</a> for additional information. <br>
    The <a href="https://opensource.org/">Open Source Initiative</a> has coined the term "Open Source".
    </p>
  </section>
</div>

JavaScript

function submit(form) {
  alert('Feedback submitted!');
}

function sendFeedback(feedbackContent) {
  const feedbackForm = document.querySelector('.feedback-form');
  const feedback = document.querySelector('.feedback-form .feedback-content');

  feedbackContent.value = feedbackContent;
  submit(feedbackForm);
}

// one-liner test script
sendFeedback('That was a good insight, but you could improve the details');