thiscodeWorks - Saving, organizing & sharing the best of code online

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Style Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        
        #main-content {
            padding: 40px;
            background-color: #ffffff;
            border: 1px solid #ddd;
            max-width: 800px;
            margin: 20px auto;
        }
        
        h1 {
            color: #333;
            text-align: center;
            padding: 20px;
        }
        
        p {
            color: #666;
            font-size: 18px;
            line-height: 1.6;
            margin: 20px;
        }
        
        p.highlight {
            color: #0056b3;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="main-content">
        <h1>Welcome to Internal CSS Styling</h1>
        <p>This is an example of internal styling. All CSS rules are within a style block in the head section.</p>
        <p class="highlight">This paragraph has specific styling defined in the internal CSS.</p>
    </div>
</body>
</html>

inline

@signup1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Example</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0;">
    <div style="padding: 40px; background-color: #ffffff; border: 1px solid #ddd; max-width: 800px; margin: 20px auto;">
        <h1 style="color: #333; text-align: center; padding: 20px;">Welcome to Inline CSS Styling</h1>
        <p style="color: #666; font-size: 18px; line-height: 1.6; margin: 20px;">
            This is an example of inline styling. All CSS rules are directly within the HTML elements.
        </p>
        <p style="color: #0056b3; font-weight: bold; margin: 20px;">
            This paragraph uses inline styling for specific text color and font weight.
        </p>
    </div>
</body>
</html>

#kotlin

2. ARTICULATION POINTS

@varuntej

Task-2
Write a program to identify the articulation points present in a graph.
Algorithm:
Algorithm Art(u, v)
// u is a start vertex for depth first search. v is its parent if any
// in the depth first spanning tree. It is assumed that the global
// array dfn is initialized to zero and that the global variable
// num is initialized to 1. n is the number of vertices in G.
{
    dfn[u] := num; L[u] := num; num := num + 1;
    for each vertex w adjacent from u do`
    {
        if (dfn[w] = 0) then
        {
            Art(w, u);     // w is unvisited.
            L[u] := min(L[u], L[w]);
        }
        else if (w ≠ v) then L[u] := min(L[u], dfn[w]);
    }
}
Program:
#include <stdio.h>

int dfn[10], a[10][10], l[10], n, num = 1, children[10];
int artp[10]; // Array to store articulation points

// Function to find the minimum of two values
int min(int a, int b) {
    return (a > b ? b : a);
}

// Depth-first search to find articulation points
void art(int u, int v) {
    dfn[u] = num;
    l[u] = num;
    num++;
    children[u] = 0;

    for (int i = 1; i <= n; i++) {
        if (a[u][i] == 1) { // Check if there is an edge from u to i
            int w = i;
            if (dfn[w] == 0) { // w is unvisited
                children[u]++;
                art(w, u);

                // Update the low value of u for parent function calls
                l[u] = min(l[u], l[w]);

                // Check articulation point conditions
                if (v != -1 && l[w] >= dfn[u]) {
                    artp[u] = 1; // Mark u as an articulation point
                }
            } else if (w != v) { // Update low value of u for back edges
                l[u] = min(l[u], dfn[w]);
            }
        }
    }
}

// Main function
int main() {
    printf("Enter no. of vertices: ");
    scanf("%d", &n);

    int s;
    printf("Enter root vertex: ");
    scanf("%d", &s);

    printf("Enter adjacency matrix:\n");
    for (int i = 1; i <= n; i++) {
        for (int j = 1; j <= n; j++) {
            scanf("%d", &a[i][j]);
        }
    }

    // Initialize arrays
    for (int i = 0; i <= n; i++) {
        dfn[i] = 0;
        l[i] = 0;
        children[i] = 0;
        artp[i] = 0;
    }

    printf("Articulation points are:\n");
    
    // Run DFS from the root vertex
    art(s, -1);

    // Check if the root is an articulation point (special case)
    if (children[s] > 1) {
        printf("%d\n", s);
    }

    // Print other articulation points
    for (int i = 1; i <= n; i++) {
        if (artp[i]) {
            printf("%d\n", i);
        }
    }

    return 0;
}
Output:
/tmp/96iN6R0Irx.o
Enter no. of vertices: 6
Enter root vertex: 1
Enter adjacency matrix:
0 1 0 1 0 0
1 0 1 0 0 0
0 1 0 1 1 1
1 0 1 0 0 0
0 0 1 0 0 0
0 0 1 0 0 0
Articulation points are:
3


=== Code Execution Successful ===

#c

1.MERGE AND QUICK SORT

@varuntej

Task-1
a) Implement Merge sort algorithm and plot its time complexity with reference to the size of the input.
Algorithm:
Algorithm MergeSort(low, high)
// a[low : high] is a global array to be sorted.
// Small(P) is true if there is only one element
// to sort. In this case the list is already sorted.
{
    if (low < high) then     // If there are more than one element
    {
        // Divide P into subproblems.
        // Find where to split the set.
        mid := ⌊(low + high) / 2⌋;
        // Solve the subproblems.
        MergeSort(low, mid);
        MergeSort(mid + 1, high);
        // Combine the solutions.
        Merge(low, mid, high);
    }
}
Algorithm Merge(low, mid, high)
// a[low : high] is a global array containing two sorted
// subsets in a[low : mid] and in a[mid + 1 : high]. The goal
// is to merge these two sets into a single set residing
// in a[low : high]. b[ ] is an auxiliary global array.
{
  h := low; i := low; j := mid + 1;
  while ((h ≤ mid) and (j ≤ high)) do
  {
    if (a[h] ≤ a[j]) then
    {
      b[i] := a[h]; h := h + 1;
    }
    else
    {
      b[i] := a[j]; j := j + 1;
    }
    i := i + 1;
  }
  if (h > mid) then
    for k := j to high do
    {
      b[i] := a[k]; i := i + 1;
    }
  else
    for k := h to mid do
    {
      b[i] := a[k]; i := i + 1;
    }
  for k := low to high do a[k] := b[k];
}

Program:
#include <stdio.h>
#include <time.h>
void merge(int a[],int i1,int j1,int i2,int j2) {
	int i,j,k=0;
	i=i1;
	j=i2;
	int temp[100];
	while(i<=j1 && j<=j2) {
		if(a[i]<a[j])
			temp[k++]=a[i++];
		else
			temp[k++]=a[j++];
	}
	while(i<=j1)
		temp[k++]=a[i++];
	while(j<=j2)
		temp[k++]=a[j++];
	for(i=i1,j=0; i<=j2; i++,j++)
		a[i]=temp[j];
}
void partition(int a[],int l,int h) {
	if(l<h) {
		int mid=(l+h)/2;
		partition(a,l,mid);
		partition(a,mid+1,h);
		merge(a,l,mid,mid+1,h);
	}
}
int main() {
	int n;
	printf("enter the size of array: ");
	scanf("%d",&n);
	int a[n];
	for(int i=0; i<n; i++)
		a[i] = n - i;
	clock_t t = clock();
	partition(a,0,n-1);
	t = clock() - t;
	printf("Time taken: %f \n",((float)t*1000)/CLOCKS_PER_SEC);
	for(int i=0; i<n; i++)
		printf("%d ",a[i]);
	return 0;
}
Output:
enter the size of array: 5
Time taken: 0.002000 
1 2 3 4 5 

=== Code Execution Successful ===
b) Implement Quick sort algorithm and plot its time complexity regarding asymptotic notations (Best, average, and worst).
Algorithm:
Algorithm QuickSort(p, q)
// Sorts the elements a[p], ..., a[q] which reside in the global
// array a[1 : n] into ascending order; a[n + 1] is considered to
// be defined and must be ≥ all the elements in a[1 : n].
{
    if (p < q) then     // If there are more than one element
    {
        // divide P into two subproblems.
        j := Partition(a, p, q + 1);
        // j is the position of the partitioning element.
        // Solve the subproblems.
        QuickSort(p, j - 1);
        QuickSort(j + 1, q);
        // There is no need for combining solutions.
    }
}
Algorithm Partition(a, m, p)
// Within a[m], a[m + 1], ..., a[p − 1] the elements are
// rearranged in such a manner that if initially t = a[m],
// then after completion a[q] = t for some q between m
// and p − 1, a[k] ≤ t for m ≤ k < q, and a[k] ≥ t
// for q < k < p. q is returned. Set a[p] = ∞.
{
  v := a[m]; i := m; j := p;
  repeat
  {
    repeat
      i := i + 1;
    until (a[i] ≥ v);
    
    repeat
      j := j − 1;
    until (a[j] ≤ v);
    
    if (i < j) then Interchange(a, i, j);
  } until (i ≥ j);
  
  a[m] := a[j]; a[j] := v; return j;
}

Algorithm Interchange(a, i, j)
// Exchange a[i] with a[j].
{
  p := a[i];
  a[i] := a[j]; a[j] := p;
}

Program:
#include <stdio.h>
#include <time.h>

void quicksort(int number[25], int first, int last) {
    int i, j, pivot, temp;
    if (first < last) {
        pivot = first;
        i = first;
        j = last;
        while (i < j) {
            while (number[i] <= number[pivot] && i < last)
                i++;
            while (number[j] > number[pivot])
                j--;
            if (i < j) {
                temp = number[i];
                number[i] = number[j];
                number[j] = temp;
            }
        }
        temp = number[pivot];
        number[pivot] = number[j];
        number[j] = temp;
        quicksort(number, first, j - 1);
        quicksort(number, j + 1, last);
    }
}

int main() {
    int i, count, number[25];
    printf("SIZE OF ARRAY?: ");
    scanf("%d", &count);

    printf("Enter array elements: ");
    for (i = 0; i < count; i++) {
        scanf("%d", &number[i]);
    }

    clock_t t = clock(); // Start time
    quicksort(number, 0, count - 1);
    t = clock() - t; // End time

    printf("Time taken: %f ms\n", ((float)t * 1000) / CLOCKS_PER_SEC);
    printf("Sorted elements:");
    for (i = 0; i < count; i++) {
        printf(" %d", number[i]);
    }
    printf("\n");

    return 0;
}
Output:

SIZE OF ARRAY?: 5
Enter array elements: 5 4 3 2 1
Time taken: 0.002000 ms
Sorted elements: 1 2 3 4 5


=== Code Execution Successful ===

vertical_navbar

@signup1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sidebar">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
    </div>

    <div class="content">
        <h1>Welcome to My Website</h1>
        <p>This is a simple vertical navigation bar example.</p>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.sidebar {
    height: 100%; /* Full-height */
    width: 200px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place) */
    background-color: #333; /* Sidebar color */
}

.sidebar a {
    padding: 15px; /* Padding */
    text-decoration: none; /* No underline */
    font-size: 17px; /* Font size */
    color: #f2f2f2; /* Text color */
    display: block; /* Make links appear below each other */
}

.sidebar a:hover {
    background-color: #ddd; /* Add a hover effect */
    color: black; /* Text color on hover */
}

.sidebar a.active {
    background-color: #04AA6D; /* Active link color */
    color: white; /* Active link text color */
}

.content {
    margin-left: 220px; /* Margin to the left of the sidebar */
    padding: 20px; /* Padding for content */
}

horizontal_navbar

@signup1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
    </nav>
</body>
</html>

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #333;
    overflow: hidden;
}

.navbar a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.navbar a.active {
    background-color: #04AA6D;
    color: white;
}

gridbox

@signup1

//grid.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <link rel="stylesheet" href="gridstyles.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>
//gridstyles.css
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* Space between grid items */
    padding: 20px;
}

.grid-item {
    background-color: #2196F3;
    color: white;
    padding: 20px;
    text-align: center;
}

flexbox

@signup1

//flex.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout Example</title>
    <link rel="stylesheet" href="flexstyles.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
        <div class="flex-item">Item 4</div>
        <div class="flex-item">Item 5</div>
    </div>
</body>
</html>
//flexstyles.css
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f4f4;
    padding: 20px;
}

.flex-item {
    background-color: #009688;
    color: white;
    padding: 20px;
    margin: 10px;
    flex: 1 1 30%; /* Grow, shrink, and set base width */
    text-align: center;
}

JDBC programs on 1. Update the database 2. Insert rows of servlet.

@signup1

//First, create a database named user_db and a table named users
sql:
CREATE DATABASE user_db;

USE user_db;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(50) NOT NULL
);
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Registration</title>
</head>
<body>
    <h2>User Registration</h2>
    <form action="InsertUserServlet" method="post">
        Username: <input type="text" name="username" required><br><br>
        Password: <input type="password" name="password" required><br><br>
        <input type="submit" value="Register">
    </form>

    <h2>Update Password</h2>
    <form action="UpdateUserServlet" method="post">
        Username: <input type="text" name="username" required><br><br>
        New Password: <input type="password" name="newPassword" required><br><br>
        <input type="submit" value="Update Password">
    </form>
</body>
</html>

//InsertUserServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/InsertUserServlet")
public class InsertUserServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        String jdbcURL = "jdbc:mysql://localhost:3306/user_db";
        String dbUser = "root"; // Change as needed
        String dbPassword = "password"; // Change as needed

        try (Connection conn = DriverManager.getConnection(jdbcURL, dbUser, dbPassword)) {
            String sql = "INSERT INTO users (username, password) VALUES (?, ?)";
            PreparedStatement statement = conn.prepareStatement(sql);
            statement.setString(1, username);
            statement.setString(2, password);
            statement.executeUpdate();

            PrintWriter out = response.getWriter();
            out.println("<html><body><b>User registered successfully!</b></body></html>");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
//UpdateUserServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/UpdateUserServlet")
public class UpdateUserServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");
        String newPassword = request.getParameter("newPassword");

        String jdbcURL = "jdbc:mysql://localhost:3306/user_db";
        String dbUser = "root"; // Change as needed
        String dbPassword = "password"; // Change as needed

        try (Connection conn = DriverManager.getConnection(jdbcURL, dbUser, dbPassword)) {
            String sql = "UPDATE users SET password = ? WHERE username = ?";
            PreparedStatement statement = conn.prepareStatement(sql);
            statement.setString(1, newPassword);
            statement.setString(2, username);
            int rowsUpdated = statement.executeUpdate();

            PrintWriter out = response.getWriter();
            if (rowsUpdated > 0) {
                out.println("<html><body><b>Password updated successfully!</b></body></html>");
            } else {
                out.println("<html><body><b>User not found!</b></body></html>");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
//web.xml
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <servlet>
        <servlet-name>InsertUserServlet</servlet-name>
        <servlet-class>InsertUserServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>InsertUserServlet</servlet-name>
        <url-pattern>/InsertUserServlet</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>UpdateUserServlet</servlet-name>
        <servlet-class>UpdateUserServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>UpdateUserServlet</servlet-name>
        <url-pattern>/UpdateUserServlet</url-pattern>
    </servlet-mapping>

</web-app>

Cookies

@signup1

//cookies1
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class CookieServlet1      */
 
@WebServlet("/Cookie1")
public class cookie1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
    public cookie1() {
        super();
        // TODO Auto-generated constructor stub
    }
 
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
	
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out=response.getWriter();
		
        String name = request.getParameter("username");
        String pass = request.getParameter("password");
        String email=request.getParameter("email");
        
            Cookie ck = new Cookie("username", name);
            Cookie ck1=new Cookie("emailaddr",email);
            
            response.addCookie(ck);
            response.addCookie(ck1);
            out.println("<h1> Hello, welcome " + name 
                    + "!!! </h1>"); 
        out.println( 
            "<h1><a href =\"Cookie2\">Course Details</a></h1>");
 
        	     		}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
 
}
 
//cooki2
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class CookieServlet2     */
@WebServlet("/Cookie2")
public class CookieServlet2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CookieServlet2() {
        super();
        // TODO Auto-generated constructor stub
    }
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
 
		response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        response.setContentType("text/html");
        out.println("<h1> Welcome Back!!!</h1>");
        
        Cookie[] cks = request.getCookies();
        
        for(int i=0;i<cks.length;i++)
        out.println("<h1> "+cks[i].getName()+": "+ cks[i].getValue()+"</h1>");
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
 
}

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>LoginPage</title>
<style >
div{
display:block;
height:600px;
color:white;
}
</style> 
</head> 
<body style="text-align:center;background-color:green;">
<div >
 
<form action="Cookie1" method="post" >
 
<h1> Login to Cookie Application </h1>
 
<label>Username:</label><input type="text" name="username" ><br>
 
<label>Password:</label><input type="password" name="password"><br>
 
<label>email: </label><input type="text" name="email"><br>

<button type="submit" value="Login" >Submit</button>
</form>
</div>
</body>
</html>

Destructuring on arrays and objects

@signup1

// Array Destructuring Example

const fruits = ["Apple", "Banana", "Cherry"];
const [firstFruit, secondFruit] = fruits;

console.log("First Fruit:", firstFruit);   // Output: Apple
console.log("Second Fruit:", secondFruit);  // Output: Banana

// Skipping Elements Example
const numbers = [1, 2, 3, 4, 5];
const [one, , three] = numbers;
console.log("One:", one);                   // Output: 1
console.log("Three:", three);               // Output: 3

// Rest Parameter Example
const colors = ["Red", "Green", "Blue", "Yellow"];
const [primaryColor, ...otherColors] = colors;
console.log("Primary Color:", primaryColor);      // Output: Red
console.log("Other Colors:", otherColors);        // Output: ["Green", "Blue", "Yellow"]

// Function Returning Array Example
function getCoordinates() {
    return [10, 20];
}

const [x, y] = getCoordinates();
console.log("X Coordinate:", x);                // Output: 10
console.log("Y Coordinate:", y);                // Output: 20


// Object Destructuring Example

const person = {
    name: "John",
    age: 30,
    city: "New York"
};

const { name, age } = person;
console.log("Name:", name);                     // Output: John
console.log("Age:", age);                       // Output: 30

// Renaming Variables Example
const { name: fullName, age: years } = person;
console.log("Full Name:", fullName);           // Output: John
console.log("Years:", years);                   // Output: 30

// Default Values Example
const { country = "USA" } = person;
console.log("Country:", country);               // Output: USA (default value)

// Nested Destructuring Example
const user = {
    id: 1,
    details: {
        name: "Alice",
        age: 25,
        address: {
            city: "Los Angeles",
            zipCode: "90001"
        }
    }
};

const { details: { name:userName, address:{ city:userCity } } } = user;
console.log("User Name:", userName);           // Output: Alice
console.log("User City:", userCity);           // Output: Los Angeles

String build in methods in js

@signup1

// Initialize a string for demonstration
let originalString = "  Hello, World!  ";

console.log("Original String:", originalString);

// 1. charAt()
console.log("Character at index 0:", originalString.charAt(0)); // H

// 2. concat()
let greeting = originalString.concat(" Welcome to JavaScript.");
console.log("Concatenated String:", greeting);

// 3. includes()
console.log("Includes 'World':", originalString.includes("World")); // true

// 4. indexOf()
console.log("Index of 'o':", originalString.indexOf("o")); // 4

// 5. lastIndexOf()
console.log("Last index of 'o':", originalString.lastIndexOf("o")); // 8

// 6. replace()
let replacedString = originalString.replace("World", "JavaScript");
console.log("Replaced String:", replacedString); // Hello, JavaScript!

// 7. split()
let fruitsString = "Apple,Banana,Cherry";
let fruitsArray = fruitsString.split(",");
console.log("Fruits Array:", fruitsArray); // ["Apple", "Banana", "Cherry"]

// 8. toLowerCase()
console.log("Lowercase String:", originalString.toLowerCase()); // hello, world!

// 9. toUpperCase()
console.log("Uppercase String:", originalString.toUpperCase()); // HELLO, WORLD!

// 10. trim()
console.log("Trimmed String:", originalString.trim()); // Hello, World!

/*OUTPUT:
Original String:    Hello, World!  
Character at index 0:  
Concatenated String:    Hello, World!  Welcome to JavaScript.
Includes 'World': true
Index of 'o': 4
Last index of 'o': 8
Replaced String:    Hello, JavaScript!  
Fruits Array: [ 'Apple', 'Banana', 'Cherry' ]
Lowercase String:    hello, world!  
Uppercase String:    HELLO, WORLD!  
Trimmed String: Hello, World!*/

Built-in methods of Arrays in JavaScript

@signup1

//JavaScript Program
// Initialize an array of fruits
let fruits = ["Banana", "Orange", "Apple"];

// 1. push() - Add an element to the end of the array
console.log("Initial fruits:", fruits);
fruits.push("Mango");
console.log("After push('Mango'):", fruits); // Output: ["Banana", "Orange", "Apple", "Mango"]

// 2. pop() - Remove the last element from the array
const lastFruit = fruits.pop();
console.log("After pop():", fruits); // Output: ["Banana", "Orange", "Apple"]
console.log("Removed fruit:", lastFruit); // Output: "Mango"

// 3. shift() - Remove the first element from the array
const firstFruit = fruits.shift();
console.log("After shift():", fruits); // Output: ["Orange", "Apple"]
console.log("Removed fruit:", firstFruit); // Output: "Banana"

// 4. unshift() - Add an element to the beginning of the array
fruits.unshift("Banana");
console.log("After unshift('Banana'):", fruits); // Output: ["Banana", "Orange", "Apple"]

// 5. splice() - Remove and add elements in the array
fruits.splice(1, 1, "Kiwi"); // Removes 1 element at index 1 and adds "Kiwi"
console.log("After splice(1, 1, 'Kiwi'):", fruits); // Output: ["Banana", "Kiwi", "Apple"]

// 6. slice() - Create a shallow copy of a portion of the array
const citrus = fruits.slice(1, 3);
console.log("Slice from index 1 to 3:", citrus); // Output: ["Kiwi", "Apple"]

// 7. concat() - Merge two or more arrays
const moreFruits = ["Pineapple", "Grapes"];
const allFruits = fruits.concat(moreFruits);
console.log("After concat(moreFruits):", allFruits); // Output: ["Banana", "Kiwi", "Apple", "Pineapple", "Grapes"]

// 8. forEach() - Execute a function for each element in the array
console.log("Listing all fruits:");
allFruits.forEach(function(item, index) {
    console.log(index + ": " + item);
});

// Final output of all operations
console.log("Final fruits array:", allFruits);

Session Mgmt

@signup1

//login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
</head>
<body>
    <h2>Login</h2>
    <form action="LoginServlet" method="post">
        Username: <input type="text" name="username" required><br><br>
        <input type="submit" value="Login">
    </form>
</body>
</html>

//Login Servlet.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");

        // Create a new session or retrieve existing one
        HttpSession session = request.getSession();
        
        // Store the username in the session
        session.setAttribute("username", username);

        // Redirect to welcome page
        response.sendRedirect("welcome.jsp");
    }
}
//welcome.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="javax.servlet.http.HttpSession" %>
<%
    HttpSession session = request.getSession(false); // Get existing session
    String username = null;

    if (session != null) {
        username = (String) session.getAttribute("username");
    }

    if (username == null) {
        response.sendRedirect("login.html"); // Redirect to login if not logged in
    }
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <h2>Welcome, <%= username %>!</h2>
    <a href="LogoutServlet">Logout</a> <!-- Link to logout -->
</body>
</html>
//logout.java

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/LogoutServlet")
public class LogoutServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // Invalidate the session
        HttpSession session = request.getSession(false);
        if (session != null) {
            session.invalidate(); // Remove all attributes and invalidate the session
        }
        
        // Redirect to login page
        response.sendRedirect("login.html");
    }
}

Servlet accepting request parameters

@signup1

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parameter Input Form</title>
</head>
<body>
    <h2>Enter Your Details</h2>
    <form action="ParameterServlet" method="post">
        Name: <input type="text" name="name" required><br><br>
        Age: <input type="text" name="age" required><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

//ParameterServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ParameterServlet")
public class ParameterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // Retrieve parameters from the request
        String name = request.getParameter("name");
        String age = request.getParameter("age");

        // Set response content type
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        // Generate response
        out.println("<html><body>");
        out.println("<h2>Your Details:</h2>");
        out.println("<p>Name: " + name + "</p>");
        out.println("<p>Age: " + age + "</p>");
        out.println("</body></html>");
        
        out.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // Redirect to doPost for GET requests
        doPost(request, response);
    }
}

ServletLifeCycleMethods

@signup1

//Servlet Class
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// Annotate the servlet with a URL pattern
@WebServlet("/lifecycle")
public class ServletLifeCycleExample extends HttpServlet {

    private static final long serialVersionUID = 1L;

    // Constructor
    public ServletLifeCycleExample() {
        System.out.println("Constructor called: Servlet instance created.");
    }

    // init method called once when the servlet is loaded
    @Override
    public void init() throws ServletException {
        System.out.println("Init method called: Servlet initialized.");
    }

    // service method called for each request
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("Service method called: Handling request.");

        // Set response content type
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        
        // Write response to client
        out.println("<html><body>");
        out.println("<h1>Servlet Lifecycle Example</h1>");
        out.println("<p>This is a response from the service method.</p>");
        out.println("</body></html>");
        
        out.close();
    }

    // destroy method called once when the servlet is taken out of service
    @Override
    public void destroy() {
        System.out.println("Destroy method called: Servlet is being destroyed.");
    }
} 

//web.xml
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
                             http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <servlet>
        <servlet-name>lifecycleServlet</servlet-name>
        <servlet-class>ServletLifeCycleExample</servlet-class>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>lifecycleServlet</servlet-name>
        <url-pattern>/lifecycle</url-pattern>
    </servlet-mapping>
</web-app>


//OUTPUT
Constructor called: Servlet instance created.
Init method called: Servlet initialized.
Service method called: Handling request.
Destroy method called: Servlet is being destroyed.

Prepared Statements

@signup1

//SQL:
CREATE TABLE Users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL
);

//INSERT
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

public class InsertUser {
    private static final String INSERT_USER_SQL = "INSERT INTO Users (username, password, email) VALUES (?, ?, ?)";

    public static void main(String[] args) {
        try (Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "root", "password");
             PreparedStatement preparedStatement = connection.prepareStatement(INSERT_USER_SQL)) {

            preparedStatement.setString(1, "john_doe");
            preparedStatement.setString(2, "securepassword");
            preparedStatement.setString(3, "john@example.com");

            int rowsAffected = preparedStatement.executeUpdate();
            System.out.println(rowsAffected + " row(s) inserted.");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

//SELECT
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class SelectUsers {
    private static final String SELECT_ALL_USERS_SQL = "SELECT * FROM Users";

    public static void main(String[] args) {
        try (Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "root", "password");
             PreparedStatement preparedStatement = connection.prepareStatement(SELECT_ALL_USERS_SQL);
             ResultSet resultSet = preparedStatement.executeQuery()) {

            while (resultSet.next()) {
                System.out.println("ID: " + resultSet.getInt("id") +
                                   ", Username: " + resultSet.getString("username") +
                                   ", Email: " + resultSet.getString("email"));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

//UPDATE
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

public class UpdateUserEmail {
    private static final String UPDATE_EMAIL_SQL = "UPDATE Users SET email = ? WHERE username = ?";

    public static void main(String[] args) {
        try (Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "root", "password");
             PreparedStatement preparedStatement = connection.prepareStatement(UPDATE_EMAIL_SQL)) {

            preparedStatement.setString(1, "new_email@example.com");
            preparedStatement.setString(2, "john_doe");

            int rowsAffected = preparedStatement.executeUpdate();
            System.out.println(rowsAffected + " row(s) updated.");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

//OUTPUT:
ID: 1, Username: john_doe, Email: john@example.com

Sort and reverse on arrays

@login123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sort and Reverse Array Methods</title>
</head>
<body>

<h1>JavaScript Array Sorting and Reversing</h1>

<script>
   
    const fruits = ["Banana", "Apple", "Orange", "Mango"];
    console.log("Original Fruits Array:", fruits);
    fruits.sort();
    console.log("Sorted Fruits Array:", fruits); 

    
    const numbers = [10, 2, 5, 30];
    console.log("\nOriginal Numbers Array:", numbers);
    numbers.sort((a, b) => a - b); 
    console.log("Sorted Numbers (Ascending):", numbers); 

   
    numbers.sort((a, b) => b - a); 
    console.log("Sorted Numbers (Descending):", numbers); 

    
    const letters = ["a", "b", "c", "d"];
    console.log("\nOriginal Letters Array:", letters);
    letters.reverse();
    console.log("Reversed Letters Array:", letters); 


    const mixNumbers = [15, 3, 25, 8];
    mixNumbers.sort((a, b) => a - b).reverse(); 
    console.log("\nMixed Numbers Sorted in Descending Order:", mixNumbers); // Output: [25, 15, 8, 3]
</script>

</body>
</html>

WT git

@abhigna

https://github.com/cvrcoe26/wt

String built in methods in js

@login123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Methods in JavaScript</title>
</head>
<body>

<h1>JavaScript String Methods</h1>


<script>
    const str = "   Hello, JavaScript World!   ";

    console.log("Original String:", str);

    
    console.log("\ntrim() method:");
    const trimmedStr = str.trim();
    console.log("Trimmed String:", trimmedStr);

  
    console.log("\ntoUpperCase() method:");
    console.log("Uppercase:", trimmedStr.toUpperCase());

  
    console.log("\ntoLowerCase() method:");
    console.log("Lowercase:", trimmedStr.toLowerCase());

    
    console.log("\nslice() method:");
    console.log("Sliced:", trimmedStr.slice(7, 17)); // Extracts "JavaScript"

    console.log("\nreplace() method:");
    console.log("Replaced:", trimmedStr.replace("JavaScript", "Coding"));

    
    console.log("\nincludes() method:");
    console.log("Includes 'World':", trimmedStr.includes("World")); // true


    console.log("\nsplit() method:");
    console.log("Split by space:", trimmedStr.split(" ")); // ["Hello,", "JavaScript", "World!"]


    console.log("\nrepeat() method:");
    console.log("Repeated String:", "Hi! ".repeat(3));

    
</script>

</body>
</html>

Built -in methods of Arrays

@login123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array Methods Demo</title>
</head>
<body>
    <h1>Array Methods in JavaScript</h1>

    <script>


        console.log("push() method:");
        const fruits = ["Apple", "Banana"];
        fruits.push("Orange");

        console.log("\npop() method:");
        const lastFruit = fruits.pop();
        console.log(lastFruit); 
        console.log(fruits);    

        console.log("\nshift() method:");
        const firstFruit = fruits.shift();
        console.log(firstFruit); 
        console.log(fruits);    

        console.log("\nunshift() method:");
        fruits.unshift("Apple");
        console.log(fruits);

        console.log("\nsplice() method:");
        const newFruits = ["Apple", "Banana", "Orange", "Mango"];
        const removedFruits = newFruits.splice(1, 2, "Grapes");
        console.log("Removed Fruits:", removedFruits); 
        console.log("Updated Fruits:", newFruits);     

        console.log("\nslice() method:");
        const citrus = newFruits.slice(0, 2);
        console.log("Sliced Fruits:", citrus);
        console.log("Original Fruits:", newFruits); 

        console.log("\nmap() method:");
        const numbers = [1, 2, 3, 4];
        const doubled = numbers.map(num => num * 2);
        console.log("Doubled Numbers:", doubled);

        console.log("\nfilter() method:");
        const evenNumbers = numbers.filter(num => num % 2 === 0);
        console.log("Even Numbers:", evenNumbers); 
    </script>
</body>
</html>

Destructuring on arrays and objects

@login123

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Destructuring in JavaScript</title>
</head>
<body>
  <h1>JavaScript Destructuring Examples</h1>
  

  <script>
    // ARRAY DESTRUCTURING

    // 1. Basic Array Destructuring
    const fruits = ["Apple", "Banana", "Cherry"];
    const [firstFruit, secondFruit, thirdFruit] = fruits;
    console.log("Basic Array Destructuring:");
    console.log(firstFruit);  
    console.log(secondFruit); 
    console.log(thirdFruit);  
    console.log("------------");

    // 2. Skipping Elements
    const numbers = [1, 2, 3, 4, 5];
    const [, secondNum, , fourthNum] = numbers;
    console.log("Skipping Elements:");
    console.log(secondNum);
    console.log(fourthNum); 
    console.log("------------");

    // 3. Default Values
    const colors = ["Red"];
    const [primaryColor, secondaryColor = "Green"] = colors;
    console.log("Default Values:");
    console.log(primaryColor); 
    console.log(secondaryColor); 
    console.log("------------");

    // 4. Rest Operator with Arrays
    const languages = ["JavaScript", "Python", "Ruby", "C++"];
    const [firstLang, ...otherLangs] = languages;
    console.log("Rest Operator with Arrays:");
    console.log(firstLang);    
    console.log(otherLangs);   
    console.log("------------");

    // OBJECT DESTRUCTURING

    // 1. Basic Object Destructuring
    const person = {
      name: "Alice",
      age: 25,
      country: "USA"
    };
    const { name, age, country } = person;
    console.log("Basic Object Destructuring:");
    console.log(name);    
    console.log(age);     
    console.log(country); 
    console.log("------------");

    // 2. Renaming Variables
    const student = {
      fullName: "John Doe",
      grade: "A"
    };
    const { fullName: studentName, grade: finalGrade } = student;
    console.log("Renaming Variables:");
    console.log(studentName);   
    console.log(finalGrade);    
    console.log("------------");

    // 3. Default Values in Objects
    const settings = {
      theme: "dark"
    };
    const { theme, fontSize = 16 } = settings;
    console.log("Default Values in Objects:");
    console.log(theme);    
    console.log(fontSize); 
    console.log("------------");

    // 4. Rest Operator with Objects
    const car = {
      make: "Toyota",
      model: "Corolla",
      year: 2021,
      color: "Blue"
    };
    const { make, model, ...otherDetails } = car;
    console.log("Rest Operator with Objects:");
    console.log(make);          
    console.log(model);         
    console.log(otherDetails);  
    console.log("------------");

    // FUNCTION PARAMETERS DESTRUCTURING

    // 1. Array Destructuring in Function Parameters
    function printFirstTwo([first, second]) {
      console.log("Array Destructuring in Function Parameters:");
      console.log("First:", first);
      console.log("Second:", second);
    }
    printFirstTwo(["Apple", "Banana", "Cherry"]);
    console.log("------------");

    // 2. Object Destructuring in Function Parameters
    function displayUserInfo({ username, email }) {
      console.log("Object Destructuring in Function Parameters:");
      console.log("Username:", username);
      console.log("Email:", email);
    }
    displayUserInfo({ username: "johndoe", email: "johndoe@example.com" });
    console.log("------------");

  </script>
</body>
</html>

Navbar

@login123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>College Website</title>
    <style>
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

      
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }

        /* Navigation styling */
        nav {
            display: flex;
            background-color: #333;
        }
        nav a {
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            flex: 1;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Main layout */
        .container {
            display: flex;
            flex: 1;
            padding: 20px;
        }

        /* Sidebar styling */
        .sidebar {
            width: 25%;
            background-color: #f4f4f4;
            padding: 20px;
            border-right: 1px solid #ccc;
        }

        /* Content styling */
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        /* Courses section */
        .courses {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }
        .box {
            background-color: #ddd;
            border: 1px solid #ccc;
            padding: 20px;
            width: calc(33.33% - 20px);
        }

        /* Footer styling */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>

    <!-- Header -->
    <header>
        <h1>University Name</h1>
    </header>

    <!-- Navigation Bar -->
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#courses">Courses</a>
        <a href="#contact">Contact</a>
    </nav>

    <!-- Main Container -->
    <div class="container">

        <!-- Left Sidebar -->
        <div class="sidebar">
            <h2>Menu</h2>
            <ul>
                <li><a href="#menu1">Menu Item 1</a></li>
                <li><a href="#menu2">Menu Item 2</a></li>
                <li><a href="#menu3">Menu Item 3</a></li>
            </ul>
        </div>

        <!-- Main Content -->
        <div class="content">
            <h2>Main Content</h2>
            <p>Welcome to our university's website. Here you can explore the various courses we offer and learn more about our campus life.</p>
            
            <!-- Courses Section -->
            <div class="courses">
                <div class="box">Course 1</div>
                <div class="box">Course 2</div>
                <div class="box">Course 3</div>
                <div class="box">Course 4</div>
                <div class="box">Course 5</div>
                <div class="box">Course 6</div>
            </div>
        </div>

        <!-- Right Sidebar (Optional) -->
        <div class="sidebar">
            <h2>Promotions</h2>
            <p>Check out our latest programs and offers for students.</p>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 University Name. All rights reserved.</p>
    </footer>

</body>
</html>

Grid layout(sample)

@login123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            border: 2px solid red;
            display: grid;
            grid-template-columns:100px 120px 100px;
            grid-template-rows: 100px 100px 100px;
            background-color: rgb(166, 120, 209);
                     
            
        }
        .item{
            height: 45px;
            width: 45px;
            border: 5px solid black;
            margin: 5px;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>

    </div>
</body>
</html>

Grid layout

@login123

<!DOCTYPE html>
<html>
<head>
    <title>Grid Layout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* Define 2 rows, first row 50% of height, second row auto */
            grid-template-rows: 1fr auto;
            gap: 20px;
            background-color: cornflowerblue;
            padding: 20px;
            height: 100vh;
            width: 100%;
        }

        .container > div {
            background-color: rgb(138, 138, 182);
            border: 1px solid black;
            padding: 20px;
            text-align: center;
            font-size: 20px;
        }

        /* Example of grid item properties */
        .item1 {
            grid-column: 1 / span 2; /* Spans across 2 columns */
            grid-row: 1; /* Positions in the first row */
        }

        .item2 {
            grid-column: 3; /* Positions in the third column */
            grid-row: 1; /* Positions in the first row */
        }

        .item3 {
            grid-column: 2 / span 2; /* Spans across columns 2 and 3 */
            grid-row: 2; /* Positions in the second row */
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">This is my first Grid Layout</h1>
    <div class="container">
        <div class="item1">
            <p>Name: S</p>
            <p>Roll No: 22B81A0</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.7</p>
        </div>
        <div class="item2">
            <p>Name: S</p>
            <p>Roll No: 22B81A0</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.0</p>
        </div>
        <div class="item3">
            <p>Name:</p>
            <p>Roll No: 22B81A0</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.5</p>
        </div>
    </div>
</body>
</html>

#php

Array value retrieve with jquery.

@Sifat_H

var TYPR_CHD_NO_TWO = $('input[name="TYPR_CHD_NO_TWO[]"]').map(function() {
                return $(this).val();
            }).get();

FlexBox

@login123

<!DOCTYPE html>
<html>
<head>
    <title>Flex Item</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
            background-color: cornflowerblue;
            height: 100vh;
            width: 100%;
            position: fixed;
        }

        .item{
            color: black;
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            background-color: lavender;
            text-align: center;
            padding-top: 50px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">This is my first Flex</h1>
    <div class="container">
        <div class ="item">
            <p>Name: S</p>
            <p>Roll No: 22B81A05</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.7</p>
        </div>
        <div class ="item">
            <p>Name: S</p>
            <p>Roll No: 22B81A05</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.0</p>
        </div>
        <div class ="item">
            <p>Name: S</p>
            <p>Roll No: 22B81A05</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.5</p>
        </div>
    </div>
</body>
</html>

Inline style sheets

@login123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Example</title>
</head>
<body style="font-family: Arial, sans-serif; 
            background-color: #f0f0f0; 
            margin: 0; 
            padding: 0;">


    <div id="main-content" style="padding: 40px; 
            background-color: #ffffff; 
            border: 1px solid #ddd; 
            max-width: 800px; 
            margin: 20px auto;">
        <h1 style="color: #333; 
            text-align: center; 
            padding: 20px;">Welcome to Inline CSS Styling</h1>


        <p style="color: #666; 
            font-size: 18px; 
            line-height: 1.6; 
            margin: 20px;">
            This is an example of inline styling. Each HTML element has its own <code>style</code> attribute for defining CSS rules.
        </p>
        <p style="color: #0056b3;  
            font-weight: bold; 
            margin: 20px;">
            This paragraph uses an inline style to set specific text color and font weight.
        </p>
    </div>

</body>
</html>

External style sheets

@login123

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Style Sheet Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div id="main-content">
        <h1>Welcome to External CSS Styling</h1>
        <p>This is an example of an external style sheet. The styles are stored in a separate file named <code>styles.css</code>.</p>
        <p class="highlight">This paragraph has additional styling with a specific class.</p>
    </div>

</body>
</html>



CSS:
/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    text-align: center;
    padding: 20px;
}

p {
    color: #666;
    font-size: 18px;
    line-height: 1.6;
    margin: 20px;
}

.highlight {
    color: #0056b3;
    font-weight: bold;
}

#main-content {
    padding: 40px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    max-width: 800px;
    margin: 20px auto;
}

Internal style sheets

@login123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Style Sheet Example</title>
    <style>
        /* Internal CSS styles go here */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: #333;
            text-align: center;
            padding: 20px;
        }

        p {
            color: #666;
            font-size: 18px;
            line-height: 1.6;
            margin: 20px;
        }

        .highlight {
            color: #0056b3;
            font-weight: bold;
        }

        #main-content {
            padding: 40px;
            background-color: #ffffff;
            border: 1px solid #ddd;
            max-width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

    <div id="main-content">
        <h1>Welcome to Internal CSS Styling</h1>
        <p>This is an example of an internal style sheet.
        <p class="highlight">This paragraph has additional styling with a specific class.</p>
    </div>

</body>
</html>

#php

How do I sort a multi-dimensional array by time values in PHP? - Stack Overflow

@xsirlalo

array_multisort(array_map('strtotime', array_column($array, 'stime')), SORT_ASC, $array);

#php

php - Sort a 2d array by a column value - Stack Overflow

@xsirlalo

$new = [
    [
        'hashtag' => 'a7e87329b5eab8578f4f1098a152d6f4',
        'title' => 'Flower',
        'order' => 3,
    ],
    [
        'hashtag' => 'b24ce0cd392a5b0b8dedc66c25213594',
        'title' => 'Free',
        'order' => 2,
    ],
    [
        'hashtag' => 'e7d31fc0602fb2ede144d18cdffd816b',
        'title' => 'Ready',
        'order' => 1,
    ],
];
$keys = array_column($new, 'order');
array_multisort($keys, SORT_ASC, $new);
var_dump($new);

VIDEO 29 (PART 2) javascript

@E23CSEU1151

/////////*********** LOOPS FOR OBJECTS  IN JS ////////////////

const myobj ={
    js: ' javascrpt',
    cpp: 'c++',
    rb: 'ruby'
}
// for in loop 
for(const key in myobj){
 //   console.log(`${key} is the shortcut for ${myobj[key]}`);
 //   console.log(myobj[key]);
} // myobj[key] for getting object values through key


/// for in loop for array 
const coding = ['java','rust', "html"]
for(const key in coding){
  //  console.log(coding[key]);
}

/// for each loop in array
const loop = ["js", "cpp", "java"]
/*loop.forEach( function (val) {
    console.log(val);
})*/

/*loop.forEach((value) => {
    console.log(value);
} )*/

/*function printme(item){
    console.log(item);
}
coding.forEach(printme);*/

/// accessing objects from array through forEach loop
const myarray2 =[
    {
        languagename: "javscript ",
        languagefilename: "js"
        
    },
        {
         languagename: "java ",
        languagefilename: "java" 
        },
        {
              languagename: "python ",
        languagefilename: "python"
        }
    ]
myarray2.forEach((item) => {
    console.log(item.languagename);
})

#xml

Create a web page using the advanced features of CSS Grid. Apply transitions and animations to the contents of the web page.

@cpbab

gridDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid and Animations Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #e0e0e0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            width: 80%;
            max-width: 1200px;
            margin: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .grid-item {
            background-color: #6200ea;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            transition: transform 0.3s ease, background-color 0.3s ease;
            animation: slideIn 0.5s ease forwards;
            opacity: 0;
        }

        @keyframes slideIn {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .grid-item:hover {
            transform: scale(1.1);
            background-color: #3700b3;
        }

        h1 {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h1>CSS Grid and Animations Demo</h1>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
    </div>

</body>
</html>

#xml

Create a web page using the advanced features of CSS Flexbox. Apply transitions and animations to the contents of the web page.

@cpbab

flexboxDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox and Animations Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 80%;
            max-width: 1200px;
            margin: 20px;
            padding: 20px;
            background-color: white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .box {
            flex: 1 1 200px;
            margin: 15px;
            padding: 20px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            border-radius: 8px;
            transition: transform 0.3s ease, background-color 0.3s ease;
            animation: fadeIn 0.5s ease forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        .box:hover {
            transform: scale(1.05);
            background-color: #45a049;
        }

        h1 {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h1>Flexbox and Animations Demo</h1>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5</div>
        <div class="box">Box 6</div>
    </div>

</body>
</html>

#xml

Demonstrate pop-up box alerts, confirm, and prompt using JavaScript.

@cpbab

popUpDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Pop-Up Boxes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        button {
            padding: 10px 15px;
            font-size: 16px;
            margin: 10px;
        }
    </style>
</head>
<body>

    <h1>JavaScript Pop-Up Box Demonstration</h1>
    <button onclick="showAlert()">Show Alert</button>
    <button onclick="showConfirm()">Show Confirm</button>
    <button onclick="showPrompt()">Show Prompt</button>

    <script>
        function showAlert() {
            alert("This is an alert box!");
        }

        function showConfirm() {
            const result = confirm("Do you want to proceed?");
            if (result) {
                alert("You clicked OK!");
            } else {
                alert("You clicked Cancel!");
            }
        }

        function showPrompt() {
            const name = prompt("Please enter your name:");
            if (name) {
                alert("Hello, " + name + "!");
            } else {
                alert("No name entered.");
            }
        }
    </script>

</body>
</html>

#xml

Demonstrate Responsive Web Design using Media Queries to create a webpage.

@cpbab

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Web Design Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333;
    }

    header {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 1em;
      text-align: center;
    }

    main {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      max-width: 1200px;
      padding: 1em;
    }

    .box {
      flex: 1 1 30%;
      background-color: #f1f1f1;
      margin: 10px;
      padding: 20px;
      text-align: center;
    }

    footer {
      width: 100%;
      background-color: #333;
      color: white;
      text-align: center;
      padding: 1em;
      position: fixed;
      bottom: 0;
    }

    @media (max-width: 768px) {
      .box {
        flex: 1 1 45%;
      }

      header, footer {
        padding: 0.8em;
      }
    }

    @media (max-width: 480px) {
      main {
        flex-direction: column;
        align-items: center;
      }

      .box {
        flex: 1 1 100%;
      }

      header, footer {
        font-size: 1.2em;
      }
    }
  </style>
</head>
<body>

  <header>
    <h1>Responsive Web Design</h1>
    <p>This is a simple responsive layout using media queries</p>
  </header>

  <main>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </main>

  <footer>
    <p>&copy; 2024 Responsive Web Design Demo</p>
  </footer>

</body>
</html>

#xml

Write a JavaScript program to demonstrate the working of callbacks, promises, and async/await.

@cpbab

asyncDemo.js
function fetchDataCallback(callback) {
  setTimeout(() => {
    callback("Data fetched using callback");
  }, 2000);
}

function displayDataCallback() {
  fetchDataCallback((data) => {
    console.log(data);
  });
}

function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched using promise");
    }, 2000);
  });
}

function displayDataPromise() {
  fetchDataPromise()
    .then((data) => console.log(data))
    .catch((error) => console.error("Error:", error));
}

async function fetchDataAsync() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched using async/await");
    }, 2000);
  });
}

async function displayDataAsync() {
  try {
    const data = await fetchDataAsync();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

console.log("Starting Callback example...");
displayDataCallback();

setTimeout(() => {
  console.log("\nStarting Promise example...");
  displayDataPromise();
}, 3000);

setTimeout(() => {
  console.log("\nStarting Async/Await example...");
  displayDataAsync();
}, 6000);

#xml

Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define an XML schema to validate the XML document created above.

@cpbab

books.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:noNamespaceSchemaLocation="books.xsd">
    <book>
        <title>Introduction to XML</title>
        <author>John Doe</author>
        <isbn>978-0-123456-47-2</isbn>
        <publisher>Example Press</publisher>
        <edition>3rd</edition>
        <price>39.99</price>
    </book>
    <book>
        <title>Advanced XML Concepts</title>
        <author>Jane Smith</author>
        <isbn>978-0-765432-10-5</isbn>
        <publisher>Tech Books Publishing</publisher>
        <edition>1st</edition>
        <price>45.00</price>
    </book>
</bookstore>

books.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <xs:element name="bookstore">
        <xs:complexType>
            <xs:sequence>
                <xs:element name="book" maxOccurs="unbounded">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element name="title" type="xs:string"/>
                            <xs:element name="author" type="xs:string"/>
                            <xs:element name="isbn" type="xs:string"/>
                            <xs:element name="publisher" type="xs:string"/>
                            <xs:element name="edition" type="xs:string"/>
                            <xs:element name="price" type="xs:decimal"/>
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:sequence>
        </xs:complexType>
    </xs:element>
</xs:schema>

#xml

Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define a Document Type Definition (DTD) to validate the XML document created above.

@cpbab

books.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE bookstore SYSTEM "bookstore.dtd">
<bookstore>
    <book>
        <title>Introduction to XML</title>
        <author>John Doe</author>
        <isbn>978-0-123456-47-2</isbn>
        <publisher>Example Press</publisher>
        <edition>3rd</edition>
        <price>39.99</price>
    </book>
    <book>
        <title>Advanced XML Concepts</title>
        <author>Jane Smith</author>
        <isbn>978-0-765432-10-5</isbn>
        <publisher>Tech Books Publishing</publisher>
        <edition>1st</edition>
        <price>45.00</price>
    </book>
</bookstore>

bookstore.dtd
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, isbn, publisher, edition, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>

Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define an XML schema to validate the XML document created above.

@cpbab

books.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:noNamespaceSchemaLocation="books.xsd">
    <book>
        <title>Introduction to XML</title>
        <author>John Doe</author>
        <isbn>978-0-123456-47-2</isbn>
        <publisher>Example Press</publisher>
        <edition>3rd</edition>
        <price>39.99</price>
    </book>
    <book>
        <title>Advanced XML Concepts</title>
        <author>Jane Smith</author>
        <isbn>978-0-765432-10-5</isbn>
        <publisher>Tech Books Publishing</publisher>
        <edition>1st</edition>
        <price>45.00</price>
    </book>
</bookstore>

books.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <xs:element name="bookstore">
        <xs:complexType>
            <xs:sequence>
                <xs:element name="book" maxOccurs="unbounded">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element name="title" type="xs:string"/>
                            <xs:element name="author" type="xs:string"/>
                            <xs:element name="isbn" type="xs:string"/>
                            <xs:element name="publisher" type="xs:string"/>
                            <xs:element name="edition" type="xs:string"/>
                            <xs:element name="price" type="xs:decimal"/>
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:sequence>
        </xs:complexType>
    </xs:element>
</xs:schema>

Filtering with specific email

@Wittinunt

AND(
    OR(
        ISBLANK(ANY(SELECT(Filters Slice[Staff], USEREMAIL()=[Email]))),
        ANY(SELECT(Filters Slice[Staff], USEREMAIL()=[Email])) = [Staff]
    ),
    OR(
        ISBLANK(ANY(SELECT(Filters Slice[From...], USEREMAIL()=[Email]))),
        [Date] >= ANY(SELECT(Filters Slice[From...], USEREMAIL()=[Email]))
    ),
    OR(
        ISBLANK(ANY(SELECT(Filters Slice[To...], USEREMAIL()=[Email]))),
        [Date] <= ANY(SELECT(Filters Slice[To...], USEREMAIL()=[Email]))
    )
)

SAS FUNCTION SYMPUS Concatination

@VanLemaime

* GOAL: Within a macro, you want to create a new variable name.
* It could then be used as a data set name, or a variable name to be assigned, etc.;
%macro newname(dset=,varname=);
* You have to make the new name before you use it in
* another data statement;
data _NULL_;
L1=CATS("&varname","_Plus1");
CALL SYMPUT('namenew',L1);
;
* Now you can use the variable name created by SYMPUT;
DATA REVISED;SET &DSET;
   &namenew=&varname+1;
run;
%mend;
Data try;
input ABCD @@;
datalines;
1 2 3 4
;run;
%newname(dset=try,varname=ABCD);
proc print data=revised;run;

Performing Queries Using PROC SQL - 34 of 37

@VanLemaime

     proc sql;
        select jobcode,avg(salary) as Avg
           from sasuser.payrollmaster
           group by jobcode
           having avg(salary)>40000
           order by jobcode;

Ethereum Solidity Contract Source Code Verification - Bytecode - ABI (Version 2)

@mathewmerlin72

ParserError: Expected '' but got 'Number'
 --> myc:1:10:
  |
1 | GNU nano 7.2                            payabledistributor.sol// SPDX-License-Identifier: MIT
  |          ^^^

#nftmarketplacedevelopment #nftbusinessgrowth #nftdevelopmentpartner #blockchaindevelopmentcompany #nftstartupsuccess

Choose the Right NFT Partner

@LilianAnderson

https://medium.com/coinmonks/top-nft-marketplace-development-companies-3b2caed0cd45

#c#

basic array

@sakib_671

#include <stdio.h>
int main() {
   // printf() displays the string inside quotation
   printf("Hello, World!");
   return 0;
}

#c#

basic array

@sakib_671

#include <stdio.h>
int main() {
   // printf() displays the string inside quotation
   printf("Hello, World!");
   return 0;
}

List of Keywords in Python Programming

@karthiksalapu

>>> import keyword
>>> print(keyword.kwlist)
['False', 'None', 'True', 'and', 'as', 'assert', 'async', 'await', 'break', 'class', 'continue', 'def', 'del', 'elif', 'else', 'except', 'finally', 'for', 'from', 'global', 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not', 'or', 'pass', 'raise', 'return', 'try', 'while', 'with', 'yield']

#html

My Airdrop Daily Task

@Meschebo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HAHU CRYPTO</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* General Styling */
        body {
            font-family: 'Arial', sans-serif;
            background-color: white;
            color: black;
            margin: 0;
            padding: 20px;
            transition: background-color 0.3s, color 0.3s;
            user-select: none;
        }

        body.high-mode {
            background-color: black;
            color: white;
        }

        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
            text-align: center;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        /* Hamburger Menu Styling */
        .hamburger {
            font-size: 2em;
            cursor: pointer;
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 300px;
            height: 100%;
            background-color: #333;
            color: white;
            transform: translateX(-100%);
            transition: transform 0.3s;
            z-index: 1000;
            padding: 20px;
        }

        .menu.active {
            transform: translateX(0);
        }

        .menu .close-btn {
            font-size: 1.5em;
            cursor: pointer;
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .menu ul {
            list-style: none;
            padding: 0;
        }

        .menu ul li {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            cursor: pointer;
        }

        .menu ul li img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .menu ul li a {
            color: white;
            text-decoration: none;
            font-size: 1.2em;
            margin: 0;
            display: inline-flex;
            align-items: center;
        }

        /* Search Input */
        input[type="text"] {
            width: 80%;
            padding: 15px;
            border: 2px solid #007BFF;
            border-radius: 5px;
            font-size: 1.2em;
            margin: 20px auto;
            display: block;
            transition: border-color 0.3s ease;
            background-color: white;
            color: #333;
        }

        body.high-mode input[type="text"] {
            background-color: #444;
            color: white;
            border: 2px solid #555;
        }

        /* Task List */
        .task {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #e1e9ef;
            transition: background 0.3s;
        }

        .task:last-child {
            border-bottom: none;
        }

        .task:hover {
            background: #f9f9f9;
        }

        body.high-mode .task:hover {
            background: #333;
        }

        /* Button Styling */
        button {
            padding: 10px 15px;
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
        }

        button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        /* Footer */
        footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9em;
            color: #666;
        }

        body.high-mode footer {
            color: #ccc;
        }

        /* Toast Notification */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 1000;
            animation: slideIn 0.5s ease, fadeOut 0.5s 2.5s forwards;
        }

        @keyframes slideIn {
            from {
                bottom: -50px;
                opacity: 0;
            }
            to {
                bottom: 20px;
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
            }
        }

        /* Mood Toggle */
        .mood-toggle {
            cursor: pointer;
            font-size: 2em;
            position: absolute;
            top: 20px;
            right: 20px;
            transition: transform 0.3s;
        }

        .mood-toggle:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <!-- Hamburger Icon -->
    <div class="hamburger" id="hamburger">&#9776;</div>

    <!-- Hamburger Menu -->
    <div class="menu" id="menu">
        <span class="close-btn" id="closeMenu">&times;</span>
        <ul>
            <li><a href="https://t.me/Hahucryptoet" target="_blank"><img src="https://i.ibb.co/Nyjtq7B/IMG-20241029-004716-176.jpg" alt="Hahu Crypto"> Hahu Crypto</a></li>
            <li><a href="https://t.me/hahu_Support" target="_blank"><img src="https://i.ibb.co/Nyjtq7B/IMG-20241029-004716-176.jpg" alt="Hahu Support"> Hahu Support</a></li>
            <li><a href="https://t.me/leap10" target="_blank"><img src="https://i.ibb.co/6ByXcTT/IMG-20241028-235223-445.jpg" alt="Dev"> Dev &lt;/&gt;</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="container">
        <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;">
    <div style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);">
        <img src="https://i.ibb.co/Nyjtq7B/IMG-20241029-004716-176.jpg" alt="Image 1" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnyTH33Ds8Z_vpe2LOZEdwXVCYtYl86sVgeA&s" alt="Image 2" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
</div>
        <h1><a href="https://t.me/tapswap_bot?startapp" style="text-decoration: none;">Tapswap</a> Cinema Codes</h1>
        <i class="fas fa-sun mood-toggle" id="moodToggle" title="Switch to High Mode"></i>
        <input type="text" id="search" placeholder="Search for tasks..." onkeyup="searchTasks()">
        <div id="task-list"></div>
        <footer>
            <p>Powered by <a href="https://t.me/Hahucryptoet" style="text-decoration: none;">Hahu Crypto</a> Team</p>
        </footer>
    </div>

    <script>
        // Sample Tasks Data
        const tasks = [
            { task: 'Crypto scandals and triumps', code: '739002' },
{ task: 'Tapswap news: highlights from the AMA session on TON\'s space', code: '5' },
{ task: 'Why did Tapswap change the blockchain?', code: '548719' },
{ task: 'Tapswap Education: Bitcoin and altcoin', code: '030072' },
{ task: 'New in the crypto world', code: '739551' },
{ task: '5 main crypto terms in 5mins', code: '2614907' },
{ task: 'Tapswap Education: The most famous cryptocurrency', code: 'D57U94' },
{ task: 'How you can make money when crypto falling?', code: 'genesis' },
{ task: 'Drops and rises in the crypto world', code: '27F53K9' },
{ task: '5 easy ways to make money on crypto', code: 'encryption' },
{ task: 'Tapswap Education: Memes and cryptocurrencies', code: '4D80N74' },
{ task: 'How to get started in crypto without investments?', code: 'TRIBALISM' },
{ task: '8 Warren buffet rules in 8 mins', code: 'ABENOMICS' },
{ task: 'Tapswap Education: Fake news and real news', code: 'G5D73H20' },
{ task: 'Cryptocurrency worldwide news!', code: '3PM71AK03X' },
{ task: 'How to buy crypto in 2024?', code: 'delisting' },
{ task: '10 crypto terms in 5mins', code: 'collateral' },
{ task: 'Tapswap: curious facts', code: 'L6SE704V81' },
{ task: 'How cryptocurrency and money actually works', code: 'fibonacci' },
{ task: 'Tapswap: curious facts. Top 7 most expensive NFT', code: 'F35K90V3' },
{ task: 'What is bitcoin? The simplest explanation', code: 'liveness' },
{ task: 'Hot crypto news: Ethereum ETFs', code: '5J6OL847G7' },
{ task: 'The most dangerous cryptoscams you should know about!', code: 'RANSOMWARE' },
{ task: 'Tapswap education: Can u earn 1 bitcoin per day? How bitcoin mining works.', code: '4K7U6E10G7' },
{ task: 'What are NFTs and why they cost millions?', code: 'tardigrade' },
{ task: 'Lunch Dates, Token Conversion, Mining, and Future Features!', code: 'F9L34V5A' },
{ task: 'How Elon Musk impacts crypto', code: 'unbanked' },
{ task: 'Financial face-off: Bitcoin custody vs Bank accounts', code: 'D5784VHPC377' },
{ task: '7 AI tools that will make you rich', code: 'infinite' },
{ task: 'The dark side of crypto: Top 8 cyber attacks and how to prevent them', code: '5SP670KR66' },
{ task: 'Crypto is not real money! Will cryptocurrency REPLACE fiat money?', code: 'parachain' },
{ task: 'Unlocking the future: The power of a trio of blockchain, IoT, and AI', code: 'D772WQ9Z5' },
{ task: 'How to make $1 Million as a TEENAGER (30 Money Tips)', code: 'instamine' },
{ task: 'USDT vs USDC', code: '7N008TQ31V' },
{ task: 'Without this knowledge you WILL NOT MAKE MONEY in crypto!', code: 'WebSocket' },
{ task: 'Crypto revolution: Pay with crypto using debit cards', code: '0TJN63R97A' },
{ task: 'The Best Crypto Portfolio for 2024! (LAST CHANCE BEFORE BULL RUN)', code: 'unstoppable' },
{ task: 'Top15 crypto news: what is the hottest? Bitcoin, USDT', code: '3KKLF7JO5' },
{ task: 'Make 10x On Crypto', code: 'Onchain' },
{ task: 'Bitcoin integration to the real life: new digital gold', code: '547JL6AM7R' },
{ task: 'Earn on Airdrops', code: 'tendermint' },
{ task: 'Delicious crypto news: ethereum ETF, Tether on TON, Dogecoin\'s Real world impact', code: 'Q7P9N3VD' },
{ task: '10 Passive Income Ideas - How I Earn $1,271 A Day!', code: 'renewable' },
{ task: 'Top 10 bitcoin whales: The biggest bitcoin holders revealed!', code: '5G36SQ' },
{ task: 'Ethereum will be worth $20,000! What is Ethereum?', code: 'emission' },
{ task: 'Top 10 bitcoin whales: The biggest bitcoin holders revealed! Part 2', code: '27MZ' },
{ task: 'Secure your crypto: The role of public and private keys', code: '5WH71' },
{ task: 'How Blockchain ACTUALLY Work | A Simple Explanation For Beginners (12mins)', code: 'marlowe' },
{ task: 'Secure your crypto: The role of public and private keys | Part 2 (3mins)', code: '0P6E' },
{ task: 'рџ¤– If I Wanted to Become a Millionaire In 2024 - I\'d Do This (10mins)', code: 'function' },
{ task: 'Secure your crypto: CEX vs self custodial wallets (5mins)', code: '1T89G' },
{ task: 'How I Stay Productive 99% of Every Day? (8mins)', code: 'quantum' },
{ task: 'Secure your crypto: CEX vs self custodial wallets | Part 2 (5mins)', code: 'L3AE7' },
{ task: '10 Websites Where Rich People Give Away FREE Money (10mins)', code: 'watchlist' },
{ task: 'Bitcoin halving: what future price are crypto experts predicting? (4mins)', code: '7JSZ7' },
{ task: 'If I Started From Scratch Again - IвЂ™d Do This (8mins)', code: 'farming' },
{ task: 'Where To Start in Crypto', code: 'electrum' },
{ task: 'What CRYPTO To Buy With $500', code: 'hashgraph' },
{ task: 'Bitcoin Halving Part 2', code: 'YK797' },
{ task: 'How To Earn $2000+ Watching Youtube Videos (11mins)', code: 'immutable' },
{ task: 'crypto news! Bitcoin\'s rollercoaster and vitalik buterin\'s film. Will btc hit $100k next? (4mins)', code: '1MH89S' },
{ task: 'How To Make $500 A Day With Cryptocurrency Arbitrage (10 mins)', code: 'backlog' },
{ task: 'How To Make $5,000 per Month With Crypto Bots! Guide For Beginners (8 mins)', code: 'royalties' },
{ task: 'TON Ecosystem Alert: Avoiding security risks on telegram (4mins)', code: '8NL6FW9' },
 { task: 'How To Farm 1 MILLION Coins Per A Click In TapSwap (10mins)', code: 'timelock' },
{ task: 'Crypto Bots are SCAMMING you! EARNINGS From 0$ (8mins)', code: 'inflation' },
{ task: 'Block chain secrets: Can data availability save us? (3mins)', code: '2V3L5' },
{ task: 'рџ¤– You Will LOSE Your Money If You Make These Mistakes (8mins)', code: 'rebalancing' },
{ task: 'Crypto Bots are SCAMMING you!', code: 'inflation' },
{ task: 'Get Paid +750$ Every 20 minutes Online', code: 'scaling' },
{ task: 'TapSwap Internal News', code: '1T75S7' },
{ task: '10 Websites That Will Pay You', code: 'keylogger' },
{ task: 'Why are people going crazy for NFTs? What\'s making digital tokens So popular (3mins)', code: '2NV4Z' },
{ task: 'How To Earn $2,000 Listening to Music for FREE (2024) (8mins)', code: 'raiden' },
{ task: 'Blockchain Secrets: Can data availability save us? | Part 2', code: '9SX634' },
{ task: 'Why are people going crazy for NFTs? What\'s making digital tokens So popular | Part 2 (3mins)', code: 'J9RO8' },
{ task: 'I Lost $10,000 - Don\'t Make These Mistakes (8mins)', code: 'nominators' },
{ task: 'I Made a Million Dollar Meme Coin In 10 Minutes (9mins)', code: 'payout' },
{ task: 'How To Create Your OWN COIN', code: 'payout' },
{ task: 'Bitcoin Update: Mt. Gox Payout', code: 'PD9S6HN81M' },
{ task: 'How To Make Money On Stock', code: 'fakeout' },
{ task: 'Hot News!', code: '5FR63U' },
{ task: 'Make $30 Per Word With Typing Jobs From Home (10mins)', code: 'ledger' },
{ task: 'Mastering Bitcoin', code: 'No codes' },
{ task: 'Cool News!', code: '5L32DN' },
{ task: '10 Legit APPs That Will Pay You Daily Within 24 HOURS (10mins)', code: 'darknodes' },
{ task: 'Tapswap Education. Part 1', code: 'J386XS' },
{ task: 'How To Make $12,000/month', code: 'lambo' },
{ task: 'Tapswap Education. Part 2', code: '5UY4W1' },
{ task: '7 laziest way to make money', code: 'replay' },
{ task: 'Make $5000+ with Pinterest', code: 'invest' },
{ task: 'Earn $100+ Per Day In Telegram', code: 'curve' },
{ task: 'How to spot 100Г— Altcoin', code: 'lachesis' },
{ task: 'Start Your Business Under 10', code: 'liquid' },
{ task: '10 Habits Of Millionaires (10mins)', code: 'mainnet' },
{ task: 'Make $755 While You Sleep (10mins)', code: 'quorum' },
{ task: '10 Best Dropshipping Niches (15mins)', code: 'perpetual' },
{ task: 'Sell Your Photos For $5 Per On (10mins)', code: 'scam' },
            { task: '20 Best YouTube Niche (14mins)', code: 'flashbots' },
{ task: '5 REAL Apps That Pay You To Walk', code: 'capital' },
{ task: '10 Best Budgeting Apps (8mins)', code: 'node' },
{ task: '15 Powerful Secrets To Get Rich', code: 'long' },
{ task: 'Avoid This To Become Rich', code: 'libp2p' },
{ task: 'Earn $300/Daily From Binance (11mins)', code: 'jager' },
{ task: '7 Best Cash Back Apps (10mins)', code: 'gwei' },
{ task: 'Make Money Playing Video Games (11mins)', code: 'monopoly' },
{ task: '$50 Per Survey + Instant Payment (9mins)', code: 'dumping' },
{ task: 'High Paying Micro Task Websites (10mins)', code: 'custody' },
{ task: 'What is Doxing? Part 2 (3mins)', code: 'No code required' },
{ task: 'Make Your First $100,000 (10mins)', code: 'moon' },
{ task: 'Stable Crypto News (3mins)', code: 'No code required' },
{ task: 'Travel and Earn Money', code: 'bag' },
{ task: 'Crypto Scams Exposed: Beware of Fake Tokens | Part 1 (3mins)', code: 'No Code' },
{ task: 'Passive Income (10mins)', code: 'network' },
{ task: 'Crypto Scams Exposed | Part 2 (3mins)', code: 'No code' },
{ task: 'Earn $5,000 with Chat GPT (11mins)', code: 'newb' },
{ task: 'Don\'t Get Hacked (3mins)', code: 'No code' },
{ task: 'Earn $500 By Reviewing Products! (10mins)', code: 'fakeout' },
{ task: 'Don\'t Get Hacked | Part 2 (3mins)', code: 'No code' },
{ task: 'Make REAL MONEY Before 2025 (10mins)', code: 'money' },
{ task: 'Tappy Town Guide: Gems, Blocks and Builders | Part 1 (3mins)', code: 'No code' },
{ task: '15 Time Management Tips (11mins)', code: 'taint' },
{ task: 'Reselling In 2024 (Easy $10,000) (9 mins)', code: 'pair' },
{ task: 'Bitcoin\'s Ride: Understanding Price Fluctuations | Crypto Volatility Explained. (4 mins)', code: 'No code' },
{ task: 'Tapswap Update! (4 mins)', code: 'airnode' },
{ task: 'TOP 10 And More (9mins)', code: 'No code' },
{ task: 'Make $10,000 in TikTok (11 mins)', code: 'payee' },
{ task: 'Crypto Pitfalls Part 1 (3mins)', code: 'No code' },
{ task: 'Top Free Finance Courses (9 mins)', code: 'protocol' },
{ task: 'Crypto Pitfalls Part 2 (3mins)', code: 'No code' },
{ task: 'Top Future Professions (10 mins)', code: 'scamcoin' },
{ task: 'Crypto Pitfalls Part 3 (3mins)', code: 'No code' },
{ task: 'Make Money On Social Media (11 mins)', code: 'dyor' },
{ task: 'Web3 Explained (4 mins)', code: 'No code' },
{ task: 'Phone-Based Side Hustles (10 mins)', code: 'liquidity' },
{ task: 'Web3 Explained | Part 2 (3 mins)', code: 'No code' },
{ task: 'Earning with Affiliate Programs (10 mins)', code: 'peg' },
{ task: 'Web3 Explained | Part 3 (3 mins)', code: 'No code' },
{ task: 'Monetize Your Blog! (11 mins)', code: 'phishing' },
{ task: 'Crypto News! (2mins)', code: 'No code' },
{ task: 'Make Money Online! (10 mins)', code: 'platform' },
{ task: 'Crypto News! | Part 2 (2mins)', code: 'No code' },
{ task: 'How To Earn Free Bitcoin! (11mins)', code: 'address' },
{ task: 'Crypto News! | Part 3 (2mins)', code: 'No code' },
{ task: 'Start Earning With Airbnb (9 mins)', code: 'hacking' },
{ task: 'Crypto News! | Part 4 (2mins)', code: 'No code' },
{ task: 'Monetize Your Hobby (8 mins)', code: 'geth' },
            { task: 'Simple earning on binance', code: 'rekt' },
{ task: 'Open Best Online Businesses', code: 'roadmap' },
{ task: 'Make $5000 In A Month On X', code: 'abstract' },
{ task: 'Get Free Gifts Using Loyalty Programs', code: 'rebase' },
{ task: 'Make money from Instagram', code: 'account' },
{ task: 'I asked companies for free stuff', code: 'affiliate' },
{ task: 'Make money with your car!', code: 'oversold' },
{ task: 'Millionaire-Making Crypto Exchanges!', code: 'honeypot' },
{ task: 'Make $5000+ with copy Trading', code: 'gas' },
{ task: 'Stay out of poverty!', code: 'validator' },
{ task: 'Amazon success!', code: 'vaporware' },
{ task: 'Start a profitable youtube channel!', code: 'virus' },
{ task: 'Facebook ads tutorial', code: 'volatility' },
{ task: 'Famous crypto millionaires', code: 'volume' },
{ task: 'Selling Your Art Online', code: 'wei' },
{ task: 'Get paid to playtest', code: 'wallet' },
{ task: 'The Best Side Hustles Ideas!', code: 'regens' },
{ task: 'Be Productive Working From Home', code: 'whale' },
{ task: 'Make $1000 Per Day', code: 'whitelist' },
{ task: 'Make Big Money In Small Towns', code: 'whitepaper' },
{ task: 'Make money as a student', code: 'zkapps' },
{ task: 'Work From Home', code: 'zkoracle' },
{ task: 'Secrets To Secure Business Funding', code: 'zksharding' },
{ task: 'Anyone can get rich!', code: 'honeyminer' },
{ task: 'Achieve everything you want', code: 'accrue' },
{ task: 'Watch to get rich!', code: 'regulated' },
            { task: 'Make Money Anywhere', code: 'restaking' },
{ task: 'Save your first $10,000', code: 'retargeting' },
{ task: 'Online business from $0', code: 'whitepaper' },
{ task: 'Amazon Success 2', code: 'rust' },
{ task: 'Make Money On Weekends', code: 'scrypt' },
{ task: 'Telegram wallet 2024', code: 'security' },
{ task: '$5,000 Month Flipping Items On eBay', code: 'settlement' },
{ task: 'Make $3,000 Per Month By Selling', code: 'shard' },
{ task: 'They Changed Our Lives', code: 'tangle' },
{ task: 'How To Retire Early', code: 'taproot' },
{ task: '10 Business Ideas For Digital Nomads', code: 'shilling' },
{ task: 'Earn $250 Per Hour On Freelance', code: 'shitcoin' },
{ task: '16,000 per Month with an online agency', code: 'short' },
{ task: 'Earn $5500 Per Month On Text Writing', code: 'sidechain' },
{ task: 'Earn $8,000 Per Month with online course', code: 'signal' },
{ task: 'Top 10 side Hustles For Busy Professionals', code: 'slashing' },
{ task: 'Make $1,000 Per A Day By Flip', code: 'slippage' },
{ task: 'Buy REAL ESTATE With Only $100', code: 'snapshot' },
{ task: 'How To Start Investing In Real Estate With No Money', code: 'spac' },
{ task: 'Start Your First Business', code: 'gems' },
{ task: 'Start a successful online business', code: 'roi' },
{ task: 'Millionaire on a low salary', code: 'skynet' },
{ task: '5 Remote Jobs For Stay At Home', code: 'snapshot' },
{ task: 'Earnings on launchpad', code: 'unconfirmed' },
{ task: '7 High Paying Freelance Skills', code: 'accountability' },
            { task: 'Make Money With Your Voice', code: 'acquisition' },
{ task: '10 Best Freelancing Platform', code: 'spyware' },
{ task: '$100,000 By IT Professions With No code', code: 'stablecoin' },
{ task: 'Invest as a teenager', code: 'staking' },
{ task: '10 Most Profitable Niches', code: 'stroop' },
{ task: '4 Business Ideas To Start with $0', code: 'subnet' },
{ task: 'Make People BUY FROM YOU', code: 'substrate' },
{ task: 'Earn $550 Per A Day By Selling ebooks', code: 'supercomputer' },
{ task: '10 AI Tools That Will Make You Rich', code: 'supercycle' },
{ task: 'Websites That will pay you', code: 'swarm' },
{ task: 'Lazy Ways to Make Money Online (2025)', code: 'capitulation' },
{ task: 'Make Money With Graphic Design', code: 'cash' },
{ task: 'YouTube Gaming Channel', code: 'cashtoken' },
{ task: 'Earn with your smartphone', code: 'censorship' },
{ task: 'Make Money by Flipping Furniture', code: 'piece' },
{ task: 'Make money with your hobby', code: 'graduate' },
{ task: 'Earn $10,000 per Month on Twitch', code: 'helpful' },
{ task: 'TikTok in 2024', code: 'morning' },
{ task: 'Earn $5000 With A Drone', code: 'tuesday' },
{ task: 'Digital Product Ideas', code: 'tomorrow' },
{ task: 'Ways to Make Money on Fiverr', code: 'kinder' },
{ task: 'Selling Your Music Online', code: 'neons' },
{ task: 'Secret Crypto Projects', code: 'proof' },
{ task: 'Traffic Arbitrage', code: 'hashtag' },
{ task: 'Lazy Ways to Make Money', code: 'routine' },
{ task: 'Make $100,000 with SOCIAL MEDIA', code: 'hello' },
{ task: 'Trading FOREX', code: 'happy' },
            { task: '100,000 Followers In 1 Month', code: 'amazing' },
{ task: 'YouTube Shorts', code: 'heshday' },
{ task: '$1000/Day With ChatGPT', code: 'uzumy' },
{ task: 'Make Money At Any Age', code: 'ledhos' },
{ task: 'Selling CANVA Templates', code: 'miner' },
{ task: 'Instagram Reels', code: 'laugh' },
{ task: 'Selling Your Old Clothes', code: 'tested' },
{ task: 'Industries That Make Billionaires', code: 'hesoyam' },
{ task: 'Make Money by Offering Language Lessons', code: 'facture' },
{ task: 'Creating ASMR Content', code: 'practice' },
{ task: '$20,000 A Month From UGC', code: 'loser' },
{ task: 'Creating Virtual Escape Rooms', code: 'winner' },
{ task: 'Get Your Dream Job', code: 'windows' },
{ task: 'Earn $10,000 With Escape Rooms', code: 'cores' },
{ task: 'Selling Your Dreams', code: 'geforce' },
{ task: 'Creating GIFs', code: 'potato' },
{ task: 'Earn Money as a Virtual Friend', code: 'bulls' },
{ task: 'Learned To Code in 2 Months', code: 'bear' },
{ task: '10 Principles of Leadership', code: 'positive' },
{ task: 'Post Unoriginal Content', code: 'memory' },
{ task: 'Faceless TikTok Niches', code: 'boost' },
{ task: 'Pros and Cons of Entrepreneurship', code: 'september' },
{ task: 'Get Ahead of 99% of Teenagers', code: 'open' },
{ task: 'Turning Trash Into Art', code: 'update' },
            { task: 'Making Money from Odd Jobs', code: 'jingle' },
{ task: 'Make Money Creating and Selling Online Quizzes', code: 'green' },
{ task: 'Create and Sell Printable Coloring Pages', code: 'lobster' },
{ task: 'Make Money With Alibaba', code: 'viral' },
{ task: 'Monetize Your Spotify Playlists', code: 'monetize' },
{ task: 'Products That Will Make you a MILLIONAIRE', code: 'income' },
{ task: 'FUN JOBS THAT PAY WELL', code: 'numpad' },
{ task: 'Start Your Own Clothing Brand', code: 'timer' },
{ task: 'Earn EXTRA CASH from Home', code: 'purple' },
{ task: 'Ways To Make Money FAST', code: 'waves' },
{ task: 'Make MONEY with AR', code: 'ifresh' },
{ task: 'Selling NOTION TEMPLATES', code: 'friday' },
{ task: 'Tools For Making Money', code: 'october' },
{ task: '$10,000 a Month with DeFi', code: 'position' },
{ task: 'Freelance Video Editor', code: 'solana' },
{ task: 'Earn $8,200 per month', code: 'double' },
{ task: 'Rich people avoid paying taxes', code: 'december' },
{ task: 'REAL Profit from Selling VIRTUAL Real Estate', code: 'company' },
            { task: 'Make Money With 3D Printing', code: 'contains' },
{ task: 'YouTube WITHOUT MONETIZATION', code: 'heets' },
{ task: 'Skills That Pay Off Forever', code: 'ryzen' },
{ task: '$15,000 on designs for brands', code: 'turbo' },
            { task: 'Make Money with Customizable Tech Gadgets', code: 'gadgets' },
{ task: 'Myths About Making Money', code: 'about' },
{ task: 'Offering Pet Care Services', code: 'sanyo' },
{ task: 'Trading Mistakes', code: 'grapes' },
{ task: 'Promote Your Business', code: 'keyboard' },
{ task: 'Multiple Income Streams', code: 'universial' },
{ task: 'Instagram Reels VIRAL', code: 'monitor' },
{ task: 'Affiliate Marketing With AI', code: 'lemonade' },
{ task: 'Professions That Pay Well', code: 'linktg' },
{ task: 'Mistakes New Entrepreneurs Make', code: 'mistake' },
{ task: 'It\'s Time to Quit Your 9 to 5 Job', code: 'views' },
{ task: 'Create a Successful Business Plan', code: 'pending' },
{ task: 'TikTok Shop Dropshipping', code: 'holland' },
{ task: 'Stay Productive as a Solopreneur', code: 'mistakes' },
{ task: 'Mistakes to Avoid in Your 20s', code: 'solopr' },
{ task: 'Save Money While Traveling', code: 'ideas3' },
{ task: 'Business Ideas for Students', code: 'google' },
{ task: 'Spoiler Alert! Who Is Satoshi? | Part 1', code: 'K&(9)' },
{ task: '$500/Day with Google Search', code: 'student' },
{ task: 'Outsource Effectively', code: 'owner' },
{ task: 'Use LinkedIn to Grow', code: 'career' },
{ task: 'Spoiler Alert! Who Is Satoshi? | Part 2', code: '6A3=H' },
{ task: 'Make Money With GOOGLE', code: 'books' },
{ task: 'Become a Crypto Ambassador | Part 4', code: 'Рљ6@40' },
{ task: 'Products to SELL in Fallwinter', code: 'products' },
{ task: 'Create a Marketing Plan', code: 'market' },
            { task: 'Become a Crypto Ambassador | Part 5', code: 'F5O%3' },
{ task: '5 AI Apps to Automate Your Day', code: 'wasting' },
{ task: 'Minimalist Budget That Works', code: 'budget' },
{ task: 'Financial Goals to Set in Your 30s', code: 'goals' },
{ task: 'Own Website With No Coding', code: 'website' },
{ task: 'Spoiler Alert! Who Is Satoshi? | Part 3', code: 'W3#94' },
{ task: 'Online Portfolio That Gets You Hired', code: 'hired' },
{ task: 'Spoiler Alert! Who Is Satoshi? | Part 4', code: 'L5DC#' },
            { task: '16 Life lessons', code: 'before' },
            { task: 'Dropshipping with AI', code: 'dropship' },
            { task: 'Best Low-Cost Franchises', code: 'sport' },
{ task: 'Monetize Your Knowledge', code: 'unusual' },
{ task: 'YouTube Niches', code: 'niches' },
{ task: 'Professional Problem Solver', code: 'solver' },
{ task: 'Milady Maker NFTs Explained | Part 5', code: 'KL4$Y' },
{ task: 'Start a Zero-Waste Product Line', code: 'waste' },
{ task: 'Is Peter Todd Really Satoshi?', code: 'V1Y&E' },
{ task: 'Monetize Your Blog', code: 'zeros' },
{ task: "Twitter Explodes Over HBO's Claim!", code: 'JM5@S' },
            { task: 'Custom-Mode Clothing Line', code: 'printing' },
            { task: 'PERFECT TEAM For Business', code: 'perfect' },
{ task: '10 Rules of Success', code: 'negotiate' },
{ task: 'Fake Paparazzi', code: 'startn' },
{ task: 'Personalised Gift Business', code: 'laser' },
            { task: 'One Person Business', code: 'build' }
        ];

        // Display tasks
        function displayTasks(filteredTasks) {
            const taskList = document.getElementById('task-list');
            taskList.innerHTML = '';

            if (filteredTasks.length === 0) {
                taskList.innerHTML = `<div class="task"><span>No tasks found</span></div>`;
                return;
            }

            filteredTasks.forEach((item) => {
                const taskDiv = document.createElement('div');
                taskDiv.className = 'task';
                taskDiv.innerHTML = `<span>${item.task}</span><button onclick="copyCode('${item.code}')">Copy</button>`;
                taskList.appendChild(taskDiv);
            });
        }

        // Search Tasks
        function searchTasks() {
            const searchInput = document.getElementById('search');
            const searchTerm = searchInput.value.toLowerCase();
            const filteredTasks = tasks.filter(task =>
                task.task.toLowerCase().includes(searchTerm)
            );
            displayTasks(filteredTasks);
        }

        // Copy Code
        function copyCode(code) {
            navigator.clipboard.writeText(code).then(() => {
                showToast('Code copied to clipboard');
            }, () => {
                showToast('Failed to copy code');
            });
        }

        // Show Toast Notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.innerText = message;
            document.body.appendChild(toast);
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 3000);
        }

        // Dark Mode Toggle
        document.getElementById('moodToggle').addEventListener('click', function() {
            document.body.classList.toggle('high-mode');
            this.classList.toggle('fa-moon');
            this.classList.toggle('fa-sun');
            this.title = document.body.classList.contains('high-mode') ? "Switch to Low Mode" : "Switch to High Mode";
        });

        // Hamburger Menu Toggle
        const hamburger = document.getElementById('hamburger');
        const menu = document.getElementById('menu');
        const closeMenu = document.getElementById('closeMenu');

        hamburger.addEventListener('click', function() {
            menu.classList.add('active');
        });

        closeMenu.addEventListener('click', function() {
            menu.classList.remove('active');
        });

        // Initial display of tasks
        displayTasks(tasks);
    </script>
</body>
</html>

internal

inline

2. ARTICULATION POINTS

1.MERGE AND QUICK SORT

vertical_navbar

horizontal_navbar

gridbox

flexbox

JDBC programs on 1. Update the database 2. Insert rows of servlet.

Cookies

Destructuring on arrays and objects

String build in methods in js

Built-in methods of Arrays in JavaScript

Session Mgmt

Servlet accepting request parameters

ServletLifeCycleMethods

Prepared Statements

Sort and reverse on arrays

WT git

String built in methods in js

Built -in methods of Arrays

Destructuring on arrays and objects

Navbar

Grid layout(sample)

Grid layout

Array value retrieve with jquery.

FlexBox

Inline style sheets

External style sheets

Internal style sheets

How do I sort a multi-dimensional array by time values in PHP? - Stack Overflow

php - Sort a 2d array by a column value - Stack Overflow

VIDEO 29 (PART 2) javascript

Create a web page using the advanced features of CSS Grid. Apply transitions and animations to the contents of the web page.

Create a web page using the advanced features of CSS Flexbox. Apply transitions and animations to the contents of the web page.

Demonstrate pop-up box alerts, confirm, and prompt using JavaScript.

Demonstrate Responsive Web Design using Media Queries to create a webpage.

Write a JavaScript program to demonstrate the working of callbacks, promises, and async/await.

Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define an XML schema to validate the XML document created above.

Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define a Document Type Definition (DTD) to validate the XML document created above.

Write an XML file that displays book information with the following fields: Title of the book, Author Name, ISBN number, Publisher name, Edition, and Price. Define an XML schema to validate the XML document created above.

Filtering with specific email

SAS FUNCTION SYMPUS Concatination

Performing Queries Using PROC SQL - 34 of 37

Ethereum Solidity Contract Source Code Verification - Bytecode - ABI (Version 2)

Choose the Right NFT Partner

basic array

basic array

List of Keywords in Python Programming

My Airdrop Daily Task

Save snippets that work with our extensions