IngredilistUserGuide/shoppingListGuide.html at main · SaoodCS/IngredilistUserGuide · 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
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Guide for Application</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
<div class = "container">
    <div class = "navbar">
        <img src='images/ingredilistlogo.png' class = 'logo' id=logo>
        <nav>
            <ul id=menulist>
                <li>
                    <a href="loginScreenGuide.html"> Login </a>
                </li>
                <li>
                    <a href="myMealsGuide.html"> Meals </a>
                </li>
                <li>
                    <a href="socialsGuide.html"> Socials </a>
                </li>
                <li>
                    <a href="index.html"> Homepage </a>
                </li>
                <li>
                    <a href="cookingTimerGuide.html"> Cooking Timer</a>
                </li>
                <li>
                    <a href="mySettingsGuide.html"> Settings </a>
                </li>
            </ul>
        </nav>
        <img src="images/menuicon.png" class="menu-icon" onclick="togglemenu()">
    </div>


    <div class = "row">
        <center><div class = "col-1" id=col1>
            <h1><strong>Shopping List</strong></h1>
            <h2><strong>User Guide for The Shopping List Screen. </strong></h2>
            <p><em><strong>This page will give a break down of all the functionality available on the shopping list screen and how it's accessed and used.</strong></em></p>
        </div></center>

        <div class = "col-2" id = col2>
            <center><img src='images/ListIconWebView.png' class = 'icons'></center>

        </div>

    </div>


<div class = "row" style="background-color:beige" id = row2>
    <div class = "col-2" id = col21>

        <center><img src='images/User Guide Screenshots/Shopping List/Screenshot_1620307807.png' class = 'icons'style="width:250"></center>
    </div>
    <center><div class = "col-1" id=col11>
    <h1 style="text-align: left;"><strong>1. Creating a Shopping List</strong></h1>
    <p style="text-align: left;"><em><strong>The Shopping List screen can be accessed by pressing the list icon in the bottom navigation bar. This screen is designed to make writing a shopping list as effecient as possible, and all your items you've added will be saved by default after adding, so when the shopping alarm (set on the settings screen) goes off the list will not be lost. </strong></em></p>
    <br>
    <p style="text-align: left;"><em><strong>You can create a shopping list by pressing the add button once you type in an item you need. Use the + button to increase the quantity of that item, and the - button to decrease. The list of items automatically saves once you have added them. </strong></em></p>
</div></center>
</div>


<div class = "row" style="background-color:burlywood">
<div class = "col-2">

    <center><img src='images/User Guide Screenshots/Shopping List/UGLIST3.png' class = 'icons'style="width:250px"></center>
</div>

<center><div class = "col-1">
    <h1 style="text-align: left;"><strong>2. Deleting Items From the Shopping List</strong></h1>
    <p style="text-align: left;"><em><strong>To delete an item from the list simply swipe left or right on that item and it will delete from both the screen and your database of saved meals. As seen in the screen capture of the following screen, the item "50/50 Hovis Bread" has been swiped left thus it will be deleted off the screen as soon as the hand leaves the screen. </strong></em></p>
    <br>
</div></center>
</div>


<!-- Website responsiveness here in the javascript code, and in the css styles sheet and viewport.-->
</div>
<script>
var menulist = document.getElementById("menulist");
var col2 = document.getElementById("col2");
var col1 = document.getElementById("col1");
var row2 = document.getElementById("row2");
var logo = document.getElementById("logo");
menulist.style.maxHeight = "0px";
function togglemenu(){
    if(menulist.style.maxHeight == "0px"){
        menulist.style.maxHeight = "120px"
        col2.style.top = "70px"
        row2.style.marginTop = "100px"
        col1.style.top="70px"
        logo.style.width ="70px"
    }
    else{
        menulist.style.maxHeight = "0px"
        col2.style.top = "30px"
        col1.style.top="30px"
        row2.style.marginTop="30px"
        logo.style.width ="100px"

    }
}
</script>
</body>