Youtube link - Click here
Source Code - HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Alphabet filter
</title>
<link href="alphabet_filter.css" rel="stylesheet">
<script src="alphabet_filter.js"></script>
</head>
<body>
<div class="header">Letter filtering</div>
<div class="container">
<div class="letters">
<div class="alphabet vowels">a</div>
<div class="alphabet consonant">b</div>
<div class="alphabet consonant">c</div>
<div class="alphabet consonant">d</div>
<div class="alphabet vowels">e</div>
<div class="alphabet consonant">f</div>
<div class="alphabet consonant">g</div>
<div class="alphabet consonant">h</div>
<div class="alphabet vowels">i</div>
<div class="alphabet consonant">j</div>
<div class="alphabet consonant">k</div>
<div class="alphabet consonant">l</div>
<div class="alphabet consonant">m</div>
<div class="alphabet consonant">n</div>
<div class="alphabet vowels">o</div>
<div class="alphabet consonant">p</div>
<div class="alphabet consonant">q</div>
<div class="alphabet consonant">r</div>
<div class="alphabet consonant">s</div>
<div class="alphabet consonant">t</div>
<div class="alphabet vowels">u</div>
<div class="alphabet consonant">v</div>
<div class="alphabet consonant">w</div>
<div class="alphabet consonant">x</div>
<div class="alphabet consonant">y</div>
<div class="alphabet consonant">z</div>
</div>
<div class="buttons">
<button onclick="alph()">All</button>
<button onclick="vowel('vowels')">Vowels</button>
<button onclick="consonant('consonant')">consonant</button>
</div>
</div>
</body>
</html>
CSS:
/* lets start to giving styles */
.header {
background-color: #27296d;
color: white;
font-size: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 2;
}
.container {
max-width: 1000px;
padding: 1%;
margin: 0px auto;
position: relative;
background-color: #eeeeee;
display: flex;
flex-direction: row-reverse;
height: 150vh;
align-items: flex-start;
}
.buttons {
flex-basis: 10%;
display: flex;
flex-direction: column;
margin: 0px 20px 0px 20px;
position: sticky;
top: 50px;
}
.letters {
flex-basis: 90%;
display: flex;
flex-wrap: wrap;
}
.buttons>button {
width: 100px;
height: 50px;
text-align: center;
border-radius: 10px;
background-image: linear-gradient(to right, #a393eb, #27296d);
margin-bottom: 20px;
cursor: pointer;
box-shadow: 10px 0px 20px #77628c inset;
color: white;
outline: none;
}
.letters>.alphabet {
position: relative;
box-sizing: border-box;
width: 150px;
height: 100px;
text-align: center;
padding-top: 40px;
font-weight: 200;
transition: 1s;
background-color: black;
margin: 0px 20px 20px 0px;
color: white;
box-shadow: 1px 1px 2px grey;
border-radius: 5px;
}
.hide {
display: none;
}
.vowels::after {
content: "vowels";
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 150px;
height: 0px;
border-radius: 5px;
background-color: grey;
top: 0;
transition: 1s;
opacity: 0;
}
.vowels:hover::after {
opacity: 1;
height: 100px;
}
.consonant::after {
content: "consonant";
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 150px;
height: 0px;
border-radius: 5px;
background-color: grey;
top: 0;
transition: 1s;
opacity: 0;
}
.consonant:hover::after {
opacity: 1;
height: 100px;
}
JAVASCRIPT:
//first we understand how to filter then give css style
function vowel(vowels) {
//paste the alph function definition
var alpha = document.querySelectorAll('.alphabet');
alpha.forEach((i) => {
i.classList.remove("hide");
});
var vow = document.querySelectorAll('.alphabet');
vow.forEach((i) => {
if (i.classList[1] != vowels) {
i.classList.add("hide");
}
})
}
function alph() {
var alpha = document.querySelectorAll('.alphabet');
alpha.forEach((i) => {
i.classList.remove("hide");
})
}
function consonant(consot) {
var alpha = document.querySelectorAll(".alphabet");
alpha.forEach((i) => {
i.classList.remove("hide");
});
var consonant = document.querySelectorAll(".alphabet");
consonant.forEach((i) => {
if (i.classList[1] != consot) {
i.classList.add("hide");
}
})
}
Post a Comment