Final_Assignment/problem-and-solution.html at master · MartinKjone/Final_Assignment · 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
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App name</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="content">
      <h1>App Name</h1>

      <nav><!-- Webpage navigation buttons -->
        <a href="./problem-and-solution.html" id="currentPage">Problem and solution</a>
        <a href="./the-app.html">The app</a>
        <a href="./index.html">How it works</a>
      </nav>
    </div>
  </header>
  <main>
    <div class="content">
      <div class = "row">
        <div id ="problem"><!-- Content of problem section -->
          <div class="col-left float-left">
          <h1> The problem </h1>
          <span class="problem-solution-text-span">
            We wish to contribute to solving of the second UN SDG Goal, zero hunger and will be contributing by trying to reduce wastage.
          </span>
          <input id="rmt-1" class="read-more-toggle float-right" type="checkbox">
        <label id="rmt-1-label" for="rmt-1" class="rmt-label float-right">Read More</label>
          <div id="rmc-1" class="rm-content problem-solution-text">
            <p>Food is a finite resource many Norwegians take for granted.
            Norwegians are amongst the most wasteful of people and hence contribute to the food shortage starving many around the globe.
            Calculations done by matvett.no tells us that Norwegians waste about 385 000 metric ton on a yearly basis
            and that the general population is to be blamed for 58% of this waste.
            In conclusion, on average a Norwegian citizen wastes 42,5 kg of edible food every year.  This 58% wastage could feed half a million people and reduce world hunger.</p>
          </div>
        </div>
        <div class = "col-right float-right">
          <figure>
          <img alt="Food waste" src="https://industryeurope.com/downloads/5245/download/Food%20waste.jpg?cb=c230a7c98e60a59bc1acfc534544fd5f&w=1032&h=" class="img-responsive">
          <figcaption> </figcaption>
          </figure>
        </div>
        </div>


        <div id ="solution">
          <div class="col-left float-right">
            <figure>
              <h1> Our solution </h1>
              <span class="problem-solution-text-span">
                Our solution aims to reduce the wastage of food by introducing an accessible and easy-to-use app.
              </span>
              <input id="rmt-2" class="read-more-toggle float-right" type="checkbox">
              <label id="rmt-2-label"for="rmt-2" class="rmt-label float-right">Read More</label>
              <div id="rmc-2" class="rm-content problem-solution-text">
                <p>There are many reasons to wastage of food but seeing as 20% of it comes from dinner leftovers,
                we believe one of the major factors are laziness and lack of accessible information.
                Therefore, have we prioritized the ease of use of the app and the amount of time it takes to use.</p>
                <p>The main functionality of the app is to inform how leftovers from meals inputted by the user can be used,
                  be it used in another dish or donated. The secondary function of the app is to be an accessible and correct informed library of information regarding food.
                  The information on the app is as an example how long cooked food and leftovers can safely be stored and what the optimal storage condition is.
                  The app will also contain information about how long after a product has gone past its “best before” date it is safe to consume
                  and dispelling of general misconceptions such as food intolerance being the same as food allergy while they’re not.</p>
                <p>The app can also be personalized by inputting age, weight, height and fitness. Personalization is not necassary to use the app nor will it be advertaised,
                  so as that the app does not become intrusive towards the user.
                  If personalized the app can then help plan healthy meals and by also inputting your meals throughout the week,
                  help find vitamins and nutrients you are lacking in your diet. </p>
                <p>As earlier stated, the app helps with deciding what to do with leftovers, one option being donation. By deciding to donate,
                  the donation will be uploaded to our network so that other users of the app can see it and decide wether they wish to partake in the donation.</p>
              </div>
           </div>
          <div class = "col-right float-left">
            <figure>
              <img alt="Stop food loss and waste" src="https://www.futurefoodsystems.com.au/wp-content/uploads/2020/09/horizontal-poster_100x70_EN-1520x820.jpg" class="img-responsive">
              <figcaption> </figcaption>
              </figure>

          </div>
        </div>
      </div>
      <div class = "row">
      </div>
    </div>
  </main>

  <footer>
    <!-- LOGO -->
    <!-- 2 columns with contact info-->
    <!-- Media links-->
  </footer>
              <figcaption> </figcaption>
              </figure>

          </div>
        </div>
      </div>
      <div class = "row">
      </div>
    </div>
  </main>

  <footer>
    <!-- LOGO -->
    <!-- 2 columns with contact info-->
    <!-- Media links-->
  </footer>
              <figcaption> </figcaption>
              </figure>

          </div>
        </div>
      </div>
      <div class = "row">
      </div>
    </div>
  </main>

  <footer>
    <!-- LOGO -->
    <!-- 2 columns with contact info-->
    <!-- Media links-->
  </footer>
  <script>
    // Global variables
    var rmt1label = document.getElementById("rmt-1-label");
    var rmt2label = document.getElementById("rmt-2-label");
    var rmt1 = document.getElementById("rmt-1");
    var rmt2 = document.getElementById("rmt-2");

    rmt1label.onclick = readMore1();
    rmt2label.onclick = readMore2();

    // Incase Javascript interfers with the html and shows the rmt as checked at startup
    rmt1.checked = false;
    rmt2.checked = false;

    // For user comfort: When label is pressed it unchecks or checks the coresponding checkbox
    function readMore1(){
      if(rmt1.checked == true){
        rmt1.checked = false;
      }
      else if(rmt1.checked == false){
        rmt1.checked = true;
      }
    }
    function readMore2(){
      if(rmt2.checked == false){
        rmt2.checked = true;
      }
      else if(rmt2.checked == true){
        rmt2.checked = false;
      }
    }
  </script>
</body>
</html>