VaultofCodes Assignment 3 - Code Files
File: index.html
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VaultofCodes Preview</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=sw
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="brand-title">VaultofCodes</div>
<button id="theme-btn"><i class="fas fa-moon"></i></button>
</header>
<main>
<div class="card">
<h2>Certificate Verifier</h2>
<input id="identifier" placeholder="Enter Email or ID" />
<button id="verify-btn">Verify</button>
<div id="result"></div>
</div>
<div class="card">
<h2>Internships</h2>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;">
<select id="filter-duration"><option>All Durations</option><option>1 Month</option
<select id="filter-tech"><option>All Tech</option><option>Web Dev</option><option>
</div>
<div id="jobs" class="grid"></div>
</div>
<button id="back-top" class="back-top"><i class="fas fa-arrow-up"></i></button>
</main>
<div id="modal" class="modal hidden"><div class="modal-content"><span id="close" class="
<script src="script.js"></script>
</body>
</html>
File: style.css
:root {
--bg: #f0f4f8;
--card: #fff;
--text: #333;
--primary: #3b82f6;
--accent: #9333ea;
--shadow: rgba(0,0,0,0.1);
}
[data-theme="dark"] {
--bg: #1f2937;
--card: #1e1e2f;
--text: #f9fafb;
--primary: #60a5fa;
--accent: #c084fc;
--shadow: rgba(0,0,0,0.6);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.5s, color 0.5s;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--card);
box-shadow: 0 4px 12px var(--shadow);
}
.brand-title {
font-size: 1.8rem;
font-weight: 600;
background: linear-gradient(90deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card {
background: var(--card);
padding: 30px;
border-radius: 16px;
box-shadow: 0 8px 24px var(--shadow);
margin-bottom: 30px;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-6px);
}
input, select {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 8px;
margin-bottom: 20px;
transition: border-color 0.3s;
}
input:focus, select:focus {
outline: none;
border-color: var(--primary);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
gap: 20px;
}
.job {
padding: 20px;
text-align: center;
border-radius: 12px;
box-shadow: 0 4px 12px var(--shadow);
transition: transform 0.3s;
}
.job:hover {
transform: scale(1.05);
}
.back-top {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--primary);
color: #fff;
border: none;
padding: 12px;
border-radius: 50%;
display: none;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
}
.hidden {
display: none;
}
.modal-content {
background: var(--card);
padding: 20px;
border-radius: 12px;
position: relative;
}
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 1.2rem;
cursor: pointer;
}
File: script.js
// Demo JS
const themeBtn = document.getElementById('theme-btn'),
html = document.documentElement;
themeBtn.onclick = () => {
html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark';
};
const jobs = [
{id:1, title:'Frontend Intern', duration:'1 Month', tech:'Web Dev', details:'HTML/CSS/JS
{id:2, title:'Data Intern', duration:'3 Months', tech:'Data Science', details:'Python/Ma
];
const jobsEl = document.getElementById('jobs');
function render(list) {
jobsEl.innerHTML = list.map(j => `
<div class="job">
<h3>${j.title}</h3>
<p>${j.duration}</p>
<p>${j.tech}</p>
<button onclick="openModal(${j.id})">Details</button>
</div>
`).join('');
}
render(jobs);
function openModal(id) {
const j = jobs.find(x => x.id === id);
document.getElementById('modal-body').innerHTML = `<h3>${j.title}</h3><p>${j.details}</p
document.getElementById('modal').classList.remove('hidden');
}
document.getElementById('close').onclick = () => {
document.getElementById('modal').classList.add('hidden');
};
window.onscroll = () => {
document.getElementById('back-top').style.display = window.scrollY > 200 ? 'block' : 'no
};
document.getElementById('back-top').onclick = () => {
window.scrollTo({top:0, behavior:'smooth'});
};
document.getElementById('verify-btn').onclick = () => {
const id = document.getElementById('identifier').value;
document.getElementById('result').innerText = id ? 'Verified: ' + id : 'Enter valid ID';
};
