Skip to content

kruthish18/JSONReminderApp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Full Name : Kruthi Shankar Hegde

NUID : 002618976

Fourth assignment for INFO6150, where we are Building a Reminder Application using JavaScript, HTML, and SCSS

Introduction.

Introduction An application to set the reminders was created using JavaScript, HTML, and SCSS. The application uses an XHR object to load reminder data from a JSON file and display it on the homepage. When we click on the reminder name, we can see its detailed view. User can tick the checkbox next to the reminder to indicate that it is completed. There is a form, theough which we can add a new reminder as well.

steps to commit : step 1: clone your git repository using git init command step 2: open the folder and add all the files of your web page step 3: use git add -A command to save/stage and add all the files in the repo folder step 4: git commit -m "message" to commit the changes type the desired message step 5: git push to push all the file on your git repo step 6: refresh your gitHub to view the changes

steps to update scss files : step1 : open terminal of VScode step2 : npm init to initialize tour npm package step3 : press enter key and yes for the installation step4 : type npm install -g sass to install sass inbuilt files step5 : type npm i sass --save to save the installation step6 : manually create a dist folder and add all the .css files there step7 : change .css files to .scss files (by changing the extension) step8 : type npx sass styles/main.scss dist/main.css to view the changes in your stylesheet step9 : everytime you make changes to .scss files or .html file, repeat step8 to view the output step10 : change the file path of css file in .html file

How to run the project: The homepage of the Reminder App is index.html. To get started, simply open the index.html file in a web browser. The reminder list and the form to add new reminders will be displayed on the page.

Usage

  • Click on the name of the reminder to view it in detail.
  • Check the box next to a reminder to indicate that it is completed.  
  • You can create a new reminder, by clicking the "Add Reminder" option and completing the form.

credits:-

  1. https://www.w3schools.com/
  2. https://www.pexels.com/
  3. https://stackoverflow.com/

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published