Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29

SmolSWE text

#29
by smolSWE - opened
base: refs/heads/main
←
from: refs/pr/29
Discussion Files changed
+551
-124
Files changed (16) hide show
  1. 0f40e52e-5ae3-4685-8f7f-be5a3c44aeea/index.html +17 -0
  2. 0f40e52e-5ae3-4685-8f7f-be5a3c44aeea/script.js +62 -0
  3. 0f40e52e-5ae3-4685-8f7f-be5a3c44aeea/style.css +79 -0
  4. 882eea23-73cc-472e-b26b-78907d2ea474/.gitignore +0 -0
  5. b45f4c07-dc90-4db0-943c-dc7a001c53f7/index.html +17 -0
  6. b45f4c07-dc90-4db0-943c-dc7a001c53f7/script.js +62 -0
  7. b45f4c07-dc90-4db0-943c-dc7a001c53f7/style.css +50 -0
  8. cc2b836f-b00f-4caf-b072-5314456893d8/.gitattributes +0 -0
  9. cc2b836f-b00f-4caf-b072-5314456893d8/.gitignore +0 -0
  10. cc2b836f-b00f-4caf-b072-5314456893d8/README.md +0 -0
  11. cc2b836f-b00f-4caf-b072-5314456893d8/index.html +17 -0
  12. cc2b836f-b00f-4caf-b072-5314456893d8/script.js +62 -0
  13. cc2b836f-b00f-4caf-b072-5314456893d8/style.css +50 -0
  14. index.html +11 -77
  15. script.js +55 -35
  16. style.css +69 -12
