├── README.md ├── app.webmanifest ├── components ├── DetailsPage.css ├── MenuPage.css └── OrderPage.css ├── data ├── images │ ├── blackamericano.png │ ├── blacktea.png │ ├── cappuccino.png │ ├── coldbrew.png │ ├── croissant.png │ ├── flatwhite.png │ ├── frappuccino.png │ ├── greentea.png │ ├── icedcoffee.png │ ├── macchiato.png │ └── muffin.png └── menu.json ├── images ├── .DS_Store ├── FrontendMastersLogo.png ├── icons │ ├── icon-maskable.png │ └── icon.png ├── logo.png ├── logo.svg ├── screen1.jpg └── screen2.jpg ├── index.html ├── serviceworker.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | This repo is a companion to the [You Don't Need That Library][course] course on Frontend Masters. 2 | 3 | [![Frontend Masters](images/FrontendMastersLogo.png)][fem] 4 | 5 | [Please click here][website] to head to the course website. 6 | 7 | [fem]: https://www.frontendmasters.com 8 | [website]: https://firtman.github.io/vanilla/ 9 | [course]: https://frontendmasters.com/courses/vanilla-js-apps/ 10 | -------------------------------------------------------------------------------- /app.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Coffee Masters", 3 | "short_name": "CoffeeMasters", 4 | "theme_color": "#43281C", 5 | "display": "standalone", 6 | "background_color": "#EFEFEF", 7 | "start_url": "/", 8 | "scope": "/", 9 | "description": "The app for order at Coffee Masters, the best coffee shop in the Frontend world, by Frontend Masters.", 10 | "icons": [ 11 | { 12 | "src": "images/icons/icon.png", 13 | "sizes": "1024x1024", 14 | "type": "image/png" 15 | }, 16 | { 17 | "src": "images/icons/icon-maskable.png", 18 | "sizes": "512x512", 19 | "type": "image/png", 20 | "purpose": "maskable" 21 | } 22 | ], 23 | "screenshots": [ 24 | { 25 | "src": "images/screen1.jpg", 26 | "type": "image/jpeg" 27 | }, 28 | { 29 | "src": "images/screen2.jpg", 30 | "type": "image/jpeg" 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /components/DetailsPage.css: -------------------------------------------------------------------------------- 1 | button { 2 | display: block; 3 | background-color: var(--color5); 4 | border: 0; 5 | width: 80%; 6 | margin: 16px 10%; 7 | padding: 12px 0; 8 | border-radius: 40px; 9 | color: var(--color3); 10 | font-size: 16px; 11 | } 12 | 13 | header { 14 | display: flex; 15 | flex-direction: row; 16 | } 17 | 18 | header>a { 19 | display: block; 20 | flex: 1; 21 | text-decoration: none; 22 | color: var(--primaryColor); 23 | padding: 12px 0 12px 8px; 24 | text-align: center; 25 | font-size: 14px; 26 | } 27 | 28 | h2 { 29 | color: var(--secondaryColor); 30 | font-weight: normal; 31 | font-size: 20px; 32 | flex: 5; 33 | margin: 8px; 34 | text-align: center; 35 | } 36 | 37 | img { 38 | width: 96%; 39 | margin: 0 2%; 40 | margin-top: 12px; 41 | } 42 | 43 | .description { 44 | margin: 4px; 45 | padding: 0 12px; 46 | color: var(--primaryColor); 47 | font-size: 13px; 48 | } 49 | 50 | .price { 51 | color: var(--secondaryColor); 52 | padding: 0 24px; 53 | } 54 | 55 | -------------------------------------------------------------------------------- /components/MenuPage.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | padding: 0; 4 | } 5 | 6 | h3 { 7 | color: var(--color4); 8 | font-weight: normal; 9 | padding-top: 15px; 10 | font-size: 17px; 11 | } 12 | 13 | button { 14 | background-color: var(--color5); 15 | border: 0; 16 | margin: 10px 3%; 17 | padding: 5px 0; 18 | border-radius: 40px; 19 | color: var(--color3); 20 | font-size: 16px; 21 | flex-grow: 1; 22 | } 23 | 24 | article section div { 25 | flex-grow: 2; 26 | } 27 | 28 | ul { 29 | background-color: var(--color6); 30 | margin: 4px 6px; 31 | padding: 0px 12px; 32 | border-radius: 10px; 33 | padding-bottom: 10px; 34 | } 35 | 36 | article { 37 | background-color: white; 38 | margin-bottom: 16px; 39 | padding-bottom: 1px; 40 | border-radius: 5px; 41 | } 42 | 43 | article img { 44 | width: 100%; 45 | } 46 | 47 | article a { 48 | text-decoration: none; 49 | display: block; 50 | } 51 | 52 | article section { 53 | display: flex; 54 | } 55 | 56 | 57 | 58 | 59 | h4 { 60 | margin: 8px 0 0 12px; 61 | color: #333D29; 62 | font-size: 18px; 63 | font-weight: bold; 64 | } 65 | 66 | .price { 67 | margin: 0px 0 0px 12px; 68 | color: #B08968 69 | } -------------------------------------------------------------------------------- /components/OrderPage.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | padding: 0; 4 | } 5 | 6 | h3 { 7 | color: var(--color4); 8 | font-weight: normal; 9 | padding-top: 15px; 10 | font-size: 17px; 11 | } 12 | 13 | button { 14 | display: block; 15 | background-color: var(--color5); 16 | border: 0; 17 | width: 80%; 18 | margin: 16px 10%; 19 | padding: 12px 0; 20 | border-radius: 40px; 21 | color: var(--color3); 22 | font-size: 16px; 23 | } 24 | 25 | h2 { 26 | text-align: center; 27 | color: var(--secondaryColor); 28 | font-weight: normal; 29 | font-size: 20px; 30 | flex: 5; 31 | margin: 8px; 32 | text-align: center; 33 | } 34 | 35 | .empty { 36 | text-align: center; 37 | color: var(--color3) 38 | } 39 | 40 | ul { 41 | background-color: var(--color6); 42 | padding: 16px; 43 | margin: 12px; 44 | border-radius: 5px; 45 | box-shadow: 2px 2px 10px silver; 46 | 47 | } 48 | 49 | li { 50 | display: flex; 51 | border-bottom: 1px solid var(--color5); 52 | } 53 | 54 | li:last-child { 55 | border: 0; 56 | } 57 | 58 | .qty { 59 | color: var(--color4); 60 | flex: 1; 61 | } 62 | 63 | .name { 64 | font-weight: bold; 65 | color: var(--secondaryColor); 66 | flex: 5; 67 | } 68 | 69 | .total { 70 | font-weight: bold; 71 | color: var(--color3); 72 | flex: 5; 73 | text-align: right; 74 | margin-right: 16px; 75 | font-size: 17px; 76 | 77 | } 78 | 79 | .toolbar span { 80 | display: block; 81 | padding: 0 8px; 82 | } 83 | 84 | .price, .price-total { 85 | color: var(--secondaryColor); 86 | flex: 1; 87 | 88 | text-align: right; 89 | } 90 | 91 | .price-total { 92 | font-weight: bold; 93 | font-size: 17px; 94 | flex: 2; 95 | text-align: left; 96 | } 97 | 98 | 99 | a { 100 | text-decoration: none; 101 | } 102 | 103 | label, input { 104 | display: block; 105 | width: 90%; 106 | margin-left: 5%; 107 | } 108 | 109 | input { 110 | background-color: var(--color6); 111 | margin-bottom: 6px; 112 | font-size: large; 113 | border: 1px solid var(--color3); 114 | border-radius: 15px; 115 | } -------------------------------------------------------------------------------- /data/images/blackamericano.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/blackamericano.png -------------------------------------------------------------------------------- /data/images/blacktea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/blacktea.png -------------------------------------------------------------------------------- /data/images/cappuccino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/cappuccino.png -------------------------------------------------------------------------------- /data/images/coldbrew.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/coldbrew.png -------------------------------------------------------------------------------- /data/images/croissant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/croissant.png -------------------------------------------------------------------------------- /data/images/flatwhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/flatwhite.png -------------------------------------------------------------------------------- /data/images/frappuccino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/frappuccino.png -------------------------------------------------------------------------------- /data/images/greentea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/greentea.png -------------------------------------------------------------------------------- /data/images/icedcoffee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/icedcoffee.png -------------------------------------------------------------------------------- /data/images/macchiato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/macchiato.png -------------------------------------------------------------------------------- /data/images/muffin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/data/images/muffin.png -------------------------------------------------------------------------------- /data/menu.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "HOT COFFEE", 4 | "products": [ 5 | { 6 | "id": 11, 7 | "name": "Black Americano", 8 | "price": 1.50, 9 | "description": "Freshly pulled shots of espresso combined with hot water.", 10 | "image": "blackamericano.png" 11 | }, 12 | { 13 | "id": 12, 14 | "name": "Cappuccino", 15 | "price": 3.75, 16 | "description": "A freshly pulled shot of espresso layered with steamed whole milk and thick rich foam to offer a luxurious velvety texture and complex aroma.", 17 | "image": "cappuccino.png" 18 | }, 19 | { 20 | "id": 13, 21 | "name": "Macchiato", 22 | "price": 3.25, 23 | "description": "Our perfectly roasted coffees are blended with our powders, steamed non-fat milk and topped with thick foam to create a delicious pick-me-up treat.", 24 | "image": "macchiato.png" 25 | }, 26 | { 27 | "id": 14, 28 | "name": "Flat White", 29 | "price": 3.25, 30 | "description": "We start with an extra shot of espresso, combine them with one of our signature powders, and finished with lightly aerated milk to create the perfect, velvety espresso beverage. Available in hazelnut, vanilla, mocha or classic flat white.", 31 | "image": "flatwhite.png" 32 | } 33 | ] 34 | }, 35 | { 36 | "name": "ICED COFFEE", 37 | "products": [ 38 | { 39 | "id": 21, 40 | "name": "Frappuccino", 41 | "price": 3.75, 42 | "description": "Non-fat milk blended with our signature powders and ice and then topped with whipped cream. A delicious non-caffeinated treat.", 43 | "image": "frappuccino.png" 44 | }, 45 | { 46 | "id": 22, 47 | "name": "Iced Coffee", 48 | "price": 3.15, 49 | "description": "Our specially brewed coffee served over ice for a refreshing and bold coffee taste", 50 | "image": "icedcoffee.png" 51 | }, 52 | { 53 | "id": 23, 54 | "name": "Cold Brew", 55 | "price": 1.85, 56 | "description": "Our signature Cold Brew Coffee is a premium blend of Bali Blue Moon and Ethiopia Yirgacheffe coffees with chicory steeped cold for 20 hours for rich, vibrant flavors.", 57 | "image": "coldbrew.png" 58 | } 59 | ] 60 | }, 61 | { 62 | "name": "TEA", 63 | "products": [ 64 | { 65 | "id": 31, 66 | "name": "Green Tea", 67 | "price": 1.75, 68 | "description": "Like oolong and black tea, green tea comes from the plant Camellia sinensis. Green tea's delightfully delicate flavor is due to its minimal oxidation. It is processed to take a variety of forms, from finely ground powder to long, curling leaves. Though it originated in China, where it has been consumed for over 4,000 years, green tea is now grown in Japan and Sri Lanka, and enjoyed throughout the world.", 69 | "image": "greentea.png" 70 | }, 71 | { 72 | "id": 32, 73 | "name": "Black Tea", 74 | "price": 1.75, 75 | "description": "Like green and oolong teas, black tea comes from the Camellia sinensis plant. Its darker hue and stronger taste result from the greater level of oxidation it undergoes during processing. From delicate Darjeeling to strong Ceylon, each variety has distinct characteristics, making black tea a beloved beverage across the globe.", 76 | "image": "blacktea.png" 77 | } 78 | ] 79 | }, 80 | { 81 | "name": "SNACKS", 82 | "products": [ 83 | { 84 | "id": 41, 85 | "name": "Croissant", 86 | "price": 2.80, 87 | "description": "Buttery, crescent-shaped French pastry", 88 | "image": "croissant.png" 89 | }, 90 | { 91 | "id": 42, 92 | "name": "Chocolate Chip Muffin", 93 | "price": 1.75, 94 | "description": "The muffins are incredibly rich, mega chocolate-y, and loaded with chocolate chips in every single bite", 95 | "image": "muffin.png" 96 | } 97 | ] 98 | } 99 | ] -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/images/.DS_Store -------------------------------------------------------------------------------- /images/FrontendMastersLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/images/FrontendMastersLogo.png -------------------------------------------------------------------------------- /images/icons/icon-maskable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/images/icons/icon-maskable.png -------------------------------------------------------------------------------- /images/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/images/icons/icon.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/images/logo.png -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /images/screen1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/images/screen1.jpg -------------------------------------------------------------------------------- /images/screen2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/coffeemasters-vanilla/64cc496a6cb6e1b73ed731f814018bab62d01d84/images/screen2.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Coffee Masters 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Coffee Masters

22 | 31 |
32 | 33 |
34 |
35 | 36 | 41 | 42 | 56 | 57 | 68 | 69 | 80 | 81 | 93 | 94 | -------------------------------------------------------------------------------- /serviceworker.js: -------------------------------------------------------------------------------- 1 | self.addEventListener("install", async event => { 2 | // TODO 3 | }); 4 | 5 | self.addEventListener("fetch", async event => { 6 | // TODO 7 | }); -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background-surface: #EFEFEF; 3 | --primaryColor: #43281C; 4 | --secondaryColor: #333D29; 5 | --color3: #7F4F24; 6 | --color4: #B08968; 7 | --color5: #DDB892; 8 | --color6: #EDE0D4; 9 | --highlight: #FBF2C6; 10 | } 11 | 12 | body { 13 | padding: 0; 14 | margin: 0; 15 | font-family: 'Open Sans', sans-serif; 16 | } 17 | 18 | body>header { 19 | position: fixed; 20 | width: 100%; 21 | top: 0; 22 | } 23 | 24 | body>main { 25 | margin: auto; 26 | margin-top: 60px; 27 | max-width: 500px; 28 | } 29 | 30 | h1 { 31 | background-color: var(--primaryColor); 32 | color: white; 33 | margin: 0; 34 | text-align: center; 35 | padding: 10px 0 5px 0; 36 | font-size: 20px; 37 | font-weight: normal; 38 | } 39 | 40 | ul { 41 | display: none; 42 | padding: 0; 43 | } 44 | 45 | a.navlink { 46 | color: var(--highlight); 47 | padding: 8px; 48 | text-decoration: none; 49 | } 50 | 51 | #linkHome { 52 | display: block; 53 | position: absolute; 54 | top: 5px; 55 | left: 5px; 56 | } 57 | 58 | #linkOrder { 59 | display: block; 60 | position: absolute; 61 | top: 5px; 62 | right: 5px; 63 | } 64 | 65 | section.page { 66 | display: none; 67 | } 68 | 69 | #badge { 70 | padding: 4px; 71 | background-color: red; 72 | border-radius: 15px; 73 | width: 10px; 74 | text-align: center; 75 | font-size: x-small; 76 | color: white; 77 | position: absolute; 78 | right: 5px; 79 | top: 6px; 80 | } --------------------------------------------------------------------------------