OnNotepad - User Guide

Welcome to Notepad, a simple online text editor! This user guide will help you understand how to use the notepad features effectively.

Features

  • Text Editing: You can type and edit text in the editor area.
  • Styling Text: You can apply various styling options to the selected text.
    • 1.Bold: Click the "B" button to apply or remove bold formatting.

      2.Italic: Click the "I" button to apply or remove italic formatting.

      3.Underline: Click the "U" button to apply or remove underline formatting.

      4.Font: Select a font from the dropdown menu to change the font of the selected text.

      5.Text Size: Enter a numeric value in the "Text Size" input box and click the "Apply" button to change the font size of the selected text.

  • Text Color: You can change the color of the text
  • Click the color input box to select a custom color for the text.

  • Clear Text: Click the "Clear" button to remove all text from the editor.
  • Save Text: Click the "Save" button to download the text as a .html file.
  • The downloaded file will have the name "notepad.html".

  • Load Text: Click the "Load" button to load a previously saved text file.
  • Select the desired file from the file picker dialog that appears.

    Getting Started

    1. Open the Notepad in your web browser.

    2. You will see a blank editor area where you can type and edit text.

    3. Use the available buttons and input fields to apply formatting, change text color, save, load, and clear text.


    OnCalculator - User Guide

    Welcome to the Calculator, a simple online calculator application! This user guide will help you understand how to use the calculator's features effectively.

    Features

  • Calculator Screen: The screen at the top of the calculator displays the current input and the calculated result.
  • Numeric Buttons: Click on the numeric buttons to enter numbers into the calculator screen.
  • Operator Buttons: Click on the operator buttons to perform calculations.
    • 1. Addition: "+"

      2. Subtraction: "-"

      3. Multiplication: "×"

      4. Division: "÷"

  • Evaluation Button: Click the "Evaluate" button to perform the calculation and display the result on the screen.
  • Trigonometric Functions: The calculator supports the following trigonometric functions.
    • 1. Sine (sin): Click the "sin" button to calculate the sine of the current value on the screen.

      2. Cosine (cos): Click the "cos" button to calculate the cosine of the current value on the screen.

      3. Tangent (tan): Click the "tan" button to calculate the tangent of the current value on the screen.

  • Exponentiation and Square Root: The calculator supports the following functions.
    • 1. Power (x^2): Click the "x^2" button to calculate the square of the current value on the screen.

      2. Square Root (√x): Click the "√x" button to calculate the square root of the current value on the screen.

  • Logarithm: The calculator supports the logarithm function.
    • 1. Logarithm (log): Click the "log" button to calculate the logarithm of the current value on the screen.

  • Constants:The calculator provides the following mathematical constants.
    • 1. Pi (π): Click the "π" button to enter the value of Pi (approximately 3.14159265359) on the screen.

      2. Euler's Number (e): Click the "e" button to enter the value of Euler's number (approximately 2.71828182846) on the screen.

  • Factorial: The calculator supports the calculation of factorial.
    • 1. Factorial (n!): Enter a positive integer on the screen, then click the "n!" button to calculate its factorial.

  • Backspace: Click the "Backspace" button to delete the last character from the calculator screen.
  • Calculation History: The calculator keeps track of the calculation history and displays it on a scatter chart.
    • 1. Each calculation is recorded with its result on the chart.

      2. The chart visualizes the relationship between the calculation index and the result.

    Getting Started

    1. Open the Calculator in your web browser.

    2. Use the numeric buttons to enter numbers into the calculator screen.

    3. Use the operator buttons to perform calculations.

    4. Click the "Evaluate" button to perform the calculation and display the result on the screen.

    5. Utilize the trigonometric functions, exponentiation and square root functions, logarithm function, and mathematical constants as needed.

    6. Use the factorial function to calculate the factorial of a positive integer.

    7. Click the "Backspace" button to delete the last character from the calculator screen.

    8. The calculation history is displayed on the scatter chart below the calculator screen.


    OnSpending - User Guide

    Welcome to the Expense Tracker application, a tool to track and visualize your expenses. This user guide will help you understand how to use the Expense Tracker effectively.

    Features

  • Expense Input: Use the expense input form to add a new expense to the tracker.
    • 1. Enter the expense description in the "Expense Description" field.

      2. Enter the expense amount in the "Expense Amount" field.

      3. Select the currency of the expense from the dropdown menu.

      4. Click the "Add Expense" button to add the expense to the tracker.

  • Expense Table: The expense table displays a summary of the expenses added to the tracker.
    • 1. Each row represents an expense and includes the description, amount, currency, and a delete button.

      2. To delete an expense, click the "Delete" button next to the corresponding expense in the table.

  • Total Expenses: The total expenses section shows the sum of all expenses in the selected currency.
    • 1. The total expenses will be automatically updated whenever an expense is added or deleted.

  • Expense Chart: The expense chart provides a visual representation of the expenses using a doughnut chart.
    • 1. Each expense is represented as a sector in the chart, with the description and amount displayed.

      2. The chart colors and labels are randomly generated.

    Getting Started

    1. Open the Expense Tracker application in your web browser.

    2. Use the expense input form to add a new expense.

      Enter a brief description of the expense in the "Expense Description" field. Enter the amount spent in the "Expense Amount" field. Select the currency of the expense from the dropdown menu. Click the "Add Expense" button to add the expense to the tracker.

    3. The expense table displays the added expenses.

      Each row represents an expense and includes the description, amount, currency, and a delete button. To delete an expense, click the "Delete" button next to the corresponding expense in the table.

    4. The total expenses section shows the sum of all expenses.

      The total expenses are automatically updated whenever an expense is added or deleted. The total amount is displayed in the selected currency.

    5. The expense chart provides a visual representation of the expenses.

      Each expense is represented as a sector in the chart, labeled with the description and amount. The chart colors and labels are randomly generated.

    OnPlaning - User Guide

    Welcome to the Timeline Chart application, a tool to visualize tasks on a timeline. This user guide will help you understand how to use the Timeline Chart effectively.

    Features

  • Task Input: Use the task input form to add a new task to the timeline chart.
    • Enter the task name in the "Task Name" field.
    • Enter the start time in the "Start Time" field using the 24-hour format (HH:MM).
    • Enter the end time in the "End Time" field using the 24-hour format (HH:MM).
    • Click the "Add Task" button to add the task to the timeline chart.
  • Timeline Chart: The timeline chart displays the tasks on a timeline based on their start and end times.
    • Each task is represented as a bar on the chart, with the task name, start time, and end time displayed.
    • You can visually track the duration and timeline of each task using the chart.
  • Task Table The task table displays a summary of the tasks added to the timeline chart.
    • Each row represents a task and includes the task name, start time, end time, and a delete button.
    • Click the "Delete" button to remove a task from the timeline chart and the task table.

    Getting Started

    1. Open the Timeline Chart application in your web browser.

    2. Use the task input form to add a new task

    • Enter the task name in the "Task Name" field.
    • Enter the start time in the "Start Time" field using the 24-hour format (HH:MM).
    • Enter the end time in the "End Time" field using the 24-hour format (HH:MM).
    • Click the "Add Task" button to add the task to the timeline chart and visualize it.

    3. The timeline chart displays the tasks on a timeline based on their start and end times.

    • Each task is represented as a bar on the chart, with the task name, start time, and end time displayed.
    • You can visually track the duration and timeline of each task using the chart.

    4. The task table provides a summary of the tasks added to the timeline chart.

    • Each row represents a task and includes the task name, start time, end time, and a delete button.
    • To delete a task, click the "Delete" button next to the corresponding task in the task table.
    • The task will be removed from the timeline chart and the task table will be updated accordingly.

    OnManagement - User Guide

    Welcome to the Task Manager, a simple application to manage tasks and visualize them on a timeline chart. This user guide will help you understand how to use the Task Manager effectively.

    Features

  • Task List: The task list displays the details of each task, including its name, category, priority, due date, and reminder time.
  • Add Task: Use the task input form to add a new task to the task list.
    • 1. Enter the task name, select the category, priority, due date, and reminder time.

      2. Click the "Add Task" button to add the task to the task list.

  • Delete Task: Each task in the task list has a "Delete" button.
    • 1. Click the "Delete" button next to a task to remove it from the task list.

  • Timeline Chart: The timeline chart visualizes the tasks on a timeline based on their due dates and reminder times.
    • 1. Each task is represented as a bar on the chart.

      2. The task's category, name, start date, and end date are displayed on the chart.

    Getting Started

    1. Open the Task Manager in your web browser.

    2. Use the task input form to add a new task.

    • Enter the task name in the "Task Name" field.
    • Select the task category from the "Category" dropdown.
    • Select the task priority from the "Priority" dropdown.
    • Select the task due date using the date picker.
    • Enter the task reminder time using the time picker.
    • Click the "Add Task" button to add the task to the task list and visualize it on the timeline chart.

    3. Each task in the task list is displayed with its details, including the task name, category, priority, due date, and reminder time.

    4. To delete a task, click the "Delete" button next to the task in the task list.

    • The task will be removed from the task list and the timeline chart will be updated accordingly.

    5. The timeline chart displays the tasks on a timeline based on their due dates and reminder times.

    • Each task is represented as a bar on the chart, with its category, name, start date, and end date displayed.
    • You can visually track the progress and timeline of your tasks using the chart.

    OnCountdown - User Guide

    Welcome to OnCountdown, a simple and elegant countdown timer! This user guide will help you understand how to use the countdown timer effectively.

    Getting Started

    1. Open the OnCountdown timer in your web browser.

    2. You will see a title "OnCountdown" displayed at the top of the page.

    3. Below the title, you'll find an input field labeled "Set Date and Time." Click inside the input field to select the desired date and time for your countdown.

    Setting the Countdown

    1. Click on the input field labeled "Set Date and Time."

    2. A date and time picker will appear. Choose the desired date and time by clicking on the input field and selecting the appropriate values.

    3. Once you've set the date and time, click the "Start" button to begin the countdown.

    Countdown Display

    1. The countdown will be displayed in the "Countdown" section below the input field.

    2. The countdown will show the remaining time in the format: "Countdown: [days]d [hours]h [minutes]m [seconds]s"

    3. As time progresses, the countdown will dynamically update to reflect the remaining time.

    Progress Ring

    1. The progress ring located below the countdown visually represents the progress of your countdown.

    2. The progress ring starts as an empty circle and gradually fills up as time progresses.

    3. The percentage of completion is displayed inside the progress ring

    Resetting the Countdown

    1. To reset the countdown, click the "Reset" button.

    2. This will clear the selected date and time, stop the countdown, and reset the progress ring.

    3. You can then set a new date and time to start a fresh countdown.

    Sound Notification

    1. When the countdown reaches zero, an audio notification will play.

    2. The sound notification is designed to alert you when the countdown expires.