MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

VIDYAVARDHINI’S BHAUSAHEB
VARTAK 0POLYTECHNIC

MICRO PROJECT
Academic year: 2020-21

Title of Micro Project:

Work To Do List

Program/Code: Computer Engineering (CO) Semester: FIFTH

Course/Code: CSS (22519)
Name: Sneden Andrades, Yash Haryan, Lisa Pereira
Enrolment No: 1900930050/52/53
Name of Faculty: Prof. Parvez Vaghela

Dept Roll Enrollment No Name

Serial No No.
19 1836 1900930050 Sneden Andrades
20 1838 1900930052 Yash Haryan
21 1839 1900930053 Lisa Pereira

1
 MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION

Certificate
This is to certify that Ms. Sneden Andrades, Roll No. 1836
of Fifth Semester of Diploma in Computer Engineering Of Institute, B.V.
POLYTECHNIC (Code: 0093) has completedthe Micro Project satisfactorily in
Subject – CSS (22519) for the academic year 2020- 2021 as prescribed in the curriculum.

Place: Vasai Enrolment No: 1900930050

Date: ……………………… Exam. Seat No: …………………………

Subject Teacher Head of the Department Principal

Seal of
Institut
e

2
 Annexure - I
Part A: Micro Project Proposal

1.0 Aim/Benefits of the Micro-Project:

The Aim of Micro Project is to develop a proper working system for to do list in HTML, CSS
& Java script.

2.0 Course Outcomes integrated:

1. Create interactive web pages using program flow control structure
2. Implement arrays and function in JavaScript

3.0 Action Plan

Sr. Planned Planned Name of
Details of the activity
No. Start Finish Members
date date
1. Formation of Group & Topic Selection 15-09-2021 22-09-2021 All members
2. Submission of Proposed Plan 20-10-2021 22-10-2021 Sneden Andrades
3. Preparation of Report 3-11-2021 13-11-2021 Yash Haryan
4. Final valuation of a working Report 17-11-2021 28-11-2021 Lisa Pereira
5. Presentation of Report 28-12-2021 28-12-2021 All members
6. Submission of Final Report 28-12-2021 28-12-2021 All members

4.0 Resources Required

Sr. Qt
Name of resources/Material Specifications Remarks
No. y
Processor: i3
1. Computer 1
RAM: 4.00
GB
2. Microsoft Word Word 2016
3. Printer HP laser jet 1
4. Stationary Papers and files

Name & Signature of Faculty

3
 Annexure- II

Final Micro Project Report

Title: Work to Do List.

1.0 Rationale:
Java Script is limited featured client-side programming language. Java Script runs at the
client end through the user’s browser without sending messages back and forth to the server.
It is widely used by the web developers to do things such as build dynamic web pages,
respond to events, create interactive forms, validate data that the visitor enters into a form,
control the browser etc. This course helps student to create highly interactive web page using
these features.

2.0 Aim/Benefits of the Micro-Project:

The Aim of Micro Project is to develop a proper working system for to do list in HTML, CSS
& Java script.

3.0 Course Outcomes Integrated:

1. Create interactive web pages using program flow control structure
2. Implement arrays and function in JavaScript

4.0 Actual Procedure Followed.

a. Discussion about topic with guide and among group members
b. Literature survey
c. Information collection
d. Compilation of content
e. Editing and revising content
f. Report Preparation

5.0 Actual Resources Required

Sr. No. Name of resources/Material Specifications Qty Remarks
Processo
1. Laptop 1
r: i3
RAM:
4.00 GB
2. Microsoft Word Word 2016
3. Printer HP LaserJet 1
4. Stationary Papers and files

4
6.0 Skill Developed/Learning outcomes of this Micro-Project

The following skills were developed:

1. Teamwork: Learned to work in a team and boost individual confidence.
2. Problem-Solving: Developed good problem-solving habits.
3. Technical Writing: Preparing the report of proposed plan and the final report.

7.0 Learning Outcomes Achieved

In this project we learned how to do list using JavaScript, HTML and CSS. We
understood the basic concepts of the above. Finally, we understood how to implement these
concepts in actual coding.

5
 Annexure - III

Rubrics for Assessment of Micro-Project