0f40e52e-5ae3-4685-8f7f-be5a3c44aeea/index.html ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Google Clone</title>
5
+ <link rel="stylesheet" href="style.css">
6
+ </head>
7
+ <body>
8
+ <div class="logo-container"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo"></div><div class="search-container">
9
+ <input type="text" id="search-input" placeholder="Search Google">
10
+ <div id="suggestions"></div>
11
+ </div>
12
+ <div id="results-container">
13
+ </div>
14
+
15
+ <script src="script.js"></script>
16
+ </body>
17
+ </html>
0f40e52e-5ae3-4685-8f7f-be5a3c44aeea/script.js ADDED
@@ -0,0 +1,62 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const searchInput = document.getElementById("search-input");
2
+ const suggestionsDiv = document.getElementById("suggestions");
3
+ const resultsContainer = document.getElementById("results-container");
4
+
5
+ const dummySuggestions = [
6
+ "what is javascript",
7
+ "how to make a website",
8
+ "best restaurants near me",
9
+ "weather today",
10
+ "current news"
11
+ ];
12
+
13
+ searchInput.addEventListener("input", function() {
14
+ const inputValue = searchInput.value.toLowerCase();
15
+ const filteredSuggestions = dummySuggestions.filter(suggestion =>
16
+ suggestion.toLowerCase().startsWith(inputValue)
17
+ );
18
+
19
+ displaySuggestions(filteredSuggestions);
20
+ });
21
+
22
+ function displaySuggestions(suggestions) {
23
+ suggestionsDiv.innerHTML = "";
24
+ if (suggestions.length > 0 && searchInput.value) {
25
+ suggestions.forEach(suggestion => {
26
+ const suggestionElement = document.createElement("div");
27
+ suggestionElement.textContent = suggestion;
28
+ suggestionElement.addEventListener("click", function() {
29
+ searchInput.value = suggestion;
30
+ suggestionsDiv.style.display = "none";
31
+ displayResults(suggestion);
32
+ });
33
+ suggestionsDiv.appendChild(suggestionElement);
34
+ });
35
+ suggestionsDiv.style.display = "block";
36
+ } else {
37
+ suggestionsDiv.style.display = "none";
38
+ }
39
+ }
40
+
41
+ searchInput.addEventListener("keydown", function(event) {
42
+ if (event.key === "Enter") {
43
+ const inputValue = searchInput.value;
44
+ displayResults(inputValue);
45
+ suggestionsDiv.style.display = "none";
46
+ }
47
+ });
48
+
49
+ function displayResults(query) {
50
+ resultsContainer.innerHTML = "";
51
+ const dummyResults = [
52
+ `Result 1 for ${query}`,
53
+ `Result 2 for ${query}`,
54
+ `Result 3 for ${query}`
55
+ ];
56
+
57
+ dummyResults.forEach(result => {
58
+ const resultElement = document.createElement("div");
59
+ resultElement.textContent = result;
60
+ resultsContainer.appendChild(resultElement);
61
+ });
62
+ }
0f40e52e-5ae3-4685-8f7f-be5a3c44aeea/style.css ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ body {
3
+ font-family: Arial, sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: center;
9
+ min-height: 100vh; /* Use min-height for better centering */
10
+ }
11
+
12
+ .logo-container {
13
+ margin-top: 100px; /* Adjust as needed */
14
+ margin-bottom: 20px; /* Space between logo and search bar */
15
+ text-align: center;
16
+ }
17
+
18
+ .logo-container img {
19
+ width: auto; /* Maintain aspect ratio */
20
+ height: 92px; /* Google logo height */
21
+ }
22
+
23
+ .search-container {
24
+ /* margin-top: 100px; */ /* Removed, logo container handles top margin */
25
+ position: relative;
26
+ }
27
+
28
+ #search-input {
29
+ width: 580px; /* Increased width slightly */
30
+ padding: 13px 20px; /* Adjusted padding */
31
+ font-size: 16px;
32
+ border: 1px solid #dfe1e5; /* Softer border color */
33
+ border-radius: 24px;
34
+ outline: none;
35
+ box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Add a subtle shadow */
36
+ transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
37
+ }
38
+
39
+ #search-input:focus {
40
+ border-color: #adadad; /* Slightly darker border on focus */
41
+ box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Keep shadow on focus */
42
+ }
43
+
44
+
45
+ #suggestions {
46
+ position: absolute;
47
+ top: 100%;
48
+ left: 0;
49
+ width: calc(580px + 40px); /* Match input width + padding */
50
+ background-color: #fff;
51
+ border: 1px solid #dfe1e5;
52
+ border-top: none;
53
+ border-radius: 0 0 8px 8px;
54
+ box-shadow: 0 4px 6px rgb(32 33 36 / 10%); /* Softer shadow */
55
+ display: none;
56
+ z-index: 1;
57
+ }
58
+
59
+ #suggestions div {
60
+ padding: 10px 16px; /* Adjusted padding */
61
+ cursor: pointer;
62
+ font-size: 14px;
63
+ }
64
+
65
+ #suggestions div:hover {
66
+ background-color: #f0f0f0;
67
+ }
68
+
69
+ #results-container {
70
+ margin-top: 40px; /* Increased margin for results */
71
+ width: 600px; /* Adjusted width */
72
+ }
73
+
74
+ #results-container div {
75
+ margin-bottom: 15px; /* Space between results */
76
+ padding: 10px 0;
77
+ border-bottom: 1px solid #eee; /* Separator line */
78
+ font-size: 14px;
79
+ }
882eea23-73cc-472e-b26b-78907d2ea474/.gitignore ADDED
File without changes
b45f4c07-dc90-4db0-943c-dc7a001c53f7/index.html ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Google Clone</title>
5
+ <link rel="stylesheet" href="style.css">
6
+ </head>
7
+ <body>
8
+ <div class="search-container">
9
+ <input type="text" id="search-input" placeholder="Search Google">
10
+ <div id="suggestions"></div>
11
+ </div>
12
+ <div id="results-container">
13
+ </div>
14
+
15
+ <script src="script.js"></script>
16
+ </body>
17
+ </html>
b45f4c07-dc90-4db0-943c-dc7a001c53f7/script.js ADDED
@@ -0,0 +1,62 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const searchInput = document.getElementById("search-input");
2
+ const suggestionsDiv = document.getElementById("suggestions");
3
+ const resultsContainer = document.getElementById("results-container");
4
+
5
+ const dummySuggestions = [
6
+ "what is javascript",
7
+ "how to make a website",
8
+ "best restaurants near me",
9
+ "weather today",
10
+ "current news"
11
+ ];
12
+
13
+ searchInput.addEventListener("input", function() {
14
+ const inputValue = searchInput.value.toLowerCase();
15
+ const filteredSuggestions = dummySuggestions.filter(suggestion =>
16
+ suggestion.toLowerCase().startsWith(inputValue)
17
+ );
18
+
19
+ displaySuggestions(filteredSuggestions);
20
+ });
21
+
22
+ function displaySuggestions(suggestions) {
23
+ suggestionsDiv.innerHTML = "";
24
+ if (suggestions.length > 0 && searchInput.value) {
25
+ suggestions.forEach(suggestion => {
26
+ const suggestionElement = document.createElement("div");
27
+ suggestionElement.textContent = suggestion;
28
+ suggestionElement.addEventListener("click", function() {
29
+ searchInput.value = suggestion;
30
+ suggestionsDiv.style.display = "none";
31
+ displayResults(suggestion);
32
+ });
33
+ suggestionsDiv.appendChild(suggestionElement);
34
+ });
35
+ suggestionsDiv.style.display = "block";
36
+ } else {
37
+ suggestionsDiv.style.display = "none";
38
+ }
39
+ }
40
+
41
+ searchInput.addEventListener("keydown", function(event) {
42
+ if (event.key === "Enter") {
43
+ const inputValue = searchInput.value;
44
+ displayResults(inputValue);
45
+ suggestionsDiv.style.display = "none";
46
+ }
47
+ });
48
+
49
+ function displayResults(query) {
50
+ resultsContainer.innerHTML = "";
51
+ const dummyResults = [
52
+ `Result 1 for ${query}`,
53
+ `Result 2 for ${query}`,
54
+ `Result 3 for ${query}`
55
+ ];
56
+
57
+ dummyResults.forEach(result => {
58
+ const resultElement = document.createElement("div");
59
+ resultElement.textContent = result;
60
+ resultsContainer.appendChild(resultElement);
61
+ });
62
+ }
b45f4c07-dc90-4db0-943c-dc7a001c53f7/style.css ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ padding: 0;
5
+ display: flex;
6
+ flex-direction: column;
7
+ align-items: center;
8
+ }
9
+
10
+ .search-container {
11
+ margin-top: 100px;
12
+ position: relative;
13
+ }
14
+
15
+ #search-input {
16
+ width: 500px;
17
+ padding: 12px 20px;
18
+ font-size: 16px;
19
+ border: 1px solid #ccc;
20
+ border-radius: 24px;
21
+ outline: none;
22
+ }
23
+
24
+ #suggestions {
25
+ position: absolute;
26
+ top: 100%;
27
+ left: 0;
28
+ width: 500px;
29
+ background-color: #fff;
30
+ border: 1px solid #ccc;
31
+ border-top: none;
32
+ border-radius: 0 0 8px 8px;
33
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
34
+ display: none;
35
+ z-index: 1;
36
+ }
37
+
38
+ #suggestions div {
39
+ padding: 8px 16px;
40
+ cursor: pointer;
41
+ }
42
+
43
+ #suggestions div:hover {
44
+ background-color: #f0f0f0;
45
+ }
46
+
47
+ #results-container {
48
+ margin-top: 20px;
49
+ width: 600px;
50
+ }
cc2b836f-b00f-4caf-b072-5314456893d8/.gitattributes ADDED
File without changes
cc2b836f-b00f-4caf-b072-5314456893d8/.gitignore ADDED
File without changes
cc2b836f-b00f-4caf-b072-5314456893d8/README.md ADDED
File without changes
cc2b836f-b00f-4caf-b072-5314456893d8/index.html ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Google Clone</title>
5
+ <link rel="stylesheet" href="style.css">
6
+ </head>
7
+ <body>
8
+ <div class="search-container">
9
+ <input type="text" id="search-input" placeholder="Search Google">
10
+ <div id="suggestions"></div>
11
+ </div>
12
+ <div id="results-container">
13
+ </div>
14
+
15
+ <script src="script.js"></script>
16
+ </body>
17
+ </html>
cc2b836f-b00f-4caf-b072-5314456893d8/script.js ADDED
@@ -0,0 +1,62 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const searchInput = document.getElementById("search-input");
2
+ const suggestionsDiv = document.getElementById("suggestions");
3
+ const resultsContainer = document.getElementById("results-container");
4
+
5
+ const dummySuggestions = [
6
+ "what is javascript",
7
+ "how to make a website",
8
+ "best restaurants near me",
9
+ "weather today",
10
+ "current news"
11
+ ];
12
+
13
+ searchInput.addEventListener("input", function() {
14
+ const inputValue = searchInput.value.toLowerCase();
15
+ const filteredSuggestions = dummySuggestions.filter(suggestion =>
16
+ suggestion.toLowerCase().startsWith(inputValue)
17
+ );
18
+
19
+ displaySuggestions(filteredSuggestions);
20
+ });
21
+
22
+ function displaySuggestions(suggestions) {
23
+ suggestionsDiv.innerHTML = "";
24
+ if (suggestions.length > 0 && searchInput.value) {
25
+ suggestions.forEach(suggestion => {
26
+ const suggestionElement = document.createElement("div");
27
+ suggestionElement.textContent = suggestion;
28
+ suggestionElement.addEventListener("click", function() {
29
+ searchInput.value = suggestion;
30
+ suggestionsDiv.style.display = "none";
31
+ displayResults(suggestion);
32
+ });
33
+ suggestionsDiv.appendChild(suggestionElement);
34
+ });
35
+ suggestionsDiv.style.display = "block";
36
+ } else {
37
+ suggestionsDiv.style.display = "none";
38
+ }
39
+ }
40
+
41
+ searchInput.addEventListener("keydown", function(event) {
42
+ if (event.key === "Enter") {
43
+ const inputValue = searchInput.value;
44
+ displayResults(inputValue);
45
+ suggestionsDiv.style.display = "none";
46
+ }
47
+ });
48
+
49
+ function displayResults(query) {
50
+ resultsContainer.innerHTML = "";
51
+ const dummyResults = [
52
+ `Result 1 for ${query}`,
53
+ `Result 2 for ${query}`,
54
+ `Result 3 for ${query}`
55
+ ];
56
+
57
+ dummyResults.forEach(result => {
58
+ const resultElement = document.createElement("div");
59
+ resultElement.textContent = result;
60
+ resultsContainer.appendChild(resultElement);
61
+ });
62
+ }
cc2b836f-b00f-4caf-b072-5314456893d8/style.css ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ margin: 0;
4
+ padding: 0;
5
+ display: flex;
6
+ flex-direction: column;
7
+ align-items: center;
8
+ }
9
+
10
+ .search-container {
11
+ margin-top: 100px;
12
+ position: relative;
13
+ }
14
+
15
+ #search-input {
16
+ width: 500px;
17
+ padding: 12px 20px;
18
+ font-size: 16px;
19
+ border: 1px solid #ccc;
20
+ border-radius: 24px;
21
+ outline: none;
22
+ }
23
+
24
+ #suggestions {
25
+ position: absolute;
26
+ top: 100%;
27
+ left: 0;
28
+ width: 500px;
29
+ background-color: #fff;
30
+ border: 1px solid #ccc;
31
+ border-top: none;
32
+ border-radius: 0 0 8px 8px;
33
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
34
+ display: none;
35
+ z-index: 1;
36
+ }
37
+
38
+ #suggestions div {
39
+ padding: 8px 16px;
40
+ cursor: pointer;
41
+ }
42
+
43
+ #suggestions div:hover {
44
+ background-color: #f0f0f0;
45
+ }
46
+
47
+ #results-container {
48
+ margin-top: 20px;
49
+ width: 600px;
50
+ }
index.html CHANGED
@@ -1,83 +1,17 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Amazon Clone</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="style.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10
  </head>
