Leaderboard

Great! If you already have a language under your belt, learning front end stuff will be easier. I do a lot of PHP coding as well. Sometimes I know how to do something in PHP, but not Javascript. So, I'll ask Perplexity.ai and provide a sample PHP snippet of code and ask: "Is there a way to do this functionality in Javascript?" and it will provide sample code to test. I'm at a point now, where I want to focus on the logic of the code, and not get bogged down doing low-level UI stuff. That's where 3rd party libraries and frameworks like node.js or vue.js come in handy. My next big leap is to learn how to use these tools. I'm also looking into Socket runtime https://socketsupply.co/guides/ for networking my apps. Keep going with your coding! You'll get there.

Hi, You're welcome. I'm glad that the code was helpful. I wrote this code over a period of a few weeks (on and off). I would just work on it a little at a time. I started by studying the To Do List on the W3 Schools example. I liked it a lot. But, I wanted to make some changes. So, I began by downloading their code and then adding my own functions to it to make it do the things I wanted to see. I have also been learning Bootstrap so it was a good chance for me to practice with that too (e.g. layout and modal windows). I'm still around on the forums occasionally, but, I get busy with stuff. If you have any questions you can post them here and I'll try to help when I see it. Other people in the forum might chime in and help answer your questions too. Javascript, like any other skill, is something you learn over time and build on. When you are studying math, you can't jump right into advanced level mathematics and expect to know how to do it. You start with the basics (addition, subtraction, multiplication) and work your way up slowly. Each concept you learn builds on the previous concepts you've learned. Believe it or not, I knew almost nothing about Javascript or front-end UI development 3 years ago. I decided I wanted to learn how to do it and have worked my way through all the HTML / Javascript / CSS lessons on W3 Schools. I think that the trick is to just do it. Start off with some sample code. Then, keep working on that sample code and changing it until you get it to do what you want. Studying text lessons is great for overall knowledge and understanding. But, until you get your hands dirty and dive into the code, it won't make any sense. Once you start writing the code then the things you've read will make sense. "OH! So, that's why I can't do it this way! I get it now!" I am one of those people who is very anti-library and anti-framework. I don't really use Node.js or external 3rd party libraries. I try to do everything in HTML with vanilla Javascript. But, as I have gotten more advanced in my coding, I can see how certain things save time. (Example: Jquery, or Bootstrap, or 3rd party libraries like "Sortable.js"). I started writing the drag-and-drop functionality in my To Do List so that it works on mobile. But, it was very complex and taking a lot of my time. I eventually decided to look and found that Sortable.js already existed and worked well. So, I implemented it into my To Do List rather than writing all the code myself from scratch. But, try some ideas of your own! I would begin with the original example from here: https://www.w3schools.com/howto/howto_js_todolist.asp Make sure you understand how it's working. And what's going on with the code. Then, after you understand that, you can expand your knowledge to focus on things like "reading / writing to local storage", "working with JSON data", etc. I would start with one feature at a time though. Pick something you want the To Do List to do. (Example: "I want to be able to have categories for my To Do items") Then, start with the original HTML / Javascript / CSS and try to add that one feature. If you can do that, then you can add other features. But, just try to break it down to smaller components and focus on one thing at a time. Don't get overwhelmed by looking at everything all at once. There are also great AI tools like https://perplexity.ai out there you can use to help you find resources. I like to use AI tools like this to prototype apps. I describe my idea to the AI tool which generates a basic framework to start from. Then, I expand and improve on the code. But, be careful, because AI tools are not "smart" nor do they really understand things. You have to know enough about HTML / Javascript / CSS to know when the AI tool is making a mistake (or suggesting something that won't work). Use logic and deductive reasoning on your own and don't rely on the AI tool to do all the work for you. If it says something wrong -- tell it that it's wrong and ask it to fix the problem. Using tools like this, I am able to quickly go from idea to working code. Then, I just keep refining and improving it. Also, DON'T FORGET TO MAKE BACKUPS! I like to do a lot of iterations of my code. I have "test1", "test2", "test3", etc. Back up your work regularly so that if you accidently undo or break something you had that was working you can go back and find the back up copy and restore it. Sometimes my dev folders are a giant mess because I like to test a lot of different ideas. The best thing to do is create a new sub-folder and give it a descriptive name (e.g. "category-test"). Having a good dev environment makes things easier too. On my Windows 10 laptop, I'm running: 1. Uniform Server Zero (WAMP server) 2. Visual Studio Code I also prefer Chrome-based browsers (e.g. Vivaldi) for developing. But, I also test in Firefox and Microsoft Edge. I hope this helps? Good luck with your coding. Let me know if you have any specific questions about my To Do List code.

Here, I've updated the code to use flexboxes. Replace your CSS file with this. The part that was causing trouble was the logger, because it needs to fit properly within the height of the footer at the same time that the footer has to fit in to body, so they each need their own flexbox arrangement. *{ box-sizing: border-box; overflow-wrap: anywhere; } html, body{ width: 100vw; height: 100vh; padding: 0; margin: 0; } body{ --hdheight: 1.5em; --navheight: 1.5em; --ftheight: 6.5em; --wth: 40em; display: flex; flex-direction: column; align-items: stretch; } #header{ font-weight: 600; height: var(--hdheight); background-color:yellow; flex: 0 0 auto; } #nav{ height: var(--navheight); background-color:greenyellow; flex: 0 0 auto; } #main{ overflow: auto; flex: 1 1 auto; height: 100%; } #footer{ height: var(--ftheight); flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; } #footbar{ width: inherit; height: 1.5em; text-align:center; background-color:forestgreen; flex: 0 0 auto; } #logger{ background-color: #111; color:antiquewhite; overflow: auto; height: 100%; flex: 1 1 auto; } button{ background-color:coral; border-color: coral; border-radius:0.5em; box-shadow: 0.2em 0.2em #ccc; text-indent: 0.25em; vertical-align: middle; } .btn{ display: inline; background-color:antiquewhite; border-color:beige; border-radius:0.25em; box-shadow:none; text-indent:0; font-weight:500; height: 1.5em; box-sizing: border-box; vertical-align: middle; line-height: 0.25em; } .inputbox, .outputbox{ width: var(--wth); padding: 0.5rem; margin:0rem 0rem 0.5rem 0rem; } .inputbox{ border:1px solid black; border-radius:0.25rem } .outputbox{ background-color:darkblue; border:medium dashed chocolate; color:bisque; }

The #logger element doesn't have a fixed height, so the scroll bar on it doesn't do anything. If you remove the overflow from #logger and put "overflow: auto" or "overflow:scroll" on the #footer instead then it will scroll correctly.