DEV Community: Prarthana

Git Commands

Prarthana — Sat, 08 Mar 2025 16:37:51 +0000

Here are 20 commonly used Git commands every beginner should know:

git init: Initializes a new Git repository in your project folder.

   git init

git config: Configures user details such as name and email.

   git config --global user.name "Your Name"
   git config --global user.email "your.email@example.com"

git clone: Clones an existing repository from a remote source.

   git clone <repository_url>

git status: Shows the current status of the working directory and staging area.

   git status

git add: Adds files or changes to the staging area.

   git add <file_name>
   git add . # Stages all changes

git commit: Saves changes to the local repository.

   git commit -m "Your commit message"

git log: Displays the commit history.

   git log

git branch: Lists, creates, or deletes branches.

   git branch        # Lists branches
   git branch <name> # Creates a branch

git checkout: Switches between branches.

   git checkout <branch_name>

git merge: Merges a specified branch into the current branch.
```
git merge <branch_name>
```
git push: Pushes local commits to the remote repository.
```
git push origin <branch_name>
```
git pull: Fetches and merges changes from the remote repository.
```
git pull origin <branch_name>
```
git fetch: Fetches changes from the remote repository without merging them.
```
git fetch origin
```
git diff: Compares file changes.
```
git diff
```
git reset: Undoes changes in the staging area or moves the HEAD to a previous commit.
```
git reset <file_name>
git reset --hard <commit_hash>
```
git revert: Reverts a specific commit by creating a new commit.
```
git revert <commit_hash>
```
git stash: Temporarily saves uncommitted changes.
```
git stash
```
git stash pop: Applies the stashed changes and removes them from the stash.
```
git stash pop
```
git rm: Removes a file from the working directory and staging area.
```
git rm <file_name>
```
git show: Shows details of a specific commit.
```
git show <commit_hash>
```

These commands should give you a solid foundation for managing your projects with Git. Let me know if you'd like further clarification on any of them! 🚀💻

JavaScript DOM manipulation and EventHandling

Prarthana — Fri, 07 Mar 2025 16:46:32 +0000

It's going to be pretty lengthy vlog you can directly hover and read one particular command or enjoy extensive reading ❤️💖

Essential JavaScript DOM manipulation commands:

document.getElementById(): Selects an element by its ID.

   const element = document.getElementById('myElement');

document.querySelector(): Selects the first element that matches a CSS selector.

   const element = document.querySelector('.myClass');

document.querySelectorAll(): Selects all elements that match a CSS selector.

   const elements = document.querySelectorAll('.myClass');

document.createElement(): Creates a new HTML element.

   const newElement = document.createElement('div');

parentElement.appendChild(): Appends a child element to a parent element.

   parentElement.appendChild(newElement);

parentElement.insertBefore(): Inserts a new element before an existing element.

   parentElement.insertBefore(newElement, existingElement);

element.innerHTML: Gets or sets the HTML content of an element.

   element.innerHTML = '<p>New Content</p>';

element.textContent: Gets or sets the text content of an element.

   element.textContent = 'New Text';

element.setAttribute(): Sets an attribute on an element.

   element.setAttribute('class', 'newClass');

element.removeAttribute(): Removes an attribute from an element.
```
element.removeAttribute('class');
```
element.style.property: Sets the inline style of an element.
```
element.style.color = 'red';
```
element.classList.add(): Adds a class to an element.
```
element.classList.add('newClass');
```
element.classList.remove(): Removes a class from an element.
```
element.classList.remove('oldClass');
```
element.classList.toggle(): Toggles a class on an element.
```
element.classList.toggle('activeClass');
```

element.addEventListener(): Adds an event listener to an element.

element.addEventListener('click', function() {
  alert('Element clicked!');
});

element.removeEventListener(): Removes an event listener from an element.
```
element.removeEventListener('click', clickHandler);
```
element.appendChild(): Appends a child node to an element.
```
element.appendChild(childNode);
```
element.removeChild(): Removes a child node from an element.
```
element.removeChild(childNode);
```
element.replaceChild(): Replaces a child node with another node.
```
element.replaceChild(newChild, oldChild);
```

element.cloneNode(): Clones an element.

const clonedElement = element.cloneNode(true);

element.contains(): Checks if an element contains a specific node.
```
const containsNode = element.contains(childNode);
```
element.parentElement: Returns the parent element of an element.
```
const parent = element.parentElement;
```
element.children: Returns a collection of child elements of an element.
```
const children = element.children;
```
element.firstElementChild: Returns the first child element of an element.
```
const firstChild = element.firstElementChild;
```
element.lastElementChild: Returns the last child element of an element.
```
const lastChild = element.lastElementChild;
```

These commands cover a wide range of DOM manipulation tasks and will be very useful in your web development projects. Happy coding! 🚀💻

EventHandling

Here are some key event handling commands in JavaScript:

element.addEventListener(): Adds an event listener to an element.

   element.addEventListener('click', function() {
     alert('Element clicked!');
   });

element.removeEventListener(): Removes an event listener from an element.

   element.removeEventListener('click', clickHandler);

element.onclick: Sets an event handler for the click event.

   element.onclick = function() {
     alert('Element clicked!');
   };

element.onsubmit: Sets an event handler for the submit event.

   form.onsubmit = function(event) {
     event.preventDefault();
     alert('Form submitted!');
   };

element.onmouseover: Sets an event handler for the mouseover event.

   element.onmouseover = function() {
     element.style.color = 'blue';
   };

element.onmouseout: Sets an event handler for the mouseout event.

   element.onmouseout = function() {
     element.style.color = 'black';
   };

