Skip to content

Commit c115e37

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #559 from AnvitaPrasad/main
Added functionality for search icon in Band Website
2 parents b95b9a1 + 2018754 commit c115e37

File tree

7 files changed

+204
-49
lines changed

7 files changed

+204
-49
lines changed

‎.DS_Store‎

2 KB
Binary file not shown.

‎Art-Gallery/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎Art-Gallery/index.html‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<div class="header">
1515
<a href="#container">MY ART</a>
1616
<a href="#about">ABOUT</a>
17+
<a href="#contact">CONTACT ME</a>
1718
</div>
1819
<div id="container">
1920
<div class="half">
@@ -35,26 +36,28 @@
3536
tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue
3637
gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta
3738
lectus vitae, ultricies congue gravida diam non fringilla.</p>
39+
</div>
40+
<div id="contact">
41+
<div class="input">
42+
<p class="red">Do not hesitate to contact me!</p>
43+
</div>
44+
<div class="input">
45+
<span>Name</span>
46+
<input type="text">
47+
</div>
48+
<div class="input">
49+
<span>Email</span>
50+
<input type="text">
51+
</div>
52+
<div class="input">
53+
<span>Message</span>
54+
<input type="text">
55+
</div>
56+
<div class="input">
57+
<input class="button" type="button" value="Send">
58+
</div>
59+
</div>
3860
</div>
39-
<div class="input">
40-
<p class="red">Do not hesitate to contact me!</p>
41-
</div>
42-
<div class="input">
43-
<span>Name</span>
44-
<input type="text">
45-
</div>
46-
<div class="input">
47-
<span>Email</span>
48-
<input type="text">
49-
</div>
50-
<div class="input">
51-
<span>Message</span>
52-
<input type="text">
53-
</div>
54-
<div class="input">
55-
<input class="button" type="button" value="Send">
56-
</div>
57-
</div>
5861

5962
<div class="footer">
6063
Made by ❤Jugesh Raghav

‎Art-Gallery/mobile.css‎

Lines changed: 85 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,85 @@
1-
*{
2-
margin:0;
3-
padding:0;
4-
}
5-
@media (max-width:595px){
6-
#container{
7-
display:grid;
8-
grid-template-columns:auto;
9-
}
10-
.header{
11-
padding-top:30px;
12-
padding-bottom:30px;
13-
padding-right: 10px;
14-
padding-left:10px;
15-
}
16-
img{
17-
width:250px;
18-
height:300px;
19-
}
20-
.footer{
21-
padding:10px
22-
}
23-
}
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #f4f4f4;
10+
}
11+
12+
.header {
13+
display: flex;
14+
justify-content: space-around;
15+
align-items: center;
16+
background-color: #333;
17+
padding: 15px 0;
18+
color: white;
19+
font-size: 18px;
20+
}
21+
22+
.header a {
23+
color: white;
24+
text-decoration: none;
25+
transition: color 0.3s;
26+
}
27+
28+
.header a:hover {
29+
color: #ff6347;
30+
}
31+
32+
#container {
33+
display: flex;
34+
flex-wrap: wrap;
35+
justify-content: space-around;
36+
padding: 20px;
37+
}
38+
39+
.half {
40+
flex: 1;
41+
max-width: 45%;
42+
margin: 10px;
43+
}
44+
45+
img {
46+
width: 100%;
47+
border-radius: 8px;
48+
}
49+
50+
.about-block {
51+
padding: 20px;
52+
}
53+
54+
.red {
55+
color: red;
56+
}
57+
58+
.input {
59+
margin: 10px 0;
60+
}
61+
62+
.input span {
63+
display: block;
64+
margin-bottom: 5px;
65+
}
66+
67+
.button {
68+
padding: 10px 15px;
69+
background-color: #333;
70+
color: white;
71+
border: none;
72+
border-radius: 5px;
73+
cursor: pointer;
74+
}
75+
76+
.button:hover {
77+
background-color: #ff6347;
78+
}
79+
80+
.footer {
81+
text-align: center;
82+
padding: 15px;
83+
background-color: #333;
84+
color: white;
85+
}

‎Band Website/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@
3030
</div>
3131
</ul>
3232
<i class="fas fa-search search"></i>
33+
<div id="search-container">
34+
<input type="text" id="search-input" class="search-input" placeholder="Search...">
35+
</div>
3336
</nav>
3437
<div class="homepage-description">
3538
<span class="homepage-desc-heading">Chicago</span>

‎Band Website/script.js‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,50 @@ for(i=0;i<=0;i++){
1212
modalClose[i].addEventListener("click",()=>{
1313
modal.style.display="none";
1414
})
15-
}
15+
}
16+
document.querySelector('.search').addEventListener('click', function(event) {
17+
const searchContainer = document.getElementById('search-container');
18+
const searchInput = document.getElementById('search-input');
19+
20+
event.stopPropagation();
21+
22+
searchContainer.classList.toggle('active');
23+
searchInput.classList.toggle('active');
24+
25+
if (searchInput.classList.contains('active')) {
26+
searchInput.focus();
27+
}
28+
});
29+
30+
document.addEventListener('click', function(event) {
31+
const searchContainer = document.getElementById('search-container');
32+
const searchInput = document.getElementById('search-input');
33+
34+
if (!searchContainer.contains(event.target) && searchInput.classList.contains('active')) {
35+
searchContainer.classList.remove('active');
36+
searchInput.classList.remove('active');
37+
}
38+
});
39+
40+
function highlightText(searchTerm) {
41+
const elementsToSearch = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, div, span, li'); // Add more tags if necessary
42+
43+
const searchRegex = new RegExp(`(${searchTerm})`, 'gi');
44+
45+
elementsToSearch.forEach(element => {
46+
const innerHTML = element.innerHTML;
47+
48+
const highlightedHTML = innerHTML.replace(searchRegex, '<span class="highlight">$1</span>');
49+
50+
element.innerHTML = highlightedHTML;
51+
});
52+
}
53+
54+
document.getElementById('search-input').addEventListener('keydown', function(event) {
55+
if (event.key === 'Enter') {
56+
const searchTerm = event.target.value.trim();
57+
if (searchTerm) {
58+
highlightText(searchTerm);
59+
}
60+
}
61+
});

‎Band Website/style.css‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,50 @@ a:hover{
5454
}
5555

5656
/*search bar*/
57-
.search{
58-
color: white;
59-
float: right;
60-
font-size: 25px;
61-
padding: 15px;
62-
margin-right: 10px;
57+
58+
.search {
59+
color: white;
60+
float: right;
61+
font-size: 25px;
62+
padding: 15px;
63+
margin-right: 10px;
64+
cursor: pointer;
65+
}
66+
67+
68+
#search-container {
69+
display: none;
70+
width: 100%;
71+
text-align: center;
72+
position: absolute;
73+
top: 60px;
74+
left: 0;
75+
}
76+
77+
.search-input {
78+
width: 50%;
79+
padding: 12px;
80+
font-size: 16px;
81+
border: 1px solid #ccc;
82+
border-radius: 5px;
83+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
84+
transition: transform 0.5s ease, opacity 0.5s ease;
85+
opacity: 0;
86+
transform: translateY(-20px);
87+
}
88+
89+
#search-container.active {
90+
display: block;
91+
}
92+
93+
.search-input.active {
94+
opacity: 1;
95+
transform: translateY(0);
96+
}
97+
.highlight {
98+
background-color: yellow;
99+
font-weight: bold;
100+
color: black;
63101
}
64102

65103
/**homepage description**/

0 commit comments

Comments
 (0)