0% found this document useful (0 votes)
177 views48 pages

Timetable in CSS: Project Title

Download as docx, pdf, or txt
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 48

PROJECT TITLE

TIMETABLE IN CSS

ENROLLMENT NO GROUP MEMBERS


1811480077 ANIKET SURVE
1811480063 CHAITANYA GARUD
1811480088 PRANAY BHOIR
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

PILLAI HOC POLYTECHNIC, RASAYANI (1148)

MICRO PROJECT
ACADEMIC YEAR: 2020-21

TITLE OF PROJECT

Timetable in CSS

……………………………………………………………
Program: Computer engineering Program Code: CO5I
………………………………………………………………………………………..
Course: CSS Course Code: 22519
………………………………………………………………………………………..

Name of the Guide: Jayesh Patil


MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Mr. /Ms. Chaitanya Vasant Garud

Roll No. 08 of 5th Semester of Diploma in Computer engineering

…………………………of Institute PILLAI HOC POLYTECHNIC (Code: 1148) has


completed the Micro Project satisfactorily in Subject –CSS (22519) for the
academic year 2020- 2021 as prescribed in the curriculum.

Place: Rasayani Enrollment No: 1811480063

Date: 06-01-2021 Exam. Seat No: …………………………………….

Subject Teacher Head of the Department Principal


MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Mr. /Ms. Aniket Dadabhau Surve

Roll No. 21 of 5th Semester of Diploma in Computer engineering

…………………………of Institute PILLAI HOC POLYTECHNIC (Code: 1148) has


completed the Micro Project satisfactorily in Subject –CSS (22519) for the
academic year 2020- 2021 as prescribed in the curriculum.

Place: Rasayani Enrollment No: 1811480077

Date: 06-01-2021 Exam. Seat No: …………………………………….

Subject Teacher Head of the Department Principal


MAHARASHTRA STATE
BOARD OF TECHNICAL EDUCATION
Certificate
This is to certify that Mr. /Ms. Pranay Tanaji Bhoir

Roll No. 30 of 5th Semester of Diploma in Computer engineering

…………………………of Institute PILLAI HOC POLYTECHNIC (Code: 1148) has


completed the Micro Project satisfactorily in Subject - CSS (22519) for the
academic year 2020- 2021 as prescribed in the curriculum.

Place: Rasayani Enrollment No: 1811480088

Date: 06-01-2021 Exam. Seat No: …………………………………….

Subject Teacher Head of the Department Principal


Group Details:

Sr. Names of Group Member Roll Enrollment Seat No.


No. No. No.
Chaitanya Garud 1811480063
1 08
Aniket Surve 1811480077
2 21
Pranay Bhoir 1811480088
3 30

Name of the Guide: Jayesh Patil


WEEKLY PROGRESS REPORT

MICRO PROJECT
DATE OF SIGN OF
SR.NO WEEK ACTIVITY OBSERVATION THE GUIDE
.
1 1st Formation of group & Allocation of
Project Topic

2 2nd Information Search

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

11 11th Submission of Project File

12 12th Viva & Checking


Signature of the Guide

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): ……………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………..
………………………………………………………………………………………………………………………………………………..
………………………………………………………………………………………………………………………………………………..

Marks out of 6 Marks out of 4


for performance for
Roll No. Student Name in group activity performance Total out
(D5 Col.8) in oral/ of 10
presentation
(D5 Col.9)
08 Chaitanya Garud

21 Aniket Surve

30 Pranay Bhoir
(Signature of Faculty)

REPORT ON MICROPROJECT OF CSS

Client-side scripting is changing interface behaviors within a specific web page in


response to mouse or keyboard actions, or at specified timing events. In this case, the
dynamic behavior occurs within the presentation. The client-side content is
generated on the user's local computer system.

Such web pages use presentation technology called rich interfaced pages. Client-side


scripting languages like JavaScript or Action Script, used for Dynamic HTML
(DHTML) and Flash technologies respectively, are frequently used to orchestrate
media types (sound, animations, changing text, etc.) of the presentation. Client-side
scripting also allows the use of remote scripting, a technique by which the DHTML
page requests additional information from a server, using a hidden frame, XML Http
Requests, or a Web service.

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"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title data-translator-key="timetable">Timetable</title>

<link rel="stylesheet" type="text/css" href="index.css"/>

<link rel="stylesheet" type="text/css" href="general.css"/>

<link rel="stylesheet" type="text/css" href="fontello/css/fontello.css"/>

<script src="configuration.js"></script>

<script src="translator.js"></script>

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

<link rel="manifest" href="manifest.json"/>

<meta name="theme-color" content="#FFFFFF"/>


<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="Stundenplan">

<link rel="apple-touch-icon" href="icon.png">

</head>

<body>

<div id="collapsing_header">

<h1 data-translator-key="timetable">Timetable</h1>

<a href="settings.html"><button class="icon-settings"></button></a>

</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"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title data-translator-key="timetable"></title>

<link rel="stylesheet" type="text/css" href="general.css"/>

<link rel="stylesheet" type="text/css" href="settings_pages.css"/>

<link rel="stylesheet" type="text/css" href="fontello/css/fontello.css"/>

