App Prompt

 I want to create a medical related application using plain html and JavaScript. The app should support both mobile, tab and desktop web. Local storage database to store the entire app data in JSON format Export / Import JSON functionality to share the data Installable PWA Offline support (Service Worker) Local notifications (browser-based) The app will have home, medicines, Archived Medicines, medical tests page and Profile Page Home Page: Has Gallery Grid view with list of cards, each card is a image and title to navigate to the remaining pages Medicine Page: has a header(Title, filter, sort), list and "+" floating icon, on "+" icon click opens a popup. this popup has the following input fields(Medicine name(Mandatory), uses, composition details, image, Medicine Dosage Times(Mandatory)(have a "+" icon to add each dosage time), check box to start the medication(if unchecked lifelong checkbox and the start and end date inputs will be disabled, if checked either start and end date or lifelong has to be set mandatorily), check box to show lifelong option, Start Date and End Date to be used(lifelong check box disables this field), with check box to setup alarm if checked for each dose of the day, and more details editor), save button to save the details. the saved medicines if have checked for alarm, then check for Start medication true option, if it is true, check for start and end date and if today is in the range they show as local notifications on every day dose. The list contains the saved medication only if the medication is checked for start medication and today is in range of the start and end date. the medications will be sorted based on the upcoming dosage daily time. if today is out of the start and ed date range then the medication will have a JSON property as course completed true, archived to true, other wise both are false will be displayed in the list. each list item shows medicine name, time, status(done for day, done for now), doses: completed doses/total doses per day followed by only single button done/pending for the current dosage, then resets on next dosage time, followed by menu icon, on menu click opens popup that popup contains buttons "Edit, Archive, Delete, Course Completed", Edit opens the pre filled add popup to edit the data, except for name, composition remaining are editable. Archive sets the JSON property Archived to true, Start medication checkbox value to false Delete option deletes the medicine form the medicines JSON list Completed Course option sets the JSON property Archived to true and course completed property to true, Start medication checkbox value to false. Archived Medicines page: this is similar to Medicines page but sorting is not needed, filter is not needed, instead need a search to search the medicines in the list. each list item shows medicine name, time, status(done for day, done for now), doses: completed doses/total doses per day followed by only single button Edit. On Edit opens the pre filled add popup to edit the data, except for name, composition remaining are editable. if Start medication checkbox is made to true, the JSON options convert the archived to false. but start and end date or lifelong has to be set mandatorily. on save the list gets modified/ Medical Tests Page: has a header(Title, filter(drop down name, test type), sort( dropdown name, test type, date-Time), view as dropdown(list, graph)), list and "+" floating icon, on "+" icon click opens a popup. this popup has the following input fields(Test Type, age, sample situation, sample type, Test Date, Test Time, Test Result, Notes. Test type is auto adaptable and auto fill field(means, when user enters first time, it records the entry into local db with page name, field name, list of strings so far entered and when user enters the similar next time it shows a list of suggestions from saved list to autofill). Sample situation has the common items dropdown like fasting, after breakfast, just before lunch, After Lunch, evening, before dinner, after dinner, before sleep Sample type is also adaptable Here except for notes every field is mandatory. the test results once added can be seen in list items and can be with sorted based on date, name, test type. if graph is selected, user have to select the date range, test tye, sample type(multiple options for the same type is to be allowed). based on the date range an results the graph is plotted. Profile Page: user will have a profile screen, here user able to add his name, mobile, email, address, dob, gender, with save button to save the data, export all data, import data(data will be in JSON format) the export/import button saves all the profile, medicines, tests, auto fill data based on page data to the local drive in .json file Need a professional look, Coding i to be given with proper comments to understand in later point of time as well