HtmlCss/LearningHTML.html at main · NinaPatrina/HtmlCss · 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
<!DOCTYPE html>
<html>
    <head>
        <title>My page</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href="css/my_styles.css">

    </head>
    <body class ="main">
      <div id="wrapper">
        <h1>Menu planner</h1>
        <div class = "introduction">
          <div>We will help you to choose dishes and to buy the right ingridients.</div>
          <div>You will save time and money with us.</div>
        <img src="gif/cute-cat-chef-cooking-cartoon-icon-illustration_138676-2257.webp" id="img_cat">
        </div>
        <div class = "top_menu">
          <img src="gif/cartoon-cute-girl-cat-cooking-vector_39961-870.webp" alt="logo"><div>main</div><div>login</div><div>about us</div><div>subscribe</div>
        </div>
        <h2>First please login</h2>
        <form class ="my-form" method = "GET">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Login</label>
                <input name="name" type="text" class="form-control">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" required class="form-control" id="exampleInputPassword1">
              </div>
              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
              </div>
              <h2>Here are some questions for you</h2>
              <label class="label1">What are your preferences this week?</label>
              <div class="questionaire">
                <input type="radio" name="answer">Vegeterian
              </div><div class="questionaire">
                <input type="radio" name="answer">More Protein
              </div><div class="questionaire">
                <input type="radio" name="answer">Less then 10 min cooking time
              </div>
              <label class="label1">What ingridients do you have?</label>
              <div class="questionaire">
                <input type="radio" name="answer">Meet
              </div><div class="questionaire">
                <input type="radio" name="answer">Vegetables
              </div><div class="questionaire">
                <input type="radio" name="answer">Bread a
              </div>
              <button type="submit" class="btn btn-primary">I'm ready to get my menu</button>

            </form>
        <table class="table table-dark table-striped table-bordered border-primary">
            <h3>Here is your menu for this week</h3>
            <thead>

                <tr ><th>Day of the week</th><th>Breakfast</th><th>Lunch</th><th>Dinner</th></tr>
            </thead>
            <tbody>
                <tr class="table-danger"><td>Monday</td><td>Bagel</td><td>Rice</td><td>Chicken</td></tr>
                <tr class="table-warning"><td>Tuesday</td><td>Egg Sandwich</td><td>Potato</td><td>Pork</td></tr>
                <tr class="table-danger"><td>Wednesday</td><td>Ricotta muffin</td><td>Buckweat</td><td>Fish</td></tr>
                <tr class="table-warning"><td>Thursday</td><td>Egg bite</td><td>Pasta</td><td>Beaf</td></tr>
                <tr class="table-danger"><td>Friday</td><td>Porridge</td><td>Salad</td><td>Chicken Curry</td></tr>
            </tbody>
        </table>
        <table class="table table-dark table-sm table-striped table-bordered border-primary">
          <h3>Here is the list of the ingridients you will have to buy</h3>
          <thead>
              <tr ><th>Day of the week</th><th>Fruits</th><th>Vegetables</th><th>Meet</th><th>Diary</th></tr>
          </thead>
          <tbody>
              <tr class="table-primary"><td>Monday</td><td>Apples and Oranges</td><td>Broccoli</td><td>Chicken</td><td>Milk</td></tr>
              <tr class="table-secondary"><td>Tuesday</td><td>Egg Sandwich</td><td>Potato</td><td>Pork</td><td>Kefir</td></tr>
              <tr class="table-primary"><td>Wednesday</td><td>Ricotta muffin</td><td>Buckweat</td><td>Fish</td><td>SourCream</td></tr>
              <tr class="table-secondary"><td>Thursday</td><td>Egg bite</td><td>Pasta</td><td>Beaf</td><td>Butter</td></tr>
              <tr class="table-primary"><td>Friday</td><td>Porridge</td><td>Salad</td><td>Chicken Curry</td><td>Milk again</td></tr>
          </tbody>
          <tfoot>
            <tr><th>Total</th><th></th><th></th><th></th><th></th></tr>
          </tfoot>
      </table>
      <table id="calories" class="table table-dark table-sm table-striped table-bordered border-primary">
        <h3>Calories</h3>
        <thead>
            <tr ><th>Product name</th><th>Calories</th><th>Food Portion</th><th>Weight in gramms</th></tr>
        </thead>
        <tbody>
        </tbody>
        </table>
        <form>
            <div>
              <div>You can leave your comment here</div>
              <textarea text="comment" style="width: 500px; height: 100px; margin-left: 100px;"></textarea>
            </div>
        </form>
        <script>
          fetch("FoodData.json").then(response=>response.json()).then(data=>{
            let content = "";
            for (let product of data)
            {
              content+=`<tr><td>${product.description}</td><td>${product.foodNutrients[0].amount}</td><td>${product.foodPortions[0]?product.foodPortions[0].measureUnit.name:''}</td><td>${product.foodPortions[0]?product.foodPortions[0].gramWeight:''}</td></tr>`
              }
              document.querySelector("#calories tbody").innerHTML = content;})
        </script>
      </div>
    </body>
</html>