Minor Project Report A On “Project Title” Submitted in partial fulfilment for the award of the degree of BACHELOR OF COMPUTER APPLICATIONS from CHAUDHARY CHARAN SINGH UNIVERSITY, MEERUT (Session: 2022-23) Meerut Institute of Technology (Professional Courses), Meerut Submitted To: Submitted By: Mr. Lalit Kumar Name: HOD, BCA Deptt. BCA 5th Sem Roll No: 1 TABLE OF CONTENTS Content Page No. 1. Declaration 3 2. Certificate 4 3. Acknowledgement 5 4. Abstract 6 5. Introduction of the Project 9 6. Objectives of the Project 15 7. Hardware and Software Requirements 18 8. Project Analysis & Designing 19 - DFD - ER Diagram 9. Modules 27 - Process logic of each module 10. Input / Output Screenshot 33 11. Coding 40 12. Testing 73 13. Future Scope 75 14. References 77 2 DECLARATION I, ________________, bearing roll number ____________, hereby declare that the work which is being presented in the Minor Project, entitled “__________________________” in partial fulfilment for award of Degree of “Bachelor of Computer Applications” in Department of Computer Application is submitted under the Guidance of “.....................”. I have not submitted the matter presented in this work anywhere for the award of any other Degree. Date: .............................. Student Name: ............... Roll No.: ....................... 3 CERTIFICATE Certified that the Project Report entitled “_______________________________” submitted by_______________ bearing roll no.______________ in partial fulfilment of the requirements for the award of the degree of Bachelor of Computer Applications is a record of the student’s own work carried out under my supervision and guidance. To the best of our knowledge, this Minor Project work has not been submitted anywhere for the award of any other Degree. It is further understood that by this certificate the undersigned does not endorser approve of any statement made, opinion expressed or conclusion drawn therein but approve Minor Project for the purpose for which it is submitted. ……………... Mr. Lalit Kumar (Project-Guide) (HOD, BCA Deptt.) 4 ACKNOWLEDGEMENT Many people have supported me, in different ways, during the work with the minor project. I’d like to thank my guide ………………. & HOD Mr. Lalit Kumar for their kind and active support and valuable guidance during the work process. My family has, as always, offered me their unconditional support, during my efforts in completing this Minor Project. However, it would not have been possible without the kind support of many individuals and institution. I would like to extend my sincere thanks to each and every members related to MIT (PC). Student Name: BCA Vth Sem Roll No.: 5 ABSTRACT A to-do list is a list of tasks that need to be completed, typically organized in order of priority. It is one of the simplest solutions for task management and provides a minimal and elegant way for managing tasks a person wishes to accomplish. Our aim is to design a simple and elegant website for people to keep a track of the status of their tasks. Making a to-do list is an easy and important task that everyone should do. The immense satisfaction that one gets when completing the task and marking it on the list are incomparable. Moreover, creating a list of tasks ensure you don’t miss out on anything. It’s a scientific fact that when you write the tasks that youneed to complete, you are even more motivated to complete it. With this in mind, we come to build a platform which will help people create their own task list. With the help of modern tools and technologies, we strive to build a minimal and efficient to-do list which minimizes distractions and helps people achieve task management with ease and without hassle. 6 GRAPHICAL ABSTRACT Fig. Graphical Abstract (i) 7 Fig. Graphical Abstract (ii) 8 CHAPTER 1: INTRODUCTION A to-do list is a simple prioritized list of the tasks a person must complete. People make a list of everything they need to do, ranked according to priority from the mostcritical task at the top to the least critical task at the bottom A few of the features of a good to-do list application include: • Plan and execute simple actions. • Prioritize, manage, and reason about tasks. • Record notes, action items and ideas. To-dos are the tasks or the atomic entities that make up a to-do list. To-dos are made quickly, the bulk of them do not specify the work; instead, they are typically just comprehensive enough to serve as a valuable indicator. To be sure, to-do terminologylike "Groceries" or "Car Wash" is frequently grammatically correct. Because the signal is so quick, it is only useful for a short period of time while the task is remembered. In certain cases, a simple item like a stack is enough to recall the job without the need for a note. There are clear immediate implications to adding a to-do list to a person’s productivity system. The functionalities provided by a good to-do list application/system help declutter the user’s mind as their pending tasks are recordedsafely and they won’t be forgotten. The To-do list project is a user-friendly website which helps them to keep a track of their tasks. It is a simple site which requires no sign-in/log-in or any personal details but still records your task, mark the completed tasks, and stores them even if you visit the site after a few days. 9 Traditionally, they’re written on a piece of paper or post it notes and acts as a memoryaid. As technology has evolved, we have been able to create a to-do lists with excel spreadsheets, word documents, to-do list apps, Microsoft to do and google to do list to name a few. You can use to do list in your home and personal life, or in the workplace. The Benefits of Using a To Do List 1. Improves your memory: A to do list acts as an external memory aid. It’s only possible to hold a few pieces of information at one time. Keep a to do list and you’ll be able to keep track of everything, rather than just a few of the tasks you need to do. Your to do list will also reinforce the information, which makesit less likely you’re going to forget something. 2. Increases productivity: A to do list allows you to prioritize the tasks that are more important. This means you don’t waste time on tasks that don’t require your immediate attention. 3. Helps with motivation: To do lists are a great motivational tool because you can use them to clarify your goals. You can divide your long-term goal into more achievable short-term goals and as you tick each one off your list, your confidence will increase. 10 1.1 TASK MANAGEMENT From an articulation standpoint, task management entails more than just organizingvirtual and physical collections and scheduling activities. Recent research has begun to address the problem of generic task management in the context of email. This development is hardly surprising, given that many digital device users are overloaded by the number of chores done through email. According to this research, any successful productivity tool must be tightly connected with email functionalities. Recent researches looked at task management strategies more generally because email and related technologies are unlikely to be the whole picture. 1.2 TO-DO LIST AS A SOLUTION TO TASK MANAGEMENT The concept of to-do list has existed for a very long time and it is one of the primary methods for management of tasks, use of a to-dos as a reminder system, to-dos as a system for note management, etc. In the simplest and most primitive form, a to-do listcan be implemented on a pen and paper as a checklist of items which can be crossed of or ticked against when completed. This can be further extended to calendars, by writing tasks against dates where the dates can also act as deadlines for particular tasks. Other possible extensions of todolists can be on whiteboards, journals, text editors, etc. The functionalities of to-do lists naturally evolve to perfectly fit web applications andapplications on digital devices. Equipped with modern tools and technologies, engineers can build an application to create a minimal and powerful application that can help boost productivity without loss of focus and attention. 11 With the computing power and persistence of modern devices and databases, losingtrack of tasks will not be a problem people will have to face anymore and they can rest assured, only focused on the tasks they will have to accomplish as with moderntechnology and the power of digital devices, integration will be seamless and tasks can be synced across multiple devices all at once, without any hassle. Essential Functionalities: A variety of methods for examining and managing to-dos that go beyond listsand mirror the advantages of current resources. The inconvenient property, such as when it becomes the default spot foreveryday tasks where reminders can be satisfied. Immediately turns on, allowing for quick input and clear view. Conventionalto-do lists are commonly abandoned due to slow, timeconsuming input and weak output. No formal job description, classification, or decomposition is required from users, and any degree of abstraction for atomic task entries must be permitted. A mechanism for dealing with stale, low-priority to-dos that are becoming lesslikely to be performed but have not been explicitly deleted. 12 1.3 GANTT CHART Name of the task Start date End date Duration Project kick off 7/14/2022 7/15/2022 1 Initial design 7/16/2022 7/20/2022 4 Making of prototype 7/21/2022 7/28/2022 7 Research 08/01/2022 08/07/2022 6 Adding functionality to prototype 08/08/2022 08/14/2022 6 Initiating development 08/15/2022 08/20/2022 5 Finalizing design 08/21/2022 08/24/2022 3 Developing prototype 08/25/2022 08/28/2022 3 Testing functionality 08/29/2022 08/31/2022 2 Implementing the solution 09/01/2022 09/06/2022 4 Initiating integration of modules 09/07/2022 09/12/2022 5 Finalizing essential functionalities 09/13/2022 09/20/2022 7 Planning add-on functionalities 09/21/2022 09/26/2022 5 Implementing add-on functionalities 09/27/2022 09/30/2022 3 Testing of the project 10/01/2022 10/06/2022 5 Implement improvements and debugging 10/07/2022 10/10/2022 3 Table 1.1 13 1.4 START DATE AND DURATION Fig. 1.1 14 CHAPTER 2: OBJECTIVE To-do lists offer a way to increase productivity, stopping you from forgetting things, helps prioritize tasks, manage tasks effectively, use time wisely and improve time management as well as workflow. Making a to-do list is an easy and important task that everyone should do. The immense satisfaction that one gets when completing the task and marking it onthe list is incomparable. Moreover, creating a list of tasks ensures you don’t miss out on anything. It’s a scientific fact that when you write the tasks that you need to complete, you are even more motivated to complete it. With this in mind, we come to build a platform which will help people create their own task list. The main goals we hope to accomplish with this project include: 2.1 MINIMAL INTERFACE The primary focus of our application on the user interface aspect is minimalism. It should only provide the basic functionalities of a to-do list andnot anything unnecessary as that is a hinderance to focus and productivity of a user. 2.2 FREE TO USE The to-do list application build for this project is completely free to use to any and everyone. The only requirement of this application is to have a device capable of running a web browser. 15 2.3 OPEN SOURCE To-do list is open source and its code repository is publicly available on GitHub. It is open to contributions and improvements by anyone who wishes to contribute to it. It is also free for modification and personal use. A brief overview of open-source projects: Open-source software is software with source code that anyone can inspect, modify, and enhance. "Source code" is the part of software that most computerusers don't ever see; it's the code computer programmers can manipulate to change how a piece of software—a "program" or "application"—works. Programmers who have access to a computer program's source code can improve that program by adding features to it or fixing parts that don't always work correctly. 2.4 AD-FREE There is no incentive for generation of revenue through this project so it will forever remain ad-free and clutter free. 2.5 EFFICIENT Very few resources are required to store and run the application. 16 CONCLUSION The to-do list developed for this project is meant to be a minimal, free and open-source application that can help improve the productivity of a user without taking anything. It aims to solve at least some of the problems discussed earlier in this report. 17 CHAPTER 3: HARDWARE & SOFTWARE REQUIREMENTS 3.1 HARDWARE REQUIREMENTS Pentium IV or higher, (PIV-300GHz recommended) 256 MB RAM 1 Gb hard free drive space 3.2 SOFTWARE REQUIREMENTS Front-end Tech Stack: HTML CSS Bootstrap JavaScript Back-end Tech Stack: Node.js Express.js EJS MongoDB Tools/ Platforms: VS CODE Web Browser: Microsoft Internet Explorer, Mozilla, Google Chrome or later Operating System: Windows/ MacOS/ Linux Git Cyclic (for deployment) 18 CHAPTER 4: PROJECT ANALYSIS & DESIGNING Concept Generation, Evaluation & Selection of Specifications/Features, Design Constraints– Regulations, Economic, Environmental, Health, manufacturability, Safety, Professional, Ethical, Social & Political Issues considered in design, Analysisand Feature finalization subject to constraints, Design Flow (at least 2 alternative designs to make the project), Best Design selection (supported with comparison and reason) and Implementation plan ((Flowchart /algorithm/ detailed block diagram)). 4.1 CONCEPT GENERATION In order to do manage tasks, the concept of to-do lists was formulated to provide a simple, hassle-free solution to the problem of taking short notes and recording the daily tasks that a person needs to complete. We extend this concept and implement itusing modern tools and technologies. 4.2 EVALUATION & SELECTION OF SPECIFICATIONS/ FEATURES In order to do manage tasks, the concept of to-do lists was formulated to provide a simple, hassle-free solution to the problem of taking short notes and recording the daily tasks that a person needs to complete. We extend this concept and implement itusing modern tools and technologies. 19 4.3 DESIGN CONSTRAINTS 1. ECONOMIC: To-do list is free to use. However, damage to a device’s software and/or hardware due to improper modification of this application is always a possibility. 2. ENVIRONMENTAL: The use of To-do list does not generate any environmental concerns. The possible causes ofany problems may be from the hardware not being disposed properly which would lead to e-waste generation. 3. HEALTH: There are no health constraints. The only issues and problems that may arise might be due to the devices and hardware that the user uses. In case of any such situation or in the event of any problem or emergency in which the user feels biological discomfort, it is suggested to immediately seek professional medical assistance. 4. MANUFACTURABILITY: As To-do list is digital software, there seem to be less issues with manufacturability. 5. SAFETY: To-do list it does not guarantee the physical safety of users. In case of intimidation orunderhanded malicious extortions, it is advised to seek police aid. 6. PROFESSIONAL: With the constant development in new technologies revolving around to-do list applications, new professional services are required to be 20 developed as well. However, thesewill heavily depend on the regulations from the government. 4.4 PROFESSIONAL, ETHICAL, SOCIAL & POLITICAL ISSUES CONSIDERED IN DESIGN There are no professional, ethical, social or political issues revolving aroundthe design of our to-do list application. 4.5 ANALYSIS & FEATURE FINALIZATION SUBJECT TO CONSTRAINTS The features of the to-do list applications include : 1. Viewing all the tasks in a user’s to-do list 2. Marking a task as completed, changing its priority to 0 3. Tasks are ordered by priority of importance 4. Deletion of tasks 5. Attributing due dates to tasks 6. Tasks are highlighted when they are close to due or overdue 7. Adding tasks to a user’s to-do list 21 4.6 DESIGN FLOW 4.6.1 FINAL DESIGN Fig 4.1 Entity-Relationship Diagram (ERD) Fig 4.2 Data Flow Diagram (DFD) 22 4.6.2 ALTERNATIVE DESIGNS • One possible alteration to the design of the project is to add location-based tasktracking to remind a user to complete a task triggered by the location of the user. This design was not chosen for the project because location services consume significantly more resources and thus it would render the applicationinefficient for mobile devices. • E-mail based reminders can also be seen as alternative design for the project but were not implemented because they require access to a user’s email and details, which could possibly risk user anonymity and be a potential securityrisk without adding proper security middleware to the project. 4.6 BEST DESIGN The final design chosen for the implementation of this project was to divide it into three main components: the frontend, backend and database. The frontend is themedium through which the user can interact with the application and utilize the necessary functionalities of the application. The backend is a two-way bridge betweenthe database and the frontend. It ensures security, transfer and integrity of data that flows from the database to the frontend of the application. The database is basically a store of all the information a user wishes to persistently store. It is responsible for storage, persistence, integrity and retrieval of data. The technologies used for the implementation of this project are : ReactJS for frontend, Node.js for backend and MongoDB for database as the primary focus of this project is simplicity. 23 The main functionalities that were added to this project are: 1. Viewing all the tasks in a user’s to-do list 2. Marking a task as completed, changing its priority to 0 3. Tasks are ordered by priority of importance 4. Deletion of tasks 5. Attributing due dates to tasks 6. Tasks are highlighted when they are close to due or overdue 7. Adding tasks to a user’s to-do list 24 4.1.7 IMPLEMENTATION PLAN The implementation plan and timeline shown through a Gantt chart: Name of the task Start date End date Duration Project kick off 7/14/2022 7/15/2022 1 Initial design 7/16/2022 7/20/2022 4 Making of prototype 7/21/2022 7/28/2022 7 Research 08/01/2022 08/07/2022 6 Adding functionality to prototype 08/08/2022 08/14/2022 6 Initiating development 08/15/2022 08/20/2022 5 Finalizing design 08/21/2022 08/24/2022 3 Developing prototype 08/25/2022 08/28/2022 3 Testing functionality 08/29/2022 08/31/2022 2 Implementing the solution 09/01/2022 09/06/2022 4 Initiating integration of modules 09/07/2022 09/12/2022 5 Finalizing essential functionalities 09/13/2022 09/20/2022 7 Planning add-on functionalities 09/21/2022 09/26/2022 5 Implementing add-on functionalities 09/27/2022 09/30/2022 3 Testing of the project 10/01/2022 10/06/2022 5 10/07/2022 10/10/2022 3 Implement improvements anddebugging Table 4.1 25 Fig 4.3 Gantt Chart 26 CHAPTER 5: MODULES As discussed earlier, productivity and task management entails more than just organizing virtual and physical collections and scheduling activities. Recent research has begun to address the problem of generic task management in the context of email. This development is hardly surprising, given that many digital device users are overloaded by the number of chores done through email. According to this research, any successful productivity tool must be tightly connected with emailfunctionalities. Recent researches looked at task management strategies more generally because email and related technologies are unlikely to be the whole picture. 5.1.1 EVOLUTION OF TO-DO LIST The idea of plan for the day has existed for quite a while and it is one of the essentialtechniques for the board of assignments, utilization of a tasks as an update framework, tasks as a framework for note the executives, and so on. In the least difficult and most crude structure, a plan for the day can be executed on a pen and paper as an agenda of things which can be crossed of or ticked against when finished. This can be additionally reached out to schedules, by composing undertakings againstdates where the dates can likewise go about as cutoff times for specific assignments. Other potential augmentations of plans for the day can be on whiteboards, diaries, text editors, etc. 27 The functionalities of plans for the day normally develop to fit web applications and applications on advanced gadgets flawlessly. Furnished with current apparatuses and advancements, specialists can fabricate an application to make a negligible and strongapplication that can assist with supporting efficiency without loss of concentration and consideration. With the processing power and steadiness of current gadgets and data sets, forgetting about assignments won't be an issue individuals should confront any longer and they can have confidence, just centered around the errands they should achieve similarly as with present day innovation and the force of advanced gadgets, combination will be consistent and undertakings can be adjusted across different gadgets at the sametime, with next to no problem. 5.1.2 ESSENTIAL FUNCTIONALITIES 1. An assortment of strategies for analyzing and figuring out how tasks that gopast records and mirror the upsides of current assets. 2. The awkward property, for example, when it turns into the default spot forordinary errands where updates can be fulfilled. 3. Promptly turns on, taking into consideration fast information and clear view.Regular plans for the day are ordinarily deserted because of slow, tedious information and frail result. 4. No conventional set of working responsibilities, order, or deterioration is expected from clients, and any level of reflection for nuclear errand sectionsshould be allowed. 5. An instrument for managing low-need tasks that are turning out to be less inclined to be performed yet have not been expressly erased. 28 5.1.3 INTEGRATION WITH OTHER TECHNOLOGIES A To-do list is a simple and somewhat independent entity, which makes it easy to integrate with related technologies to help create a better system of productivity overall. Various studies have pointed towards and shed light on how well e-mail as a technology can be seamlessly integrated with to-do list technologies and the synergyof these two technologies help boost productivity greatly as e-mail and social media have now become an essential technology that people need to have access to in orderto be a productive member of any organization or institution as these have now become an essential part of everyday life. Collaborative task management is also one of the problems that can be solved througha well designed and engineered to-do list application such as Trello, a web based, Kanban-style list application which helps teams organize their tasks and stay in sync when working collaboratively on a project. Another example of a well integrated to-do list application is Google Tasks, a todo list application which is completely synchronized with other Google and third party services such as Google Calendar, Mail, Clock, etc. Such well integrated applicationshelp build a highly effective productivity system for a user. 29 5.1.4 GAMIFICATION Gamification is the process of adding game elements into non-game environments such as a website, productivity systems, or corporate intranet. Gamification encourages consumers, employees, and partners to collaborate, contribute, and interact by including them in games. As shown by studies in Kappen, adding an element of gratification through gamification boosts engagement of users to platforms, even when it comes to productivity. 5.2 PROBLEM DEFINITION 5.2.1 INTRODUCTION The current state of task management through currently available to-do list applications is a hotch-potch, to say the least. The highly available and most used to-do list applications are heavily bloated and provide unnecessary levels of integrations which are usually not required and clutter a user’s productivity system. A lot of good to-do list applications are not free to use and usually run ads to generate revenue, which is a huge negative point when it comes to productivity apps. Ones which are run by large companies are usually trying to pull users towards their own app ecosystem through non-sensical integrations and bloatware. Some of the most glaring issues of to-do list productivity applications are discussed in this chapter as we try to identify the problems and shortcomings of currently available solutions and build our project to overcome the shortcomings. 30 5.2.2 UNNECESSARY INTEGRATIONS For most of the to-do list applications available to use, they are not independent entities or applications. Most of these applications are usually meant to be used with other applications to form a “productivity system” where a user’s calendar, clock, mail, notifications, etc. are all linked to their to-do list. While this may be desirable to most people and may work to improve productivity for some, it is very often more distracting than useful and over-integration of applications often leads to sensory overload and overwhelming frustration. Integrations are very often counter-productive and there should exist solutions that are absolutely independent entities, free of all clutter and meant to fulfill a simple and minimal purpose. Unfortunately, not many solutions like this exist currently. 5.2.3 PRODUCTIVITY APPS AS PAID SERVICES Ironically, most good to-do list applications are not free-to-use and almost always have some in-app purchase or subscription model to generate revenue. While it is understandable that capital is required to maintain and provide some services to users, a lot of those services are not necessary to most users, who are generally students, and yet they have to pay for it. This is one of the prominent problems with to-do list applications as very often all people need is a simple app to take notes and record tasks without paying for it and that is all a good to-do list application needs to offer, a simple and minimal application to serve the mentioned functionalities to the user. 31 Most of any productivity application’s user base is composed of students and they are usually the type of users with the least funds to expend, so having a minimal to-do list application can help the student demographic greatly. 5.2.3 RUNNING ADVERTISEMENT TO GENERATE REVENUE Although less prominent, it is not rare to see productivity applications running advertisements to generate revenue. Ads are the biggest distractions and a bane to productivity so although the developers can earn through ads, it is a bane to the users and very often they don’t have a choice, but to keep using the same application with ads, which leads to a dip in productivity and focus. 32 CHAPTER 6: INPUT/ OUTPUT SCREENSHOT 6.1 USER MANUAL 1. Extract the project files to a folder. 2. Mount the folder directory in PowerShell or Command Prompt. 3. Mount the folder ‘ToDo-App-v2’ using the command ‘cd ToDo-App-v2’ 4. Run the command ‘npm install’ followed by ‘npm app.js’ 5. The project is now running, go to the URL ‘localhost:3000/’ to access the application. Note: Node version should be 16 or higher. (To check type ‘node -v’) 6.2 LIVE DEPLOYMENT Our ToDo App is hosted live on internet which is deployed via Cyclic.sh Here’s the link to access the ToDo app: LIVE: https://easy-gray-binturong-wig.cyclic.app/ 6.3 USAGE ToDo App is a fully responsive multi-lists app on which you can easily create & delete many todos and even divide your todos among many categories/lists on-the-go. Any user can access the app with just one tap on the link on any device whether a computer, a laptop or even a smartphone. Using the app is very basic and user-friendly. The instructions for creation & deletion of list(s) are simply stated on the app interface itself. 33 Fig 6.1 ToDo App (preview on a laptop/PC) 34 Fig 6.2 ToDo App (preview on a Smartphone) 35 6.4 THE MULTI-LIST FUNCTIONALITY ToDo App has provides a unique functionality to the users to create multiple lists on the go whenever & wherever they want and on any device. This functionality make ToDo App stand out from other Todo list apps in the market and provides flexibility to its users. For example: A user can make a ToDo list containing the todos for the current day i.e. ‘Today’ which is also the default list which shows up whenever a user tries to access the ToDo app. (see fig. 6.3) But here’s the twist, a user can also divide the work or todos into various categories or various lists, I must say! A user can divide & categorize, let say, the tasks like washing dish, cutting vegetables etc. into a separate list named as ‘Kitchen’. (see fig. 6.4) Or a user can also separate out the tasks like submit project, fill form etc into an another list named as ‘Work’. (see fig. 6.5) Steps to create a separate list: 1. Click on the home page url which is also the default link to access the ToDo app i.e. https://easy-gray-binturong-wig.cyclic.app/ 2. Now type and add whatever name you want to give to your list at the end of the url (given above) after the slash. For eg: If you want to name a list as ‘Kitchen’ then you can add the name at the end of the url like this https://easy-gray-binturong-wig.cyclic.app/Kitchen 3. That’s it! Now you can create as many lists as you want & then you are ready to go. 36 Fig 6.3 Default list (Today) 37 Fig 6.4 Separate list 1(Kitchen) 38 Fig 6.5 Separate list 2(Work) 39 CHAPTER 7: CODING 7.1 TECHNOLOGY STACK The technologies that are used to implement this project are: 7.1.1 HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is frequently assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags but use them to interpret the content of the page. HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. The inclusion of CSS defines the look and 40 layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997. A form of HTML, known as HTML5, is used to display video and audio, primarily using the <canvas> element, in collaboration with JavaScript. 7.1.2 CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting. Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device. The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable. 41 The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents. In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL. CSS was first proposed by Håkon Wium Lie on 10 October 1994. At the time, Lie was working with Tim Berners-Lee at CERN. Several other style sheet languages for the web were proposed around the same time, and discussions on public mailing lists and inside World Wide Web Consortium resulted in the first W3C CSS Recommendation (CSS1) being released in 1996. In particular, a proposal by Bert Bos was influential; he became co-author of CSS1, and is regarded as co-creator of CSS. Style sheets have existed in one form or another since the beginnings of Standard Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for the web. One requirement for a web style sheet language was for style sheets to come from different sources on the web. Therefore, existing style sheet languages like DSSSL and FOSI were not suitable. CSS, on the other hand, let a document's style be influenced by multiple style sheets by way of "cascading" styles. As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance, at the cost of more complex HTML. Variations in web browser implementations, such as ViolaWWW and WorldWideWeb, made consistent site appearance difficult, and users had less control over how web content was displayed. The 42 browser/editor developed by Tim Berners-Lee had style sheets that were hard-coded into the program. The style sheets could therefore not be linked to documents on the web. Robert Cailliau, also of CERN, wanted to separate the structure from the presentation so that different style sheets could describe different presentation for printing, screen-based presentations, and editors 7.1.3 JAVASCRIPT JavaScript often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on user’s devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O. JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js. 43 Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design. The first popular web browser with a graphical user interface, Mosaic, was released in 1993. Accessible to non-technical people, it played a prominent role in the rapid growth of the nascent World Wide Web. The lead developers of Mosaic then founded the Netscape corporation, which released a more polished browser, Netscape Navigator, in 1994. This quickly became the most-used. During these formative years of the Web, web pages could only be static, lacking the capability for dynamic behavior after the page was loaded in the browser. There was a desire in the flourishing web development scene to remove this limitation, so in 1995, Netscape decided to add a scripting language to Navigator. They pursued two routes to achieve this: collaborating with Sun Microsystems to embed the Java programming language, while also hiring Brendan Eich to embed the Scheme language. Netscape management soon decided that the best option was for Eich to devise a new language, with syntax similar to Java and less like Scheme or other extant scripting languages. Although the new language and its interpreter implementation were called LiveScript when first shipped as part of a Navigator beta in September 1995, the name was changed to JavaScript for the official release in December. The choice of the JavaScript name has caused confusion, implying that it is directly related to Java. At the time, the dot-com boom had begun and Java was the hot new language, so Eich considered the JavaScript name a marketing ploy by Netscape. 44 7.1.4 BOOTSTRAP Bootstrap is an HTML, CSS and JS library that focuses on simplifying the development of informative web pages (as opposed to web applications). The primary purpose of adding it to a web project is to apply Bootstrap's choices of color, size, font and layout to that project. As such, the primary factor is whether the developers in charge find those choices to their liking. Once added to a project, Bootstrap provides basic style definitions for all HTML elements. The result is a uniform appearance for prose, tables and form elements across web browsers. In addition, developers can take advantage of CSS classes defined in Bootstrap to further customize the appearance of their contents. For example, Bootstrap has provisioned for light- and dark-colored tables, page headings, more prominent pull quotes, and text with a highlight. Bootstrap also comes with several JavaScript components which do not require other libraries like jQuery. They provide additional user interface elements such as dialog boxes, tooltips, progress bars, navigation drop-downs, and carousels. Each Bootstrap component consists of an HTML structure, CSS declarations, and in some cases accompanying JavaScript code. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. Example of a webpage using Bootstrap framework rendered in Firefox 45 The most prominent components of Bootstrap are its layout components, as they affect an entire web page. The basic layout component is called "Container", as every other element in the page is placed in it. Developers can choose between a fixed-width container and a fluid-width container. While the latter always fills the width with the web page, the former uses one of the five predefined fixed widths, depending on the size of the screen showing the page. Smaller than 576 pixels 576–768 pixels 768–992 pixels 992–1200 pixels Larger than 1200 pixels Once a container is in place, other Bootstrap layout components implement a CSS Flexbox layout through defining rows and columns. A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files that can be readily added to any project. The raw form of Bootstrap, however, enables developers to implement further customization and size optimizations. This raw form is modular, meaning that the developer can remove unneeded components, apply a theme and modify the uncompiled Sass files. 7.1.5 NODE.JS Node.js is a cross-platform, open-source server environment that can run on Windows, Linux, UNIX, macOS, and more. Node.js is a back-end JavaScript runtime environment, runs on the V8 JavaScript Engine, and executes JavaScript code outside a web browser. 46 Node.js lets developers use JavaScript to write command line tools and for server-side scripting. The functionality of running scripts server-side produces dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm. Unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts. Node.js has an event-driven architecture capable of asynchronous I/O. These design choices aim to optimize throughput and scalability in web applications with many input/output operations, as well as for real-time Web applications (e.g., real-time communication programs and browser games). The Node.js distributed development project was previously governed by the Node.js Foundation, and has now merged with the JS Foundation to form the OpenJS Foundation. OpenJS Foundation is facilitated by the Linux Foundation's Collaborative Projects program. Corporate users of Node.js software include GoDaddy, Groupon, IBM, LinkedIn, Microsoft, Netflix, PayPal, SAP, Walmart, Yahoo!, and Amazon Web Services. 47 Ryan Dahl, creator of Node.js, in 2010 Node.js was written initially by Ryan Dahl in 2009, about thirteen years after the introduction of the first server-side JavaScript environment, Netscape's LiveWire Pro Web. The initial release supported only Linux and Mac OS X. Its development and maintenance was led by Dahl and later sponsored by Joyent. Dahl criticized the limited possibilities of the most popular web server in 2009, Apache HTTP Server, to handle a lot of concurrent connections (up to 10,000 and more) and the most common way of creating code (sequential programming), when code either blocked the entire process or implied multiple execution stacks in the case of simultaneous connections.[. Dahl demonstrated the project at the inaugural European JSConf on November 8, 2009. Node.js combined Google's V8 JavaScript engine, an event loop, and a lowlevel I/O API. 48 In January 2010, a package manager was introduced for the Node.js environment called npm. The package manager makes it easier for programmers to publish and share source code of Node.js packages and is designed to simplify installation, updating, and uninstallation of packages. In June 2011, Microsoft and Joyent implemented a native Windows version of Node.js. The first Node.js build supporting Windows was released in July 2011. In January 2012, Dahl stepped aside, promoting coworker and npm creator Isaac Schlueter to manage the project. In January 2014, Schlueter announced that Timothy J. Fontaine would lead the project. In December 2014, Fedor Indutny started io.js, a fork of Node.js. Due to the internal conflict over Joyent's governance, io.js was created as an open governance alternative with a separate technical committee. Unlike Node.js, the authors planned to keep io.js upto-date with the latest releases of the Google V8 JavaScript engine. In February 2015, the intent to form a neutral Node.js Foundation was announced. By June 2015, the Node.js and io.js communities voted to work together under the Node.js Foundation. In September 2015, Node.js v0.12 and io.js v3.3 were merged back together into Node v4.0. This merge brought V8 ES6 features into Node.js and a long-term support release cycle. As of 2016, the io.js website recommends that developers switch back to Node.js and that no further releases of io.js are planned due to the merge. 49 In 2019, the JS Foundation and Node.js Foundation merged to form the OpenJS Foundation. At February 21 2023, Node.js 19.7.0 was released. 7.1.6 EXPRESS.JS Express.js, or simply Express, is a back end web application framework for building RESTful APIs with Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. The original author, TJ Holowaychuk, described it as a Sinatra-inspired server, meaning that it is relatively minimal with many features available as plugins. Express is the backend component of popular development stacks like the MEAN, MERN or MEVN stack, together with the MongoDB database software and a JavaScript front-end framework or library. Express.js was founded by TJ Holowaychuk. The first release, according to Express.js's GitHub repository, was on 22 May 2010. Version 0.12 In June 2014, rights to manage the project were acquired by StrongLoop. StrongLoop was acquired by IBM in September 2015; in January 2016, IBM announced that it would place Express.js under the stewardship of the Node.js Foundation incubator. Features: Robust routing Concentrate on high-performance HTTP helpers (redirection, caching, etc) 50 7.1.7 MONGODB MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License (SSPL) which is deemed non-free by several distributions. MongoDB is a member of the MACH Alliance. MongoDB is a non-relational document database that provides support for JSON-like storage. The MongoDB database has a flexible data model that enables you to store unstructured data, and it provides full indexing support, and replication with rich and intuitive APIs. MongoDB stores data in flexible, JSON-like documents, meaning fields can vary from document to document and data structure can be changed over time The document model maps to the objects in your application code, making data easy to work with Ad hoc queries, indexing, and real time aggregation provide powerful ways to access and analyze your data MongoDB is a distributed database at its core, so high availability, horizontal scaling, and geographic distribution are built in and easy to use MongoDB is free to use. Versions released prior to October 16, 2018 are published under the AGPL. All versions released after October 16, 2018, including patch fixes for prior versions, are published under the Server Side Public License (SSPL) v1. 51 10gen software company began developing MongoDB in 2007 as a component of a planned platform as a service product. In 2009, the company shifted to an open-source development model, with the company offering commercial support and other services. In 2013, 10gen changed its name to MongoDB Inc. On October 20, 2017, MongoDB became a publicly traded company, listed on NASDAQ as MDB with an IPO price of $24 per share. MongoDB is a global company with US headquarters in New York City, USA and International headquarters in Dublin, Ireland. On October 30, 2019, MongoDB teamed up with Alibaba Cloud, who will offer its customers a MongoDB-as-a-service solution. Customers can use the managed offering from BABA's global data centers. 7.1.8 VS CODE Visual Studio Code is a code editor in layman’s terms. Visual Studio Code is “a freeeditor that helps the programmer write code, helps in debugging and corrects the code using the intelli-sense method ”. In normal terms, it facilitates users to write the code in an easy manner. Many people say that it is half of an IDE and an editor, but the decision is up to to the coders. Any program/software that we see or use works on the code that runs in the background. Traditionally coding was used to do in the traditional editors or even in the basic editors like notepad! These editors used to provide basic support to the coders. 52 Some of them were so basic that it was very difficult in writing basic English level programs in them. As time went by, some programming languages needed a specific framework and support for further coding and development it, which was not possible using these editors. VI Editor, Sublime Text Editor, is one of the many kinds of editors that came into existence. The most prominent and which supports almost every coding language is VISUAL STUDIO CODE. Its features let the user modify the editor as per the usage, which means the user is able to download the libraries from the internet and integrate it with the code as per his requirements. 7.1.8 GIT (VERSON CONTROL SYSTEM) Git is a version control system used for tracking changes in computer files. It is generally used for source code management in software development. Git is used to tracking changes in the source code The distributed version control tool is used for source code management It allows multiple developers to work together It supports non-linear development through its thousands of parallel branches Git is used primarily by developers to manage their source code. Git records changes to files over time, while ensuring the integrity of those changes at each stage of processing. Users can revert to earlier versions and compare different versions at the file level. 53 They can also branch & merge files to support independent development efforts and nonlinear workflows. And Git is not limited to source code. It can be used for database scripts , LaTeX documents, configuration files, content management data or other file types. 7.1.9 EJS EJS simply stands for ‘Embedded Javascript’. As the name suggests, it lets us embed JavaScript code in a template language that is then used to generate HTML. It is a simple templating language/engine that lets its user generate HTML with plain javascript. That’s why we have added four separate ejs templates in our code to provide modularity i.e. to load parts of html separately with the help of Javascript. EJS is mostly useful whenever you have to output HTML with a lot of javascript. With EJS, we’re able to provide the Multi-list functionality to the users 54 7.2 USE-CASE DIAGRAM Fig 7.1 55 7.3 SOURCE CODE The underlying source code & related files of the ToDo App is divided and segregated/modulated into a bunch of various component files each responsible for a particular function which collectively facilitates the functioning of the ToDo App. Note: You can find the all the source code files and other related files on the link given below: GitHub: https://github.com/akshitsangwan/ToDo-App-v2 There are various files with different file extensions in the code which are as follows: 1. Index.html 2. Styles.css 3. App.js 4. Package.json 5. EJS files for Templating I. About.ejs II. Footer.ejs III. Header.ejs IV. List.ejs Note: Node Modules & package-lock.json will be added to the folder when you will run command ‘npm install’ which will install all the required npm packagas to run your app. 56 7.3.1 INDEX.HTML The ‘index.html’ file is used to give the foundational structure to our ToDo app. It also helps in linking & incorporating the css and javascript files and their functionalities into our app. It acts as a skeleton which builds the outer static layout of our web app. Fig. 7.2 index.html (code) 57 7.3.2 STYLES.CSS The ‘styles.css’ file is responsible for the designing & formatting part of our ToDo app. It is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. It makes the front-end of a website shine and it creates a great user experience. Without CSS, websites would be less pleasing to the eye and likely much harder to navigate. Fig. 7.3 styles.css (code) (i) 58 Fig. 7.4 styles.css (code) (ii) 59 Fig. 7.5 styles.css (code) (iii) 60 Fig. 7.6 styles.css (code) (iv) 61 7.3.3 APP.JS The ‘app.js’ file sets up the server for the backend support in our ToDo App. This file contains all the HTTP client & server request codes which are executed when called upon. It also helps to set-up a local server on our personal device and can access our web app on the ‘http://localhost:3000’ by running ‘node app.js’ on CLI. Fig. 7.7 app.js (code) (i) 62 Fig. 7.8 app.js (code) (ii) 63 Fig. 7.9 app.js (code) (iii) 64 Fig. 7.10 app.js (code) (iv) 65 Fig. 7.11 app.js (code) (v) 66 Fig. 7.12 app.js (code) (vi) 67 7.3.4 PACKAGE.JSON The ‘package.json’ file is core to the Node.js ecosystem & is a fundamental part of understanding & working with Node.js , npm & even modern Javascript. This file contains holds important information about our web app. It contains human-readable metadata about the project (like the project name and description) as well as functional metadata like the package version number and a list of dependencies required by the application. Fig. 7.13 package.json (code) 68 7.3.5 EJS EJS simply stands for ‘Embedded Javascript’. As the name suggests, it lets us embed JavaScript code in a template language that is then used to generate HTML. It is a simple templating language/engine that lets its user generate HTML with plain javascript. That’s why we have added four separate ejs templates in our code to provide modularity i.e. to load parts of html separately with the help of Javascript. EJS is mostly useful whenever you have to output HTML with a lot of javascript. With EJS, we’re able to provide the Multi-list functionality to the users. Fig. 7.14 about.ejs (code) 69 Fig. 7.15 footer.ejs (code) 70 Fig. 7.16 header.ejs (code) 71 Fig. 7.17 list.ejs (code) 72 CHAPTER 8: TESTING CONCEPT TESTING Concept testing helps me verify if the flow and idea can be understood by users. I translated my two flows into two simple sketches. I produced the flows with pen and paper, rather than jump too quickly to wireframes, so that I would be pushed to consider carefully how I would place the elements in the layout and how they would connect logically. Early concept testing with pen and paper is valuable because it allows me to identify what works and what does not and to make sure that what I am creating is based on user needs. In my testing, I started by giving users a few tasks to see if they were able to accomplish them. During the process, users were able to complete tasks assigned to them, such as create a todo and deleting a todo etc. They also indicated that the app function doesn’t look cluttered with too many extra options. I’ve tried to avoid giving the user too many options so that the app does not overwhelm them and hinder their actions. WIREFRAMES At this stage, I translated the sketches to Sketch. While I was making the wireframes, I reconsidered some interaction elements at the bottom. For example, I considered if I should have the add button in the bottom, why to make strike-through lines for while deleting etc. 73 I then decided to stop my work and go back to the problem statement and user research findings. Revisiting my research put me back on the right track regarding the elements and interactions, and I was able to make decisions about them confidently. USER TESTING For user testing, I selected users who were involved in the previous user testing, and I also included some new users. The age range of the users was from 25 to 45. They are currently working full-time or doing freelancing work. After incorporating user feedback, I was able to make another revision to my slides. Users were able to perform assigned tasks such as quickly adding todos and deleting todos, making custom list(s) etc. ACHIEVEMENTS Successfully created a functional web application and learnt implementation of system design concepts in real life projects while alsogaining experience of building applications with JavaScript and its frameworks. 74 CHAPTER 8: FUTURE SCOPE 8.1 DEVIATIONS FROM EXPECTED RESULTS & WAY AHEAD Some unexpected deviations and resulting design changes during the development of this project include: 1. The initial plan was to use an SQL database instead of MongoDB but the Object Relational Mapping(ORM) library we planned to use (Sequelize) with Node.js had issues performing queries on localPostgreSQL database so we tried implementing the project with MongoDB instead and decided to go on with it. 2. The feature to rank and list tasks by their priority was implemented towards the end of the project as we had initially planned to classify tasks into two lists only based on whether the tasks were completedor pending. 3. Several implementation problems did not have any solutions that could be solved by directly using third-party libraries so they had to be solved by manually implementing the functionalities. 4. Improvement in security and integrity 5. Integration with other applications such as calendar, mail, etc. 6. Implementation of authentication 7. Hosting the web application online to make it accessible to moreusers 75 8.2 WHAT I LEARNED, AND WHAT I COULD HAVE DONE BETTER I learn that there is no right or wrong in our design solution, and there is no perfect way to achieve a design solution. The only way to reach a design goal and perfect our product is through iteration and incorporation of user feedback. Iteration makes my design get better and better, and each iteration keeps me focused on the problem I want to solve. Input from design critique makes me look at the problem from different directions and helps shape a better product. 76 CHAPTER 9: REFERENCES 1. Staff, C. A. C. M. (2016). React: Facebook's functional turn on writing Javascript. Communications of the ACM, 59(12), 56-62. 2. Kvalheim, C. (2015). The Little Mongo DB Schema Design Book. The Blue Print Series. 3. Khedkar, S., Thube, S., Estate, W. I., & Naka, C. (2017). Real time databases for applications. International Research Journal of Engineering and Technology (IRJET), 4(06), 2078-2082. 4. Tilkov, S., & Vinoski, S. (2010). Node. js: Using JavaScript to build high-performance network programs. IEEE Internet Computing, 14(6), 80-83. 5. Syed, B. A., & Bean, M. (2014). Beginning Node. js (pp. 181-182). New York City: Apress. 6. Morales-Morell, A. (2001). Usability aspects of a location-aware TODO list application. University ofPuerto Rico, Mayaguez (Puerto Rico). 7. Gaspar, F., Taniça, L., Tomás, P., Ilic, A., & Sousa, L. (2015). A framework for application-guided taskmanagement on heterogeneous embedded systems. ACM Transactions on Architecture and Code Optimization (TACO), 12(4), 1-25. 77 8. Lin, C. Y., Hung, M. T., & Huang, W. H. (2012, September). A location-based personal taskmanagement application for indoor and outdoor environments. In 2012 15th International Conference on Network-Based Information Systems (pp. 582587). IEEE. 9. Bellotti, V., Ducheneaut, N., Howard, M., & Smith, I. (2002). Taskmaster: recasting email as task management. PARC, CSCW, 2. 10. Unger, T., & Bauer, T. (2008). Towards a Standardized Task Mgmt. In Multikonferenz Wirtschaftsinformatik (pp. 443-444) 78