Generate-Random-Quote/index.html at master · Samar-Salah-7/Generate-Random-Quote · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
  <head>
    <title>JS-3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/all.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <section>
      <div class="container">
        <div class="row row-cols-1 vh-100 align-items-center" id="productData">
          <div class="col">
            <div class="inner">
              <div class="card text-center w-75 mx-auto">
                <div class="card-header">
                  <h1 class="card-title py-2">Quote of the Day</h1>
                </div>
                <div class="card-body">
                  <p class="card-quote my-3" id="ourQoute"></p>
                  <button
                    onclick="displayQuote()"
                    class="btn my-btn my-4"
                    id="quoteButton"
                  >
                    New Quote
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="modal-form">
      <div
        class="modal fade"
        id="exampleModal"
        tabindex="-1"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content py-1 px-3">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">
                Add/Edit product
              </h1>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">
              <div class="form-div">
                <div class="form-floating mb-4">
                  <input
                    type="text"
                    class="form-control"
                    id="productName"
                    placeholder="product name"
                  />
                  <label for="productName">Product name</label>
                </div>
                <div class="form-floating mb-4">
                  <input
                    type="text"
                    class="form-control"
                    id="productPrice"
                    placeholder="product price"
                  />
                  <label for="productPrice">Product price</label>
                </div>
                <!-- <div class="form-floating mb-4">
                  <select
                    class="form-select"
                    id="productCategory"
                    aria-label="Floating label select example"
                  >
                    <option selected disabled hidden>
                      Choose Product Category
                    </option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                  </select>
                  <label for="productCategory"> Product category</label>
                </div> -->
                <!-- From instructor -->
                <div class="form-floating mb-4">
                  <label for="productCategory">Product Category</label>

                  <input
                    list="categoryList"
                    type="text"
                    class="form-control"
                    id="productCategory"
                    placeholder="Product Category"
                  />
                  <datalist id="categoryList">
                    <option value="tv" />
                    <option value="screens" />
                    <option value="laptop" />
                    <option value="mobile" />
                  </datalist>
                </div>
                <div class="form-floating mb-4">
                  <textarea
                    class="form-control"
                    placeholder="product description"
                    id="productDesc"
                  ></textarea>
                  <label for="productDesc">Product description</label>
                </div>

                <div class="mb-4">
                  <label for="productImg" class="form-label mb-3"
                    >product image</label
                  >
                  <input
                    accept="image/*"
                    class="form-control"
                    type="file"
                    id="productImg"
                  />
                </div>
                <button onclick="addProduct()" class="btn btn-primary mb-4">
                  Save
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>