DEV Community

Cover image for How to create a To-Do App in PicoLisp (Responsive Version) - Part 2
Mia
Mia

Posted on • Originally published at picolisp-explored.com

How to create a To-Do App in PicoLisp (Responsive Version) - Part 2

In the previous post, we have built a little "To-do"-App, however, we didn't give it any styling yet. I guess you could call it quite ugly, and definitely not user-friendly:

todo.png

Now let's apply some CSS and a little bit of logic to it in order to turn it into a proper app!


About CSS and Bootstrap

As you can guess from the title, one of the goals of this tutorial is to create a responsive app, i. e. a design that scales with the screen size of the device. Now it is really not easy to specify all the cases in CSS, therefore I personally prefer to use a framework for that. One of the most famous ones is Bootstrap.

(Read here for a introduction how to use CSS and Bootstrap in PicoLisp.)

I personally don't have much experience in CSS and I'm also not very patient with it, but Bootstrap makes it quite easy to cover the most important aspects of responsiveness "by itself", like this:

thingtodo2.png

And on mobile:

mobileviewx.png

You can find the hosted version here.


To get started, let's add the bootstrap.css file as second css file to the page, and a custom.css file (empty) as last item:

(setq *Css '("@lib.css" "css/bootstrap.css" "css/todo-custom.css" ))
Enter fullscreen mode Exit fullscreen mode

Replace buttons by icons

We can replace the button label text by icons and specify the size in the custom.css field:

(gui '(+Style +Button) "button-icon" T "img/delete.png" 
Enter fullscreen mode Exit fullscreen mode

button.png


Defining Containers

Now we can define the Containers. From the Bootstrap docs:

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.

What does that mean? It means that setting a container keeps your content inside a certain range, even if your screen is larger. If we are using a super large screen, we still don't want to spread our list items all the way from left to right side. So we pick a nice container to use:

container.png

I picked container-sm. This removes any margin if you access the page from a slim viewport, but keeps a frame if the viewport is larger. Furthermore, let's say the background color should be white. So this is what we wrap around the whole content:

(<div> "bg-white container-sm"
   ... )
Enter fullscreen mode Exit fullscreen mode

Next, we put both form sheets in a container-sm as well. Why? Because it will keep a pretty margin to the outer container if the screen is large enough, but skip it if it's too small.

(<div> "container-sm"
   (form NIL
      ... ) )
Enter fullscreen mode Exit fullscreen mode

To make the containers visible, let's give our html form a body-class as well and define it in custom.css. We can set the background color there.

This sets the <body class="todo-body">:

   (html 0 "Todo" *Css "todo-body"
Enter fullscreen mode Exit fullscreen mode

and in custom.css, we define the background color:

.todo-body {
   background-color: #000066;
}
Enter fullscreen mode Exit fullscreen mode

On a medium-sized screen, it now looks like this:

containers.png

Containers also give the possibility to structure the content in the middle or spread it over the whole viewport. Read here for details, it is quite useful.


Structure the list output

At the moment, we're just printing the list as it is. This is not really useful. Let's break the items up into pieces.

Let's say we have this list: ("shopping" 781432 "green"). How can we get the items? If you read the post on List and Strings post carefully, it should be no problem for you:

  • "shopping": (car <List>)
  • 781432: (cadr <List>) - converted to date: (datStr (cadr <List>))
  • "green": (caddr <List>)

Also, let's add an index by printing out the iteration variable I of our for-loop. Applied all this on the code we have up to now looks like this:

(for (I . @Item) *ToDoList
   (<p> NIL (prinl I ".")) )
   (<p> NIL (prinl (datStr (cadr @Item)) ) ) )
   (<p> NIL (prinl (car @Item))) )
Enter fullscreen mode Exit fullscreen mode

todolistitems.png

So far so good, but a real list should be structured in "one row per item", right? So here we come to the Bootstrap rows and columns.


Adding rows and columns

Another very useful feature of Bootstrap are the rows and columns. Per default, any container can be structured into up to 12 columns. You can specify the column size relatively to the complete size - for example col-6 is a column that takes up half the space. Alternatively, you can set col-auto to make it use up the space it needs.

If the content is too large for one column and the size is not specified, a line break is inserted automatically.

So let's add one row per item, and give each item its own column. We set all columns to auto except for the third one which contains the actual text.

(<div> "row "
   (<div> "col-auto "
      (<p> NIL (prinl I ".")) )
   (<div> "col-auto text-align-left"
      (<p> NIL (prinl (datStr (cadr @Item)) ) ) )
   ... ) 
Enter fullscreen mode Exit fullscreen mode

We can add additional information like the text alignment for the date string as well. Similarly, we add rows and columns to the "adding items" form.


Adding margin and padding

Most Bootstrap classes have margin and padding predefined depending on the viewport. However, sometimes we might still want to add our own margins and paddings. Note that these will not be viewport-dependent, so it makes sense to test it on various screen sizes.

For example, let's add a small margin around each row plus a little padding to the top, and a border:

(<div> "row pt-3 border m-1 border"
Enter fullscreen mode Exit fullscreen mode

Which creates an output like this:

columsrows.png


Dynamic coloring of the item description

Maybe you have wondered what happened of our "color" setting that we get from the form sheet. We could use it to directly color the text of our item description. Let's define a local variable Color:

(for (I . @Item) *ToDoList
   (let Color (caddr @Item)
Enter fullscreen mode Exit fullscreen mode

Since css-files are not dynamically reloaded, we cannot specify the dynamic color in a file, we need to do it directly within our source code. As you might remember from the CSS post, we can add specific variables by adding a cons pair, like this:

(<div> '(style . "margin: 60px;")
(<div> '("myClass" (style . "margin: 60px;") ..)
Enter fullscreen mode Exit fullscreen mode

Thus, we need to define our own cons-pair now. We want to create the following output:

(style . "color: green")
Enter fullscreen mode Exit fullscreen mode

where green is the current value of our local variable Color. Since the whole expression is a string, we can use the pack function for this:

(pack "color: " Color)
Enter fullscreen mode Exit fullscreen mode

and wrap the cons function around it to create the cons pair:

(cons 'style (pack "color: " Color)) 
Enter fullscreen mode Exit fullscreen mode

Now, we also don't want to lose our "col" class. We can add it as a list. So this is the full definition of our <div> class:

(<div> (list "col" (cons 'style (pack "color: " Color)) 
Enter fullscreen mode Exit fullscreen mode

To show that here's the most important part, let's also make our item text bold and capitalized.

(<div> (list "col" (cons 'style (pack "color: " Color)) )
   (<p> "text-capitalize font-weight-bold" (prinl (car @Item))) 
Enter fullscreen mode Exit fullscreen mode

colors.png

Finished!

You can access the source code here (start with $ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 +)

Of course, to make it a truly useful app, we still lack a number of features. For example, it would be nice to give priorities, add comments, add categories... But most importantly, we need a database to store the items, otherwise they are lost once the session is closed.

So let's stop the web development part for now and take a look into databases.


Sources

Top comments (0)