Title: Work to Do List.

Institute Code: 0093 Academic year: 2020-21
Program: CO-I Course & Code: CSS (22519)
Name of Candidate: Sneden, Yash, Lisa Roll No: 1836, 1838, 1839

Semester: FIFTH Name of Faculty: Prof. Parvez Vaghela

Sr. Poor Average Good Excellent

Characteristic to be Assessed
No. (Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10)

1. Relevance to the Course

Literature
2.
Survey/Informatio
n Collection
3. Project Proposal
Completion of the Target
4.
as per Project Proposal
5. Analysis of Data
and Representation
6. Quality of Prototype/Model
7. Report Preparation
8. Presentation
9. Defense

6
 INDEX

Sr.
Content Page
No.
No.

1. Introduction 8

2. Description of 9
the Code

3. Code 11

4. Output 16

5. Conclusion 17

6. References 18

7
 TO DO WORKLIST

Introduction
To Do List
To do work list, lists everything that you have to do, with the most important tasks at the top of
the list, and the least important tasks at the bottom. By keeping such a list, you make sure that
your tasks are written down all in one place so you don't forget anything important. One of the
most important reasons you should use a to do list is that it will help you stay organized. When
you write all your tasks in a list, they seem more manageable. When you've got a clear outline of
the tasks you've got to do and those you've completed, it helps you stay focused. It's possible to
have a to-do list that energizes you, helps you prioritize your day, and motivates you to keep
moving forward, even after those inevitable distractions or setbacks. Now a days many apps are
available to work as to do list.

Html
HTML stands for Hyper Text Markup Language. It is the standard markup language for creating
Web pages. It also describes the structure of a Web page. It consists of a series of elements.
HTML elements tell the browser how to display the content. It contains elements label pieces of
content such as "this is a heading", "this is a paragraph", "this is a link", etc.
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

CSS
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed
on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple
web pages all at once. External stylesheets are stored in CSS files. CSS is used to define styles
for your web pages, including the design, layout and variations in display for different devices
and screen sizes.

Java-Script
JavaScript is a text-based programming language used both on the client-side and server-side
that allows you to make web pages interactive. Where HTML and CSS are languages that give
structure and style to web pages, JavaScript gives web pages interactive elements that engage a
user. JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-
known for the development of web page many non-browser environments also use it. JavaScript
can be used for Client-side developments as well as Server-side developments.

8
Program

Description of code
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
inherit - specifies that the margin should be inherited from the parent element

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
padding-left

CSS Setting height and width

The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.

CSS links
The four links states are:
• a: link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
Add background colors to lists and list items

Divisions- The <div> ta defines a division or a section in an HTML document. It is also used as
a container for HTML elements- which is then styled with CSS or manipulated with Java-script.
It is easily styled by using the class or id attribute.

CSS Font property is used to control the look of texts. By the use of CSS font property, you can

9
change the text size, color, style and more. You have already studied how to make text bold or
underlined. Here, you will also know how to resize your font using percentage. These are some
important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and lightness
of the font.
7. CSS Background: This property is used to define the background effects on element.
There are 5 CSS background properties that affects the HTML elements:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position

Javascript document.getElementById() method

1.getElementById() method
2.Example of getElementById()

The document.getElementById() method returns the element of specified id.

In the previous page, we have used document.form1.name.value to get the value of the input
value. Instead of this, we can use document.getElementById() method to get value of the input
text. But we need to define id for the input field.

Events Description

onclick occurs when element is clicked.

onsubmit occurs when form is submitted.

onload occurs when document, object or frameset is loaded.

onunload occurs when body or frameset is unloaded.

onreset occurs when form is reset.

