Practising What I Preach (TO DO List Exercise)

I'd said one should do the Duke University To-Do-List exercise every so often to maintain confidence. I stand by it. It takes about 45 minutes the very first time - following the tutorial. Took me almost 90 minutes today starting from a blank codepen.

Try it again with no recourse to a walk-through doc, and you learn so much more - so many new questions come up.

In the old implementation, now I realize I have a bug - a task could be "done" or "important", but not both. So, if I had a task that was "done", and now I clicked the "important" button, it's class would change and I would no longer be able to delete it :)

Another feature added : return focus to the text field for task-name after adding the task - that's a cool one - probably more useful for testing than anything :)

item.classList.contains(name), .add(name), .remove(name) - your best friends.

When you call a function, use onclick="funcName(this)" or "funcName(this.parentNode)" to send the element or its parent (if element is a button, you want to send the list-item that this button belongs to :)

A sad day - found Chrome is really useless - slows down so much if you open W3schools :( Have to use Edge now to follow links..

Comments

Post a Comment

Popular posts from this blog

How Should You Put Your Text in a Box?

Image
Per the great bloggers, it helps your cause to put your message in a box But, how? I mean, easily? :) Do it once (use these steps, which I got from chatGPT) and, once you have a blog that you can look at in edit mode, you can always cut and paste. Go into Edit HTML mode. If necessary, use a tool like freeformatter.com to make the HTML that your blogging platform creates for you readable (with indentation, etc). Now, locate the text you want to enclose in a box and surround it with : <div style="border: 2px solid COLOR_OF_CHOICE; padding: 10px;"><p><span style="font-family: FONT_OF_CHOICE;"> and </span></p> </div> NOTE : With very little text, you may benefit from adding : display: inline-block; max-width: max-content; //within the style setting For chatGPT: (click to select) When I say 'FORMAT,COLOR,WIDTH,PAD:', followed by some text, please generate HTML tags that ...
Read more

Tricks : Getting Image URL When Page Doesn't Want You To!

This one for example. Why? A good reason I guess... Thankfully , what one can invent, another can discover as Dr. Doyle puts it.. Open Chrome Developer Tools (Right-click > Inspect) Expose the Application menu (might need the right pointing chevron >> ) This gives you a new left panel that has menus like Manifest, Storage, Cache, etc. Scroll down and use the expansion arrow under Frames Then expand Images If, after this you don't k how to grab the URL, hey, McD is hiring 😊
Read more

A Web Interface to Try Dual Key Caesar Cipher Encryption and Decryption

https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Give it a try. If it looks less pretty than it could, it's because I don't know how to hack Blogger well enough 😊 If you Google "decode caesar cipher", you get to : https://www.dcode.fr/caesar-cipher https://www.boxentriq.com/code-breaking/caesar-cipher https://www.thewordfinder.com/caesar-cipher-solver/ All of which are okay for a single key - for encoding. One of them probably does true solving in the sense of finding the best candidate after brute force searching. But none does true code-breaking by looking at character frequency (unless they do😊). But what about two keys?!! There wasn't anything online (for decrypting that is. The dcode site does do encryption, but is really hard to use) Until now :) Give it a try :  https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Kudos to Tamer Abd Alrazaq for porting the java to javascript and getting it to work in the blink of ...
Read more