├── app.js
├── .DS_Store
├── img
├── bag.png
├── mug.png
├── pen.png
├── .DS_Store
├── eraser.png
├── pencil.png
├── ruler.png
├── note-book.png
├── glue-stick.png
└── colored-pencils.png
├── index.html
├── css
└── style.css
└── data.json
/app.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/.DS_Store
--------------------------------------------------------------------------------
/img/bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/bag.png
--------------------------------------------------------------------------------
/img/mug.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/mug.png
--------------------------------------------------------------------------------
/img/pen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/pen.png
--------------------------------------------------------------------------------
/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/.DS_Store
--------------------------------------------------------------------------------
/img/eraser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/eraser.png
--------------------------------------------------------------------------------
/img/pencil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/pencil.png
--------------------------------------------------------------------------------
/img/ruler.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/ruler.png
--------------------------------------------------------------------------------
/img/note-book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/note-book.png
--------------------------------------------------------------------------------
/img/glue-stick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/glue-stick.png
--------------------------------------------------------------------------------
/img/colored-pencils.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milad-azami/js-oop-shopping-files/HEAD/img/colored-pencils.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Botostart Shop
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --color-primary: #584a99;
3 | --color-secondary: #efe8f6;
4 | --color-light: #f7f7f7;
5 | --color-error: #f75e4b;
6 | }
7 |
8 | * {
9 | padding: 0;
10 | margin: 0;
11 | box-sizing: border-box;
12 | font-family: Arial, Helvetica, sans-serif;
13 | }
14 |
15 | body {
16 | max-width: 1400px;
17 | margin: auto;
18 | }
19 |
--------------------------------------------------------------------------------
/data.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": 1,
4 | "name": "Bag",
5 | "price": 29,
6 | "image": "./img/bag.png",
7 | "alt": "bag product"
8 | },
9 | {
10 | "id": 2,
11 | "name": "Pen",
12 | "price": 3,
13 | "image": "./img/pen.png",
14 | "alt": "pen product"
15 | },
16 | {
17 | "id": 3,
18 | "name": "Note Book",
19 | "price": 12,
20 | "image": "./img/note-book.png",
21 | "alt": "note book product"
22 | },
23 | {
24 | "id": 4,
25 | "name": "Colored Pencils",
26 | "price": 11,
27 | "image": "./img/colored-pencils.png",
28 | "alt": "colored pencils product"
29 | },
30 | {
31 | "id": 5,
32 | "name": "Pencil",
33 | "price": 3,
34 | "image": "./img/pencil.png",
35 | "alt": "pencil product"
36 | },
37 | {
38 | "id": 6,
39 | "name": "Ruler",
40 | "price": 8,
41 | "image": "./img/ruler.png",
42 | "alt": "ruler product"
43 | },
44 | {
45 | "id": 7,
46 | "name": "Mug",
47 | "price": 17,
48 | "image": "./img/mug.png",
49 | "alt": "mug product"
50 | },
51 | {
52 | "id": 8,
53 | "name": "Eraser",
54 | "price": 2,
55 | "image": "./img/eraser.png",
56 | "alt": "eraser product"
57 | },
58 | {
59 | "id": 9,
60 | "name": "Glue Stick",
61 | "price": 5,
62 | "image": "./img/glue-stick.png",
63 | "alt": "glue stick product"
64 | }
65 | ]
66 |
--------------------------------------------------------------------------------