generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfeedingGuide.html
188 lines (188 loc) · 11.2 KB
/
feedingGuide.html
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Better Puppers</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/2f377630da.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<!--bootstrap Navbar, button and collapse feature-->
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars" aria-hidden="true"></i></span><span>Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link" href="index.html"><i class="fa fa-home" aria-hidden="true"></i> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="exercise.html"><i class="fas fa-paw" aria-hidden="true"></i> Exercise Guide</a>
</li>
<li class="nav-item">
<a class="nav-link" href="socialisation.html"><i class="fas fa-dog" aria-hidden="true"></i> Socialisation (The Four Keys)</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="feedingGuide.html"><i class="fas fa-bone" aria-hidden="true"></i> Feeding Guide <span class="sr-only">(current)</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactUs.html"><i class="fas fa-check-double" aria-hidden="true"></i> Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container jumboBG">
<div class="row">
<div class="col-sm-12 inner-box">
<h3> First thing's first, let's get the food facts straight.</h3>
</div>
</div>
</div>
<br>
<div class="container bg-info" id="hide3">
<ul class="list-group list-group-flush">
<li class="list-group-item">Scarps don't count, it's all about the protein.</li>
<li class="list-group-item">Leading brand ain't always the best.</li>
<li class="list-group-item">Lots of factors dictate a dog's dietery needs, not just age and gender.</li>
<li class="list-group-item">Extra excercise doesn't exclusively mean extra food.</li>
<li class="list-group-item">Knock 10% off their food if you're heavy with the treats</li>
<li class="list-group-item">60% in the morning, and 40% in the evening is best.</li>
<li class="list-group-item">The more protein in the food, the less food they need.</li>
</ul>
</div>
<br>
<div class="container" id="hide4">
<p>I'm sure we don't need to go on and on about the benefits of a healthy diet.
We're pretty sure you didn't come here for a lecture, so let's get to it.
Check out our feeding guide to help you on your way.
</p>
</div>
<div class="container">
<form id="guide" class="bg-warning" autocomplete="off">
<!-- GENDER-->
<div class="form-group col-10 justify-content-center offset-md-1 offset-sm-0">
<label for="gender">Gender </label>
<div class="input-container">
<select id="gender" class=" form-control genderOptions neuteredOptions" name="gender">
<option id="noChoiceGender" value="0"> Make Selection </option>
<option id ="male" value="1.1" >Male</option>
<option id="female" value=".9" >Female</option>
</select>
</div>
<small id="genderMsg"></small>
<div id="hideShowGender" class="form-group">
<br>
<label id="pNameQuestion"></label>
<div class="input-container">
<!--input type text not working, box accepting numbers!-->
<input class="form-control" type="text" id="pName" name="pets_name">
</div>
</div>
</div>
<!-- Neutered HAS THREE CLASSES-->
<div class="form-group col-10 justify-content-center offset-md-1 offset-sm-0">
<label id="neuteredGivenName" for="neutered"> Is your puppers neutered? </label>
<div class="input-container">
<select id="neutered" class="form-control neuteredOptions weightOptions proteinOptions" name="neutered">
<option id="noChoiceNeutered" value=""> Make Selection </option>
<option id ="yesNeutered" value="" >Yes</option>
<option id="noNeutered" value="" >No</option>
</select>
</div>
<small id="neuteredMsg"></small>
</div>
<!-- Weight-->
<div class="form-group col-10 justify-content-center offset-md-1 offset-sm-0">
<label id="weightName" class="name" for="weight">How much does your puppers weigh? </label>
<div class="input-container">
<select id="weight" class="form-control weightOptions proteinOptions" name="weight">
<option id="noChoiceWeight" value="0"> Make Selection </option>
<option id ="small" value="10" >Less than 5kg</option>
<option id="medium" value="15" > 5-15kg's</option>
<option id="large" value="40" >15 - 30kg's</option>
<option id="xLarge" value="60" >over 30kg's</option>
</select>
</div>
<small id="weightmsg"></small>
</div>
<!--WEIGHT CALCS-->
<div class="form-group col-10 justify-content-center offset-md-1 offset-sm-0">
<label id="basedOnInputsoFar" for="weight2">Based on your input so far, your pupper's daily protein needs are : </label>
<div class="input-container">
<input class="form-control" id="weight2" type="text" name="weight2" placeholder="0 %" readonly>
</div>
<small id="dpn"></small>
</div>
<!--BAG CALCS-->
<div class="form-group col-10 justify-content-center offset-md-1 offset-sm-0">
<label id="bagName">How big is your pupper's food bag ?</label>
<div class="input-container">
<select id="weight3" class="form-control proteinOptions" name="weight">
<!--changed noChoiceProtein to noChoiceBag-->
<option id="noChoiceBag" value="0"> Make Selection </option>
<option value="5" >10kg or less</option>
<option value="12" >15kg to 20kg</option>
<option value="15" >20kg or 30kg</option>
<option value="18" >30kg or more</option>
</select>
</div>
</div>
<!--PROTEIN CALCS-->
<div class="form-group col-10 justify-content-center offset-md-1 offset-sm-0">
<label id="proteinRangeName">What's the protein range of your pupper's food ? </label>
<div class="input-container">
<select id="weight4" class=" form-control proteinOptions" name="weight">
<option id="noChoiceProtein" value="0"> Make Selection </option>
<option value="3.0" >10% or less</option>
<option value="2.5" >10% to 15%</option>
<option value="2.0" >15% to 20%</option>
<option value="1.5" >20% or 30%</option>
<option value="1.0" >30% or more</option>
</select>
</div>
</div>
<!--Grams per day-->
<div class="form-group col-10 justify-content-center offset-md-1 offset-sm-0">
<label id= "givenNameFinal" for="weight5">Looks like your puppers will need : </label>
<div class="input-container">
<input class="form-control" id="weight5" type="text" name="gramsPerDay" readonly>
</div>
<br>
</div>
<div class="col-auto">
<button type="reset" id="formReset" class="btn btn-primary mb-2">Reset</button>
</div>
</form>
<br>
</div>
<div class="container">
<button class ="btn btn-success" id="showGuide">Show Guide</button>
</div>
<br>
<div class="container">
<p>We hope this helps, but if you have any other questions please nudge us via our social media's, or contact us <a href="contactUs.html">here</a> to sign up to our newsletter.
We're only too happy to help with whatever we can, and if not, we can certainly point you in the right direction.
</p>
</div>
<br>
<!--FOOTER-->
<div class="container">
<footer id="footer" class="hideFooter">
<a class="footer-items" href="https://www.facebook.com" target="_blank" rel="noopener"><i class="fab fa-facebook-square" aria-hidden="true"></i><span>Facebook</span></a>
<a class="footer-items" href="https://www.twitter.com" target="_blank" rel="noopener"><i class="fab fa-twitter-square" aria-hidden="true"></i><span>Twitter</span></a>
<a class="footer-items" href="https://www.instagram.com" target="_blank" rel="noopener"><i class="fab fa-instagram" aria-hidden="true"></i><span>Instagram</span></a>
<a class="footer-items" href="https://www.dogactionwelfaregroup.ie/donate/" target="_blank" rel="noopener"><i class="fas fa-donate"></i><span>Donate</span></a>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="assets/script/script.js"></script>
</body>
</html>