Skip to main content
1 de 2
Joel
  • 13
  • 3

¿El código de JS es muy largo como lo simplifico para un mejor funcionamiento gracias?

Eh intentado hacer este pequeño código para hacer algo similar a YouTube de dar like y dislike pero apenas soy nuevo en esto y estoy seguro de que vale minorarlo bastante pero no se como me ayudan con eso y claro explicando el código porque aun me falta por aprender muchas cosas

// Variables
const like = document.querySelector('#like'),
      dislike = document.querySelector('#dislike'),
      conteoLike = document.querySelector('#conteo-like'),
      conteoDislike = document.querySelector('#conteo-dislike');
      barraLike = document.querySelector('#barra-like'),
      barraDislike = document.querySelector('#barra-dislike')

let numeroLike = 1,
    numeroDislike = 1;

// Cargar app
addEventListener('DOMContentLoaded', appLista);

function appLista() {
    like.addEventListener('click', likePlus);
    dislike.addEventListener('click', dislikePlus);
}

// Funciones
function likePlus() {
// Elimina el dislike al dar like
    if(numeroDislike !== 0) {
        numeroDislike--;
        dislike.style.color = 'rgb(145,145,145)';
        conteoDislike.textContent = 0;
        barraDislike.style.flex = 0;
// Prácticamente es un toggle de like cambiando el color y el valor numerico
        if(numeroLike !== 0) {
            numeroLike--;
            like.style.color = 'rgb(145,145,145)';
            barraLike.style.flex = 0;
        } else {
            numeroLike++;
            like.style.color = 'rgb(37, 148, 255)';
            barraLike.style.flex = numeroLike;
        }
    } else {// La misma función de un toggle pero aquí es cuando el dislike no tiene ningún 
            // valor y no es necesario eliminarle el like
        if(numeroLike !== 0) {
            numeroLike--;
            like.style.color = 'rgb(145,145,145)';
            barraLike.style.flex = 0;
        } else {
            numeroLike++;
            like.style.color = 'rgb(37, 148, 255)';
            barraLike.style.flex = numeroLike;
        }
    }
    conteoLike.textContent = numeroLike;
}      
function dislikePlus() {
    if(numeroLike !==0) {
        numeroLike--;
        like.style.color = 'rgb(145,145,145)';
        conteoLike.textContent = 0;
        barraLike.style.flex = 0;
        if(numeroDislike !== 0) {
            numeroDislike--;
            dislike.style.color = 'rgb(145,145,145)';
            barraDislike.style.flex = 0;
        } else {
            numeroDislike++;
            dislike.style.color = 'rgb(37, 148, 255)';
            barraDislike.style.flex = numeroDislike;
        } 
    } else {
        if(numeroDislike !== 0) {
            numeroDislike--;
            dislike.style.color = 'rgb(145,145,145)';
            barraDislike.style.flex = 0;
        } else {
            numeroDislike++;
            dislike.style.color = 'rgb(37, 148, 255)';
            barraDislike.style.flex = numeroDislike;
        } 
    }
    conteoDislike.textContent = numeroDislike;
}
html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
*,
*:after,
*:before {
    box-sizing: inherit;
}
body {
    background-color: rgba(39, 40, 34,1);
    display: grid;
    place-items: center;
    height: 100vh;
}
.contenedor {
    content: '';
    border: 1px solid green;
    width: 500px;
    display: flex;
    justify-content: center;
    position: relative;
}
.like,
.dislike {
    text-decoration: none;
    font-size: 1.5rem;
    color: rgba(145,145,145);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding-bottom: .2rem;
}
.like {
    margin-right: 1rem;
}
#conteo {
    font-size: .8rem;
    font-weight: 500;
} 
.l-like,
.l-dislike {
    margin-right: .3rem;
} 
.barra {
    content: '';
    width: 6rem;
    height: 1.1px;
    position: absolute;
    bottom: 0rem;
    text-align: center;
    display: flex;
    background-color: rgb(112, 112, 112);
}
.barra-like {
    background-color: rgba(37, 148, 255);
}
.barra-dislike {
    background-color: rgb(112, 112, 112);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Like & Dislike</title>

    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
    <link href="https://file.myfontastic.com/6W2vQo4NcEPxAEDE4WVevF/icons.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contenedor">
        <a href="#" class="like" id="like">
            <i class="l-like"></i>
            <span id="conteo-like">0</span>
        </a>
        <a href="#" class="dislike" id="dislike">
            <i class="l-dislike"></i>
            <span id="conteo-dislike">0</span>
        </a>
        <div class="barra">
            <div class="barra-like" id="barra-like"></div>
            <div class="barra-dislike" id="barra-dislike"></div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>
/hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh/

Joel
  • 13
  • 3