Scribd
Upload
7 views9 pages

Rakesh

The document outlines an assignment to develop a web application for maintaining a student event calendar, allowing faculty to manage events while students can only view them. It includes HTML, CSS, and JavaScript code snippets for the application, detailing the structure, styling, and functionality of the calendar and faculty dashboard. Additionally, it contains a biodata section for the author, B. Rakesh, highlighting his skills and contact information.

Uploaded by

omkarkoty2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views9 pages

Rakesh

The document outlines an assignment to develop a web application for maintaining a student event calendar, allowing faculty to manage events while students can only view them. It includes HTML, CSS, and JavaScript code snippets for the application, detailing the structure, styling, and functionality of the calendar and faculty dashboard. Additionally, it contains a biodata section for the author, B. Rakesh, highlighting his skills and contact information.

Uploaded by

omkarkoty2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

FSWD ASSIGNMENT-1

Name:-B.Rakesh
Roll No:- 1602-733-034

1.Develop a web application which allows us to maintain a calendar of events for


Students. This calendar view must maintain flag against each event as Completed,
Pending, Upcoming, High Priority etc. The application must enable faculty to edit, delete,
create, and share the schedules. These schedules must be in read only mode for the
students. Faculty should have a dashboard to view the students details who have
completed, pending and not on track with their schedules so on.

Ans:-

Index.html
<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Student Event Calendar</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<header>

<h1>Student Event Calendar</h1>

</header>

<!—Calendar Section for both students and faculty

<section class=”calendar-section”>

<h2>Event Calendar</h2>

<div id=”calendar”></div>

</section>
<!—Faculty Dashboard Section →

<section class=”faculty-dashboard”>

<h2>Faculty Dashboard</h2>

<button onclick=”createEvent()”>Create Event</button>

<button onclick=”editEvent()”>Edit Event</button>

<button onclick=”deleteEvent()”>Delete Event</button>

<button onclick=”shareSchedule()”>Share Schedule</button>

<div id=”student-progress”>

<h3>Student Progress</h3>

<p>Completed: <span id=”completedCount”>0</span></p>

<p>Pending: <span id=”pendingCount”>0</span></p>

<p>Not on Track: <span id=”offTrackCount”>0</span></p>

</div>

</section>

<script src=”script.js”></script>

</body>

</html>

Style.css

#app {
background-color: white;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 500px;
width: 100%;
text-align: center;
animation: fadeIn 1s ease;
}
input, button {
padding: 10px;
margin: 10px 0;
width: 100%;
border-radius: 5px;
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

input {
background: #f3f7ff;
}

button {
background-color: #4a90e2;
color: white;
font-weight: bold;
cursor: pointer;
}

button:hover {
background-color: #357ABD;
transform: scale(1.05);
}

button:active {
background-color: #2b6dad;
transform: scale(1);
}

#timer {
font-size: 24px;
color: #e74c3c;
margin-bottom: 20px;
font-weight: bold;
animation: pulse 1s infinite;
}
#exam-form {
margin-top: 20px;
}

h2 {
color: #4a90e2;
}

#results {
font-size: 18px;
padding: 10px;
background-color: #d4edda;
color: #155724;
border: 2px solid #c3e6cb;
border-radius: 5px;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}

script.js
let events = [
{ id: 1, title: "Math Assignment", status: "completed" },
{ id: 2, title: "Project Submission", status: "pending" },
{ id: 3, title: "Lab Test", status: "upcoming" },
{ id: 4, title: "Final Exam", status: "high-priority" }
];

// Function to load calendar with events


function loadCalendar() {
const calendar = document.getElementById('calendar');
calendar.innerHTML = ''; // Clear existing calendar content

events.forEach(event => {
const eventDiv = document.createElement('div');
eventDiv.className = event.status; // Assign class based on event status
eventDiv.innerHTML = <strong>${event.title}</strong>;
calendar.appendChild(eventDiv);
});

updateProgress();
}

function updateProgress() {
const completed = events.filter(event => event.status === 'completed').length;
const pending = events.filter(event => event.status === 'pending').length;
const offTrack = events.filter(event => event.status === 'high-priority').length;

document.getElementById('completedCount').innerText = completed;
document.getElementById('pendingCount').innerText = pending;
document.getElementById('offTrackCount').innerText = offTrack;
}

// Faculty control functions


function createEvent() {
const title = prompt("Enter event title:");
const status = prompt("Enter event status (completed, pending, upcoming,
high-priority):");

if (title && status) {


events.push({ id: events.length + 1, title, status });
loadCalendar();
}
}

function editEvent() {
const eventId = parseInt(prompt("Enter event ID to edit:"));
const event = events.find(e => e.id === eventId);

if (event) {
const newTitle = prompt("Enter new title:", event.title);
const newStatus = prompt("Enter new status (completed, pending,
upcoming, high-priority):", event.status);

if (newTitle && newStatus) {


event.title = newTitle;
event.status = newStatus;
loadCalendar();
}
} else {
alert("Event not found!");
}
}

function deleteEvent() {
const eventId = parseInt(prompt("Enter event ID to delete:"));
const eventIndex = events.findIndex(e => e.id === eventId);

if (eventIndex > -1) {


events.splice(eventIndex, 1);
loadCalendar();
} else {
alert("Event not found!");
}
}

function shareSchedule() {
alert("Schedule shared with students!");
}

// Load calendar on page load


window.onload = function() {
loadCalendar();
};
Output :-

2.Biodata:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About Me</title>
<link rel="stylesheet" href="stlye.css">
</head>
<body>
<div class="about-container">
<div class="photo-section">
<img src= "000008IMG_00003_BURST1702199574705.jpg" alt="Your
Photo" class="profile-photo">
</div>
<div class="info-section">
<h1>B.Rakesh</h1>
<p class="title">Web Developer | Designer | Problem Solver</p>
<p class="bio">
Hi, I'm Rakesh , a passionate web developer with a love for creating
elegant and efficient solutions.
I specialize in front-end development, user experience, and responsive
design. I enjoy turning complex
problems into simple, beautiful, and intuitive interfaces. Let's create
something amazing together!
</p>
<ul class="details">
<li><strong>Location:</strong> Hyderabad, India</li>
<li><strong>Email:</strong> [email protected]</li>
<li><strong>Phone:</strong>7386176752</li>
</ul>
</div>
</div>
</body>
</html>

You might also like