Minha função só reconhece/retorna o 1 elemento e aplica a condição. Queria saber como selecionar e retornar todos o elementos? em JavaScript Puro!
function trocarCor() {
var tech = document.querySelector(".tech").innerText
// var la = lang.innerText
var cor = document.querySelector(".cor")
console.log(tech)
switch (tech) {
case "HTML":
cor.classList.remove("cor")
cor.classList.add("html")
break
case "JavaScript":
cor.classList.remove("cor")
cor.classList.add("js")
break
default:
break
}
}
trocarCor()
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
#cardContainer {
display: flex;
width: 100%;
height: auto;
flex-direction: row;
gap: 3rem;
justify-content: center;
align-items: center;
}
.gitCard {
display: flex;
width: 30rem;
height: 15rem;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
flex-shrink: 0;
background: #22212C
}
.gitCard h4 {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.4rem;
font-weight: 700;
}
.gitCard p {
font-size: 1.2rem;
font-weight: 400;
}
.gitCard .dados {
display: grid;
grid-template-columns: 10% 10% 65%;
gap: 2rem;
font-size: 1.2rem;
font-weight: 400;
}
.gitCard .count {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.gitCard .techs {
display: flex;
align-items: center;
gap: 0.5rem;
justify-self: flex-end;
}
.techs .html {
content: '';
width: 1.2rem;
height: 1.2rem;
display: block;
background: #e36e00;
border-radius: 50%;
border: 0.2rem solid #837E9F ;
}
.techs .js {
content: '';
width: 1.2rem;
height: 1.2rem;
display: block;
background: #fff200;
border-radius: 50%;
border: 0.2rem solid #837E9F ;
}
.techs .cor {
width: 12px;
height: 12px;
display: block;
background: #5b554f;
border-radius: 50%;
border: 2px solid #837E9F ;
}
<div id="cardContainer">
<div class="gitCard borderShadow">
<h4><img src="./img/folder.svg" alt="folder" />Nome Projeto</h4>
<p class="pp">Descrição</p>
<div class="dados">
<div class="count star">
<img src="./img/star.svg" alt="star">
<span class="countStar">0</span>
</div>
<div class="count view">
<img src="./img/view.svg" alt="star">
<span class="countView">0</span>
</div>
<div class="techs">
<span class="cor "}></span>
<span class="tech">HTML</span>
</div>
</div>
</div>
<div class="gitCard borderShadow">
<h4><img src="./img/folder.svg" alt="folder" />Nome Projeto</h4>
<p class="pp">Descrição</p>
<div class="dados">
<div class="count star">
<img src="./img/star.svg" alt="star">
<span class="countStar">0</span>
</div>
<div class="count view">
<img src="./img/view.svg" alt="star">
<span class="countView">0</span>
</div>
<div class="techs">
<span class="cor "}></span>
<span class="tech">JavaScript</span>
</div>
</div>
</div>
</div>
document.querySelectorAll
podera pegar todos e tera que percorrer todos;forEach
junto a uma expressão ternária, Daria menos linhas;