-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b80c897
commit 856cbdb
Showing
5 changed files
with
127 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Checkout | Sparrow Photography</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | ||
| <link rel="stylesheet" type="text/css" href="styles.css"> | ||
| </head> | ||
| <body class="gallery"> | ||
|
|
||
| <nav class="nav"> | ||
| <a class="logo" href="index.html" aria-label="Sparrow Photography"> | ||
| <svg class="logo-svg"> | ||
| <use href="i/logos.svg#pirate" </use> | ||
| </svg> | ||
| <span class="logo-text"> | ||
| <span>sparrow</span> | ||
| <span>Photography</span> | ||
| </span> | ||
| </a> | ||
| <div class="nav-items"> | ||
| <a aria-current="page" href="checkout.html""> | ||
| <span aria-hidden="true">🛒</span> Cart <span id="cart-count"></span> | ||
| </a> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <h1>Checkout</h1> | ||
| <div id="app">Loading...</div> | ||
|
|
||
|
|
||
| <footer> | ||
| <p><em>Photos by Jack Sparrow. All rights reserved.</em></p> | ||
| </footer> | ||
|
|
||
|
|
||
| <script type="module"> | ||
| import { render } from "https://cdn.jsdelivr.net/npm/reefjs@12/dist/reef.es.min.js"; | ||
| import { getPhotos } from "./components/api.js"; | ||
| import {inCart} from "./components/cart.js"; | ||
|
|
||
| // Get the #app element | ||
| let app = document.querySelector("#app"); | ||
|
|
||
| /** | ||
| * Generate the cart HTML | ||
| * @param {Array} photos The photo data | ||
| * @return {String} The cart HTML string | ||
| */ | ||
| function cartHTML(photos) { | ||
|
|
||
| // Get the photos that are in the cart | ||
| let photosInCart = photos.filter(function (photo) { | ||
| return inCart(photo.id); | ||
| }); | ||
|
|
||
| // If there are no items in the cart | ||
| if (!photosInCart.length) { | ||
| return '<p>You have no photos in your cart.</p>'; | ||
| } | ||
|
|
||
| // Otherwise, generate table | ||
| return ` | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th width="150">Photo</th> | ||
| <th>Name</th> | ||
| <th class="text-right">Price</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| ${photosInCart.map(function (photo) { | ||
| return ` | ||
| <tr> | ||
| <td><img alt="${photo.description}" src="${photo.url}"></td> | ||
| <td>${photo.name}</td> | ||
| <td class="text-right">$${photo.price}</td> | ||
| </tr>`; | ||
| }).join("")} | ||
| </tbody> | ||
| </table> | ||
| <p class="text-right"> | ||
| <strong>Total:</strong> $${photosInCart.reduce(function (total, photo) { | ||
| return total + photo.price; | ||
| }, 0)} | ||
| </p>`; | ||
| } | ||
|
|
||
| // Initialize | ||
| getPhotos().then(function (photos) { | ||
| render(app, cartHTML(photos)); | ||
| }); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * Table Styles | ||
| */ | ||
|
|
||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| margin-bottom: 1em; | ||
| max-width: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Utility Classes | ||
| */ | ||
|
|
||
| .text-right { | ||
| text-align: right; | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.