JSFiddle - React, Tailwind, and code Playground

by chardetm

HTML

<div id="topbar">
  fakebook
</div>
<div id="messages">
  <p>
    <span class="message">
      Salut !
    </span>
  </p>
  <p>
    <span class="message">
      Ça va ?
    </span>
  </p>
  <p>
    <span class="message by-me">
      Oui et toi ?
    </span>
  </p>
</div>

<form id="send-message-form" action="#" onsubmit="return checkAndSend(this);">
  <input type="text" name="message" id="message-input">
  <button type="submit" id="submit-button">
    Envoyer
  </button>
</form>

CSS

#topbar {
  padding: 12px;
  background: #25B;
  font-family: sans-serif;
  color: white;
  font-size: 28px;
}

p {
  margin: 26px;
}

.message {
  background: #DADADA;
  border-radius: 16px;
  padding: 12px;
  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
  margin: 1px;
  clear: both;
}

.by-me {
  float: right;
  background: #25B;
  color: white;
}

#send-message-form {
  clear: both;
  width: 100%;
  padding-top: 12px;
}

#message-input {
  width: calc(100% - 100px);
}

#submit-button {
  width: 88px;
}

JavaScript

function checkAndSend(message_form) {
  // On récupère le message entré par l'utilisateur
  message = message_form.message.value;
  if (message == "") {
    // On affiche un popup
    alert("Le message est vide !");
  } else {
    postMessage(message);
    // On vide le champ de texte
    message_form.message.value = "";
  }
  return false; // Ne pas soumettre le formulaire
}

function postMessage(message) {
  // Créer <p> et <span>
  var p_node = document.createElement("p");
  var span_node = document.createElement("span");
  // Ajouter les classes à <span>
  span_node.classList.add("message");
  span_node.classList.add("by-me");
  // Créer le texte
  var text_node = document.createTextNode(message);
  // Insérer le texte dans <span> et <span> dans <p>
  span_node.appendChild(text_node);
  p_node.appendChild(span_node);
  // Ajouter <p> dans le <div> avec l'id "messages"
  document.getElementById("messages").appendChild(p_node);
}