Skip to content

Commit 2901c5e

Browse files
varunlaul24varunlaul24
committed
Merge changes from remote
2 parents 1234aa5 + c1884e1 commit 2901c5e

File tree

5 files changed

+162
-3
lines changed

5 files changed

+162
-3
lines changed

‎.github/workflows/azure-static-web-apps-delightful-water-0584dd510.yml

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Azure Static Web Apps CI/CD
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
pull_request:
8+
types: [opened, synchronize, reopened, closed]
9+
branches:
10+
- master
11+
12+
jobs:
13+
build_and_deploy_job:
14+
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
15+
runs-on: ubuntu-latest
16+
name: Build and Deploy Job
17+
steps:
18+
- uses: actions/checkout@v3
19+
with:
20+
submodules: true
21+
lfs: false
22+
- name: Build And Deploy
23+
id: builddeploy
24+
uses: Azure/static-web-apps-deploy@v1
25+
with:
26+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_WATER_0584DD510 }}
27+
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
28+
action: "upload"
29+
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
30+
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
31+
app_location: "/" # App source code path
32+
api_location: "" # Api source code path - optional
33+
output_location: "" # Built app content directory - optional
34+
###### End of Repository/Build Configurations ######
35+
36+
close_pull_request_job:
37+
if: github.event_name == 'pull_request' && github.event.action == 'closed'
38+
runs-on: ubuntu-latest
39+
name: Close Pull Request Job
40+
steps:
41+
- name: Close Pull Request
42+
id: closepullrequest
43+
uses: Azure/static-web-apps-deploy@v1
44+
with:
45+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_WATER_0584DD510 }}
46+
action: "close"

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎README.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# NotesAppBot
2+
**Final FRT Project**
3+
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
7+
8+
**Deployement on AZURE static web app:** https://delightful-water-0584dd510.3.azurestaticapps.net
9+
10+
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.
11+
12+
## Technologies Used
13+
14+
- 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+
24+
- 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+
28+
- 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+
38+
- Azure AI Bot
39+
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+
<img width="600" alt="Screenshot 2023-10-17 at 10 59 45 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/3693743e-2200-4072-8fa3-c22b7385dc61">
43+
<br> <br>
44+
45+
- Azure Static Web Apps
46+
47+
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.
48+
49+
<img width="600" alt="Screenshot 2023-10-17 at 11 03 01 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/c6eb2b31-5684-44a1-a1e7-345d137949c6">
50+
<br> <br>
51+
52+
- Azure AI Language
53+
54+
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.
55+
56+
<img width="600" alt="Screenshot 2023-10-17 at 11 00 40 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/6ac8053f-9ef4-40a0-9312-c87057e00933">
57+
<br> <br>
58+
59+
- Azure Cognitive Search
60+
61+
Azure Cognitive Search provides the infrastructure and tools to create search solutions that extract data from various structured, semi-structured, and unstructured documents.
62+
63+
<img width="600" alt="Screenshot 2023-10-17 at 7 29 39 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/831c7840-c4b3-459d-b7a1-b468667aa5d0">
64+
65+
<img width="600" alt="Screenshot 2023-10-17 at 11 01 23 PM" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/b865ae5c-9013-4c7e-af25-83302ec24471">
66+
<br>
67+
68+
## Question Answering Knowledge Base
69+
<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">
70+
71+
## Getting Started
72+
73+
1. Clone the repository.
74+
2. Open the `index.html` file in a web browser.
75+
76+
## User Interface
77+
<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">
78+
79+
## How to Use
80+
81+
- **Add a Note:** Fill in the title and text fields, then click the "Save" button.
82+
<img width="500" alt="1" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/1955932c-6953-42fd-9fa3-f58b2062f69e">
83+
84+
- **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.
85+
<img width="500" alt="2" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/db5c4e88-be41-495e-a8f3-150b30f79668">
86+
87+
- **Search Notes:** Enter keywords in the search bar to filter notes.
88+
<img width="500" alt="3" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/2bfe3b4d-05b2-4e17-a32e-abac32ef8db3">
89+
90+
- **Bot Service:** Engage in a chat with the Magic Assistant to get assistance or information.
91+
<img width="250" alt="4" src="https://github.com/varunlaul24/NotesAppBot/assets/90101931/0bb40b72-d46a-4825-8c7a-49a661096c81">
92+
93+
## Git Commands used to deploy this app on Github
94+
git init
95+
96+
git add .
97+
98+
git commit -m "1st commit"
99+
100+
git remote add origin https://github.com/varunlaul24/NotesAppBot.git
101+
102+
git push -u origin master
103+
104+
105+
## Acknowledgments
106+
107+
- [Bootstrap](https://getbootstrap.com/) for styling.
108+
109+
## Future Enhancements
110+
111+
1. Mark a note as important.
112+
2. Separate notes by user.

‎index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
</div>
3636
</div>
3737
</nav>
38-
3938
<h1 class="welcome">Welcome to Notes App!</h1>
4039

4140
<div class="container my-3">

‎styles.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,5 +109,4 @@ iframe {
109109
.welcome{
110110
margin-left: 1.5rem;
111111
margin-top: 1rem;
112-
}
113-
112+
}

0 commit comments

Comments
 (0)