<h1>Project Web App UI</h1>

<p>
Group Members: Dan Lei,Jiaqi Wang, Jiahui Qiu, Jieying Yu
</p>

<h3>Problem:</h3>
<p>With different courses schedule, structure, and different deadline for tasks on Canvas, students may feel lack of self management when dealing with disorganized timelines and tasks. They would like to manage their time and tasks more efficiently. <p>

<h3>Solution:</h3>
<p>A more useful web platform that can help TC students to manage time and works.</p>

<h3>CodePen URL:</h3><a href="https://codepen.io/jq2308/pen/gOMpeBe">https://codepen.io/jq2308/pen/gOMpeBe</a>

<h3>Components:</h3>

<h4>1.Home</h4>
<p>By clicking on the "Home" button in the nevigation bar, users can switch back to the home page of the platform.</p>
<h4>2.Manage Your Schedule</h4>
<p>Users can input their events, courses schedule, tasks due dates, etc. into the calendar through this function.
<h4>3.Progress Bar</h4>
<p>Through calculating each week's schedule (including events and tasks) and their completeness, a percentage of completion will be shown in the progress bar.
<h4>4.My Tasks (To-do list)</h4>
<p>Upcoming Tasks for each week will automatically display in the upcoming-task section. Once users complete one task, they can click the check box then press the "Delete" button to delete the task from the upcoming task list, and mark them as completed in schedule. </p>
<p>Users can also type in new tasks and click the "Add" button, an alert message will pop up saying "Your tasks is added!", a new task will show in the upcoming task list.
<h4>5.Calendar</h4>
<p>Contains each week's schedule (including events and due day). By clicking the button of each day, we will change the color values of the number, and we will change the size of the number. Then users can see specific task and events of that day.</p>
<h4>6.Courses</h4>
<p>
Contains HTML links to all of the courses main pages. Users can access main pages through pictures or "View Course Button."</p><p>
Contains HTML links to all notes taken by the students.

</p>
<h4>7.Messages</h4>
<p>
By clicking the "Message" button, users can see the professor's announcement and classmates' replies on the discussion board.</p><p>
By replying on the message board, users can directly reply to the replies of professors and students on the discussion board.
</p>
<h4>8.Settings</h4>
<p>Contains different layouts and background colors for user to choose.</p><p>
Users can upload profile information (photo, email address, contact information) through settings.
</p>

<h3>Reflection:</h3>
<p>
The purpose of this project is to help students to be productive by doing task more effciently. But the difficulty we encounter is that everyone has different learning styles and needs, so maybe there is no learning system that is suitable for everyone. So we want to create a system that allows students to customize modules. They can choose which section to appear on the homepage and determine the proportion of each section. Through user-defined methods, we hope that students can get an effective and good learning experience via content and interaction.
</p>