/studying-vanilla-javascript

Simple system for data manipulation with JavaScript client-side. Full sample of a CRUD (create, read, update & delete) with use of the local browser storage.

Primary LanguageHTMLMIT LicenseMIT

📚 Simple CRUD with Vanilla JavaScript

Lessons Learned   |    Technologies   |    Environment Setup   |    Features

Creation Date Update Date Latest Version Pull Requests Welcome Project License

Application snapshot

Frontend web CRUD application developed to refresh knowledge of DOM manipulation using vanilla JavaScript (no frameworks). This project was proposed and developed in Hcode's Udemy course, an awesome one - 😃 highly recommended!

Check out the application running!

🏆 Lessons Learned

  • ES6+ class notation;
  • localStorage/sessionStorage API;
  • FileReader to convert binary files into a Base64 encoded string;
  • HTML data-* custom attributes API;
  • How to create an app based on Admin LTE 3;
  • Overall tips on DOM manipulation;
  • Bundling the application with Parcel.js

🚀 Technologies & Resources

Development:

  • Visual Studio Code
  • Parcel.js (for application bundling)

🔨 Setting up the Environment

Make sure to have Node.js 10+ installed in your machine and its npm available in the command line, then use the following routines:

$ npm install   # Download dependencies
$ npm start     # Run development server
$ npm run build # Build files for production

⚡ Features Implementations

  • Restore saved users from browser's local storage;
  • Create new users;
  • Edit existing users;
  • Delete existing users;
  • Save changes to browser's local storage;
  • Upgrade UI components to AdminLTE 3;