// 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>