<script src="configuration.js"></script>

<script src="translator.js"></script>

<script src="color_settings.js"></script>

<link rel="manifest" href="manifest.json"/>

<meta name="theme-color" content="#FFFFFF"/>

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title"content="Stundenplan">

<link rel="apple-touch-icon" href="icon.png">


</head>

<body>

<header>

<a href="settings.html"><h1 data-translator-key="settings"></h1></a>

</header>

<div id="settings_container">

<div id="color_settings_group" class="settings_group closed">

<div class="settings_group_header">

<h2 data-translator-key="colors">Colors</h2>

<button class="positive" data-translator-key="save"


onclick="save();">Save</button>

</div>

<div id="color_input_groups_container"></div>

</div>

</div>

</body>

</html>
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title data-translator-key="timetable"></title>

<link rel="stylesheet" type="text/css" href="general.css"/>

<link rel="stylesheet" type="text/css" href="settings_pages.css"/>

<link rel="stylesheet" type="text/css" href="fontello/css/fontello.css"/>

<script src="configuration.js"></script>

<script src="translator.js"></script>

<script src="general_settings.js"></script>

<link rel="manifest" href="manifest.json"/>

<meta name="theme-color" content="#FFFFFF"/>

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="Stundenplan">

<link rel="apple-touch-icon" href="icon.png">


</head>

<body>

<header>

<a href="settings.html"><h1 data-translator-key="settings"></h1></a>

</header>

<div id="settings_container">

<div class="settings_group closed">

<div class="settings_group_header">

<h2 data-translator-key="general">General</h2>

<button class="positive" data-translator-key="save"


onclick="save();">Save</button>

</div>

<div class="input_group">

<label data-translator-key="language: "


for="language_input">Language:</label>

<input type="text" name="language_input" size="4"/>

</div>

<div class="input_group">
<a><button id="backup_button" data-translator-
key="backup">Backup</button></a>

<label for="restore_file_input">Restore</label>

<input id="restore_file_input" name="restore_file_input" type="file"/>

</div>

<div class="input_group">

<button class="negative" onclick="reset();" data-translator-


key="reset">Reset</button>

</div>

</div>

</div>

</body>

</html>
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-


scale=1"/>

<title data-translator-key="timetable"></title>

<link rel="stylesheet" type="text/css" href="general.css"/>

<link rel="stylesheet" type="text/css" href="settings.css"/>

<link rel="stylesheet" type="text/css"


href="fontello/css/fontello.css"/>

<script src="configuration.js"></script>

<script src="translator.js"></script>

<script src="settings.js"></script>

<link rel="manifest" href="manifest.json"/>

<meta name="theme-color" content="#FFFFFF"/>

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style"
content="black">
<meta name="apple-mobile-web-app-title"
content="Stundenplan">

<link rel="apple-touch-icon" href="icon.png">

</head>

<body>

<header >

<a href="settings.html"><h1 data-translator-


key="settings"></h1></a>

<a href="index.html"><h1 >HOME</h1></a>

</header>

<div id="settings_container">

<div class="settings_group">

<a href="general_settings.html" data-translator-


key="general" class="icon-settings">

General

</a>

<a href="periods_settings.html" data-translator-


key="periods" class="icon-periods">
Periods

</a>

<a href="timetable_settings.html" data-translator-


key="timetable" class="icon-timetable">

Timetable

</a>

<a href="color_settings.html" data-translator-


key="colors" class="icon-colors">

Colors

</a>

</div>

</div>

</body>

</html>
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title data-translator-key="timetable"></title>

<link rel="stylesheet" type="text/css" href="general.css"/>

<link rel="stylesheet" type="text/css" href="settings_pages.css"/>

<link rel="stylesheet" type="text/css" href="fontello/css/fontello.css"/>

<script src="configuration.js"></script>

<script src="translator.js"></script>

<script src="timetable_settings.js"></script>

<link rel="manifest" href="manifest.json"/>

<meta name="theme-color" content="#FFFFFF"/>

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="Stundenplan">

<link rel="apple-touch-icon" href="icon.png">


</head>

<body>

<header>

<a href="settings.html"><h1 data-translator-key="settings"></h1></a>

</header>

<div id="settings_container">

<div id="timetable_settings_group" class="settings_group closed">

<div class="settings_group_header">

<h2 data-translator-key="timetable">Timetable</h2>

<button class="positive" data-translator-key="save"


onclick="save();">Save</button>

</div>

</div>

</div>

</body>

</html>
CSS CODE:-

#collapsing_header {

position: relative;

z-index: 10;

padding: var(--space-0);

padding-bottom: 0;

background: #FFF;

border-bottom: 1px solid #FFF;

#collapsing_header > a {

float:right;

#collapsing_header > a > button {

height: var(--space-5);

