The portfolio gallery is useful when your website contains different types of content or so many contents. With the help of a portfolio gallery, you can easily display all the contents on your front page to the user. But if user wants some specific contents then we need to attach filters on the portfolio. In this article, we will add filters using JavaScript. Before proceeding into this article you can see the article ‘how to create a Portfolio Gallery using HTML and CSS?‘.
Creating Structure: In this section, we will create the basic website structure of the portfolio. Here, we will attach the title attribute so the user can know what will be the content type on each gird of the portfolio.
- HTML code: In this section, we will design the basic structure of Portfolio Gallery.
html
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
</
head
>
<
body
>
<!-- Title and tag -->
<
div
class
=
"container"
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>A Computer Science Portal for Geeks</
h3
>
<
hr
>
<!-- Content of the body-->
<
h2
>Portfolio of Languages</
h2
>
<!-- Button foreach group -->
<
div
id
=
"filtering"
>
<
button
class
=
"bttn active"
onclick
=
"geeksportal('all')"
>
Show all
</
button
>
<
button
class
=
"bttn"
onclick
=
"geeksportal('Markup')"
>
Markup
</
button
>
<
button
class
=
"bttn"
onclick
=
"geeksportal('Style')"
>
Style
</
button
>
<
button
class
=
"bttn"
onclick
=
"geeksportal('Scripting')"
>
Scripting
</
button
>
</
div
>
<!-- Portfolio Gallery Grid -->
<
div
class
=
"row"
>
<
div
class
=
"column Markup"
>
<
div
class
=
"content"
>
<
img
src
=
alt
=
"HTML"
style
=
"width:100%"
>
<
h3
><
a
href
=
"#"
>
HTML Tutorials
</
a
>
</
h3
>
<
p
>
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language. HTML
is the combination of Hypertext
and Markup language. Hypertext
defines the link between the web
pages.
</
p
>
</
div
>
</
div
>
<
div
class
=
"column Styleshit"
>
<
div
class
=
"content"
>
<
img
src
=
alt
=
"CSS"
style
=
"width:100%"
>
<
h3
><
a
href
=
"#"
>
CSS Tutorials
</
a
>
</
h3
>
<
p
>
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS allows
you to apply styles to web pages.
</
p
>
</
div
>
</
div
>
<
div
class
=
"column Scripting"
>
<
div
class
=
"content"
>
<
img
src
=
alt
=
""
style
=
"width:100%"
>
<
h3
><
a
href
=
"#"
>
PHP Tutorials
</
a
>
</
h3
>
<
p
>
The term PHP is an acronym for PHP:
Hypertext Preprocessor. PHP is a
server-side scripting language
designed specifically for web
development. PHP can be easily
embedded in HTML files.
</
p
>
</
div
>
</
div
>
<
div
class
=
"column Scripting"
>
<
div
class
=
"content"
>
<
img
src
=
alt
=
""
style
=
"width:100%"
>
<
h3
><
a
href
=
"#"
>
JavaScript Tutorials
</
a
>
</
h3
>
<
p
>
Javascript was developed by Brendan
Eich in 1995. At first, it was called
LiveScript but was later name to
JavaScript. JavaScript is the muscle
of the structure
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_none
Designing Structure: In the previous section, we have created the structure of the basic website and now we are going to use CSS to design the structure of the web-page.
- CSS code:
CSS
<style>
/* Wildcard styling */
* {
box-sizing: border-box;
}
/* Padding for whole body */
body {
padding
:
15px
;
}
.container {
max-width
:
1200px
;
margin
:
auto
;
}
/* Styling h2 tag */
h
1
{
Color:
green
;
word-break: break-
all
;
}
/* Anchor tag decoration */
a {
text-decoration
:
none
;
color
:
#5673C8
;
}
a:hover {
color
: lightblue;
}
.row {
margin
:
0px
-14px
;
padding
:
8px
;
}
.row > .column {
padding
:
6px
;
}
.column {
float
:
left
;
width
:
25%
;
display
:
none
;
}
/* Content decoration */
.content {
background-color
:
white
;
padding
:
10px
;
border
:
1px
solid
gray
;
}
/* Paragraph decoration */
p {
display
: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:
4
;
overflow
:
hidden
;
}
.row:after {
content
:
""
;
display
: table;
clear
:
both
;
}
.content {
background-color
:
white
;
padding
:
10px
;
border
:
1px
solid
gray
;
}
.
show
{
display
:
block
;
}
/* Style the filter buttons */
.bttn {
border
:
none
;
padding
:
8px
14px
;
background-color
:
gray
;
}
.bttn:hover {
background-color
:
#007EE5
;
opacity:
0.8
;
}
.bttn.active {
background-color
:
#007EE5
;
color
:
white
;
}
/* Window size 850 width set */
@media
screen
and (
max-width
:
850px
) {
.column {
width
:
50%
;
}
}
/* Window size 400 width set */
@media
screen
and (
max-width
:
400px
) {
.column {
width
:
100%
;
}
}
</style>
chevron_rightfilter_none - JavaScript code:
javascript
<script>
geeksportal(
"all"
)
function
geeksportal(c) {
var
x, i;
x = document.getElementsByClassName(
"column"
);
if
(c ==
"all"
) c =
""
;
for
(i = 0; i < x.length; i++) {
w3RemoveClass(x[i],
"show"
);
if
(x[i].className.indexOf(c) > -1)
w3AddClass(x[i],
"show"
);
}
}
function
w3AddClass(element, name) {
var
i, arr1, arr2;
arr1 = element.className.split(
" "
);
arr2 = name.split(
" "
);
for
(i = 0; i < arr2.length; i++) {
if
(arr1.indexOf(arr2[i]) == -1) {
element.className +=
" "
+ arr2[i];
}
}
}
function
w3RemoveClass(element, name) {
var
i, arr1, arr2;
arr1 = element.className.split(
" "
);
arr2 = name.split(
" "
);
for
(i = 0; i < arr2.length; i++) {
while
(arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(
" "
);
}
// Add active class to the current
// button (highlight it)
var
btnContainer = document.getElementById(
"filtering"
);
var
btns = btnContainer.getElementsByClassName(
"bttn"
);
for
(
var
i = 0; i < btns.length; i++) {
btns[i].addEventListener(
"click"
,
function
() {
var
current =
document.getElementsByClassName(
"active"
);
current[0].className =
current[0].className.replace(
" active"
,
""
);
this
.className +=
" active"
;
});
}
</script>
chevron_rightfilter_none
Combining the HTML, CSS and JavaScript Code: Combining HTML, CSS and JavaScript section code to make a complete Portfolio Gallery with the filter.
html
<!DOCTYPE html> < html > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < style > /* Wildcard styling */ * { box-sizing: border-box; } /* Padding for whole body */ body { padding: 15px; } .container { max-width: 1200px; margin: auto; } /* Styling h2 tag */ h1 { Color: green; word-break: break-all; } /* Anchor tag decoration */ a { text-decoration: none; color: #5673C8; } a:hover { color: lightblue; } .row { margin: 0px -14px; padding: 8px; } .row > .column { padding: 6px; } .column { float: left; width: 25%; display: none; } /* Content decoration */ .content { background-color: white; padding: 10px; border: 1px solid gray; } /* Paragraph decoration */ p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .row:after { content: ""; display: table; clear: both; } .content { background-color: white; padding: 10px; border: 1px solid gray; } .show { display: block; } /* Style the filter buttons */ .bttn { border: none; padding: 8px 14px; background-color: gray; } .bttn:hover { background-color: #007EE5; opacity: 0.8; } .bttn.active { background-color: #007EE5; color: white; } /* Window size 850 width set */ @media screen and (max-width: 850px) { .column { width: 50%; } } /* Window size 400 width set */ @media screen and (max-width: 400px) { .column { width: 100%; } } </ style > </ head > < body > <!-- Title and tag --> < div class = "container" > < h1 >GeeksforGeeks</ h1 > < h3 >A Computer Science Portal for Geeks</ h3 > < hr > <!-- Content of the body--> < h2 >Portfolio of Languages</ h2 > <!-- button foreach group --> < div id = "filtering" > < button class = "bttn active" onclick = "geeksportal('all')" > Show all </ button > < button class = "bttn" onclick = "geeksportal('Markup')" > Markup </ button > < button class = "bttn" onclick = "geeksportal('Style')" > Style </ button > < button class = "bttn" onclick = "geeksportal('Scripting')" > Scripting </ button > </ div > <!-- Portfolio Gallery Grid --> < div class = "row" > < div class = "column Markup" > < div class = "content" > < img src = alt = "HTML" style = "width:100%" > < h3 >< a href = "#" > HTML Tutorials </ a > </ h3 > < p > HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. </ p > </ div > </ div > < div class = "column Styleshit" > < div class = "content" > < img src = alt = "CSS" style = "width:100%" > < h3 >< a href = "#" > CSS Tutorials </ a > </ h3 > < p > Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. </ p > </ div > </ div > < div class = "column Scripting" > < div class = "content" > < img src = alt = "" style = "width:100%" > < h3 >< a href = "#" > PHP Tutorials </ a > </ h3 > < p > The term PHP is an acronym for PHP: Hypertext Preprocessor. PHP is a server-side scripting language designed specifically for web development. PHP can be easily embedded in HTML files. </ p > </ div > </ div > < div class = "column Scripting" > < div class = "content" > < img src = alt = "" style = "width:100%" > < h3 >< a href = "#" > JavaScript Tutorials </ a > </ h3 > < p > Javascript was developed by Brendan Eich in 1995. At first, it was called LiveScript but was later name to JavaScript. JavaScript is the muscle of the structure </ p > </ div > </ div > </ div > </ div > < script > geeksportal("all") function geeksportal(c) { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length ; i++) { w3RemoveClass(x[i], "show"); if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); } } function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length ; i++) { if (arr1.indexOf(arr2[i]) == -1) { element.className += " " + arr2[i]; } } } function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element .className.split(" "); arr2 = name .split(" "); for ( i = 0 ; i < arr2.length; i++) { while (arr1.indexOf(arr2[i]) > -1) { arr1.splice(arr1.indexOf(arr2[i]), 1); } } element.className = arr1.join(" "); } // Add active class to the current // button (highlight it) var btnContainer = document.getElementById("filtering"); var btns = btnContainer.getElementsByClassName("bttn"); for (var i = 0; i < btns.length ; i++) { btns[i].addEventListener("click", function() { var current = document .getElementsByClassName("active"); current[0] .className = current [0].className.replace(" active", ""); this.className += " active"; }); } </script> </ body > </ html > |
Output:
