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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

    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);
    }

<!-- language: lang-html -->

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

<!-- end snippet -->