11
  <body>
12
- <nav class="bg-gray-800 p-4 text-white">
13
- <div class="container mx-auto flex items-center justify-between">
14
- <a href="/" class="text-2xl font-bold">Amazon</a>
15
- <div class="flex items-center">
16
- <input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
17
- <button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
18
- </div>
19
- <div>
20
- <a href="/cart.html" class="hover:text-yellow-500"><i class="fas fa-shopping-cart"></i>&nbsp;Cart</a>
21
- </div>
22
- </div>
23
- </nav>
24
-
25
- <main class="container mx-auto mt-8">
26
-
27
- <div class="carousel">
28
- <div class="carousel-item">
29
- <img src="https://placehold.co/800x300" alt="Featured Product 1" class="w-full rounded-md">
30
- </div>
31
- <div class="carousel-item">
32
- <img src="https://placehold.co/800x300" alt="Featured Product 2" class="w-full rounded-md">
33
- </div>
34
- <div class="carousel-item">
35
- <img src="https://placehold.co/800x300" alt="Featured Product 3" class="w-full rounded-md">
36
- </div>
37
- </div>
38
-
39
- <section class="product-listing">
40
- <h2 class="text-2xl font-bold mb-4">Products</h2>
41
- <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
42
- </div>
43
- </section>
44
- </main>
45
-
46
- <footer class="bg-gray-800 p-4 text-white text-center mt-8">
47
- <p>&copy; 2024 Amazon Clone</p>
48
- </footer>
49
-
50
- <script src="script.js"></script>
51
-
52
- <script type="module">
53
- import { products } from './data.js';
54
-
55
- const productListing = document.querySelector('.product-listing .grid');
56
- productListing.innerHTML = ''; // Clear existing products
57
-
58
- products.forEach(product => {
59
- const productCard = document.createElement('a');
60
- productCard.href = `product.html?id=${product.id}`;
61
- productCard.className = 'product-card';
62
-
63
- productCard.innerHTML = `
64
- <img src="${product.image}" alt="${product.name}" class="w-full rounded-md">
65
- <h3 class="text-lg font-semibold">${product.name}</h3>
66
- <p class="text-gray-600">$${product.price.toFixed(2)}</p>
67
- <div class="flex items-center">
68
- <i class="fas fa-star text-yellow-500"></i>
69
- <i class="fas fa-star text-yellow-500"></i>
70
- <i class="fas fa-star text-yellow-500"></i>
71
- <i class="fas fa-star text-yellow-500"></i>
72
- <i class="fas fa-star-half-alt text-yellow-500"></i>
73
- <span class="text-gray-600 ml-2">4.5</span>
74
- </div>
75
- `;
76
-
77
- productListing.appendChild(productCard);
78
- });
79
-
80
- updateCartIcon();
81
- </script>
82
  </body>
