ToDo Application Using TypeScript: Build Application UI Part 2

In previous post we have seen the different components which build application UI. Here we are going to put all of them in place and see how our application looks like. In case you have missed the previous post, I will recommend you to go through that. If you are directly landing on this post without prior knowledge of TypeScript and interested in following the complete series on TypeScript Tutorial for Beginners, you are welcome.

Building an Application with TypeScript: Build Application UI

The Wireframe

I am going to take an approach of showing you the skeleton of the HTML page and then explaining and building on top of that. So, here is your first piece of the code. (I have created file named index.html in the root of the project folder with this content)

<!DOCTYPE html>
<html>

<head>
    <title>Better ToDo It</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="styles/main.css">
</head>

<body>
    <header class="navbar navbar-fixed-top app-header">
        <form id="frmNewItem">
            <input id="txtAdd" type="text" autocomplete="off" />
            <button id="btnAdd" type="submit">
                Add
            </button>
            <button id="btnCancel" type="reset">
                Cancel
            </button>
        </form>
    </header>
    <section class="container-fluid">
        <div id="task-list" class="row task-list active-list">
        </div>
    </section>
    <footer class="navbar navbar-fixed-bottom app-footer">Better ToDo It</footer>
</body>

</html>

Let’s quickly see the contents of the main.less file, before seeing the output and the related explanation.

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
body {
    font-family: 'Roboto';
    padding: 60px 0;
    background-color: rgba(251, 233, 231, 0.25);
}
header {
    &.app-header {
        background-color: #FF7043;
        height: 60px;
        padding: 10px;
    }
}
footer {
    &.app-footer {
        background-color: #FF7043;
        height: 60px;
        padding: 10px;
        line-height: 40px;
        color: #fff;
    }
}

That’s the bare minimal wireframe of the application page here is how it is rendered in the bowser.

App Wireframe
App Wireframe

As you can see from the code that we have put 3 main parts of the application in place, the Header, Section and Footer. The Header contains the textbox and 2 buttons and the Footer contains the application title. The Section is going to contain a list of task items. Once we see the markup of the list item we will continue on applying the styles on the UI to make it more responsive and intuitive.

The List Item

Let’s modify the markup to include the html which will contribute to show as a list item. We are going to place below code in the div under the section tag as shown the application wireframe code above. That is not the actual place where the list item code will be placed, but it is were it will end up dynamically once the application creates a task item. We are doing that for time being as we need to style the application and its components.

<section class="container-fluid">
    <div id="task-list" class="row task-list active-list">
        <div class="col-md-12 task-item">
            <div class="task-text pull-left">Task 1</div>
            <div class="task-actions pull-right">
                <div class="task-action-complete">
                    Complete
                </div>
                <div class="task-action-remove">
                    Done
                </div>
            </div>
        </div>
    </div>
</section>

and here is the css/less code for styling the same. (just append it to the main.less file contents)

.task-list {
    padding: 4px;
    .task-item {
        padding: 0;
        margin-bottom: 4px;
        border-radius: 5px;
        border: .5px solid #26A69A;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;
        &:last-of-type {
            margin-bottom: 0;
        }
        .task-text {
            line-height: 40px;
            padding: 0 90px 0 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 100%;
            min-width: 100%;
            display: inline-block;
            white-space: nowrap;
        }
        .task-actions {
            position: absolute;
            right: 0;
            div {
                outline: none !important;
                height: 40px;
                background-color: #26A69A;
                -webkit-appearance: none;
                -moz-appearance: none;
                border: none;
                box-sizing: border-box;
                float: right;
                padding: 10px;
            }
        }
    }
}

Here you go

The Task Item
The Task Item

Use SVG in Buttons

To make it more intuitive, let’s use images / svg code in place of the text “Done” and “Complete”. Go ahead and  replace the below code snippets for the Done and Complete text respectively.

<svg version="1.1" viewBox="0 0 1000 1000">
                            <path class="icon" d="M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490s490-219.4,490-490C990,229.4,770.6,10,500,10z M424.3,740.1L226.7,538.4l60.1-62.8l137.5,130.7l335.4-336.1l66.9,71.6L424.3,740.1z"/>
                        </svg>