10
Code
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            min-width: 250px;
        }

        /* Include the padding and border in an element's total width and height
*/
        * {
            box-sizing: border-box;
        }

        /* Remove margins and padding from the list */

        ul {
            margin: 0;
            padding: 0;
        }

        /* Style the list items */

        ul li {
            cursor: pointer;
            position: relative;
            padding: 12px 8px 12px 40px;
            list-style-type: none;
            background: #eee;
            font-size: 18px;
            transition: 0.2s;

            /* make the list items unselectable */

            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Set all odd list items to a different color (zebra-stripes) */

        ul li:nth-child(odd) {
            background: #f9f9f9;
        }

11
        /* Darker background-color on hover */
        ul li:hover {
            background: #ddd;
        }

        /* When clicked on, add a background color and strike out text */
        ul li.checked {
            background: #888;
            color: #fff;
            text-decoration: line-through;
        }

        /* Add a "checked" mark when clicked on */

        ul li.checked::before {
            content: '';
            position: absolute;
            border-color: #fff;
            border-style: solid;
            border-width: 0 2px 2px 0;
            top: 10px;
            left: 16px;
            transform: rotate(45deg);
            height: 15px;
            width: 7px;
        }

        /* Style the close button */

        .close {
            position: absolute;
            right: 0;
            top: 0;
            padding: 12px 16px 12px 16px;
        }

        .close:hover {
            background-color: #f44336;
            color: white;
        }

        /* Style the header */

        .header {
            background-color: #f44336;
            padding: 30px 40px;
            color: white;

12
            text-align: center;
        }

        /* Clear floats after the header */

        .header:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Style the input */

        input {
            margin: 0;
            border: none;
            border-radius: 0;
            width: 75%;
            padding: 10px;
            float: left;
            font-size: 16px;
        }

        /* Style the "Add" button */

        .addBtn {
            padding: 10px;
            width: 25%;
            background: #d9d9d9;
            color: #555;
            float: left;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
            border-radius: 0;
        }

        .addBtn:hover {
            background-color: #bbb;
        }
    </style>
</head>

<body>

    <div id="myDIV" class="header">

        <h2 style="margin:5px">My To Do List</h2>

13
        <input type="text" id="myInput" placeholder="Title...">
        <span onclick="newElement()" class="addBtn">Add</span>
    </div>

    <ul id="myUL">
        <li class="checked">Hit the gym</li>
        <li class="checked">Pay bills</li>
        <li>Meet George</li>
        <li>Buy eggs</li>
        <li>Read a book</li>
        <li>Organize office</li>
    </ul>

    <script>
        // Create a "close" button and append it to each list item
        var myNodelist = document.getElementsByTagName("LI");
        var i;
        for (i = 0; i < myNodelist.length; i++) {
            var span = document.createElement("SPAN");
            var txt = document.createTextNode("\u00D7");
            span.className = "close";
            span.appendChild(txt);
            myNodelist[i].appendChild(span);
        }

        // Click on a close button to hide the current list item

        var close = document.getElementsByClassName("close");
        var i;
        for (i = 0; i < close.length; i++) {
            close[i].onclick = function () {
                var div = this.parentElement;
                div.style.display = "none";
            }
        }

        // Add a "checked" symbol when clicking on a list item

        var list = document.querySelector('ul');
        list.addEventListener('click', function (ev) {
            if (ev.target.tagName === 'LI') {
                ev.target.classList.toggle('checked');
            }
        }, false);

        // Create a new list item when clicking on the "Add" button

        function newElement() {

14
            var li = document.createElement("li");
            var inputValue = document.getElementById("myInput").value;
            var t = document.createTextNode(inputValue);
            li.appendChild(t);
            if (inputValue === '') {
                alert("You must write something!");
            } else {
                document.getElementById("myUL").appendChild(li);
            }
            document.getElementById("myInput").value = "";

            var span = document.createElement("SPAN");

            var txt = document.createTextNode("\u00D7");
            span.className = "close";
            span.appendChild(txt);
            li.appendChild(span);

            for (i = 0; i < close.length; i++) {

                close[i].onclick = function () {
                    var div = this.parentElement;
                    div.style.display = "none";
                }
            }
        }
    </script>

</body>

</html>

15
Output

16
 Conclusion
The main aim of developing to do work list is to provide a place to have updates about their
work the users. User’s friendliness is a must that is the user must be able to update and delete the
list. Hence, we have learnt about website successfully.

We have successfully developed a website of to do list with help of html, java script and css.

17
 Reference
 https://www.google.com/
 https://www.w3schools.com/
 code-projects.org
 www.javatpoint.com
 https://css-tricks.com/
 https://www.geeksforgeeks.org/
 www.youtube.com
 Nirali Publication Book

18