Timetable in CSS: Project Title
Timetable in CSS: Project Title
Timetable in CSS: Project Title
TIMETABLE IN CSS
MICRO PROJECT
ACADEMIC YEAR: 2020-21
TITLE OF PROJECT
Timetable in CSS
……………………………………………………………
Program: Computer engineering Program Code: CO5I
………………………………………………………………………………………..
Course: CSS Course Code: 22519
………………………………………………………………………………………..
MICRO PROJECT
DATE OF SIGN OF
SR.NO WEEK ACTIVITY OBSERVATION THE GUIDE
.
1 1st Formation of group & Allocation of
Project Topic
3 3rd
Ideas about how to do project
4 4th
Discussion of Micro Project
5 5th
First Report Checking
6 6th
Discussion & Points given for project file
preparation
7 7th
Editing of project file
8 8th
Second Report Checking
9 9th
Final Report Checking
10 10th Submission of Project/ Charts
ANNEXURE II
Evaluation Sheet for the Micro Project
Academic Year: 2020-2021 Name of the Faculty: ………………………………………………
Course: CSS Course Code: 22519 Semester: 5th
Title of the Project: House hold water filtration system.
………………………………………………………………………………………………………………………………………………..
COs addressed by Micro Project:
A:
B:
Major learning outcomes achieved by students by doing the project:
Practical Outcome: ………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………..
Unit outcomes in Cognitive domain: ………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………..
Outcomes in Affective domain: ………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………..
Comments/suggestions about team work /leadership/inter-personal communication (if
any): ……………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………..
………………………………………………………………………………………………………………………………………………..
………………………………………………………………………………………………………………………………………………..
21 Aniket Surve
30 Pranay Bhoir
(Signature of Faculty)
In our project we have developed a website in which we have create a timetable for
students with various functionality.
We have menu bar as the name of the weeks. Form validation normally used to occur
at the server, after the client had entered all the necessary data and then pressed the
Save button.
We have used HTML (Hyper Text Markup Language) for our front end design. For
backup functions we have used Java Script for form validation. Why is this necessary
to create this kind of website to improve the experience the students and to improve
the user experience we have used or create or separate sections and in different
sections we have used different elements of java script?
CODE OF THE PROJECT
HTML CODE:-
<!doctype html>
<<head>
<title>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title data-translator-key="timetable">Timetable</title>
<script src="configuration.js"></script>
<script src="translator.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="collapsing_header">
<h1 data-translator-key="timetable">Timetable</h1>
</div>
<header></header>
<div id="timetable">
<div id="periods_container"></div>
<div id="subjects_container"></div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title data-translator-key="timetable"></title>
<script src="configuration.js"></script>
<script src="translator.js"></script>
<script src="color_settings.js"></script>
<meta name="apple-mobile-web-app-title"content="Stundenplan">
<body>
<header>
</header>
<div id="settings_container">
<div class="settings_group_header">
<h2 data-translator-key="colors">Colors</h2>
</div>
<div id="color_input_groups_container"></div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title data-translator-key="timetable"></title>
<script src="configuration.js"></script>
<script src="translator.js"></script>
<script src="general_settings.js"></script>
<body>
<header>
</header>
<div id="settings_container">
<div class="settings_group_header">
<h2 data-translator-key="general">General</h2>
</div>
<div class="input_group">
</div>
<div class="input_group">
<a><button id="backup_button" data-translator-
key="backup">Backup</button></a>
<label for="restore_file_input">Restore</label>
</div>
<div class="input_group">
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title data-translator-key="timetable"></title>
<script src="configuration.js"></script>
<script src="translator.js"></script>
<script src="settings.js"></script>
<meta name="apple-mobile-web-app-status-bar-style"
content="black">
<meta name="apple-mobile-web-app-title"
content="Stundenplan">
</head>
<body>
<header >
</header>
<div id="settings_container">
<div class="settings_group">
General
</a>
</a>
Timetable
</a>
Colors
</a>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title data-translator-key="timetable"></title>
<script src="configuration.js"></script>
<script src="translator.js"></script>
<script src="timetable_settings.js"></script>
<body>
<header>
</header>
<div id="settings_container">
<div class="settings_group_header">
<h2 data-translator-key="timetable">Timetable</h2>
</div>
</div>
</div>
</body>
</html>
CSS CODE:-
#collapsing_header {
position: relative;
z-index: 10;
padding: var(--space-0);
padding-bottom: 0;
background: #FFF;
#collapsing_header > a {
float:right;
height: var(--space-5);
width: var(--space-5);
}
header {
display: grid;
grid-template-rows: 1fr;
justify-items: center;
width: var(--space-5);
height: var(--space-5);
color: #777;
border-radius: 0;
color: #000;
border-color: #000;
}
header > button:active {
color: #555;
background-color: #EEE;
#timetable {
display: grid;
grid-template-rows: 1fr;
grid-gap: var(--space--1);
padding: var(--space--1);
display: flex;
flex-direction: column;
justify-content: center;
height: var(--space-5);
text-align: center;
color: #555;
}
display: block;
font-size: var(--space--1);
height: var(--space-5);
line-height: var(--space-5);
box-sizing: border-box;
font-size: var(--space-0);
border-radius: 5px;
background-color: #FFF;
margin-top: var(--space--1);
}
.subject.empty {
visibility: hidden;
.subject.hidden {
opacity: 0;
transform: translateY(10px);
float: right;
font-size: var(--space--1);
}
:root {
--ratio: 1.27;
--space-0: 1rem;
@font-face {
font-family: "Montserrat";
font-weight: 400;
src: url("Montserrat/Montserrat-Medium.ttf");
}
@font-face {
font-family: "Montserrat";
font-weight: 600;
src: url("Montserrat/Montserrat-Bold.ttf");
body {
line-height: 1.27;
font-size: var(--space-0);
margin: 0;
background-color: #EEE;
header {
position: sticky;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
z-index: 5;
background-color: #FFF;
header + * {
max-width: 700px;
margin: auto;
h1 {
font-size: var(--space-2);
line-height: var(--space-5);
margin: 0;
display: inline-block;
h2 {
font-size: var(--space-1);
}
input, button {
font-size: var(--space--1);
height: var(--space-3);
border:0;
padding: 0 var(--space--1);
border-radius: 5px;
input {
background: #eee;
button {
background-color: #FFF;
text-transform: uppercase;
font-weight: 600;
}
button.positive {
color: #0BF;
button.negative {
color: #F53;
button:active {
background-color: #EEE;
:root {
--space-0: 1.2rem;
}
JAVASCRIPT CODE:-
window.onload = function() {
config.load_data();
translator.translate_ui();
dom_setup();
add_navigation_events();
timetable.display_current();
function dom_setup() {
create_header_buttons();
fill_periods_container();
create_subject_divs();
function create_header_buttons() {
var counter = 0;
new_button.innerText = entry.day.substring(0,2);
new_button.setAttribute("data-dayNumber", counter);
new_button.addEventListener("click", function(e) {
button.classList.remove("open");
e.target.classList.add("open");
timetable.display_for_day(e.target.getAttribute("data-dayNumber"));
});
header.append(new_button);
counter++;
function fill_periods_container() {
periods_container.innerHTML +=
"<div class='period'>" +
`<span>${period.start}</span>` +
`<span>${period.end}</span>` +
"</div>";
function create_subject_divs() {
subjectDiv.classList.add("subject");
subjectDiv.classList.add("hidden");
subjectDiv.innerHTML = "<span></span><span></span>";
subjectsContainer.append(subjectDiv);
}
}
function add_navigation_events() {
add_swipe_events();
add_keyboard_events();
function add_swipe_events() {
timetable_div.ontouchstart = function(e_start) {
timetable_div.ontouchmove = function(e_end) {
timetable_div.ontouchmove = null;
timetable.display_previous_day();
timetable_div.ontouchmove = null;
timetable.display_next_day();
}
};
};
function add_keyboard_events() {
window.addEventListener("keydown", function(e) {
if (e.keyCode == 37) {
timetable.display_previous_day();
timetable.display_next_day();
});
};
var timetable = {
currently_shown_day_number: 0,
display_for_day: function(dayNumber) {
timetable.currently_shown_day_number = dayNumber;
timetable.subject_divs.hide();
setTimeout(function() {
timetable.subject_divs.fill(dayNumber);
timetable.subject_divs.show();
}, 450);
},
display_current: function() {
header_buttons[0].classList.add("open");
timetable.display_for_day(0);
else {
header_buttons[dayNumber].classList.add("open");
timetable.display_for_day(dayNumber);
},
display_previous_day: function() {
var previous_day_number;
if (timetable.currently_shown_day_number != 0) {
previous_day_number = parseInt(timetable.currently_shown_day_number) - 1;
header_buttons[previous_day_number].click();
},
display_next_day: function() {
var next_day_number;
if (timetable.currently_shown_day_number != config.data.timetable.length - 1)
{
next_day_number = parseInt(timetable.currently_shown_day_number) + 1;
header_buttons[next_day_number].click();
},
subject_divs: {
var subject_name =
config.data.timetable[dayNumber].schedule[period].subject;
if (subject_name != "") {
subject_divs[period].classList.remove("empty");
subject_divs[period].style.color = config.data.colors[subject_name];
else {
subject_divs[period].style.color = "#000";
subject_divs[period].querySelectorAll("span")[0].innerText = subject_name;
subject_divs[period].querySelectorAll("span")[1].innerText = subject_room;
else {
subject_divs[period].classList.add("empty");
},
show: function() {
div.classList.remove("hidden");
},
hide: function() {
var subject_divs = document.querySelectorAll(".subject");
div.classList.add("hidden");
};