83
  </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
4
+ <title>Google Clone</title>
5
+ <link rel="stylesheet" href="style.css">
 
 
 
 
6
  </head>
7
  <body>
8
+ <div class="logo-container"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo"></div><div class="search-container">
9
+ <input type="text" id="search-input" placeholder="Search Google">
10
+ <div id="suggestions"></div>
11
+ </div>
12
+ <div id="results-container">
13
+ </div>
14
+
15
+ <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </body>
17
  </html>
script.js CHANGED
@@ -1,42 +1,62 @@
 
 
 
1
 
2
- function getCartItems() {
3
- const cartItems = localStorage.getItem('cart');
4
- return cartItems ? JSON.parse(cartItems) : [];
5
- }
6
-
7
- function updateCartIcon() {
8
- const cartItems = getCartItems();
9
- const cartItemCount = cartItems.reduce((total, item) => total + item.quantity, 0);
10
- const cartIcon = document.querySelector('a[href="/cart.html"]');
11
- if (cartIcon) {
12
- cartIcon.textContent = `Cart (${cartItemCount})`;
13
- }
14
- }
15
 
16
- function addToCart(product) {
17
- const cartItems = getCartItems();
18
- const existingProductIndex = cartItems.findIndex(item => item.id === product.id);
 
 
19
 
20
- if (existingProductIndex > -1) {
21
- // If the product already exists in the cart, increment the quantity
22
- cartItems[existingProductIndex].quantity += 1;
23
- } else {
24
- // Otherwise, add the product to the cart with a quantity of 1
25
- cartItems.push({ ...product, quantity: 1 });
26
- }
27
 
28
- localStorage.setItem('cart', JSON.stringify(cartItems));
29
- updateCartIcon();
30
- alert('Product added to cart!');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  }
32
 
