[Projeto] Solução do desafio proposto

<div class="areaForm">

        <form action="" class="novoItem" id="novoItem">
            <h1 class="tituloMeusCarrosFavoritos">Meus Carros Favoritos :)</h1>
        <img class="imagem" src="carro.png" alt="carro">
        <input class="campoCarro" id="campoCarro" type="text" placeholder="Qual eo seu carro favorito?">
        <input class="campoCor" id="campoCor" type="text" placeholder="Cor favorita">
        <input class="btnAdcionar" type="submit" value="Adicionar">
        <label class="campoLabel"  id="campoLabel"></label>
        </form>
    </div>
    <div class="AreaItems">
        <ul class="lista" data-lista>
            <!-- <li class="item_NomeDoCarro"><strong>corola - azul</strong></li> -->


        </ul>
    </div>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{

    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center ;

}
form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 100%;
    height: 100%;

}
.areaForm{

    width: 400px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: black;
    border-radius: 20px;
    padding: 5px;
    box-shadow: 5px 10px 20px blue;
}

.AreaItems{
    display: flex;
    width: 500px;
    height: 500px;
    background-color: rgb(117, 115, 115); 
    border-radius: 20px;
    box-shadow: 7px 2px 20px rgb(12, 173, 111);

}

.imagem{
    width: 100px;
    height: 100px;

    margin-bottom: 70px;
    border: 4px solid rgb(56, 55, 55);
    border-radius: 100%;
    background-color: #fff;
    align-self:center;
}

.campoCarro,.campoCor,.btnAdcionar{
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    color: black;
    font-family: 'roboto',sans-serif;
    border: 0;
    border-radius: 10px;
    outline: 0;
    text-align: center;
}
.campoCarro,.campoCor::placeholder{
    text-align: center;

}

.btnAdcionar:hover{

    background-color: rgb(245, 240, 240);
    color: #fff;
    transition: 0.7s;
    font-family:fantasy;

    background-image: linear-gradient(45deg, red,rgb(21, 69, 228));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    border: 1px solid #fff;

}

.AreaItems{
    margin-left: 5px;
    border-left: 5px solid rgb(0, 0, 10);
}

.item_NomeDoCarro {
    width: 300px;
    padding: 7px;
    font-size: 20px;
    margin-left: 20px;
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #fff;
    border-radius: 20px;
    background-color: #fff;

}

.item_NomeDoCarro strong{

    margin-right: 10px;
    gap: 5px;
    color: blue;
}
.tituloMeusCarrosFavoritos{

    background-image: linear-gradient(45deg, blue,red,green,#fff,rgb(21, 69, 228));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 50px;


}
.campoLabel{

    color: rgb(224, 15, 15);
    text-decoration:underline;
    margin-top: 10px;
}

const formulario = document.querySelector('#novoItem');
const lista = document.querySelector('[data-lista]');
const alerta = document.querySelector('#campoLabel')

formulario.addEventListener('submit',(evento)=>{
    evento.preventDefault()
    const campoCarro = evento.target['campoCarro'].value
    const campoCor = evento.target['campoCor'].value

    adicionarElemento(campoCarro,campoCor)


})


function adicionarElemento(nome,cor){

    if(campoCarro.value === '' || campoCor.value === ''){

        const textoAlerta = 'Favor Preencher todos os campos*';
        alerta.innerHTML += textoAlerta;
        return false;

    }else{
        alerta.innerHTML ='';
    }

    //irei criar uma li (lista)
    const novoItem = document.createElement('li');
    // agora irei criar uma classe para li
    novoItem.classList.add('item_NomeDoCarro') ;

    //agora irei criar a strong para adcionar cor do carro <strong>

    const corDoCarro = document.createElement('strong');
    // agora a cor minha estrong vai receber a cor
    corDoCarro.innerHTML = nome;

    //agora vou incrementar na lista
    novoItem.appendChild(corDoCarro);
    //agora meu novoItem vai receber o nome do carro
    novoItem.innerHTML+= cor;

    // e por fim vou adicionar na minha pagina html
    lista.appendChild(novoItem);
    campoCarro.value = '';
    campoCor.value = "";
}

`