-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathQ2.html
80 lines (79 loc) · 3.64 KB
/
Q2.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
<html>
<head>
<title>This is the title</title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css">
<body class="back">
<div>
<img src="images/image2.png" alt="logo"class="topleft">
<div class="topright">FruitBasket</div>
</div>
<p class="introText">Welcome to FruitBasket!</p>
<p>First Name:
<input type="text" id="first name" placeholder= "Your First Name"
size="15" maxlength="30" />
Last Name:
<input type="text" id="last name" placeholder= "Your Last Name"
size="15" maxlength="30" />
<button type="button"name="submit"value="Submit"onclick="display()">Show Available Fruit</button>
<form id="fruitForm" class="hidden">
<p id="fruits"></p>
<div id="div1" name="apple" val="0" onclick="selected(1)">Apple<img src="images/apple.jpg" hspace="40"alt="apple"class="fruitimage"></div>
<div id="div2" name="orange" val="0" onclick="selected(2)">Orange<img src="images/orange.jpg" hspace="40" alt="orange"class="fruitimage"></div>
</p>
<script type="text/javascript">
function display(){
document.getElementById("fruitForm").style.display="block";
}
function selected(i) {
if($("#div"+i).attr("val")==1){
$("#div"+i).attr("style", "border-color: transparent");
$("#div"+i).attr("val",0);
}else{
$("#div"+i).attr("style", "border-color: black");
$("#div"+i).attr("val",1);
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</p>
<button class="sumbitorder"type="button"name="order"onclick="submitfunction()">Order!</button>
<script>
function submitfunction(){
if(document.getElementById("first name").value.length==0
||document.getElementById("last name").value.length==0){
alert("Invalid Name Entry");
}
else{
var total=0;
var fruits=[];
for(var i=1;i<=2;i++){
if($("#div"+i).attr("val")==1){
total+=1;
fruits.push($("#div"+i).attr("name"))
$("#div"+i).attr("style", "border-color: transparent");
}
}
if(total==0){
alert("Nothing Selected!");
}
else{
var h = document.createElement("P2")
var t = document.createTextNode(
document.getElementById("first name").value+" "+
document.getElementById("last name").value+" ordered: "+
fruits
);
h.appendChild(t);
var br = document.createElement("br");
h.appendChild(br);
document.body.appendChild(h);
document.getElementById("first name").value="";
document.getElementById("last name").value="";
}
}
}
</script>
</form>
</body>
</html>