element.onkeydown: Sets an event handler for the keydown event.

   element.onkeydown = function(event) {
     console.log('Key pressed:', event.key);
   };

element.onkeyup: Sets an event handler for the keyup event.

   element.onkeyup = function(event) {
     console.log('Key released:', event.key);
   };

element.onchange: Sets an event handler for the change event (useful for input elements).

   element.onchange = function() {
     console.log('Value changed:', element.value);
   };

element.oninput: Sets an event handler for the input event (useful for real-time input tracking).
```
element.oninput = function() {
  console.log('Input value:', element.value);
};
```

element.onfocus: Sets an event handler for the focus event.

element.onfocus = function() {
  element.style.backgroundColor = 'lightyellow';
};

element.onblur: Sets an event handler for the blur event.

element.onblur = function() {
  element.style.backgroundColor = 'white';
};

element.ondragstart: Sets an event handler for the dragstart event.

element.ondragstart = function(event) {
  console.log('Drag started:', event);
};

element.ondrop: Sets an event handler for the drop event.

element.ondrop = function(event) {
  event.preventDefault();
  console.log('Element dropped:', event);
};

element.ondragover: Sets an event handler for the dragover event.

element.ondragover = function(event) {
  event.preventDefault();
};

element.ondblclick: Sets an event handler for the double-click event.

element.ondblclick = function() {
  alert('Element double-clicked!');
};

element.oncontextmenu: Sets an event handler for the context menu event (right-click).

element.oncontextmenu = function(event) {
  event.preventDefault();
  alert('Right-click menu opened!');
};

element.onresize: Sets an event handler for the resize event (useful for the window object).

window.onresize = function() {
  console.log('Window resized to', window.innerWidth, 'x', window.innerHeight);
};

element.onselect: Sets an event handler for the select event (useful for text input elements).

element.onselect = function() {
  console.log('Text selected:', element.value.substring(element.selectionStart, element.selectionEnd));
};

element.ontouchstart: Sets an event handler for the touchstart event (useful for touch devices).

element.ontouchstart = function(event) {
  console.log('Touch started:', event.touches);
};

element.ontouchend: Sets an event handler for the touchend event (useful for touch devices).

element.ontouchend = function(event) {
  console.log('Touch ended:', event.changedTouches);
};

element.onscroll: Sets an event handler for the scroll event.

window.onscroll = function() {
  console.log('Page scrolled:', window.scrollY);
};

element.onwheel: Sets an event handler for the wheel event (mouse wheel scroll).

element.onwheel = function(event) {
  console.log('Mouse wheel scrolled:', event.deltaY);
};

element.onkeypress: Sets an event handler for the keypress event.

element.onkeypress = function(event) {
  console.log('Key pressed:', event.key);
};

element.oncopy: Sets an event handler for the copy event.

element.oncopy = function(event) {
  console.log('Content copied:', event);
};

These commands should help you handle various events in your JavaScript projects, making your web applications more interactive and responsive to user actions. Happy coding! 🚀💻

Reached till here, then you are the champion !!

JavaScript Overview

Prarthana — Fri, 07 Mar 2025 16:28:39 +0000

Here’s a simple overview of JavaScript for students:

What is JavaScript?

JavaScript is a programming language used to create dynamic and interactive content on websites. It's one of the core technologies of the web, along with HTML and CSS.

Why Learn JavaScript?

Interactivity: JavaScript makes web pages interactive. For example, when you click a button or play a video, JavaScript is at work.
Versatility: It can be used on both the client-side (in the browser) and server-side (using Node.js).
Popularity: JavaScript is one of the most popular programming languages, widely used in web development.

Basic Concepts

Variables: Used to store data. Declared using let, const, or var.

  let name = "John"; // String
  const age = 25; // Number
  var isStudent = true; // Boolean

Data Types: Common data types include strings, numbers, booleans, arrays, and objects.

  let fruits = ["apple", "banana", "cherry"]; // Array
  let person = { name: "John", age: 25 }; // Object

Operators: Symbols used to perform operations on variables and values. Examples include + (addition), - (subtraction), * (multiplication), and / (division).

Functions

Functions are blocks of code designed to perform specific tasks. They help organize code and make it reusable.

  function greet(name) {
    return "Hello, " + name + "!";
  }
  console.log(greet("Alice")); // Output: Hello, Alice!

Control Structures

Conditional Statements: Used to perform different actions based on different conditions.

  let age = 18;
  if (age >= 18) {
    console.log("You are an adult.");
  } else {
    console.log("You are a minor.");
  }

Loops: Used to repeat a block of code.

  for (let i = 0; i < 5; i++) {
    console.log(i); // Output: 0 1 2 3 4
  }

DOM Manipulation

JavaScript can interact with the Document Object Model (DOM) to change the content and structure of web pages.

  document.getElementById("myElement").innerHTML = "New Content";

Event Handling

JavaScript can respond to user actions like clicks, keypresses, and mouse movements.

  document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
  });

Modern JavaScript (ES6)

Let and Const: Block-scoped variable declarations.

  let score = 100;
  const pi = 3.14;

Arrow Functions: Shorter syntax for functions.

  const add = (a, b) => a + b;

Template Literals: String literals allowing embedded expressions.

  let name = "Alice";
  console.log(`Hello, ${name}!`); // Output: Hello, Alice!

Conclusion

JavaScript is a powerful and essential tool for web development. By learning JavaScript, you can create interactive and dynamic web pages that enhance user experience.

I hope this overview helps you get started with JavaScript! Happy coding! 🚀💻