Skip to content

Commit 0f7aa99

Browse files
bytecode001bytecode001
authored
Add files via upload
1 parent ed23004 commit 0f7aa99

File tree

3 files changed

+262
-1
lines changed

3 files changed

+262
-1
lines changed

‎037-fruit-search/index.html‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,32 @@
1-
1+
<!DOCTYPE html> <!-- Define the document type as HTML5 -->
2+
<html lang="en"> <!-- Set the language attribute to English -->
3+
<head>
4+
<meta charset="UTF-8"> <!-- Specify character encoding -->
5+
<title>Fruit Search 🍎🍌</title> <!-- Set the title of the page -->
6+
<!-- Link to the external CSS file -->
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
11+
<!-- Main container using Flexbox -->
12+
<div class="main-container">
13+
<!-- Page title with emojis -->
14+
<h1 class="title">Fruit Search 🍎🍌</h1>
15+
<!-- Brief description with emojis -->
16+
<p class="description">Type to find your favorite fruits! 🍇🍉🍓</p>
17+
18+
<!-- Search container -->
19+
<div class="search-container">
20+
<!-- Search input field -->
21+
<input type="text" id="search-input" placeholder="Search fruits...">
22+
<!-- Suggestions dropdown -->
23+
<div id="suggestions" class="suggestions"></div>
24+
</div>
25+
<!-- Message display area for emoji or messages -->
26+
<div id="message-display" class="message-display"></div>
27+
</div>
28+
29+
<!-- Link to the external JavaScript file -->
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎037-fruit-search/script.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// Get references to DOM elements
2+
const searchInput = document.getElementById('search-input'); // Search input field
3+
const suggestionsPanel = document.getElementById('suggestions'); // Suggestions dropdown container
4+
const messageDisplay = document.getElementById('message-display'); // Area to display messages or emojis
5+
6+
// Shortened list of fruit suggestions with available emojis
7+
const suggestions = [
8+
'Apple',
9+
'Avocado',
10+
'Banana',
11+
'Blueberry',
12+
'Cherry',
13+
'Coconut',
14+
'Grape',
15+
'Kiwi',
16+
'Lemon',
17+
'Mango',
18+
'Melon',
19+
'Orange',
20+
'Peach',
21+
'Pear',
22+
'Pineapple',
23+
'Strawberry',
24+
'Watermelon'
25+
];
26+
27+
// Mapping of fruit names to their corresponding emojis
28+
const fruitEmojis = {
29+
'Apple': '🍎',
30+
'Avocado': '🥑',
31+
'Banana': '🍌',
32+
'Blueberry': '🫐',
33+
'Cherry': '🍒',
34+
'Coconut': '🥥',
35+
'Grape': '🍇',
36+
'Kiwi': '🥝',
37+
'Lemon': '🍋',
38+
'Mango': '🥭',
39+
'Melon': '🍈',
40+
'Orange': '🍊',
41+
'Peach': '🍑',
42+
'Pear': '🍐',
43+
'Pineapple': '🍍',
44+
'Strawberry': '🍓',
45+
'Watermelon': '🍉'
46+
};
47+
48+
// Listen for input events on the search field
49+
searchInput.addEventListener('input', function(event) {
50+
const input = searchInput.value.trim(); // Get the current input value, trimmed of whitespace
51+
const inputLower = input.toLowerCase(); // Convert input to lowercase for case-insensitive comparison
52+
suggestionsPanel.innerHTML = ''; // Clear previous suggestions
53+
messageDisplay.textContent = ''; // Clear previous messages or emojis
54+
55+
if (input) { // Check if input is not empty
56+
// Filter suggestions based on input
57+
const filteredSuggestions = suggestions.filter(function(suggestion) {
58+
return suggestion.toLowerCase().startsWith(inputLower); // Return suggestions that start with input
59+
});
60+
61+
if (filteredSuggestions.length > 0) {
62+
suggestionsPanel.classList.add('active'); // Show suggestions dropdown
63+
filteredSuggestions.forEach(function(suggested) {
64+
const div = document.createElement('div'); // Create a div for each suggestion
65+
div.textContent = suggested; // Set the text content
66+
div.classList.add('suggestion-item'); // Add class for styling
67+
// Add click event listener to populate the search input with the clicked suggestion
68+
div.addEventListener('click', function() {
69+
selectFruit(suggested); // Call function to handle selection
70+
});
71+
suggestionsPanel.appendChild(div); // Add suggestion to the dropdown
72+
});
73+
} else {
74+
suggestionsPanel.classList.remove('active'); // Hide suggestions dropdown if no matches
75+
}
76+
} else {
77+
suggestionsPanel.classList.remove('active'); // Hide suggestions dropdown if input is empty
78+
messageDisplay.textContent = ''; // Clear message display
79+
}
80+
});
81+
82+
// Function to handle fruit selection
83+
function selectFruit(fruitName) {
84+
searchInput.value = fruitName; // Set the input value to the selected fruit
85+
suggestionsPanel.innerHTML = ''; // Clear suggestions
86+
suggestionsPanel.classList.remove('active'); // Hide suggestions dropdown
87+
displayEmoji(fruitName); // Display the corresponding emoji
88+
}
89+
90+
// Function to display the emoji
91+
function displayEmoji(fruitName) {
92+
const emoji = fruitEmojis[fruitName]; // Get the emoji from the mapping
93+
messageDisplay.textContent = emoji ? emoji : ''; // Display emoji or empty string if not found
94+
}
95+
96+
// Listen for 'Enter' key press on the input field
97+
searchInput.addEventListener('keydown', function(event) {
98+
if (event.key === 'Enter') { // Check if 'Enter' key is pressed
99+
event.preventDefault(); // Prevent default behavior (e.g., form submission)
100+
const inputValue = searchInput.value.trim(); // Get the input value
101+
const inputValueLower = inputValue.toLowerCase(); // Convert to lowercase for comparison
102+
103+
// Check if the input matches any fruit in the suggestions (case-insensitive)
104+
const matchedFruit = suggestions.find(function(fruit) {
105+
return fruit.toLowerCase() === inputValueLower; // Return true if a match is found
106+
});
107+
108+
if (matchedFruit) {
109+
selectFruit(matchedFruit); // Select the fruit if found
110+
} else {
111+
messageDisplay.textContent = 'Fruit not in the list'; // Display message if not found
112+
suggestionsPanel.classList.remove('active'); // Hide suggestions dropdown
113+
}
114+
}
115+
});

