Kevin Powell - Community•16mo ago

Attempting a todo list - have I made life difficult by hardcoding the HTML?

https://github.com/callum-laing/todo-list I've built the layout and now I need to add the interactivity to the page. When I hit "Add Task" I want a popup box to appear with title, due date and the details (project). When you hit OK I want this to populate either into a list, or a card, and down the sidebar on the left it'll populate the title as a list. I'm not entirely sure how I go about doing this with hardcoded HTML. My last project was smaller, and everything was innerHTML'd into their own modules, so I'd remove the contents of one and load the other on button click, which was quite simple. I'm lost as to how I'd achieve this this way... or am I better off just moving it all into the DOM like I've just stated? I have https://github.com/callum-laing/restaurant which is showing the module replacement I mentioned. I have https://github.com/callum-laing/library which is showing the card creation after input that I mentioned. am I making this more complex than it should be? 😄 are .js module files the way to go with createElement/innerHTML/textContent?

13 Replies

Chris Bolson•16mo ago

Not everything needs/should be loaded via components - you will probably need to do both. You will have "static" elements that don't change (header, nav etc.) and the dynamic elements such as your side list and cards. What you need to do here is basically the same as what your have done in your previous examples - replace the specific DOM element with the new contents. In the case of "todos", I would think that the best method is to store all of them in a JS array (object) and load them as per your components. When you add a new one re-render the complete list (side and cards). With a single render* function you will cover all possibilities: add, edit, delete, filter & sort as it will simply loop through the todos array after it has been modified. [by "render" I basically mean a function that loops through all your todos, extracts the data and adds them to the DOM]

CDLOP•16mo ago

Thanks for the tips, I'll give it a proper read through after work and see if I can make a start on it! got a feeling this might take me a few days (weeks)

croganm•16mo ago

Also maybe look into Astro! It's basically just HTML with a few extra features, such as components so not everything is hard coded

CDLOP•16mo ago

Just to sanity check here. So I could code the layout in html for the sidebar + header, and I'd need to move the body content (Home, and the add task button) into a js module, because that's going to be changed around with other js modules right I think I read what you said properly. If it's static and it's not going to change - html is fine. If it's going to change - might wanna DOM it

b1mind•16mo ago

If you like Astro you should checkout Svelte Kit. 🥲

croganm•16mo ago

Haha I love sveltekit as well. I feel Astro is a little bit easier for some newcomers to wrap their head around just because it's so similar to vanilla web dev. As such, I use Astro for my simple static sites. Anything requiring SSR (even though Astro can do this) and true framework capabilities, I'm taking sveltekit over any of the other frameworks out there! I also feel like Astro is a good stepping stone for sveltekit!

b1mind•16mo ago

I found Svelte Kit easier personally, you don't have to deal with the MD style front matter so it's closer to the native API and params Well ig it's more like nunjucks so if you were familiar with it or like 11ty Astro might feel better too Either are a great option though! But I just lean on Kit because it does all the things(ssr/ssg/hybrid/csr/forms) but better imo and closer to the native api's

croganm•16mo ago

That's fair, it's a bit different than the classic DOM Manipulation though that many newcomers are learning as they go through Javascript basics, but that's just frameworks as a whole. The frontmatter is really the only difference though, and it uses that instead of a script tag. Outside of that, it operates similarly. Plus, if they want to start learning frameworks, they can try some different ones and integrate them in one at a time! This way, they can get comfortable with the frameworks before fully committing. When I built my custom CRM for my business though, I used Sveltekit and it was a breeze. I'm not dismissing kit at all because it really is incredible, just frameworks as a whole are very different (even kit, which is as close to vanilla js as any framework out there). You start having to worry about SSR, Form validation and endpoints, and so on. All of that is essential, just overwhelming for some when first starting 😂

CDLOP•16mo ago

wtf why is my post a sveltekit vs astro debate 🤣

Chimi•16mo ago

Neither! Bootstrap only!!!!!!! Sorry 😂

CDLOP•16mo ago

b1 (if you're still here). My thoughts on the project. I can keep the sidebar + header in the html. But I need to remove the main-content from the html and put it into a module. I want this to change depending on the sidebar button I click. Home brings up the add task button, Today brings up tasks due today and Upcoming brings up any task due in the future

Chris Bolson•16mo ago

You don't need to move anything. You could change the contents of the H2 (home) dinamically without having to remove it. Also, if the "+ add task" button is going to be available in all the "pages" there is no need to move it Just create an empty "holder" below the button and load the contents (todo lists) in that.

CDLOP•16mo ago

My initial plan was to have home be the add task button, then today show tasks due today, and upcoming show tasks due tomorrow onwards, so I thought I'd make those 3 js modules that load on the sidebar click. I did try moving the main-content (add task button) into a module, but I'm hitting a wall trying to load it, so I may just revert back to the html. I've never done this before (Combining content in the html with a root id in the html) so where do I target the js modules? I'll create the "today" js module, would I target the main-content div in the html? (the one that is wrapping the "+add task" button. home.js

function homeTab() {
  const homePage = document.querySelector("#mainContent");
  homePage.innerHTML = `<div class="content-title">
        <h2>Home</h2>
      </div>
      <div class="task-list">
        <button class="add-task"><svg class="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>plus</title>
            <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
          </svg> Add Task</button>
      </div>`;
  return homeTab;
}

export default homeTab();

function homeTab() {
  const homePage = document.querySelector("#mainContent");
  homePage.innerHTML = `<div class="content-title">
        <h2>Home</h2>
      </div>
      <div class="task-list">
        <button class="add-task"><svg class="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>plus</title>
            <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
          </svg> Add Task</button>
      </div>`;
  return homeTab;
}

export default homeTab();

main.js (this is inside the script tag in my html)

import homeTab from "./src/home";

function loadInitialContent(mainContent) {
  const container = document.querySelector("#mainContent");
  container.appendChild(homeTab);
}

document.addEventListener("DOMContentLoaded", () => {
  loadInitialContent(homeTab);

  const homeLink = document.querySelector("#homeLink");
  homeLink.addEventListener("click", () => {
    loadInitialContent(homeTab);
  });
});

import homeTab from "./src/home";

function loadInitialContent(mainContent) {
  const container = document.querySelector("#mainContent");
  container.appendChild(homeTab);
}

document.addEventListener("DOMContentLoaded", () => {
  loadInitialContent(homeTab);

  const homeLink = document.querySelector("#homeLink");
  homeLink.addEventListener("click", () => {
    loadInitialContent(homeTab);
  });
});

Gaming

Programming

Attempting a todo list - have I made life difficult by hardcoding the HTML?