width: var(--space-5);

}
header {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

grid-template-rows: 1fr;

justify-items: center;

header > button {

width: var(--space-5);

height: var(--space-5);

border-bottom: 2px solid #FFF;

color: #777;

border-radius: 0;

header > button.open {

color: #000;

border-color: #000;

}
header > button:active {

color: #555;

background-color: #EEE;

#timetable {

display: grid;

grid-template-columns: var(--space-6) 1fr;

grid-template-rows: 1fr;

grid-gap: var(--space--1);

padding: var(--space--1);

#periods_container > .period {

display: flex;

flex-direction: column;

justify-content: center;

height: var(--space-5);

text-align: center;

color: #555;
}

#periods_container > .period > span {

display: block;

font-size: var(--space--1);

#subjects_container > .subject {

height: var(--space-5);

line-height: var(--space-5);

padding: 0 var(--space-0) 0 var(--space-0);

box-sizing: border-box;

font-size: var(--space-0);

transition: opacity 0.15s, transform 0.15s;

border-radius: 5px;

background-color: #FFF;

#subjects_container > * + .subject, #periods_container > * + .period {

margin-top: var(--space--1);

}
.subject.empty {

visibility: hidden;

.subject.hidden {

opacity: 0;

transform: translateY(10px);

#subjects_container > .subject > span:nth-of-type(2) {

float: right;

font-size: var(--space--1);

}
:root {

--ratio: 1.27;

--space-6: calc(var(--space-5) * var(--ratio));

--space-5: calc(var(--space-4) * var(--ratio));

--space-4: calc(var(--space-3) * var(--ratio));

--space-3: calc(var(--space-2) * var(--ratio));

--space-2: calc(var(--space-1) * var(--ratio));

--space-1: calc(var(--space-0) * var(--ratio));

--space-0: 1rem;

--space--1: calc(var(--space-0) / var(--ratio));

--space--2: calc(var(--space--1) / var(--ratio));

--space--3: calc(var(--space--2) / var(--ratio));

@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;

font-family: "Montserrat", sans-serif;

background-color: #EEE;

header {

position: sticky;

top: 0;

left: 0;

width: 100%;

box-sizing: border-box;
z-index: 5;

background-color: #FFF;

box-shadow: 0 0 5px rgba(0,0,0,0.3);

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);

font-family: "Montserrat", sans-serif;

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;

transition:background 0.2s, border 0.4s;

}
button.positive {

color: #0BF;

button.negative {

color: #F53;

button:active {

background-color: #EEE;

@media screen and (min-width: 500px) and (min-height: 500px) {

: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 header = document.getElementsByTagName("header")[0];

var counter = 0;

for (entry of config.data.timetable) {

var new_button = document.createElement("button");

new_button.innerText = entry.day.substring(0,2);
new_button.setAttribute("data-dayNumber", counter);

new_button.addEventListener("click", function(e) {

var header_buttons = document.querySelectorAll("header > button");

for (button of header_buttons) {

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() {

var periods_container = document.getElementById("periods_container");

for (period of config.data.periods) {

periods_container.innerHTML +=
"<div class='period'>" +

`<span>${period.start}</span>` +

`<span>${period.end}</span>` +

"</div>";

function create_subject_divs() {

var subjectsContainer = document.getElementById("subjects_container");

for (let i = 0; i < config.data.periods.length; i++) {

var subjectDiv = document.createElement("div");

subjectDiv.classList.add("subject");

subjectDiv.classList.add("hidden");

subjectDiv.style.transitionDelay = i*0.025 + "s";

subjectDiv.innerHTML = "<span></span><span></span>";

subjectsContainer.append(subjectDiv);

}
}

function add_navigation_events() {

add_swipe_events();

add_keyboard_events();

function add_swipe_events() {

var timetable_div = document.getElementById("timetable");

timetable_div.ontouchstart = function(e_start) {

var touch_start_position = e_start.touches[0].clientX;

timetable_div.ontouchmove = function(e_end) {

var touch_end_position = e_end.touches[0].clientX;

if (touch_start_position < touch_end_position - 75) {

timetable_div.ontouchmove = null;

timetable.display_previous_day();

else if (touch_start_position > touch_end_position + 75) {

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();

else if (e.keyCode == 39) {

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() {

var d = new Date();

dayNumber = (d.getDay() != 0) ? d.getDay() - 1 : 6;

var header_buttons = document.querySelectorAll("header > button");

if (dayNumber >= config.data.timetable.length) {

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;

var header_buttons = document.querySelectorAll("header > button");

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;

var header_buttons = document.querySelectorAll("header > button");

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: {

fill: function (dayNumber) {

var subject_divs = document.querySelectorAll(".subject");

//for (let period = 0; period <


config.data.timetable[dayNumber].schedule.length; period++) {

for (let period = 0; period < config.data.timetable[dayNumber].schedule.length


&& period < config.data.periods.length; period++) {

var subject_name =
config.data.timetable[dayNumber].schedule[period].subject;

var subject_room = config.data.timetable[dayNumber].schedule[period].room;

if (subject_name != "") {

subject_divs[period].classList.remove("empty");

if (typeof config.data.colors[subject_name] != "undefined") {

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() {

var subject_divs = document.querySelectorAll(".subject");

for (div of subject_divs) {

div.classList.remove("hidden");

},

hide: function() {
var subject_divs = document.querySelectorAll(".subject");

for (div of subject_divs) {

div.classList.add("hidden");

};

You might also like