#### ToDo

ToDo is maintained by developers, editors, writers, reviewers or readers like you as a way to focus your collaborative efforts. As such, they represent a tentative consensus that helps improve the efficiency of the editing process.

###### 1. You need to add these files to make it work.

                        <script src="app-todo.js"></script>
                          <link rel="stylesheet" type="text/css" href="app-todo.css">

Note! This is developed by PIXINVENT. This is not a vendor js and css.

###### 2. Features you can perform in toDO List.

- Add new todo task
- Complete task
- Delete task
- Search any task
- Set favorite task
- Set important task
- Project Filter UI

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-todo.html

#### Email Application

Email is a very popular way of communicating with others over the Internet. An application that allows users to send, receive, and read email is called an email client.

###### 1. You need to add these pages to make it work.

                        <script src="app-email.js"></script>
                          <link rel="stylesheet" type="text/css" href="app-email.css">

Note! This is developed by PIXINVENT. This is not a vendor js and css.

###### 2. Features you can perform in email application.

- Compose Mail
- Search mail
- Delete mail
- Mark mail as unread
- Filter mail
- Selec All mails and Delete all
- On click of mail list, mail detail will slide in

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-email.html

#### Chat Application

Messaging or the use of chat apps are surging in popularity these days as people prefer chat-based apps over text messages as it provides real-time interactions and gives them a personal touch experience.

###### 1. You need to add these pages to make it work.

                        <script src="app-chat.js"></script>
                         <link rel="stylesheet" type="text/css" href="app-chat.css">

Note! This is developed by PIXINVENT. This is not a vendor js and css.

###### 2. Features you can perform in chat application.

- Notification badge of new messages
- Start conversation to chat
- Search User
- Send message
- Check personal profile
- Check user's profile
- Set status(Online, Offline, etc..)
- Favorite Conversation

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-chat.html

#### Calendar

Calendar is made from Full Calendar Plugin which the most popular full-sized JavaScript Calendar. you'll have use below mentioned structure for add event modal to use add event functionality.

###### 1. You need these files for application to work

                  <!-- Vendor JS -->
                  <script src="moment.min.js"></script>
                  <script src="fullcalendar.min.js"></script>
                  <script src="daygrid.min.js"></script>
                  <script src="picker.js"></script>
                  <script src="picker.date.js"></script>

                  <!-- Page Specific JS -->
                  <script src="fullcalendar.js"></script>

                  <!-- Vendor CSS -->
                  <link rel="stylesheet" type="text/css" href="fullcalendar.min.css">
                  <link rel="stylesheet" type="text/css" href="daygrid.min.css">
                  <link rel="stylesheet" type="text/css" href="pickadate.css">

                  <!-- Page Specific CSS -->
                  <link rel="stylesheet" type="text/css" href="fullcalendar.css">

###### 2. Use following modal structure.

      <div class="modal fade text-left modal-calendar" tabindex="-1" role="dialog" aria-labelledby="cal-modal"
      aria-modal="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title text-text-bold-600" id="cal-modal">Add Event Title</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <form action="#">
            <div class="modal-body">
              <div class="d-flex justify-content-between align-items-center add-category">
                <div class="chip-wrapper"></div>
                <div class="label-icon pt-1 pb-2 dropdown calendar-dropdown">
                  <i class="feather icon-tag dropdown-toggle" id="cal-event-category" data-toggle="dropdown"></i>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="cal-event-category">
                    <span class="dropdown-item business" data-color="success">
                      <span class="bullet bullet-success bullet-sm mr-25"></span>
                      Business
                    </span>
                    <span class="dropdown-item work" data-color="warning">
                      <span class="bullet bullet-warning bullet-sm mr-25"></span>
                      Work
                    </span>
                    <span class="dropdown-item personal" data-color="danger">
                      <span class="bullet bullet-danger bullet-sm mr-25"></span>
                      Personal
                    </span>
                    <span class="dropdown-item others" data-color="primary">
                      <span class="bullet bullet-primary bullet-sm mr-25"></span>
                      Others
                    </span>
                  </div>
                </div>
              </div>
              <fieldset class="form-label-group">
                <input type="text" class="form-control" id="cal-event-title" placeholder="Event Title">
                <label for="cal-event-title">Event Title</label>
              </fieldset>
              <fieldset class="form-label-group">
                <input type="text" class="form-control pickadate" id="cal-start-date"
                  placeholder="Start Date (yyyy-mm-dd)">
                <label for="cal-start-date">Start Date</label>
              </fieldset>
              <fieldset class="form-label-group">
                <input type="text" class="form-control pickadate" id="cal-end-date" placeholder="End Date (yyyy-mm-dd)">
                <label for="cal-end-date">End Date</label>
              </fieldset>
              <fieldset class="form-label-group">
                <textarea class="form-control" id="cal-description" rows="5" placeholder="Description"></textarea>
                <label for="cal-description">Description</label>
              </fieldset>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary cal-add-event waves-effect waves-light" disabled>
                Add Event</button>
              <button type="button" class="btn btn-primary d-none cal-submit-event waves-effect waves-light"
                disabled>submit</button>
              <button type="button" class="btn btn-flat-danger cancel-event waves-effect waves-light"
                data-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-flat-danger remove-event d-none waves-effect waves-light"
                data-dismiss="modal">Remove</button>
            </div>
          </form>
        </div>
      </div>
    </div>

