Request Dev Services ยป

theDevTip.com

Vanilla JS ‘front-end-screen’ UI demo of a ‘File System’ app!

This fun Demo will consist of a ‘front-end-screen’ of a hypothetical ‘file-system’ web application. I’ll use twitter bootstrap (because everyone seems to like that one) and old-school vanilla JavaScript to process ready object data (potentially for parsing JSON, but for now I’ll hardcode some inline for demo purposes).

You’ll be able to fill out a web form, and have the input values post to the JS data object to be stored, and saved; you can watch it output in the list of files. You can change the current directory, and watch your submitted input update the text. The CSS will allow a vertical scroll on the main right side of the screen; but not the left nav area. A checkbox radio; that will allow all other check-boxes to be selected. A search bar, with a fuzzy focus animation; and an auto-complete regex functionality done from scratch! Check out the full demo link below!





[ Click here for the full live demo ]



Of course to pursue this concept further; we would add appropriate validations, and develop more of a back-end to store everything!

About the Author
Cameron Cashwell Web Developer
I build websites, web apps, and software. Wanna work together? Let's chat about your project!

Leave a Reply

avatar
  Subscribe  
Notify of