group1_contacts_manager/Miami_ContactsPage.html at main · davagej/group1_contacts_manager · 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
134
135
136
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
	<title>COP 4331 MIAMI LAMP Stack</title>
	<script type="text/javascript" src="js/md5.js"></script>
	<script type="text/javascript" src="js/code.js"></script>
    <link href="css/Miami_styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function()
	{
		readCookie();
		searchContact();
	}, false);
	</script>
</head>
<body>

<h1 id="title">Manage My Miami</h1>

<img id="logo" src="images/MiamiLogo.png" alt="logo" onclick="goToHomePage();">

<button class="navText" id="aboutBut" type="button" onclick="goToAbout();"> About </button>
<button class="navText" id="settingBut" onclick="document.location='https://github.com/davagej/group1_contacts_manager/tree/main'"> Settings </button>
<button class="navBorder" id="signInBut" type="button" onclick="doLogout();"> Log Out </button>

<div id="loginDiv">

	<img id="palmtrees" src="images/palmtreesBlack.png" alt="palm trees">

	<div id="bodyHeaderHiddenDiv">
		<p id="contact-welcome"><span id="userName"></span> </p>
		<button type="button" id="addButtonHeader">Add</button>
		<input type="text" id="searchText" placeholder="Search your Miami"/>
	</div>

	<div id="bodyTransDiv">
		<div id="myModal" class="modal">
			<div class="add-Contact-Modal" onclick="clearContactAddResult()">
				<span class="close">&times;</span>

				<input type="text" id="addFirstName" class="centerInDiv" placeholder="Enter First Name"
				title="Please Fill out Field" /><br />

				<input type="text" id="addLastName" class="centerInDiv" placeholder="Enter Last Name"
				title="Please Fill out Field" /><br />

				<input type="text" id="addPhoneNumber" class="centerInDiv" placeholder="Enter Phone Number"
				pattern="(?=.*\d).{10}"
				title="Please Fill out Field" /><br />

				<input type="text" id="addEmailAddress" class="centerInDiv" placeholder="Enter Email Address"
				pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"
				title="Must be in the format of name@mail.something" /><br />

				<button class="buttons" id="addButton" type="button" onclick="addContact();"> Add </button>
				<span id="contactAddResult"></span>
			</div>
		</div>

		<div id="myModalView" class="modal">
			<div class="add-Contact-Modal">
				<span class="close">&times;</span>
				<h4 class="viewHeader"> First Name </h4>
					<p class="viewContent" id="firstNameView"></p>
				<h4 class="viewHeader"> Last Name </h4>
					<p class="viewContent" id="lastNameView"></p>
				<h4 class="viewHeader"> Phone Number </h4>
					<p class="viewContent" id="phoneView"></p>
				<h4 class="viewHeader"> Email </h4>
					<p class="viewContent" id="emailView"></p>
			</div>
		</div>


		<div id="headerTransDiv">
			<p id="headerFirst"> First Name </p>
			<p id="headerLast"> Last Name </p>
			<p id="headerPhone"> Phone Number </p>
			<p id="headerEmail"> Email Address </p>
			<p id="headerOptions"> Options </p>
		</div>

		<div id="contactList">
<!--		All Contacts are falling here		-->
		</div>
	</div>
</div>
<span id="contactSearchResult"></span>
<script>
	addEventListener("input", function(event) {
		if (event.target.id == "searchText") {
			searchContact();
		}
	});

	// Get the modal
	let modal = document.getElementById("myModal");
	let viewModal = document.getElementById("myModalView");
	// Get the button that opens the modal
	let btn = document.getElementById("addButtonHeader");

	// Get the <span> element that closes the modal
	let span = document.getElementsByClassName("close")[0];
	let viewSpan = document.getElementsByClassName("close")[1];

	// When the user clicks on the button, open the modal
	btn.onclick = function()
	{
	  modal.style.display = "block";
	}

	viewSpan.onclick = function() {
		viewModal.style.display = "none";
	}
	// When the user clicks on <span> (x), close the modal
	span.onclick = function()
	{
	  modal.style.display = "none";
	}

	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event)
	{
	  if (event.target == modal) {
		  modal.style.display = "none";
	  }
	  if (event.target == viewModal) {
		  viewModal.style.display = "none";
	  }
	}
</script>
</body>
</html>