structure updates

tech_docs/JS Cheat Sheet.md

@@ -0,0 +1,162 @@
+# JavaScript Cheat Sheet for Web Development
+
+## 1. Variables and Data Types
+
+```javascript
+let myVariable = 5; // Variable
+const myConstant = 10; // Constant
+let string = "This is a string";
+let number = 42;
+let boolean = true;
+let nullValue = null;
+let undefinedValue = undefined;
+let objectValue = { a: 1, b: 2 };
+let arrayValue = [1, 2, 3];
+let symbol = Symbol("symbol");
+```
+
+## 2. Operators and Conditionals
+
+```javascript
+let a = 10,
+  b = 20;
+let sum = a + b;
+let difference = a - b;
+let product = a * b;
+let quotient = a / b;
+let remainder = a % b;
+if (a > b) {
+  console.log("a is greater than b");
+} else if (a < b) {
+  console.log("a is less than b");
+} else {
+  console.log("a is equal to b");
+}
+```
+
+## 3. Strings, Template Literals and Arrays
+
+```javascript
+let hello = "Hello,";
+let world = "World!";
+let greeting = hello + " " + world; // 'Hello, World!'
+let world = "World!";
+let greeting = `Hello, ${world}`; // 'Hello, World!'
+let fruits = ["Apple", "Banana", "Cherry"];
+console.log(fruits[0]); // 'Apple'
+fruits.push("Durian"); // Adding to the end
+fruits.unshift("Elderberry"); // Adding to the start
+let firstFruit = fruits.shift(); // Removing from the start
+let lastFruit = fruits.pop(); // Removing from the end
+```
+
+## 4. Functions and Objects
+
+```javascript
+function add(a, b) {
+  return a + b;
+}
+let subtract = function (a, b) {
+  return a - b;
+};
+let multiply = (a, b) => a * b;
+let car = {
+  make: "Tesla",
+  model: "Model 3",
+  year: 2022,
+  start: function () {
+    console.log("Starting the car...");
+  },
+};
+console.log(car.make); // 'Tesla'
+car.start(); // 'Starting the car...'
+```
+
+## 5. DOM Manipulation
+
+The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document and enables a way to manipulate its content and visual presentation by treating it as a tree structure where each node is an object representing a part of the document. The methods under this section help in accessing and changing the DOM.
+
+```javascript
+let element = document.getElementById("myId"); // Get element by ID
+let elements = document.getElementsByClassName("myClass"); // Get elements by class name
+let elements = document.getElementsByTagName("myTag"); // Get elements by tag name
+let element = document.querySelector("#myId"); // Get first element matching selector
+let elements = document.querySelectorAll(".myClass"); // Get all elements matching selector
+element.innerHTML = "New Content"; // Change HTML content
+element.style.color = "red"; // Change CSS styles
+let attr = element.getAttribute("myAttr"); // Get attribute value
+element.setAttribute("myAttr", "New Value"); // Set attribute value
+```
+
+## 6. Event Handling
+
+JavaScript in the browser uses an event-driven programming model. Everything starts by following an event like a user clicking a button, submitting a form, moving the mouse, etc. The addEventListener method sets up a function that will be called whenever the specified event is delivered to the target.
+
+```javascript
+element.addEventListener("click", function () {
+  // Code to execute when element is clicked
+});
+```
+
+## 7. Form Handling
+
+In web development, forms are essential for interactions between the website and the user. The provided code here prevents the default form submission behavior and provides a skeleton where one can define what should be done when the form is submitted.
+
+```javascript
+let form = document.getElementById("myForm");
+form.addEventListener("submit", function (event) {
+  event.preventDefault(); // Prevent form submission
+  // Handle form data here
+});
+```
+
+## 8. AJAX Calls
+
+AJAX, stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the fetch API (or XMLHttpRequest object) to communicate with servers from JavaScript. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can do all of this without having to refresh the page. This allows you to update parts of a web page, without reloading the whole page.
+
+```javascript
+// Using Fetch API
+fetch("https://api.mywebsite.com/data", {
+  method: "GET", // or 'POST'
+  headers: {
+    "Content-Type": "application/json",
+  },
+  // body: JSON.stringify(data) // Include this if you're doing a POST request
+})
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error("Error:", error));
+
+// Using Async/Await
+async function fetchData() {
+  try {
+    let response = await fetch("https://api.mywebsite.com/data");
+    let data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+fetchData();
+```
+
+## 9. Manipulating LocalStorage
+
+The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. This can be
+
+```javascript
+localStorage.setItem("myKey", "myValue"); // Store data
+let data = localStorage.getItem("myKey"); // Retrieve data
+localStorage.removeItem("myKey"); // Remove data
+localStorage.clear(); // Clear all data
+```
+
+## 10. Manipulating Cookies
+
+Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. Cookies were invented to solve the problem of "how to remember information about the user": When a user visits a web page, his/her name can be stored in a cookie. Next time the user visits the page, the cookie "remembers" his/her name.
+
+```javascript
+document.cookie = "username=John Doe"; // Create cookie
+let allCookies = document.cookie; // Read all cookies
+document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // Delete cookie
+```