Oi Alura, seguinte eu importei o arquivo selectize.js (com depêndencias menos jquery) pra pasta js e o arquivo selectize.default.css pra pasta dele também libs/css e importei no html os arquivos só que não aconteceu nada no select já procurei algum erro e não achei. O comportamento do selectize de adicionar um novo usuário e de categorizar ele não ta funcionando, invocado que na aba Sources ele tá sendo importado normalmente, como ainda não aprendi a depurar em Javascript a não ser por console.log to meio perdido, desde já agradeço. Segue os códigos abaixo:
principal.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" href="css/libs/materialize.min.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
<link rel="stylesheet" href="css/libs/selectize.default.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<h1 class="center"> Alura Typer </h1>
<p class="frase left-align">O Tribunal Superior Eleitoral (TSE) rejeitou nesta terça-feira (11) um pedido do PT para
investigar kkkkk ppppppp DAS D
</p>
<div class="center">
<img src="img/spinner.gif" alt="Spinner" id="spinner">
<p id="erro">Ocorreu um erro, por favor tente novamente</p>
</div>
<ul class="informacoes center">
<li><i class="small material-icons icones">description</i><span id="quantidadepalavras"> 10 </span> palavras
</li>
<li><i class="small material-icons icones">query_builder</i><span id="tempoRestante">5</span> segundos</li>
</ul>
<textarea class="campodigitacao" rows="10" cols="40"></textarea>
<button class="btn-floating btn-large waves-effect waves-light red" id="botaoReiniciar"><i class="material-icons">restore</i>
</button>
<button class="btn-floating btn-large waves-effect waves-light green" id="botaoPlacar"><i class="material-icons">assignment</i>
</button>
<button class="btn-floating btn-large waves-effect waves-light blue" id="trocaFrase"><i class="material-icons">shuffle</i>
</button>
<button class="btn-floating btn-large waves-effect waves-light blue" id="botaoFraseId"><i class="material-icons">repeat_one</i>
</button>
<div class="select-usuarios">
<select id="usuarios">
<option value="Maison">Maison</option>
<option value="Jose">Jose</option>
<option value="Luciano">Luciano</option>
<option value="Socorro">Socorro</option>
</select>
</div>
<button class="btn-floating btn-large waves-effect waves-light yellow" id="botaoSync"><i class="material-icons">swap_vert</i>
</button>
<input type="number" min="0" id="idFrase">
<ul class="center">
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
<section class="placar"><h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<th>Nome</th>
<th>Numero de Palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/selectize.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/frase.js"></script>
</body>
</html>
main.js
$(function () {
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("#botaoReiniciar").click(reiniciaJogo);
atualizaPlacar();
$("#usuarios").selectize({
create: true,
sortField: 'text'
});
});
