Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Sugestão: Alugando e devolvendo jogo

Podem utlizar também o .toggle() da classList como eu acabei de aprender com ajuda do Gemini. O toggle já verifica se a classe existe e a remove e senão existe adiciona ela.

let gamesRented = 0; 
// Executing after the whole HTML structure was loaded
document.addEventListener('DOMContentLoaded', function() {
    // Verifies now many element in the DOM has the .dashboard__item__img--rented
    gamesRented = document.querySelectorAll('.dashboard__item__img--rented').length;
    displayGamesRented();
});

//On click function
function changeButton(buttonId) {
    let param = `game-${buttonId}`;
    // Get which button is being pressed and change the button status/text
    changeStatus(param, '.dashboard__item__button', '.dashboard__item__img');
}

function changeStatus(id, class1, class2) {
    // Get the element <li> by Id and select children elements by class.
    let buttonStatus = document.getElementById(id).querySelector(class1);
    let changeStatus = document.getElementById(id).querySelector(class2)
    let gameName     = document.getElementById(id).querySelector('.dashboard__item__name');

    // Asking for confirmation if they want to return the rented game
    if(changeStatus.classList.contains('dashboard__item__img--rented')) {
        if (confirm(`Are you sure you want to return the game? ${gameName.textContent}?`)) {
            modifyHTML(buttonStatus,changeStatus);
            gamesRented--;
        }
    }
    else {
        modifyHTML(buttonStatus,changeStatus);
        gamesRented++;
    }   

    displayGamesRented();
}
// Function to modify both the button and the text
function modifyHTML(button, change) {
        // toggle will remove the class if it finds it and add if not
        button.classList.toggle('dashboard__item__button--return');
        change.classList.toggle('dashboard__item__img--rented');
        // If after toggle the button contain said class needs to change from rent to return and vice versa.
        button.textContent = button.classList.contains('dashboard__item__button--return') ? 'Devolver' : 'Alugar';    
}
// As asked by the exercise print on the log how many games are currently rented
function displayGamesRented() {
    console.log(`The quantity of games rented is ${gamesRented}`);
}

Desafio do palindromo e do sort. Poderia também ter utilizado uma arrow function já que é uma chamada simples como const ascend = (num, num1, num2) => [num, num1, num2].sort((x, y) => x - y);

verificaPalindromo("rever");
function verificaPalindromo(palavraRecebida) {
  let palavra = palavraRecebida;
  let palavraSeparada = palavra.split("");
  let palavraInvertida = palavraSeparada.reverse().join("");
  palavra === palavraInvertida ? console.log(`A palavra ${palavra} é um palíndromo`) : console.log(`A palavra ${palavra} não é um palíndromo`);
}

function sort(num1, num2, num3, operation) {
    return operation(num1,num2,num3);
}

const ascend = function sortAscending (num, num1, num2) {
    return [num, num1, num2].sort((x,y) => x - y);
}

const descend = function sortDescending (num, num1, num2) {
    return [num, num1, num2].sort((x,y) => y - x);

}
console.log(sort(15,10,20,ascend));
console.log(sort(15,10,20,descend));
1 resposta
solução!

Olá Israel!

Que bacana ver você explorando o uso do .toggle() da classList! Ele é realmente muito útil para simplificar o código quando precisamos adicionar ou remover classes de elementos de forma dinâmica.

No seu projeto de aluguel e devolução de jogos, o uso do .toggle() ajuda a manter o código limpo e eficiente, especialmente na função modifyHTML, onde você altera a classe do botão e da imagem com apenas uma linha de código. Isso facilita bastante a manutenção e a legibilidade do seu código.

Sobre o desafio do palíndromo e do sort, você mencionou a possibilidade de usar arrow functions. Elas são uma ótima maneira de tornar o código mais conciso, especialmente em funções simples. Por exemplo, a função ascend poderia ser escrita como uma arrow function assim:

const ascend = (num, num1, num2) => [num, num1, num2].sort((x, y) => x - y);

Isso reduz a sintaxe e ainda mantém o mesmo comportamento. Da mesma forma, você poderia transformar a função descend em uma arrow function:

const descend = (num, num1, num2) => [num, num1, num2].sort((x, y) => y - x);

Essas pequenas mudanças ajudam a deixar o código mais moderno e elegante.

Espero ter ajudado e bons estudos!