DEV Community

I built a todo app using 9 different languages

John Rush on June 09, 2023

Hi, I'm John, Multi Startup Builder. I enjoy both coding and marketing. See all my 20 products here → johnrush.me → my BIO → Say Hi to me On Twit...
Read full post
Collapse
 
efpage profile image
Eckehard • • Edited

You could also add VanJS to the party, which is pretty cool. The ToDo-app in VanJS needs only 17 lines of code:

const TodoItem = ({text}) => {
  const done = van.state(false), deleted = van.state(false)
  return van.bind(deleted,
    d => d ? null : div(
      input({type: "checkbox", checked: done, onclick: e => done.val = e.target.checked}),
      van.bind(done, done => done ? strike(text) : span(text)),
      a({onclick: () => deleted.val = true}, "❌"),
    )
  )
}

const TodoList = () => {
  const inputDom = input({type: "text"})
  const dom = div(inputDom,
    button({onclick: () => van.add(dom, TodoItem({text: inputDom.value}))}, "Add"),
  )
  return dom
}
Enter fullscreen mode Exit fullscreen mode

You can try it on jsfiddle

Collapse
 
johnrushx profile image
John Rush •

I will make a new article with all the recommendations from the comments.
VanJS looks cool

Collapse
 
egomesbrandao profile image
Emmanuel G. Brandão •

Why not share the repositories on Github?

Collapse
 
johnrushx profile image
John Rush •

good point, will do it for next articles, I haven't really used github for small code snippets, I make them mostly in replit, marsx or other online ides

Collapse
 
egomesbrandao profile image
Emmanuel G. Brandão •

I'm a DevOps guy, and I'm interested in build a simple app to use in my demos of build a pipeline or a cloud infrastructure... this examples, maybe, could be one!

Collapse
 
fen1499 profile image
Fen •

Really cool idea, I've been thinking about something similar for quite some time but never really got to do it

Collapse
 
johnrushx profile image
John Rush •

same languages? or you think there are more I should have covered?

Collapse
 
fen1499 profile image
Fen •

Not as many languages, I was thinking about four or five. One that I thought about and is not in the list is elixir

Thread Thread
 
johnrushx profile image
John Rush •

hah, funny part, I had it, but It felt like too many, so I decided to not include it :D

defmodule Todo do
  defstruct [:id, :title, :completed]

  def create(attrs \\ %{}) do
    %Todo{
      id: attrs[:id] || generate_id(),
      title: attrs[:title],
      completed: false
    }
  end

  defp generate_id(), do: :crypto.strong_rand_bytes(8)

end

todos = [
   Todo.create(title: "Task1"),
   Todo.create(title: "Task2"),
   Todo.create(title: "Task3")
]

Enum.each(todos, fn todo ->
  IO.puts "#{todo.id} - #{todo.title}"
end)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
alexanderisora profile image
Alexander Isora 🦄 •

so in marsx you will just import the todolist microapp and use it?

Collapse
 
johnrushx profile image
John Rush •

in the example here, I've actually built it from scratch, and itwas like 9 lines.
If you import, then it's 1 line only.

Collapse
 
bretbernhoft profile image
Bret Bernhoft •

Would you recommend Next.js over React.js as a building tool? I've been hearing good things about Next.js and would love to give it a spin soon. Thank you for the information and programming demos.

Collapse
 
johnrushx profile image
John Rush •

nextjs looks really good, im building devhunt.org on it

Collapse
 
johnrushx profile image
John Rush •

credits to fireship for all my inspirations