33
- function removeFromCart(productId) {
34
- let cartItems = getCartItems();
35
- cartItems = cartItems.filter(item => item.id !== productId);
36
- localStorage.setItem('cart', JSON.stringify(cartItems));
37
- updateCartIcon();
38
- updateCartPage(); // Function to update cart page after removing item
39
- }
 
 
 
 
 
 
 
 
40
 
41
- // Call updateCartIcon on page load
42
- updateCartIcon();
 
 
 
 
 
1
+ const searchInput = document.getElementById("search-input");
2
+ const suggestionsDiv = document.getElementById("suggestions");
3
+ const resultsContainer = document.getElementById("results-container");
4
 
5
+ const dummySuggestions = [
6
+ "what is javascript",
7
+ "how to make a website",
8
+ "best restaurants near me",
9
+ "weather today",
10
+ "current news"
11
+ ];
 
 
 
 
 
 
12
 
13
+ searchInput.addEventListener("input", function() {
14
+ const inputValue = searchInput.value.toLowerCase();
15
+ const filteredSuggestions = dummySuggestions.filter(suggestion =>
16
+ suggestion.toLowerCase().startsWith(inputValue)
17
+ );
18
 
19
+ displaySuggestions(filteredSuggestions);
20
+ });
 
 
 
 
 
21
 