‎037-fruit-search/styles.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/* Global styles */
2+
body {
3+
margin: 0; /* Remove default margin */
4+
padding: 0; /* Remove default padding */
5+
font-family: 'Arial', sans-serif; /* Set default font family */
6+
background: linear-gradient(135deg, #f5af19, #f12711); /* Apply gradient background */
7+
color: #2d3436; /* Set text color */
8+
display: flex; /* Use Flexbox for layout */
9+
justify-content: center; /* Center horizontally */
10+
align-items: center; /* Center vertically */
11+
min-height: 100vh; /* Set minimum height to viewport height */
12+
text-align: center; /* Center-align text */
13+
}
14+
15+
/* Main container using Flexbox */
16+
.main-container {
17+
display: flex; /* Use Flexbox */
18+
flex-direction: column; /* Stack items vertically */
19+
align-items: center; /* Center items horizontally */
20+
}
21+
22+
/* Title styling */
23+
.title {
24+
font-size: 48px; /* Set font size for the title */
25+
color: #fff; /* Set text color to white */
26+
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Add text shadow for readability */
27+
}
28+
29+
/* Description styling */
30+
.description {
31+
font-size: 18px; /* Set font size for the description */
32+
color: #fff; /* Set text color to white */
33+
margin-bottom: 30px; /* Add space below the description */
34+
}
35+
36+
/* Search container */
37+
.search-container {
38+
position: relative; /* Position relative for absolute positioning inside */
39+
width: 300px; /* Set fixed width */
40+
display: flex; /* Use Flexbox */
41+
flex-direction: column; /* Stack items vertically */
42+
align-items: center; /* Center items horizontally */
43+
}
44+
45+
/* Style the search input field */
46+
#search-input {
47+
width: 100%; /* Set width to 100% of container */
48+
padding: 12px 20px; /* Add padding inside the input */
49+
font-size: 16px; /* Set font size */
50+
border: 2px solid #ddd; /* Add border */
51+
border-radius: 25px; /* Round the corners */
52+
transition: border 0.3s ease; /* Add transition effect on border */
53+
}
54+
55+
/* Change border color on focus */
56+
#search-input:focus {
57+
outline: none; /* Remove default outline */
58+
border-color: #6c5ce7; /* Change border color when focused */
59+
}
60+
61+
/* Style the message display area */
62+
.message-display {
63+
font-size: 24px; /* Set font size */
64+
margin-top: 20px; /* Add space above */
65+
color: #fff; /* Set text color to white */
66+
min-height: 48px; /* Reserve space for the message/emoji */
67+
display: flex; /* Use Flexbox */
68+
align-items: center; /* Center content vertically */
69+
justify-content: center; /* Center content horizontally */
70+
}
71+
72+
/* Style the suggestions dropdown */
73+
.suggestions {
74+
position: absolute; /* Position absolutely within the container */
75+
top: 100%; /* Position below the input field */
76+
left: 0; /* Align to the left */
77+
width: 100%; /* Set width to match the input */
78+
border-radius: 0 0 25px 25px; /* Round bottom corners */
79+
border: 2px solid #ddd; /* Add border */
80+
border-top: none; /* Remove top border to connect with input field */
81+
background-color: #fff; /* Set background color */
82+
max-height: 200px; /* Set maximum height */
83+
overflow-y: auto; /* Enable vertical scrolling */
84+
box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Add shadow effect */
85+
opacity: 0; /* Hide by default */
86+
visibility: hidden; /* Hide by default */
87+
transform: translateY(-10px); /* Move up slightly when hidden */
88+
transition: opacity 0.3s ease, transform 0.3s ease; /* Add transition effects */
89+
z-index: 1; /* Ensure it's above other elements */
90+
}
91+
92+
/* Show suggestions when active */
93+
.suggestions.active {
94+
opacity: 1; /* Make visible */
95+
visibility: visible; /* Make visible */
96+
transform: translateY(0); /* Reset position */
97+
}
98+
99+
/* Style each suggestion item */
100+
.suggestion-item {
101+
padding: 10px 20px; /* Add padding */
102+
cursor: pointer; /* Change cursor on hover */
103+
transition: background-color 0.2s ease; /* Add transition effect */
104+
}
105+
106+
/* Hover effect for suggestion items */
107+
.suggestion-item:hover {
108+
background-color: #f1f1f1; /* Change background color on hover */
109+
}
110+
111+
/* Style for "No suggestions" message */
112+
.no-suggestions {
113+
padding: 10px 20px; /* Add padding */
114+
color: #888; /* Set text color */
115+
}

0 commit comments

Comments
 (0)