<svg version="1.1" viewBox="0 0 1000 1000">
                            <g class="icon">
                                <path d="M189.4,379.3V916c0,40.9,33.1,74,74,74h472.5c40.9,0,74-33.1,74-74V379.3H189.4z M369.5,850c0,25.4-20.6,46-46,46c-25.4,0-46-20.6-46-46V513.4c0-25.4,20.6-46,46-46c25.4,0,46,20.6,46,46V850z M545.7,850c0,25.4-20.6,46-46,46c-25.4,0-46-20.6-46-46V513.4c0-25.4,20.6-46,46-46c25.4,0,46,20.6,46,46V850z M721.8,850c0,25.4-20.6,46-46,46c-25.4,0-46-20.6-46-46V513.4c0-25.4,20.6-46,46-46c25.4,0,46,20.6,46,46V850z"/>
                                <path d="M630.5,195.9c5.3-14.7,8.2-30.5,8.2-47c0-76.6-62.3-139-139-139c-76.6,0-139,62.3-139,139c0,16.5,2.9,32.3,8.2,47H133.3v121.4h733.3V195.9H630.5z M439,149c0-33.5,27.2-60.7,60.7-60.7c33.5,0,60.7,27.2,60.7,60.7c0,18.9-8.7,35.8-22.3,47h-76.7C447.7,184.8,439,167.9,439,149z"/>
                            </g>
                        </svg>

and modify the .task-actions less class as below

.task-actions {
    position: absolute;
    right: 0;
    div {
        outline: none !important;
        height: 40px;
        width: 40px;
        background-color: #26A69A;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none;
        box-sizing: border-box;
        float: right;
        padding: 10px;
        .icon {
            fill: #fff;
        }
        &:hover {
            .icon {
                fill: rgba(255, 255, 255, 0.5);
            }
        }
        &:active {
            .icon {
                fill: #fff;
            }
        }
    }
}

This should make the list item’s action buttons look as shown in the image below.

SVG Buttons
SVG Buttons

Header: Styling Action Bar

The Action Bar of the application which is rendered as the header is still a little blunt and unfit looking here. let’s apply the style for that. Place the below code in the main.less within the header css class.

input[type=text] {
    top: 0;
    -webkit-appearance: none;
    border: 1px solid #fff;
    height: 40px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 5px 20px 20px 5px;
    padding-right: 40px;
    text-indent: 10px;
    font-size: 1.3em;
    color: #333;
    font-weight: 500;
    outline: none !important;
}
Styling the input field
Styling the input field

Now it’s the turn of the buttons. we will use the SVG for them too. Please replace the text “Add” and “Cancel” with the below code.

<svg version="1.1" viewBox="0 0 1000 1000">
                    <path class="icon" d="M956.8,408.5H591.3V43.2c0-18.3-15-33.2-33.3-33.2H441.9c-18.3,0-33.7,14.9-33.7,33.2v365.2h-365c-18.3,0-33.2,14.9-33.2,33.2v117c0,18.3,14.9,33,33.2,33h365v365.2c0,18.3,14.4,33.2,32.8,33.2h117.1c18.3,0,33.1-14.9,33.1-33.2V591.6h365.5c18.3,0,33.2-15.1,33.2-33.5V441.7C990,423.3,975.1,408.5,956.8,408.5z"/>
                </svg>

and modify the main.less to include the below style for the buttons.

button#btnAdd {
    position: absolute;
    outline: none !important;
    top: 10px;
    right: 10px;
    height: 40px;
    width: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #26A69A;
    padding: 10px;
    z-index: 1;
    .icon {
        fill: #fff;
    }
}
button#btnCancel {
    position: absolute;
    outline: none !important;
    top: 10px;
    right: 10px;
    height: 40px;
    width: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #FF9A00;
    padding: 10px;
    transition: all ease-in-out .3s;
    .icon {
        fill: #fff;
    }
}

Remember it is less code and you should place the above code within the header class.

Action Bar Buttons
Action Bar Buttons

The Hidden Button

Don’t worry, if you are, after finding the one button missing from the output. It’s securely hiding itself behind that Green Moon of Plus Planet (the add action button ‘+’) and will show itself once we want it to. All you need is now to add the below action class to the main.less for the header class and apply it to the header dynamically (later).

&.editing {
    input[type=text] {
        padding-right: 85px;
    }

    button#btnCancel {
        right: 50px;
        display: initial;
        transform: rotateZ(45deg);
    }
}

Let’s see what this class does by adding it to the header tag.

<header class="navbar navbar-fixed-top app-header editing">
The Hidden Button
The Hidden Button

Happy!! … now just go and remove that, as it will be added to the header dynamically later on using jQuery, when user is trying to edit the task item.

That’s not All

We have almost prepared the application UI now. There is not going to be a lot of changes in the index.html and the main.less file except where it is required by the application code in the future of this tutorial. We will be majorly seeing TypeScript code from the next post onwards. You can play with the above code while I prepare for my next post.

Hope you are getting to know a few things out of these small tutorials and would like to see more of these. Please encourage me by subscribing to the blog and sharing the posts with your friends and colleagues, who you think should be interested in these tutorials. Your feedback will be very much appreciated and will help me improve my content and language. In case you have any question related to the above post, please feel free to leave your comments. I will be really happy to answer them for you.

Thanks and hope to see you with the next post … have a nice day ahead.

