Avdhesh-Varshney · Avdhesh-Varshney · May 26, 2024 · May 26, 2024 · May 26, 2024 · May 26, 2024
diff --git a/Angular-JS-Projects/Basic/Quick-Notes/README.md b/Angular-JS-Projects/Basic/Quick-Notes/README.md
@@ -0,0 +1,54 @@
+<h1 align='center'><b>💥 QuickNotes 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+   ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 
+ ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 
+   ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white)
+
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+- Fork the project and run the `index.html` file directly on any browser.
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<img src='screenshot.webp'>
+
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Ishavdeep Kaur</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/ishavdeep-kaur-078902282'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/osmoosiis'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Angular-JS-Projects/Basic/Quick-Notes/app.js b/Angular-JS-Projects/Basic/Quick-Notes/app.js
@@ -0,0 +1,34 @@
+// AngularJS
+angular.module('QuickNotesApp', [])
+    .controller('NotesController', function ($scope) {
+        // Initialize notes array
+        $scope.notes = [];
+
+        // Load notes from local storage when the page loads
+        if (localStorage.getItem('notes')) {
+            $scope.notes = JSON.parse(localStorage.getItem('notes'));
+        }
+
+        // Function to add a new note
+        $scope.addNote = function () {
+            if ($scope.newNote.title && $scope.newNote.body) {
+                $scope.notes.push({ 
+                    title: $scope.newNote.title,
+                    body: $scope.newNote.body
+                });
+                $scope.newNote.title = '';
+                $scope.newNote.body = '';
+                // Save notes to local storage
+                localStorage.setItem('notes', JSON.stringify($scope.notes));
+            }
+        };
+
+        // Function to remove a note
+        $scope.removeNote = function (index) {
+            $scope.notes.splice(index, 1);
+            // Save notes to local storage
+            localStorage.setItem('notes', JSON.stringify($scope.notes));
+        };
+
+
+    });
diff --git a/Angular-JS-Projects/Basic/Quick-Notes/bg.webp b/Angular-JS-Projects/Basic/Quick-Notes/bg.webp
diff --git a/Angular-JS-Projects/Basic/Quick-Notes/index.html b/Angular-JS-Projects/Basic/Quick-Notes/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="QuickNotesApp">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>QuickNotes</title>
+
+    <!--Link the css styles to index file -->
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body ng-controller="NotesController">
+    <h1>QuickNotes</h1>
+
+    <div class="container">
+        <!-- Note Title input box -->
+        <input type="text" ng-model="newNote.title" placeholder="Title" class="note-input">
+
+        <!-- Note Body input box -->
+        <textarea ng-model="newNote.body" placeholder="Add text here" class="note-input"></textarea>
+
+        <!-- Add button -->
+        <button class="add-button" ng-click="addNote()">Add</button>
+
+        <!-- List of notes -->
+        <ul>
+            <li ng-repeat="note in notes">
+                <!-- Note Title -->
+                <strong>{{ note.title }}</strong><br>
+                <!-- Note Body -->
+                {{ note.body }}
+                <!-- Remove button for each note -->
+                <button class="remove-button" ng-click="removeNote($index)">Remove</button>
+            </li>
+        </ul>
+    </div>
+
+    <!--For linking the sceipt file to index file-->
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Angular-JS-Projects/Basic/Quick-Notes/screenshot.webp b/Angular-JS-Projects/Basic/Quick-Notes/screenshot.webp
diff --git a/Angular-JS-Projects/Basic/Quick-Notes/styles.css b/Angular-JS-Projects/Basic/Quick-Notes/styles.css
@@ -0,0 +1,82 @@
+/* CSS styles */
+html, body {
+  height: 160%; /* Ensure HTML and body fill the entire viewport */
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f1e9e9;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  text-align: center;
+  margin-top: 60px;
+  font-family: "Arial", sans-serif; /* Change the font family */
+  font-size: 50px; /* Change the font size */
+  color:#6d36c0;
+  margin-bottom: 60px; /* Add some space below the title */
+
+}
+
+
+.container{
+  width: 80%; /* Make container width responsive */
+  max-width: 600px; /* Limit maximum width */
+  margin: 20px auto;
+  background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background */
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  height: 490;
+
+}
+
+.note-input {
+  width: calc(100% - 20px); /* Make input fields responsive */
+  padding: 8px;
+  margin-bottom: 10px;
+}
+
+button {
+  padding: 8px 20px;
+  margin-right: 10px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+}
+
+.add-button {
+  background-color: #8b70d6;
+  color: white;
+
+}
+
+.remove-button {
+  background-color:#8b70d6;
+  color: white;
+  margin-left: 30px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin-bottom: 20px; /* Add space between each note */
+}
+
+li strong {
+  display: block; /* Ensure title appears on its own line */
+}
+
+/* Set background image */
+body {
+  background-image: url('bg.webp'); 
+  background-size: cover;
+  background-position: center;
+  background-repeat: repeat;
+}
diff --git a/Angular-JS-Projects/README.md b/Angular-JS-Projects/README.md
@@ -25,7 +25,7 @@
 
 | S.No  | Project Name | Category |
 |-------|--------------|----------|
-|   1   |  |  |
+|   1   | [QuickNotes](./Basic/Quick-Notes) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |   2   |  |  |
 
 

diff --git a/Next-JS-Projects/README.md b/Next-JS-Projects/README.md
@@ -38,4 +38,4 @@
 <div align="center">
 	<h3>Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
 </div>
-<a href="#top"><img src="https://img.shields.io/badge/-Back%20to%20Top-red?style=for-the-badge" align="right"/></a>
+<a href="#top"><img src="https://img.shields.io/badge/-Back%20to%20Top-red?style=for-the-badge" align="right"/></a>