Skip to content
This repository was archived by the owner on Jun 29, 2024. It is now read-only.

Update and rename index (1).html to index.html #54

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update and rename index (1).html to index.html #54

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 81 additions & 66 deletions ...k4-student_enrollment_form/index (1).html → .../Task4-student_enrollment_form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,76 +3,77 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title >Student Enrollment Form</title>
<title>Student Enrollment Form</title>
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #b7b1b1;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #b7b1b1;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="text"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

input[type="submit"] {
align-items: center;
background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
border: 0;
width: 100%;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
font-family: Phantomsans, sans-serif;
font-size: 20px;
justify-content: center;
line-height: 1em;
max-width: 100%;
min-width: 140px;
padding: 19px 24px;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
}
input[type="submit"] {
align-items: center;
background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
border: 0;
width: 100%;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
font-family: Phantomsans, sans-serif;
font-size: 20px;
justify-content: center;
line-height: 1em;
max-width: 100%;
min-width: 140px;
padding: 19px 24px;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
}

.button-63:active,
.button-63:hover {
outline: 0;
}
.button-63:active,
.button-63:hover {
outline: 0;
}

@media (min-width: 768px) {
.button-63 {
font-size: 24px;
min-width: 196px;
}
}
@media (min-width: 768px) {
.button-63 {
font-size: 24px;
min-width: 196px;
}
}

.error {
color: red;
font-size: 12px;
}
.error {
color: red;
font-size: 12px;
}

.error + br {
display: none;
}
h2{
text-align: center;
}
.error + br {
display: none;
}

h2 {
text-align: center;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -106,12 +107,13 @@ <h1 align="center">Student Enrollment Form</h1>
<option value="Data Science">Data Science</option>
</select><br>
<label for="name">College Name:</label><br>
<input type="text" id="name" name="name"><br>
<span id="nameError" class="error"></span><br>
<input type="text" id="collegeName" name="collegeName"><br>
<span id="collegeNameError" class="error"></span><br>
<label for="comments">Additional Comments:</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br>

<input type="submit" value="Submit">
<p id="submit"></p>
</form>

<script>
Expand All @@ -120,10 +122,12 @@ <h1 align="center">Student Enrollment Form</h1>
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var course = document.getElementById("course").value;
var collegeName = document.getElementById("collegeName").value;

var nameError = document.getElementById("nameError");
var emailError = document.getElementById("emailError");
var phoneError = document.getElementById("phoneError");
var collegeNameError = document.getElementById("collegeNameError");

var isValid = true;

Expand All @@ -147,7 +151,7 @@ <h1 align="center">Student Enrollment Form</h1>
if (phone === "") {
phoneError.textContent = "Phone number is required";
isValid = false;
} else if (!validatePhone(phone)) {
} else if (validatePhone(phone)) {
phoneError.textContent = "Invalid phone number format";
isValid = false;
} else {
Expand All @@ -159,6 +163,17 @@ <h1 align="center">Student Enrollment Form</h1>
isValid = false;
}

if (collegeName === "") {
collegeNameError.textContent = "College name is required";
isValid = false;
} else {
collegeNameError.textContent = "";
}

if (isValid) {
alert("You have successfully submitted the form");
}

return isValid;
}

Expand All @@ -174,4 +189,4 @@ <h1 align="center">Student Enrollment Form</h1>
</script>

</body>
</html>
</html>