Spaces:

KingNish
/

test-space

Running

App Files Files Community

Initial commit: Basic structure and product display

#19

by smolSWE - opened May 19

base: refs/heads/main

←

from: refs/pr/19

Discussion Files changed

+64

-144

Files changed (4) hide show

index.html +22 -11
script.js +19 -57
style.css +8 -76
tailwind.config.js +15 -0

index.html CHANGED Viewed

@@ -1,17 +1,28 @@
 <!DOCTYPE html>
-<html>
 <head>
-  <title>Google Clone</title>
-  <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <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">
-    <input type="text" id="search-input" placeholder="Search Google">
-    <div id="suggestions"></div>
-  </div>
-  <div id="results-container">
-  </div>
-  <script src="script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazon Dummy</title>
+    <link href="style.css" rel="stylesheet">
 </head>
 <body>
+    <header class="bg-amazon-blue">
+        <div class="container mx-auto py-2">
+            <div class="flex items-center justify-between">
+                <div class="text-white font-bold text-2xl">Amazon Dummy</div>
+                <div class="flex items-center">
+                    <input type="text" class="px-4 py-2 rounded-l-md focus:outline-none" placeholder="Search">
+                    <button class="bg-amazon-orange hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded-r-md">Search</button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto mt-4">
+        <section id="products" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <!-- Products will be dynamically added here -->
+        </section>
+    </main>
+    <script src="script.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,62 +1,24 @@
-const searchInput = document.getElementById("search-input");
-const suggestionsDiv = document.getElementById("suggestions");
-const resultsContainer = document.getElementById("results-container");
-const dummySuggestions = [
-  "what is javascript",
-  "how to make a website",
-  "best restaurants near me",
-  "weather today",
-  "current news"
-];
-searchInput.addEventListener("input", function() {
-  const inputValue = searchInput.value.toLowerCase();
-  const filteredSuggestions = dummySuggestions.filter(suggestion =>
-    suggestion.toLowerCase().startsWith(inputValue)
-  );
-  displaySuggestions(filteredSuggestions);
-});
-function displaySuggestions(suggestions) {
-  suggestionsDiv.innerHTML = "";
-  if (suggestions.length > 0 && searchInput.value) {
-    suggestions.forEach(suggestion => {
-      const suggestionElement = document.createElement("div");
-      suggestionElement.textContent = suggestion;
-      suggestionElement.addEventListener("click", function() {
-        searchInput.value = suggestion;
-        suggestionsDiv.style.display = "none";
-        displayResults(suggestion);
-      });
-      suggestionsDiv.appendChild(suggestionElement);
     });
-    suggestionsDiv.style.display = "block";
-  } else {
-    suggestionsDiv.style.display = "none";
-  }
-}
-searchInput.addEventListener("keydown", function(event) {
-  if (event.key === "Enter") {
-    const inputValue = searchInput.value;
-    displayResults(inputValue);
-    suggestionsDiv.style.display = "none";
-  }
-});
-function displayResults(query) {
-  resultsContainer.innerHTML = "";
-  const dummyResults = [
-    `Result 1 for ${query}`,
-    `Result 2 for ${query}`,
-    `Result 3 for ${query}`
-  ];
-  dummyResults.forEach(result => {
-    const resultElement = document.createElement("div");
-    resultElement.textContent = result;
-    resultsContainer.appendChild(resultElement);
-  });
-}

+document.addEventListener('DOMContentLoaded', () => {
+    const productsSection = document.getElementById('products');
+    const products = [
+        { id: 1, name: 'Product 1', image: 'https://via.placeholder.com/150', price: 19.99 },
+        { id: 2, name: 'Product 2', image: 'https://via.placeholder.com/150', price: 29.99 },
+        { id: 3, name: 'Product 3', image: 'https://via.placeholder.com/150', price: 39.99 },
+        { id: 4, name: 'Product 4', image: 'https://via.placeholder.com/150', price: 49.99 },
+    ];
+    products.forEach(product => {
+        const productDiv = document.createElement('div');
+        productDiv.classList.add('border', 'p-4', 'rounded-md');
+        productDiv.innerHTML = `
+            <img src="${product.image}" alt="${product.name}" class="w-full h-40 object-cover mb-2">
+            <h3 class="text-lg font-bold">${product.name}</h3>
+            <p class="text-gray-700">$${product.price}</p>
+            <button class="bg-amazon-orange hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded mt-2">Add to Cart</button>
+        `;
+        productsSection.appendChild(productDiv);
     });
+});

style.css CHANGED Viewed

@@ -1,79 +1,11 @@
-body {
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 100vh; /* Use min-height for better centering */
 }
-.logo-container {
-  margin-top: 100px; /* Adjust as needed */
-  margin-bottom: 20px; /* Space between logo and search bar */
-  text-align: center;
-}
-.logo-container img {
-    width: auto; /* Maintain aspect ratio */
-    height: 92px; /* Google logo height */
-}
-.search-container {
-  /* margin-top: 100px; */ /* Removed, logo container handles top margin */
-  position: relative;
-}
-#search-input {
-  width: 580px; /* Increased width slightly */
-  padding: 13px 20px; /* Adjusted padding */
-  font-size: 16px;
-  border: 1px solid #dfe1e5; /* Softer border color */
-  border-radius: 24px;
-  outline: none;
-  box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Add a subtle shadow */
-  transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
-}
-#search-input:focus {
-    border-color: #adadad; /* Slightly darker border on focus */
-    box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Keep shadow on focus */
-}
-#suggestions {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: calc(580px + 40px); /* Match input width + padding */
-  background-color: #fff;
-  border: 1px solid #dfe1e5;
-  border-top: none;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 4px 6px rgb(32 33 36 / 10%); /* Softer shadow */
-  display: none;
-  z-index: 1;
-}
-#suggestions div {
-  padding: 10px 16px; /* Adjusted padding */
-  cursor: pointer;
-  font-size: 14px;
-}
-#suggestions div:hover {
-  background-color: #f0f0f0;
-}
-#results-container {
-  margin-top: 40px; /* Increased margin for results */
-  width: 600px; /* Adjusted width */
-}
-#results-container div {
-    margin-bottom: 15px; /* Space between results */
-    padding: 10px 0;
-    border-bottom: 1px solid #eee; /* Separator line */
-    font-size: 14px;
-}

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.bg-amazon-blue {
+    background-color: #232F3E;
 }
+.bg-amazon-orange {
+    background-color: #FF9900;
+}

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,15 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./*.{html,js}"],
+  theme: {
+    extend: {
+      colors: {
+        amazon: {
+          blue: '#232F3E',
+          orange: '#FF9900',
+        }
+      }
+    },
+  },
+  plugins: [],
+}