dsc-x / omg-frames

https://myframe.dscomg.com
MIT License
6 stars 12 forks source link

UI Updated and API's Implemented #5

Closed rajinderpalsingh2001 closed 3 years ago

rajinderpalsingh2001 commented 3 years ago

UI Updated According to Wireframes

List of API's Implemented

Refer tologinsignup.js script file Used session.Storage() for storing token

  1. Login
  2. SignUp
  3. Save Frame
  4. Get Frames
  5. Delete Frame

Additional Features

  1. Crop (User can crop the image after selecting)
  2. jQuery Form Validation
  3. Manually Enter Filename before Saving

JavaScript functions for ease of usage

Refer to main.js

  1. hideshowcropwindow(val) and openclosecontentinmiddle(open) { } just call the function by passing parameter (id of element) for opening the target element, remaining elements will be collapsed(collapsed) this contains array all elements to which operation is applied
  2. loader(action){ } Just call loader('show') to show spinning loader on whole screen and call loader('hide') to hide the spinning loader
  3. alertpopup(text,par){ } Just call this function to show alertpopups like Frames Added Successfully or Frame Deleted Successfully It has two Parameters 1. text--> Text to be shown 2. par--->'show' or 'hide'
  4. in loginsignup.js script file, created functions for API's with various required checks.
  5. Used Croppie.js for cropping, used local file instead of CDN, and made some changes required for dashboard (i.e. oninput/ onchange output shows by triggering function named showcroppedresult(){ })
  6. Other functions required by program are also in main.js script file.

Dark Mode

  1. Used different CSS files for light(default) and dark mode (i.e. styledashboard.css for light mode and darkdashboard.css for dark mode)
  2. Used localStorage() for setting theme --->localStorage.setItem('theme','dark')