Henrique: Plugin #01 com jQuery em HTML

07/07/2021

Plugin #01 com jQuery em HTML

Arquivo: estilo.css

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

*{
    font-family: 'Oswald', sans-serif;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: #0D262D;
    color: #fff;
    height: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    border-bottom: solid 1px white;
}

td {
    font-size: 1.6em;
    padding: 10px;
}

li {
    font-size: 1.6em;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.exercicio div {
    font-size: 1.8em;
    border: solid 5px #fff;
    padding: 0px 40px;
    margin: 10px;
}

.exercicio div:nth-of-type(1) {
    background-color: darkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-color: crimson;
}

.exercicio div:nth-of-type(3) {
    background-color: darkcyan;
}

.exercicio div:nth-of-type(4) {
    background-color: darkorchid;
}

.exercicio div:nth-of-type(5) {
    background-color: dodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-color: salmon;
}

.exercicio .destaque {
    border: solid 10px greenyellow;
    color: greenyellow;
    font-weight: bold;
}

Arquivo: plugin1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Plugin #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
</head>

<body class='conteudo exercicio'>
    <h1>Plugin #01</h1>
    <div>
        {{ 1 + 2 }}
        Texto 1
        {{ 3 ** 3 }}
        Texto 2
        {{ console.log('Funcionou!') }}
        Texto 3
        {{ (function() { return 'Legal!!!' })() }}
        Texto Final
    </div>

    <script>
        //Objetivo: converter o texto acima em algo concreto
        //const $ = {nome: 'Não é o jQuery'}
        (function ($) {
            $.fn.interpretar = function (){
                const retirarChaves = s => s.substring(2, s.length -2)
                const conteudo = $(this).html()
                const expressoesComChaves = conteudo.match(/\{\{.+\}\}/g)
                const expressoes = expressoesComChaves.map(retirarChaves)
                const resultados = expressoes.map(e => eval(e))

                let conteudoFinal = conteudo
                for(let i = 0; i < expressoesComChaves.length; i++){
                    conteudoFinal = conteudoFinal.replace(
                        expressoesComChaves[i], resultados[i]
                    )
                }
                $(this).html(conteudoFinal)
            }
        })(jQuery)
        $('div').interpretar()//chamando o plugin
    </script>
</body>