Skip to content

Commit

Permalink
done
Browse files Browse the repository at this point in the history 
e
  • Loading branch information
@Thorus-Slughorm
Thorus-Slughorm committed Jul 28, 2023
0 parents commit 9a15155
Show file tree
Hide file tree
Showing 4 changed files with 313 additions and 0 deletions.
58 changes: 58 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>

<head>
<title>Student ID Card Generator</title>
<link rel="stylesheet" href="ss/style.css">
</head>

<body>
<h1 class="header">ID CARD GENERATOR</h1>
<div class="container">
<div class="left-panel">
<h2>Enter Student Details</h2>
<form id="idCardForm">
<div class="form-group">
<label for="name">Enter Full Name:</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">Enter college name </label>
<input type="text" id="email" required>
</div>
<div class="form-group">
<label for="studentId">Enter Student ID:</label>
<input type="text" id="studentId" required>
</div>
<div class="form-group">
<label for="course">Enter course</label>
<input type="text" id="course" required>
</div>
<div class="form-group">
<label for="photo">Enter Student's Photo:</label>
<input type="file" id="photo" accept="image/*" required>
<p id="photoName"></p>
</div>
<button type="submit">Generate Card</button>
</form>
</div>
<div class="right-panel">
<div class="id-card-container">
<div class="photo-container">
<div class="photo" id="idCardPhoto"></div>
</div>
<div class="student-info">
<h2 id="idCardName"></h2>
<p id="idCardEmail"></p>
<p id="idCardStudentId"></p>
<p id="idCardCourse"></p>
</div>
</div>
</div>
</div>

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="ss/script.js"></script>
</body>

</html>
Binary file added ss/Screenshot 2023-07-01 173020.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions ss/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
document.getElementById('idCardForm').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent form submission

// Get form values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const studentId = document.getElementById('studentId').value;
const course = document.getElementById('course').value;
const photo = document.getElementById('photo').files[0];

// Update virtual ID card
document.getElementById('idCardName').innerText = name;
document.getElementById('idCardEmail').innerText = `College: ${email}`;
document.getElementById('idCardStudentId').innerText = `Student ID: ${studentId}`;
document.getElementById('idCardCourse').innerText = `Course: ${course}`;

// Update photo
const reader = new FileReader();
reader.onload = function() {
document.getElementById('idCardPhoto').style.backgroundImage = `url(${reader.result})`;
};
reader.readAsDataURL(photo);

// Update photo name display
document.getElementById('photoName').innerText = `Selected photo: ${photo.name}`;

// Show the virtual ID card
document.querySelector('.right-panel').style.display = 'flex';
});
226 changes: 226 additions & 0 deletions ss/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.left-panel,
.right-panel {
width: 50%;
padding: 20px;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
margin: 10;
padding: 10;
background-color: #f1f1f1;
}

.header {
background-color: #4047F0;
color: #fff;
padding: 7px;
text-align: center;
border-radius: 250px;
}

.container {
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
}

.left-panel,
.right-panel {
width: 50%;
padding: 20px;
box-sizing: border-box;
}

.left-panel {
background-color: #fff;
}

.left-panel h2 {
font-size: 20px;
margin-bottom: 20px;
color: #4047F0;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 15px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="file"] {
width: 100%;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 24px rgba(10, 10, 10, 0.2);
}

button {
padding: 10px 20px;
background-color: #4047F0;
border: none;
border-radius: 5px;
color: #fff;
font-weight: bold;
cursor: pointer;
}

.right-panel {
display: flex;
justify-content: flex-start;
align-items: center;
}

.id-card-container {
display: flex;
align-items: flex-start;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
background-color: #ff311;
}

.photo-container {
margin-right: 20px;
padding: 15px;
}

.photo {
width: 150px;
height: 150px;
background-color: #f1f1f1;
background-position: center;
background-size: cover;
border-radius: 10px;
}

.student-info {
flex-grow: 1;
}

.student-info h2 {
margin: 10;
font-size: 20px;
margin-bottom: 10px;
color: #4047F0;
padding: 0;
}

.student-info p {
margin: 120;
font-size: 14px;
color: #0010;
padding: 10;
}

#photoName {
color: #888;
font-size: 12px;
margin-top: 5px;
}

.left-panel {
background-color: #f1f1f1;
color: #000;
}

.left-panel h1 {
font-size: 24px;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #000;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="file"] {
width: 60%;
padding: 15px;
border-radius: 70px;
border: none;
background-color: #;
}

button {
padding: 10px 20px;
background-color: #;
border: none;
border-radius: 55px;
color: #;
font-weight: bold;
cursor: pointer;
}

.right-panel {
display: flex;
justify-content: center;
align-items: center;
}

#idCard {
width: 300px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 20px;
background-color: #fff;
}

.photo-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
}

.photo {
width: 170px;
height: 170px;
background-color: #f1f1f1;
background-position: center;
background-size: cover;
border-radius: 50%;
}

.student-info {
text-align: center right;
}

.student-info h2 {
margin: 50;
font-size: 20px;
margin-bottom: 10px;
}

.student-info p {
margin: 50;
font-size: 14px;
color: #000;
}

0 comments on commit 9a15155

Please sign in to comment.