ToDo Application Using TypeScript: Build Application UI

Whenever I think of building a quick web application with good UI and layout, the first thing which comes in my mind is Bootstrap. During this chapter we will build application ui using bootstrap. Bootstrap is plays a great role in layout of the application. I am not going to go in depth with Bootstrap here, it just all what solves our purpose. In case you are the late comer to this blog post and have missed the previous chapters on Learning TypeScript and Building an Application with TypeScript, you are recommended to do so.

Building an Application with TypeScript

Understanding the Layout First

We have 4 main components in our application, Action Bar, List Container, List Item, and the Bottom Navigation. Here we are going to see how they are placed on the screen.

The Layout
The Layout

The design is built using mobile first strategy, so almost all the screenshots here you are going to see are Nexus 6 (Yes, I still have Nexus 6) screen sized. The orange color is one of my favorite colors (I use this color or its shades in almost all the applications I build … creepy right!) and this shade of sea-green color was going well with this design as assent color.

Coming back to the layout components, let’s discuss the role of each in brief here fist.

Action Bar

The very first part of our application is the action bar which hosts the textbox and the related action buttons for the new tasks to be added or to edit the text of the existing task. There is hidden button, which rolls out as soon as we select an item to edit.

The Action Bar
The Action Bar

List Container

The major portion of the screen is cover with this component which can scroll its contents vertically if they exceeds the bounds. There is no lower or upper limits (virtually speaking, as computer can count to a finite number only :P) of the number of the items this list can contain.

The List Container
The List Container

List Item

Each list item represents an individual Task recorded in the application and distinctly operated upon. A task item actionable for editing, setting complete or incomplete and user can remove them from the list too.

The List Item
The List Item

Bottom Navigation

The idea here is to keep the navigation at the bottom of the application layout as it is playing a least significant role in application. As of now it is not going to contain anything other than the title of the application. But I am sure, once you are there, you will figure out the better use of this component.

So now you have seen that all in action, and must be a little bit curious on how to achieve that all. Don’t worry, we will see that to, but in the next post. The next post will be all about code and only code. Be ready to see a lot of code and chop down your finger nails to keep up to the speed.

If you have not yet subscribed yet to this blog, I will recommend to do so as you will notified as soon as the new post on this series or any upcoming series are published.

Have a nice day and see you again with the next post very soon.

ToDo Application: Setup TypeScript Project

There are many ToDo or task management applications out there, written in many programming languages and for almost all the platforms. A ToDo application at its core is the simplest application one can think of. This makes it the right candidate for practicing or brushing up any language’s skills. Which is the same reason, we have picked up this as the center of this tutorial on building an application with TypeScript. This post is second in this series, where we will setup TypeScript project. In case you have not started from the beginning or very beginning (learn typescript), you can do so before continuing here.

Setup TypeScript Project

Before we start setting up our project and begin the development let’s see what we are going to build. Here is the screenshot of the minimal implementation of the application.

Sneak Peek
Application Sneak Peek

Here you are going to build a simple web application which has the capabilities of

  • adding new tasks in the list
  • storing in browsers local storage
  • show the task list with delete and complete actions
  • select tasks to edit them.

So let’s not indulge ourselves on that anymore but setup TypeScript project. I will explain the steps here one by one for each of the component of this project.

jQuery Typings

We will be using jQuery in this application for DOM manipulation and few other simple tasks. The jQuery script will be linked to the HTML after loading dynamically using require.js. Also, for TypeScript compiler and intellisense to recognise the jQuery functions, we are required to have the type definition file for jQuery in our folder and referenced in the TypeScript code files. We will be using definitelytyped repository to get these.

First of all let’s install the typings manager

npm install typings -g

Once you have installed the typings manager globally, its time to install the jQuery typings. For this you have to navigate to the project folder (in case you have not created a folder for your project, its right time to do so now). Open the folder in your favorite terminal and enter the below command.

typings install dt~jquery --save --global

This will create a few files and folders in your project folder as shown below.

Project Folder after installing jQuery Typings

Let’s not go into much details here but just understand that if we reference the index.d.ts from the typings folder into our TypeScript code we will be happy to go.

Bower Components

Next step is to get bower and using that, install jQuery, Bootstrap and Require.JS. Bower is a web package manager which can be used to manage third party library dependencies for your application. You can install bower using the command below (this is installed globally as we did for typings).

npm install bower -g

Once bower is installed, you have to enter the below command in the terminal, while being in your project root.

bower install jquery requirejs bootstrap

After the above command is finished successfully, you should see the below structure of your project folder

image folder structure
Folder structure after installing the bower components

Compiling TypeScript

