-
Notifications
You must be signed in to change notification settings - Fork 2
/
homepage.html
212 lines (187 loc) · 10.6 KB
/
homepage.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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!-- DOCTYPE declaration, tells the browser the code is HTML5 and HTML5 compliant -->
<!-- Ensures the document will be parsed the same way by different browsers -->
<!doctype html>
<html lang="en">
<!-- Opening head tag, information about the document should go between the head tags -->
<head>
<!-- Required meta tags Bootstrap -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS (via CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Title tag, this is displayed in the title bar in the browser -->
<title> Brilliant Buds Home Page </title>
<!-- CSS is put inside <style> tags -->
<style type="text/css">
/* Code below changes the body background colour to teal i.e. the main browser window */
body {background-color: teal;}
/* The d1 class below includes float: left which allows positioning of elements beside each other by floating to the left of the containing element */
.d1{float: left;}
/* Below applies Arial font to all paragraphs, if Arial not available Verdana will be applied */
p {font-family: Arial, Verdana;}
/* A div is a container for HTML elements, div.container and div.main contain elements relating to the login form itself and the contents of the login form e.g. the border of the form is 3pixels thick, solid and grey in colour */
div.container{width: 700px; height: 510px; margin:35px; font-family: Arial, Verdana;}
div.main{width: 300px; padding: 10px 50px 25px; border: 3px solid gray; border-radius: 10px; font-family: Arial; position: absolute; right: 0; top: 0; margin-top:50px}
/* div.carouselprop is a container to contain elements relating to the carousel */
div.carouselprop {width: 900px; height: 1000; display: block; margin-left: auto; margin-right: auto;}
/* The attention class below specifies larger pink font to draw attention to the text it is applied to */
.attention {font-size: 40px; color: DeepPink;}
/* The button1 class below specifies properties of the button it is applied to */
.button1 {color: teal; background-color: DeepPink; font-size: 24px; cursor: pointer;}
/* Closing style tag *
</style>
<!-- Closing head tag -->
</head>
<!-- Opening body tag, content placed between the body tags will appear in the main browser window -->
<body>
<!-- The CSS class d1 is applied to elements within this div resulting in them being positioned beside each other after float -->
<div class="d1">
<!-- The images are made clickable by being placed inside the <a> tags -->
<a href="homepage.html"><img src="logoPinkH.jpg" width="130" alt="Homepage"></a>
<a href="products.html"><img src="logoPinkProducts.jpg" width="130" alt="Products"></a>
<a href="specialOffers.html"><img src="logoPinkSpecial.jpg" width="130" alt="Special Offers"></a>
</div>
<!-- Form below for customer to enter login details -->
<div class="container">
<div class="main">
<!-- h2 heading to let the customer know what the form is for -->
<h2>Login for Flower Power</h2>
<!-- A form is a container used to collect user input, in this case the user login details -->
<form>
<!-- A label defines a label for elements and has an associated input type, text in the case below -->
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<!-- When the user clicks on the button 'Login' the Javascript function validate() will be called on -->
<input type="button" value="Login" id="submit" onclick="validate()"/>
</form>
</div>
</div>
<!-- Code block taken from: https://getbootstrap.com/docs/4.6/components/carousel/ and then adapted -->
<!-- An id attribute specifies a unique id for a HTML element, an id is required here for the carousel to function -->
<!-- The class "carousel-slide" specifies the div contains a carousel that slides when transitioning between images -->
<!-- Data-ride="carousel" is used to tell Bootstrap to begin animating the carousel as soon as the page loads -->
<div id="carouselSlides" class="carousel slide" data-ride="carousel">
<!-- The class "carouselprop" is applied to define the properties of the carousel -->
<div class="carouselprop">
<div class="carousel-inner">
<!-- The content of each slide is defined in a <div> -->
<!-- active is added to the image below, it must be added to one image in the carousel or the carousel will not be visible -->
<div class="carousel-item active">
<!-- <img> tag used to embed an image, src specifies the path file, class="d-block w-50" uses Bootstrap to apply size properties to the image, alt attribute used to display text if the image does not load for any reason -->
<img src="flowersYellow.jpg" class="d-block w-50" alt="Spring Bunch">
</div>
<div class="carousel-item">
<img src="bonsai.jpeg" class="d-block w-50" alt="Bonsai">
</div>
<div class="carousel-item">
<img src="roses.jpeg" class="d-block w-50" alt="Roses">
</div>
</div>
</div>
</div>
<!-- Code block taken from: https://getbootstrap.com/docs/4.0/components/jumbotron/ and then adapted -->
<!-- A jumbotron is a big box for drawing attention to information -->
<div class="jumbotron">
<h1>Brilliant Buds</h1>
<!-- Line break tag <br/> in the paragraph below to put the content following it on a new line, this tag is self closing -->
<p class="lead">Welcome to Brilliant Buds!<br/>
<!-- <i> tag to change the text to italics -->
<i>Beautiful arrangements and plants to put a smile on your face</i>
</p>
<!-- <hr> tag, applies the horizontal rule. It puts a line horizontally across the browser page here. This tag is self closing
-->
<hr class="my-4">
<!-- Opening and closing paragraph tags -->
<!-- <em> is an example of semantic markup, emphasises "Flower Power" here, for example, if a screenreader reads it. <em> does not change the structure of the page
-->
<p><em>Flower Power!!</em></p>
<div class="alert alert-primary" role="alert">Special Offers!
<!-- <a> is an anchor -->
<!-- The href attribute then adds meaning/information to the <a> tag, it determines where the user goes when <a> tag clicked -->
<!-- Using a relative URL to link to the special offers page (as files are in the same folder) -->
<a href="specialOffers.html" class="alert-link"> Click here </a>
</div>
<!-- Creates a button for the customer to click on to see range of flowers available -->
<!-- When button is clicked the Javascript displayFlowers() function is called -->
<div id="range"></div>
<button class="button1" onclick="displayFlowers()">Our Flower Range</button>
</div>
<!-- The form below takes in user input in the form of an email address -->
<form>
<!-- HTML5 has inbuilt performance of email validation, if there is no @ symbol or . it won't validate the input -->
<p>Sign up for the latest news! Email address:
<input type="email">
<input type="submit">
</form>
<hr>
<!-- The paragraph below prompts the user to input data to get a discount code -->
<!-- The attention class makes the font larger and red to draw the user's attention -->
<p class="attention">Tell us your favourite flower to get a discount code:</p>
<!-- When the user inputs the data into the form and submits, the Javascript validateFlower() function will be called -->
<form name="myForm" action="/action_page.php" onsubmit="return validateFlower()" method="post">
Favourite Flower: <input type="text" name="fname">
<input type="submit" value="Submit">
</form
<!-- jQuery and Bootstrap Bundle (includes Popper)(via CDN) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Javascript code is put inside <script> tags -->
<script>
//When the Login button in the login form is clicked by the user, the 'valid' function below will execute
function validate(){
//Variables are created to store information
////DOM is then used here to retrieve the values 'username' and 'password' entered by the user into the login form
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//if statement to check if the entered login details are correct
if ( username == "user" && password == "pass"){
//If both 'username' and 'password' are correct, an alert box will let the user know they have successfully logged in
alert ("You have successfully logged in!");
//Returns to the homepage
window.location = "homepage.html";
}
else{
//If either 'username' or 'password' are incorrect
if (username != "user" || password != "pass"){
//an alert box will let the user know they must try again
alert ("Login unsuccessful, please try again");
//Returns to the homepage
window.location = "homepage.html";
}
}
}
//When the user submits their 'Favourite Flower' the validation function below will execute
function validateFlower() {
//DOM Document Object Model is a way for Javascript to interact with HTML
//A variable x is created to store the values retrieved for "myForm" and "fname" using the DOM
var x = document.forms["myForm"]["fname"].value;
//Validation is checked for here, if there is no text entered an alert will remind the user to input their favourite flower
if (x == "") {
alert("You must tell us your favourite flower!");
//Back to homepage
return false;
}
//Otherwise and alert will pop up to give the user the discount code
else{
alert("The discount code is Flower10");
//Back to homepage
return false;
}
}
{ //Using an array in Javascript
//A variable var is created to store an array with the details of the range of flowers available
var flowerArray = ["Roses","Gerbolas","Lilies", "Hyancinths"];
//The function below iterates throught the array
function displayFlowers(){
flowerArray.forEach(el => {
//'Range' is the id of the div present in the DOM (displayed on click in the jumbotron)
document.getElementById('range').innerHTML +=`<div>${el}</div><br />`;
});
};
}
</script>
<!-- Closing body tag -->
</body>
</html>