JSFiddle - React, Tailwind, and code Playground

by exercices

HTML

<div id="area2">
  <textarea id="text" placeholder="Ecrivez quelque chose ou collez du texte, puis cliquez sur le bouton pour que la voix de synthèse le prononce. Ctrl+Entrée simule le clic du premier bouton."></textarea>
  <label for="text"></label>
  <br>
  <button id="toSpeak">Parler</button>
  <button id="toAnalyze">Analyser</button>
  <br><br>
  <span id="analyze"></span>
</div>

CSS

.title,
.title a {
  color: orange;
  font-family: "a Atmospheric";
  padding: 5px
}

.textCenter,
.title,
.title a {
  text-align: center
}

a {
  text-decoration: none
}

div {
  float: left;
  padding: 10px
}

#iplogger {
  left: 0
}

a[title="Hosted on free web hosting 000webhost.com. Host your own website for FREE."] {
  display: none
}

#logo,
.center {
  left: 50%;
  transform: translateX(-50%);
  position: relative
}

img,
a {
  cursor: pointer
}

#logo {
  width: 150px;
  height: 105px
}

#logo:hover {
  width: 20%;
  height: 20%
}

footer,
header {
  background-color: blue;
  border-radius: 10px
}

header {
  top: 0;
  margin-top: -15px
}

footer {
  height: 100px;
  padding: 10px
}

.special {
  color: black
}

textarea {
  resize: none;
  width: 98%;
  height: 200px;
  margin: 10px
}

img {
  height: 100px
}

#writing {
  visibility: hidden
}

button {
  background: #fafafa;
  box-shadow: 2px 2px 8px red;
  font: bold 13px Arial;
  color: #555;
  margin-left: 1%;
}

#area2 {
  border-radius: 30px;
  border: dashed black 1px;
  width: 96.5%;
  background-color: #cecaca;
  margin-left: 1%;
  margin-top: 50px
}

JavaScript

$("#toSpeak").click(function() {
			  speaking();
			})
			$("#toAnalyze").click(function() {
			  analyze();
			})
			$("#text").keydown(function(e) {
			  if (e.keyCode > 30) {
			    if ($("#text").val() == "") {
			      $("#toSpeak").css('box-shadow', '2px 2px 8px red');
			    } else {
			      $("#toSpeak").css('box-shadow', '2px 2px 8px green');
			    }
			  }
			  if ((e.ctrlKey || e.code == "ControlLeft" || e.code == "ControlRight") && (e.keyCode == 13)) {
			    speaking();
			  }
			})

			function speaking() {
			  var utterance = new SpeechSynthesisUtterance($("#text").val());
			  speechSynthesis.speak(utterance);
			  $("#toSpeak").css('box-shadow', '2px 2px 8px blue');
			}

			function analyze() {
			  var analyze = document.getElementById("analyze");
			  analyze.innerHTML = "";
			  var text = document.getElementById("text").value;
			  /*var analyzes=["Nombres de caractères (avec espaces) : "+text.length, "Nombres de caractères (sans espaces) : "+text.split(" ").length-1];*/

			  var charactersNb = text.length - (text.split("\n").length - 1);
			  var charactersNbWithoutEspaces = charactersNb - (text.split(" ").length - 1);
			  var paragraphsNb = text.split("\n").length;
			  var proportionOfEachCharacter = function(text) {
			    var text = text.toLowerCase();
			    var list = [];
			    for (var i = 0; i < text.length; i++) {
			      if (!list.includes(text[i])) {
			        var test = 0;
			        for (var j = 0; j < text.length; j++) {
			          if (list[j] != undefined) {
			            if (list[j][1].includes(text[i])) {
			              test++;
			            }
			          }
			        }
			        if (test == 0) {
			          list.push("[" + text[i] + "," + (text.split(text[i]).length - 1) + "," + (100 * ((text.split(text[i]).length - 1) / charactersNb)).toFixed(2) + "%]");
			        }
			      }
			    }
			    return list;
			  }
			  /*var writeProportionOfEachCharacter=function(proportionOfEachCharacter){
			      var...