1

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>

1
  • La verificación que haces para saber si hay marcado el otro botón (like o dislike) lo puedes poner dentro de una función
    – Christian
    Commented el 4 may. 2021 a las 17:04

2 respuestas 2

0

Puedes simplificar si usas una sola función para ambos botones, solo tienes que identificar el botón para actualizar los contadores y, dependiendo del valor de cada uno, agregar o quitar una clase al botón correspondiente. Al final, se actualizan los contenedores para el contador y las barras.

// 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 = 0,
    numeroDislike = 0;

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

function appLista() {
    // Una sola función para ambos
    like.addEventListener('click', likePlus);
    dislike.addEventListener('click', likePlus);
}

// Funciones
function likePlus(e) {
    e.preventDefault();
    // e.currentTarget es el botón que recibió clic
    let btn = e.currentTarget;
    // Actualizar contadores con base en el botón
    if(btn == like) {
        // Clic en like
        if(numeroDislike > 0) {
            // Elimina dislike
            numeroDislike --;
        } else if(numeroLike == 0) {
            // Incrementa like
            numeroLike ++;
        }
    } else {
        if(numeroLike > 0) {
            // Elimina like
            numeroLike --;
        } else if(numeroDislike == 0) {
            // Incrementa dislike
            numeroDislike ++;
        }
    }
    // Ajustar clases
    if(numeroLike == 0) {
        like.classList.remove('no-cero');
    } else {
        like.classList.add('no-cero');
    }
    if(numeroDislike == 0) {
        dislike.classList.remove('no-cero');
    } else {
        dislike.classList.add('no-cero');
    }
    // Actualizar contador y barra
    conteoLike.textContent = numeroLike;
    barraLike.style.flex = numeroLike;
    conteoDislike.textContent = numeroDislike;
    barraDislike.style.flex = 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;
}
.like.no-cero, .dislike.no-cero {
    color: rgb(37, 148, 255);
}
#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>

Estás usando los contadores para saber si el usuario actual ya hizo clic en "like" o "dislike" y vas a tener que modificar si quieres obtener la información desde base de datos, aunque la lógica va a seguir siendo la misma.

Seguramente se puede reducir la forma de actualizar contadores, aunque podría quedar menos legible y ahí depende de tus preferencias.

0

podrias intentar definir una clase en CSS para cuando el boton este clickeado (Para el estilo solamente) porque veo que lo cambias directamente con js por ejemplo

.boton-like{
color: blue;
}

.boton-dislike{
color: white;
}

y que unicamente la funcion del js cambie de nombre la clase que contiene el estilo que quieres aplicar usando las propiedades de JS para clases por ejemplo:

var rojos = document.getElementsByClassName("boton-like");
for (var i = 0; i<rojos.length; i++) {
   rojos[i].classList.remove("boton-like");
   rojos[i].classList.add("boton-dislike");
}

O usando jQuery:

$('.boton-like').removeClass("boton-like").addClass("boton-dislike");

y finalmente el contador numerico cambiarlo con

.textContent = tu_variable_contador;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.