22
+ function displaySuggestions(suggestions) {
23
+ suggestionsDiv.innerHTML = "";
24
+ if (suggestions.length > 0 && searchInput.value) {
25
+ suggestions.forEach(suggestion => {
26
+ const suggestionElement = document.createElement("div");
27
+ suggestionElement.textContent = suggestion;
28
+ suggestionElement.addEventListener("click", function() {
29
+ searchInput.value = suggestion;
30
+ suggestionsDiv.style.display = "none";
31
+ displayResults(suggestion);
32
+ });
33
+ suggestionsDiv.appendChild(suggestionElement);
34
+ });
35
+ suggestionsDiv.style.display = "block";
36
+ } else {
37
+ suggestionsDiv.style.display = "none";
38
+ }
39
  }
40
 
41
+ searchInput.addEventListener("keydown", function(event) {
42
+ if (event.key === "Enter") {
43
+ const inputValue = searchInput.value;
44
+ displayResults(inputValue);
45
+ suggestionsDiv.style.display = "none";
46
+ }
47
+ });
48
+
49
+ function displayResults(query) {
50
+ resultsContainer.innerHTML = "";
51
+ const dummyResults = [
52
+ `Result 1 for ${query}`,
53
+ `Result 2 for ${query}`,
54
+ `Result 3 for ${query}`
55
+ ];
56
 
57
+ dummyResults.forEach(result => {
58
+ const resultElement = document.createElement("div");
59
+ resultElement.textContent = result;
60
+ resultsContainer.appendChild(resultElement);
61
+ });
62
+ }
style.css CHANGED
@@ -1,22 +1,79 @@
1
 
2
- .add-to-cart-button:hover {
3
- transform: scale(1.05);
4
- transition: transform 0.2s ease-in-out;
 
 
 
 
 
5
  }
6
 
7
- /* Add transition to the cart icon */
8
- nav .container > div:nth-child(3) > a {
9
- transition: color 0.3s ease;
 
10
  }
11
 
12
- nav .container > div:nth-child(3) > a:hover {
13
- color: #FFFF00;
 
14
  }
15
 
16
- .product-card {
17
- transition: transform 0.3s ease;
 
18
  }
19
 
20
- .product-card:hover {
21
- transform: scale(1.03);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
 
1
 
2
+ body {
3
+ font-family: Arial, sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: center;
9
+ min-height: 100vh; /* Use min-height for better centering */
10
  }
11
 
12
+ .logo-container {
13
+ margin-top: 100px; /* Adjust as needed */
14
+ margin-bottom: 20px; /* Space between logo and search bar */
15
+ text-align: center;
16
  }
17
 
18
+ .logo-container img {
19
+ width: auto; /* Maintain aspect ratio */
20
+ height: 92px; /* Google logo height */
21
  }
22
 
23
+ .search-container {
24
+ /* margin-top: 100px; */ /* Removed, logo container handles top margin */
25
+ position: relative;
26
  }
27
 
28
+ #search-input {
29
+ width: 580px; /* Increased width slightly */
30
+ padding: 13px 20px; /* Adjusted padding */
31
+ font-size: 16px;
32
+ border: 1px solid #dfe1e5; /* Softer border color */
33
+ border-radius: 24px;
34
+ outline: none;
35
+ box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Add a subtle shadow */
36
+ transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
37
+ }
38
+
39
+ #search-input:focus {
40
+ border-color: #adadad; /* Slightly darker border on focus */
41
+ box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Keep shadow on focus */
42
+ }
43
+
44
+
45
+ #suggestions {
46
+ position: absolute;
47
+ top: 100%;
48
+ left: 0;
49
+ width: calc(580px + 40px); /* Match input width + padding */
50
+ background-color: #fff;
51
+ border: 1px solid #dfe1e5;
52
+ border-top: none;
53
+ border-radius: 0 0 8px 8px;
54
+ box-shadow: 0 4px 6px rgb(32 33 36 / 10%); /* Softer shadow */
55
+ display: none;
56
+ z-index: 1;
57
+ }
58
+
59
+ #suggestions div {
60
+ padding: 10px 16px; /* Adjusted padding */
61
+ cursor: pointer;
62
+ font-size: 14px;
63
+ }
64
+
65
+ #suggestions div:hover {
66
+ background-color: #f0f0f0;
67
+ }
68
+
69
+ #results-container {
70
+ margin-top: 40px; /* Increased margin for results */
71
+ width: 600px; /* Adjusted width */
72
+ }
73
+
74
+ #results-container div {
75
+ margin-bottom: 15px; /* Space between results */
76
+ padding: 10px 0;
77
+ border-bottom: 1px solid #eee; /* Separator line */
78
+ font-size: 14px;
79
  }