I am assuming that you have already done the IDE setup as explained here in this post, So its time now to create a tsconfig.json file as per the snippet below.

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "amd",
        "removeComments": true,
        "outDir": "js",
        "alwaysStrict": true,
        "emitBOM": false,
        "target": "es5"
    }
}

This file tells the compiler that it should compile the TypeScript files as soon as they are saved and output the result into the js folder. Along with that the compiled output will be ES5 compatible and usable by amd module. Let’s create a folder named js and other named ts in our project folder. Create a file main.ts in the ts folder with some simple code in there, just to check if everything is working fine. Here is the outcome of my test.

Compiling TypeScript
Compiling TypeScript

Compiling LESS

I am assuming that you have setup your development environment as suggested in my previous post. We will be however using one more thing in this project and that is LESS as the pre-compiled CSS. LESS can be compiled into CSS so that it can be used by the browsers. We will adding one more package to our Atom editor so that as and when we edit and save the less file, it is compiled into the equivalent CSS.

Please go to your Atom Editor’s settings and navigate to Install tab. Now search for atom-compile-less package and install it. This package will compile your less files into the css files as soon as they are saved.

Create a folder named styles in the root of your project folder and create a new file named main.less in there with the below content (this is just to validate if the less is getting compiled).

a {
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

Here is something what you should see as the output.

LESS file sample
LESS Compiled into CSS

You will require to enable the auto compile option of this package in its settings page.

In case you are interested in minifying the generated css, there is an option to do so too with this atom package.

At this point, our main project setup is complete and we are ready to write our code for the application. Please let me know in case you have any troubles following this tutorial. I will really appreciate your feedback. It will encourage me to write more such posts and courses. I will take a leave from you now so that I can continue on the next post in this series.

Have a nice day!

Build ToDo Application with TypeScript: Prerequisites

TypeScript is a modern language for the web applications development today which improves the application development efforts and reduces a lot of headache. I have recently completed the Beginners TypeScript Tutorial, where I promised that I will be showcasing the practical usage of TypeScript. So, here with this post we will start our tutorial on how to build a todo application with typescript. Let me name it in advance … Better ToDo

Building an Application with TypeScript

If you have completed a basic tutorial on TypeScript and are wondering on how to put it all together to build an actual application using TypeScript, you are at the right place. During this tutorial you will be able to clear your mind from all that clutter you might have gathered during your learning and build a clear picture of the language.

In case you are coming from the domain of JavaScript, you might be habitual of changing the code and reloading the page. The code you have created is plain JavaScript and it doesn’t require any post processing once you are done with that. Just load it and its done. But in case of TypeScript, you are required to compile your code to get it converted into JavaScript and make it usable by the browsers.

Prerequisites

For this tutorial before we start building our application with TypeScript, we need a few things on our table.

  1. Clarity on the basics of the TypeScript Language.
    Incase you are not following this blog and have not gone through the beginners typescript tutorial,  you can go through that here.
  2. Development Environment Setup.
    You can find the setup instruction here from the beginners typescript tutorial.
  3. Third party libraries like jQuery and Bootstrap.
    we will be getting these libraries as the initial set of our project

We will be using LESS as the precompiled language for the cascading style sheets here. This makes our code much more easy and manageable.

Take Out

At the end of this post you will be able to grasp a clear picture on the core concept of

teaser of the todo application
Application View in a Mobile Device

The other concept, which you will learn during this series is dynamically loading the script files. Although it might not be much helpful in this single page application, but you will be able to utilize the knowledge somewhere else.

One more thing I would like to point over here is that our main focus will be on the TypeScript. We will not be going in depth of the application UI design or learning jQuery or Bootstrap.

Creating Anchor

I will be continuing on this topic on my next  post. In the next post we will be setting up our project, download all dependencies and compile TypeScript. I will be posting the links to the next post below here. You can subscribe to the blog to get notification of the posts as and when they are available.

Please leave your questions below in case you have any. I will really appreciate your feedback, as they will help me build better content while motivating me to write more.

Meanwhile, you can go through other course on AngularJS with ASP.Net MVC, in case you are interested. Hope to see you again with my next post. Till then … have a nice day.

jQuery Plugin Development – Modal Dialog

jQuery-Model-Dialog

jQuery Plugin Development – Modal Dialog

I have recently create new series of the videos on the jQuery Plugin Development for the jQuery Modal Dialog popup. In the first video below, it shown how to create the plugin in the beginning.

Watch Part 1 here
description: This video is the First part of the series where Modal Dialogue jQuery Plugin Development is covered. Please see the others here : Part 2: http://youtu.be/nyRl6Pdkmt0 Part 3: http://youtu.be/Xg1i9mTHXPI Please leave us your comments and suggestions below and subscribe to the channel in case you liked the contents.
duration: 00:32:16
views: 1626
by: MindzGroupTech
source: YouTube
Get this plugin here.

There is more to it … continued on next page