###### 3. init your calendar

        var calendarEl = document.getElementById('fc-default');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: ["dayGrid"],
          ...
        });

###### 4. Actions you can perform with Calendar

1. Add new events.
2. Remove existing Events.
3. Manage your schedule.
4. Add category/label to your event.
5. Get info of event on click.

Type | URL
--- | ---
Plugin Link | https://fullcalendar.io/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-calender.html

#### Ecommerce Application

Electronic commerce is an emerging model of new selling and merchandising tools in which buyers are able to participate in all phases of a purchase decision, while stepping through those processes electronically rather than in a physical store or by phone (with a physical catalogue).

###### 1. You need these files for application to work

                  <!-- Vendor JS -->
                  <script src="Wnumb.js"></script>
                  <script src="noUislider.min.js"></script>
                  <script src="select2.min.js"></script>

                  <!-- Page Specific JS -->
                  <script src="app-ecommerce-shop.js"></script>

                  <!-- Vendor CSS -->
                  <link rel="stylesheet" type="text/css" href="noUislider.min.css">
                  <link rel="stylesheet" type="text/css" href="select2.min.css">

                  <!-- Page Specific CSS -->
                  <link rel="stylesheet" type="text/css" href="app-ecommerce-shop.css">

###### 2. Use class `.grid-view` for grid view. checkout code below

          <section id="ecommerce-products" class="grid-view">
      <div class="card ecommerce-card">
        <div class="card-content">
          <div class="item-img text-center">
            <img src="...." alt="img-placeholder">
          </div>
          <div class="card-body">
            <div class="item-wrapper">
              <div class="item-rating">
                <div class="badge badge-primary badge-md">
                  4 <i class="feather icon-star ml-25"></i>
                </div>
              </div>
              <div>
                <h6 class="item-price">
                  $39.99
                </h6>
              </div>
            </div>
            <div class="item-name">
              <span>Item Name</span>
              <p class="item-company">By <span class="company-name">Google</span></p>
            </div>
            <div>
              <p class="item-description">
                Item Description
              </p>
            </div>
          </div>
          <div class="item-options text-center">
            <div class="item-wrapper">
              <div class="item-rating">
                <div class="badge badge-primary badge-md">
                  4 <i class="feather icon-star ml-25"></i>
                </div>
              </div>
              <div class="item-cost">
                <h6 class="item-price">
                  $39.99
                </h6>
              </div>
            </div>
            <div class="wishlist">
              <i class="fa fa-heart-o"></i> <span>Wishlist</span>
            </div>
            <div class="cart">
              <i class="feather icon-shopping-cart"></i> <span class="add-to-cart">Add to cart</span> <a
                href="app-ecommerce-checkout.html" class="view-in-cart d-none">View In Cart</a>
            </div>
          </div>
        </div>
      </div>
    </section>

###### 3. Use class `.list-view` for list view. checkout code below

          <section id="ecommerce-products" class="list-view">
      <div class="card ecommerce-card">
        <div class="card-content">
          <div class="item-img text-center">
            <img src="...." alt="img-placeholder">
          </div>
          <div class="card-body">
            <div class="item-wrapper">
              <div class="item-rating">
                <div class="badge badge-primary badge-md">
                  4 <i class="feather icon-star ml-25"></i>
                </div>
              </div>
              <div>
                <h6 class="item-price">
                  $39.99
                </h6>
              </div>
            </div>
            <div class="item-name">
              <span>Item Name</span>
              <p class="item-company">By <span class="company-name">Google</span></p>
            </div>
            <div>
              <p class="item-description">
                Item Description
              </p>
            </div>
          </div>
          <div class="item-options text-center">
            <div class="item-wrapper">
              <div class="item-rating">
                <div class="badge badge-primary badge-md">
                  4 <i class="feather icon-star ml-25"></i>
                </div>
              </div>
              <div class="item-cost">
                <h6 class="item-price">
                  $39.99
                </h6>
              </div>
            </div>
            <div class="wishlist">
              <i class="fa fa-heart-o"></i> <span>Wishlist</span>
            </div>
            <div class="cart">
              <i class="feather icon-shopping-cart"></i> <span class="add-to-cart">Add to cart</span> <a
                href="app-ecommerce-checkout.html" class="view-in-cart d-none">View In Cart</a>
            </div>
          </div>
        </div>
      </div>
    </section>

###### 4. Actions you can perform with eCommerce application

1. Add product to wishlist/cart.
2. Change product view between list and grid view.
3. Remove products from wishlist.
4. Place order from checkout page.
5. Add user details in checkout page.

Type | URL
--- | ---
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/app-ecommerce-shop.html