diff --git a/img/Screenshot 2024-06-06 184942.png b/img/Screenshot 2024-06-06 184942.png new file mode 100644 index 0000000..5c2a4d4 Binary files /dev/null and b/img/Screenshot 2024-06-06 184942.png differ diff --git a/img/alfaromeo.jpeg b/img/alfaromeo.jpeg new file mode 100644 index 0000000..7746ae2 Binary files /dev/null and b/img/alfaromeo.jpeg differ diff --git a/img/alphatauri.jpeg b/img/alphatauri.jpeg new file mode 100644 index 0000000..7b918ae Binary files /dev/null and b/img/alphatauri.jpeg differ diff --git a/img/astonmartin.jpeg b/img/astonmartin.jpeg new file mode 100644 index 0000000..b1eb3bc Binary files /dev/null and b/img/astonmartin.jpeg differ diff --git a/img/ferrari.jpeg b/img/ferrari.jpeg new file mode 100644 index 0000000..c40050b Binary files /dev/null and b/img/ferrari.jpeg differ diff --git a/img/hass.jpeg b/img/hass.jpeg new file mode 100644 index 0000000..3f70d6f Binary files /dev/null and b/img/hass.jpeg differ diff --git a/img/mclaren.jpeg b/img/mclaren.jpeg new file mode 100644 index 0000000..13663c8 Binary files /dev/null and b/img/mclaren.jpeg differ diff --git a/img/mercedes.jpeg b/img/mercedes.jpeg new file mode 100644 index 0000000..b757053 Binary files /dev/null and b/img/mercedes.jpeg differ diff --git a/img/redbull.jpeg b/img/redbull.jpeg new file mode 100644 index 0000000..9a2e307 Binary files /dev/null and b/img/redbull.jpeg differ diff --git a/img/williams.jpeg b/img/williams.jpeg new file mode 100644 index 0000000..719d1b4 Binary files /dev/null and b/img/williams.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..47489db --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + Alura Geek + + + + + + + +
+
+ +
+
+ + +
+
+

MIS PRODUCTOS:

+
+ +
+
+
+

AGREGAR PRODUCTO:

+
+ + + + + +
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e160fdc --- /dev/null +++ b/script.js @@ -0,0 +1,32 @@ +document.getElementById('product-form').addEventListener('submit', function(event) { + event.preventDefault(); + + // Get form values + const name = document.getElementById('product-name').value; + const price = parseFloat(document.getElementById('product-price').value); + const image = document.getElementById('product-image').value; + + // Format price as currency + const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price); + + // Create a new product card + const productCard = document.createElement('div'); + productCard.classList.add('product-card'); + + productCard.innerHTML = ` + ${name} +

${name}

+

${formattedPrice}

+ + `; + + // Append the product card to the product list + document.getElementById('product-list').appendChild(productCard); + + // Clear form fields + document.getElementById('product-form').reset(); +}); + +function removeProduct(button) { + button.parentElement.remove(); +} diff --git a/settings.json b/settings.json new file mode 100644 index 0000000..4798424 --- /dev/null +++ b/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..9734436 --- /dev/null +++ b/styles.css @@ -0,0 +1,158 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.container { + flex: 1; + width: 90%; + max-width: 1200px; + margin: 0 auto; + background-color: #fff; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + padding: 20px; +} + +header { + background-color: #6a1b9a; + color: #fff; + padding: 10px; + text-align: center; + font-size: 24px; +} + +main { + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1; +} + +.products { + flex: 2; +} + +.add-product { + flex: 1; + margin-top: 20px; +} + +h1, h2 { + font-size: 1.5em; + color: #333; +} + +.product-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 10px; +} + +.product-card { + background-color: #fff; + border: 1px solid #ddd; + padding: 10px; + text-align: center; + box-shadow: 0 0 5px rgba(0,0,0,0.1); +} + +.product-card img { + max-width: 100%; + height: auto; +} + +.product-card h3 { + font-size: 1em; + margin: 10px 0; +} + +.product-card p { + color: #6a1b9a; + font-weight: bold; +} + +.product-card button { + background-color: #d32f2f; + color: #fff; + border: none; + padding: 5px 10px; + cursor: pointer; + margin-top: 10px; +} + +.product-card button:hover { + background-color: #c62828; +} + +form { + display: flex; + flex-direction: column; +} + +form input, form button { + margin-bottom: 10px; + padding: 10px; + font-size: 1em; +} + +form button[type="submit"] { + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; +} + +form button[type="submit"]:hover { + background-color: #0056b3; +} + +form button[type="reset"] { + background-color: #6c757d; + color: #fff; + border: none; + cursor: pointer; +} + +form button[type="reset"]:hover { + background-color: #5a6268; +} + +footer { + background-color: #6a1b9a; + color: #fff; + text-align: center; + padding: 10px; + font-size: 18px; +} + +/* Media Queries for Responsive Design */ + +@media (min-width: 768px) { + main { + flex-direction: row; + } + + .add-product { + margin-left: 20px; + margin-top: 0; + } +} + +@media (max-width: 767px) { + header { + font-size: 20px; + } + + .product-card h3 { + font-size: 0.9em; + } + + .product-card p { + font-size: 0.9em; + } +}