Setup TypeScript Project

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.

Leave a Reply