Skip to content

Commit 96669fb

Browse files
authored
2nd Update
1 parent 115e187 commit 96669fb

File tree

1 file changed

+68
-9
lines changed

1 file changed

+68
-9
lines changed

README.md

Lines changed: 68 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,95 @@
11
# NotesAppBot
22
**Final FRT Project**
33

4-
**Project Demo Video URL:** https://www.youtube.com/watch?v=14zMpYGPIUs
4+
**Project Demo Video URL:**
5+
- https://www.youtube.com/watch?v=14zMpYGPIUs
6+
- https://www.loom.com/share/6a82a649bc0a4c6ebf060c5ec3620284?t=183&sid=b8716bdb-418b-4677-95aa-bed290cd83a5
57

68
**Deployement on AZURE static web app:** https://delightful-water-0584dd510.3.azurestaticapps.net
79

810
This is a simple web-based notes application built with HTML, CSS, and JavaScript. The app allows users to add, delete, and search notes. Additionally, it includes a chat interface with a Magic Assistant.
911

10-
## Features
11-
12-
- **Add Notes:** Enter a title and text for your note and click "Save" to add it to your list of saved notes.
13-
- **Delete Notes:** Remove unwanted notes with the click of a button. A confirmation prompt ensures you don't accidentally delete important notes.
14-
- **Search Notes:** Use the search bar to filter notes based on their content.
15-
- **Chat with Magic Assistant:** Engage in a chat with the Magic Assistant to get assistance or information.
16-
1712
## Technologies Used
1813

1914
- HTML
15+
16+
Document Structure: The HTML file establishes the basic structure of the web page using standard HTML tags. It includes a head section with meta tags for character set and viewport configuration.
17+
18+
External Libraries: Utilizes Bootstrap (v5.3.2) via CDN for styling and responsiveness. Imports jQuery and Popper.js for Bootstrap functionality.
19+
20+
Navigation Bar: Implements a responsive navigation bar using Bootstrap's navbar component. Includes a Home link and a search form in the navigation bar.
21+
22+
Main Content: Contains a welcome message and two main sections: left and right. The left section is dedicated to adding and displaying notes. The right section features an embedded chat interface.
23+
2024
- CSS (Bootstrap for styling)
25+
26+
It defines the styling for the entire application. It customises the appearance of the navigation bar, buttons, cards, and other elements. Utilizes Bootstrap classes and adds custom styles for a cohesive and visually appealing design. It also ensures a responsive layout with CSS rules.
27+
2128
- JavaScript
29+
30+
Adding and Displaying Notes: Enables users to add notes with a title and text, storing them in the browser's local storage. Retrieves notes from local storage and dynamically displays them on the page.
31+
32+
Deleting Notes: Implements a function to delete notes with a confirmation prompt to prevent accidental deletions. Updates the local storage and refreshes the displayed notes.
33+
34+
Search Functionality: Implements a search feature that dynamically filters displayed notes based on user input. Updates the visibility of note cards based on the content matching the search query.
35+
36+
Interaction with External APIs: Embeds an iframe to integrate a chat interface with a Magic Assistant using the Bot Framework Web Chat API.
37+
2238
- Azure AI Bot
2339

40+
The chat interface embedded in the right section of application is powered by an Azure Bot. This bot is created using the Azure Bot Framework, providing conversational abilities to interact with users.
41+
42+
- Azure Static Web Apps
43+
44+
Azure Static Web Apps can simplify the deployment and hosting of static web applications. Instead of deploying app on traditional web hosting, we can use Azure Static Web Apps for a serverless hosting solution. It integrates with GitHub, providing a seamless deployment process whenever we push changes to our repository.
45+
46+
- Azure AI Language
47+
48+
The Language service is a part of the Azure Cognitive Services offerings that can perform advanced natural language processing over raw text. It includes a custom question answering feature that enables us to create a knowledge base of question and answer pairs that can be queried using natural language input.
49+
50+
51+
- Azure Cognitive Search
52+
53+
Azure Cognitive Search provides the infrastructure and tools to create search solutions that extract data from various structured, semi-structured, and unstructured documents.
54+
55+
<img width="500" alt="Screenshot 2023-10-17 at 7 29 39 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/831c7840-c4b3-459d-b7a1-b468667aa5d0">
56+
57+
## Question Answering Knowledge Base
58+
<img width="500" alt="Screenshot 2023-10-17 at 9 05 05 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/5560d689-8d0e-4cd3-80fb-bc2bae82f20f">
59+
2460
## Getting Started
2561

2662
1. Clone the repository.
2763
2. Open the `index.html` file in a web browser.
2864

65+
## User Interface
66+
<img width="500" alt="Screenshot 2023-10-17 at 7 29 39 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/198000d4-b330-4fdb-a35c-8db0bff0c733">
67+
2968
## How to Use
3069

3170
- **Add a Note:** Fill in the title and text fields, then click the "Save" button.
32-
- **Delete a Note:** Click the "Delete" button on the note you want to remove.
71+
<img width="500" alt="1" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/1955932c-6953-42fd-9fa3-f58b2062f69e">
72+
73+
- **Delete a Note:** Click the "Delete" button on the note you want to remove. A confirmation prompt ensures you don't accidentally delete important notes.
74+
<img width="500" alt="2" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/db5c4e88-be41-495e-a8f3-150b30f79668">
75+
3376
- **Search Notes:** Enter keywords in the search bar to filter notes.
77+
<img width="500" alt="3" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/2bfe3b4d-05b2-4e17-a32e-abac32ef8db3">
78+
79+
- **Bot Service:** Engage in a chat with the Magic Assistant to get assistance or information.
80+
<img width="250" alt="4" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/0bb40b72-d46a-4825-8c7a-49a661096c81">
81+
82+
## Git Commands used to deploy this app on Github
83+
git init
84+
85+
git add .
86+
87+
git commit -m "1st commit"
88+
89+
git remote add origin https://github.com/varunlaul24/NotesAppBot.git
90+
91+
git push -u origin master
92+
3493

3594
## Acknowledgments
3695

0 commit comments

Comments
 (0)