Restaurant-Management-System-using-HTML-CSS-JS/2reservation.html at main · DattaSaiReddyM/Restaurant-Management-System-using-HTML-CSS-JS · 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
<html>
<head>
<title>RESTAURANT RESERVATION</title>
<style>

        body{
            font-family: latha;
            color:white;
            background: linear-gradient( rgba(0,0,0,0.65),rgba(0,0,0,0.65),rgba(0,0,0,0.38),rgba(0,0,0,0)
            )
                ,url(https://images.pexels.com/photos/460537/pexels-photo-460537.jpeg?cs=srgb&dl=pexels-pixabay-460537.jpg&fm=jpg&_gl=1*9moxrf*_ga*MjA0NzExMjkwOS4xNjY0MTAzNTQ5*_ga_8JE65Q40S6*MTY2NjExNjUwNS42LjEuMTY2NjExNjY4NC4wLjAuMA..)no-repeat;
            background-size: cover; margin-top: 1.49%;

        }

        .heading{
        	font-size: 3.2em;
        	margin-top: 20px;
        }

        .data{

        	padding: 20px;
        }

        button{
        	border-radius: 10px;
        	padding: 15px;

        	margin-left: 70px;
        }

        button:hover{
        	cursor: pointer;
        	background-color: aqua;
        }

        </style>
</head>
<body>
<div align="left">
<h1 class="heading">Restaurant Reservation</h1>

<div class='data'>
<form id="xyz ">
<label for="name">Enter Name: </label>
<input type="text" id="name" placeholder="Enter Name" /><br />
<br>
<label for="date">Select Date: </label>
<input type="date" id="date" /><br />
<br>
<label for="people">How Many People?? </label>
<input type="number" id="people" placeholder="Enter Number Of People" /><br />
<br>
<label for="Message">Message/Special Requirements: </label>
<input type="text" id="Message" placeholder="Any Requirements?" /><br />
<br>
<label for="mobile">Enter Mobile number: </label>
<input type="text" id="mobile" placeholder="Enter Mobile Number" /><br />
<br>
</form>
<div>
<button onclick="validate()">Submit</button>
<p>
 <span id="result"></span>
</p>
</div>
</body>
<script>
function validate()
{

var result_text = document.getElementById("result");
var date = document.getElementById("date").value;
var name = document.getElementById("name").value;
if (name.search(/^[a-zA-Z !@#$%^&*)(]{2,20}$/) == -1)
{
result_text.innerHTML = "Invalid Characters in Name";
return;
}
var people = document.getElementById("people");
var mobile_no = document.getElementById("mobile").value;
if (mobile_no.search(/^[0-9]+$/) == -1 || mobile_no.length != 10)
{
result_text.innerHTML = "Invalid mobile number!";
return;
}
alert('Reservation Successful Have A Nice Day');
result_text.innerHTML = "Success!, Please Login To Know More";
}
</script>
</html>