Friday, 20 February 2026

CSS and type of CSS

1. Inline CSS (The "Direct Note")This is written directly inside the HTML tag. 
It’s like putting a sticker right on an object.Best for: Changing just one specific thing very quickly.Example:
HTML

I am Blue!

2. Internal CSS (The "Instruction List")This is written at the top of your HTML file inside a 





3. External CSS (The "Separate Book")This is the most professional way. 
You create a completely separate file (ending in .css) and link it to your HTML.
Best for: 
Big websites with many pages. 
You can change the color of 100 pages at once just by changing one line in the CSS file!
Example:In your HTML: In your style.css file: body { background-color: lightgreen; }


EXAMPLE OF CSS AND HTML

Project Name: The Season Watcher 3000

The Real-Life Question: "How can we create a dashboard that shows the current season, but makes it look like a high-tech app where the buttons glow and the boxes pop out when you touch them?"




The HTML File (index.html)

This is the Structure. We are creating a "Container" to hold our four "Season Cards."

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Season Watcher 3000</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1 class="main-title">Smart Home: Season Monitor</h1>

    <div class="dashboard">
        <div class="card" id="spring">
            <div class="icon">🌸</div>
            <h2>Spring</h2>
            <p>Status: Blooming</p>
            <button class="btn">View Garden</button>
        </div>

        <div class="card" id="summer">
            <div class="icon">☀️</div>
            <h2>Summer</h2>
            <p>Status: Sunny</p>
            <button class="btn">Check AC</button>
        </div>

        <div class="card" id="autumn">
            <div class="icon">🍂</div>
            <h2>Autumn</h2>
            <p>Status: Windy</p>
            <button class="btn">Clear Leaves</button>
        </div>

        <div class="card" id="winter">
            <div class="icon">❄️</div>
            <h2>Winter</h2>
            <p>Status: Freezing</p>
            <button class="btn">Heat On</button>
        </div>
    </div>

</body>
</html>

2. The External CSS File (style.css)

This is the Style. We use "Flexbox" to align the boxes and "Transitions" to make them move smoothly.

CSS
/* General Page Setup */
body {
    background-color: #1a1a2e; /* Dark "Space" Blue */
    color: white;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
}

.main-title {
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-bottom: 2px solid #0f3460;
}

/* The Grid/Dashboard Layout */
.dashboard {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Designing the Individual Cards */
.card {
    background-color: #16213e;
    border: 2px solid #0f3460;
    border-radius: 20px;
    padding: 30px;
    width: 200px;
    text-align: center;
    /* This makes the animation smooth! */
    transition: all 0.4s ease;
}

/* Real-Life Interaction: The Hover Effect */
.card:hover {
    transform: scale(1.1) rotate(2deg); /* Grows and tilts slightly */
    border-color: #e94560;
    box-shadow: 0px 10px 30px rgba(233, 69, 96, 0.5);
}

.icon {
    font-size: 50px;
    margin-bottom: 10px;
}

/* Making the Buttons Glow */
.btn {
    background-color: #e94560;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 15px;
}

.btn:hover {
    background-color: white;
    color: #e94560;
}

What makes this a "Good" Demo?

  1. The "Pop" (Scale): In the CSS, transform: scale(1.1) makes the card grow when you touch it with the mouse. This feels like a modern app.

  2. The "Glow" (Box-Shadow): Using box-shadow on hover makes the card look like it’s lighting up.

  3. Flexbox: The display: flex command in the .dashboard section acts like a magnet, pulling all the cards into a neat line automatically.

at No comments:
Labels:

Thursday, 19 February 2026

HTML CODE FOR DISPLAYING 4 DIFFERENT HTML PAGES ON SINGLE HTML PAGE USING FRAMES

To display four separate HTML files on a single page using a "frames" approach, we use the tag. This is the classic way to split a browser window into multiple independent sections. Since replaces the tag, this "Master" file will pull the content from four other files you create. 1. The Master File (index.html) This file defines the layout. It creates two rows and two columns. The Four Seasons - Master Frame <body> Your browser does not support frames. Please update your browser. </body> HTML 

  The Four Seasons - Master Frame <body> Your browser does not support frames. Please update your browser. </body> 2. The Four Content Files You must create these four files and save them in the same folder as your index.html. 
<frameset cols="50%,50%" rows="50%,50%">
    <frame name="springFrame" noresize="" scrolling="yes" src="spring.html">
    <frame name="summerFrame" noresize="" scrolling="yes" src="summer.html">
    <frame name="autumnFrame" noresize="" scrolling="yes" src="autumn.html">
    <frame name="winterFrame" noresize="" scrolling="yes" src="winter.html">
    
    <noframes>
        <body>
            Your browser does not support frames. Please update your browser.
        </body>
    </noframes>
</frame></frame></frame></frame></frameset>

 File 1: spring.html HTML 

Spring Season

Spring is a time of rebirth. Flowers bloom and the weather turns mild.

File 2: summer.html HTML 

Summer Season

Summer is the hottest season. It is perfect for vacations and swimming.

File 3: autumn.html HTML 

Autumn Season

In Autumn, leaves change color to gold and red before falling.

File 4: winter.html HTML 

Winter Season

Winter brings snow and ice. It is the coldest time of the year.

How to run this: Create a folder on your computer. 
 Save the first block of code as index.html.
 Save the four season codes as spring.html, summer.html, autumn.html, and winter.html. 
 Open index.html with your browser. 
 Key Attributes Used: rows="50%,50%":
 Splits the screen horizontally into two equal halves. cols="50%,50%": 
Splits the screen vertically into two equal halves. 
 noresize: Prevents the user from dragging the borders to change frame sizes.
 scrolling="yes": Adds a scrollbar if your content or image is too large for the frame.
at No comments:
Labels:

Monday, 9 February 2026

Minor Project Ideas for B.tech Computer Science

B.Tech Minor Project: Data Science using Regression

This project uses Linear Regression for continuous prediction and Logistic Regression for binary classification problems such as pass/fail and disease prediction.

   MINOR PROJECT IDEAS 


1. Heart Disease Prediction

Problem:
Classify if a person has heart disease.

Inputs:

  • Age

  • BP

  • Cholesterol

  • Heart rate

Output:

  • Disease / No disease

    Heart Disease Prediction

    Problem:
    Classify if a person has heart disease.

    Inputs:

    • Age

    • BP

    • Cholesterol

    • Heart rate

    Output:

    • Disease / No disease




2. 

2. College Placement Probability Prediction System

(Highly impressive for viva)

Problem

Predict whether a student will get placed + expected salary range.

Models

  • Logistic Regression → placed / not placed

  • Linear Regression → expected package

Features

  • CGPA trend

  • Coding test scores

  • Internship experience

  • Soft-skill ratings

Extra Credit

  • Feature importance analysis

  • Probability confidence score


3.

3. Financial Credit Risk & EMI Recommendation System

(Industry-oriented)

Problem

Predict:

  • Loan approval probability

  • Safe EMI amount

Models

  • Logistic Regression → loan approval

  • Linear Regression → EMI amount

Features

  • Income trend

  • Expenses

  • Credit behavior

  • Loan tenure

BIG Add-On

  • Risk tiers (Low / Medium / High)


4. 

4. Smart Energy Consumption Forecasting System

(Engineering + Sustainability)

Problem

Forecast electricity consumption & detect over-usage risk.

Models

  • Linear Regression → energy units

  • Logistic Regression → overload risk

Features

  • Appliance usage

  • Seasonal effects

  • Household size

Outputs

  • Monthly forecast

  • Warning alerts


5. Smart Traffic Congestion & Accident Risk System

(Engineering + AI)

Problem

Predict:

  • Traffic congestion level

  • Accident probability

Models

  • Linear Regression → congestion index

  • Logistic Regression → accident risk

Features

  • Vehicle count

  • Time of day

  • Weather


6. Social Media Misinformation Risk Analyzer

(Trending & Research-oriented)

Problem

Predict whether content is misleading.

Models

  • Logistic Regression → fake / real

  • Linear Regression → virality score

Features

  • Engagement metrics

  • Posting time

  • Account credibility

BIG VALUE

  • Explainable coefficients

  • Ethical AI discussion


7. CROP DISEASE PREDICTION SYSTEM

(Data Science Project using Logistic Regression)

🔹 . Problem Statement

Early detection of crop diseases is critical to reduce yield loss and improve agricultural productivity.
This project aims to predict whether a crop is diseased or healthy based on environmental and crop-related parameters using Logistic Regression.

🔹 . Why this project is “BIG & GOOD”

  • Real-world agricultural problem

  • Social + economic impact

  • Explainable ML (important for farmers)

  • Can be extended to yield loss prediction

  • Faculty-friendly & industry-relevant

🔹 . Project Objectives

  • Predict disease presence (Yes/No)

  • Analyze factors causing disease

  • Provide early warning

  • (Optional) Predict severity or yield loss

🔹 . Dataset (Non-image, Data Science based)

Input Features (examples)

  • Temperature (°C)

  • Humidity (%)

  • Rainfall (mm)

  • Soil moisture

  • Soil pH

  • Crop type

  • Season

  • Fertilizer usage

  • Pesticide usage

Output

  • Disease (0 = Healthy, 1 = Diseased)

📌 Datasets:

  • Kaggle: Crop Disease / Agriculture datasets

  • Government agriculture data

  • Synthetic dataset (acceptable for minor project)

🔹 . Machine Learning Models Used

✅ Logistic Regression (Main Model)

Used because:

  • Output is binary

  • Easy to interpret coefficients

  • Works well with tabular data

Equation:

P(Disease)=11+e−(β0+β1x1+...+βnxn)P(\text{Disease}) = \frac{1}{1 + e^{-(\beta_0 + \beta_1x_1 + ... + \beta_nx_n)}}

(Optional) Linear Regression

  • Predict severity level

  • Predict expected yield loss

🔹 . System Architecture

  1. Data Collection

  2. Data Preprocessing

  3. Feature Selection

  4. Logistic Regression Model

  5. Prediction

  6. Result Visualization

  7. Recommendation System

🔹 . Implementation Flow (Python)

  • Load dataset

  • Handle missing values

  • Train-test split

  • Train Logistic Regression model

  • Evaluate using:

    • Accuracy

    • Confusion Matrix

    • Precision, Recall

  • Plot:

    • Probability curve

    • Feature importance

🔹 . Results to Show (VERY IMPORTANT)

  • Disease prediction accuracy

  • Confusion matrix

  • Probability vs threshold graph

  • Feature impact analysis

  • Sample predictions

🔹 . Future Scope (Makes project BIG)

  • Image-based disease detection (CNN)

  • IoT sensor integration

  • Mobile app for farmers

  • Real-time weather API

  • Crop recommendation system


10.Intelligent Crop Yield Forecasting System

(Different from disease prediction)

Problem:
Predict crop yield before harvest.

Models:

  • Linear Regression → yield (tons/hectare)

  • Logistic Regression → low / normal yield risk

Features:
Rainfall, soil nutrients, fertilizer, season

11.  Air Pollution Level Prediction & Health Risk Alert

Problem:
Predict AQI and classify health risk.

Models:

  • Linear Regression → AQI value

  • Logistic Regression → hazardous / safe

Features:
PM2.5, PM10, NO₂, SO₂, temperature

 


at No comments:
Labels:

Monday, 2 February 2026

DATA SCIENCE LAB MANUAL

 

 Example 1: Linear Regression

PREDITING PRICE BASES ON AREA

import numpy as np
import matplotlib.pyplot as plt
from sklearn.linear_model import LinearRegression

# 1. Example Data
# X = Input (Area of house)
# Y = Output (Price)
X = np.array([100, 200, 300, 400, 500]).reshape(-1, 1)
Y = np.array([10, 20, 30, 40, 50])

# 2. Create and train the model
model = LinearRegression()   # intercept is included by default
model.fit(X, Y)

# 3. Get slope and intercept
m = model.coef_[0]        # slope
b = model.intercept_      # intercept

# 4. Prediction
x_new = 350
y_pred = model.predict([[x_new]])

# 5. Plot the graph
X_line = np.linspace(100, 500, 100).reshape(-1, 1)
Y_line = model.predict(X_line)

plt.scatter(X, Y)          # original data points
plt.plot(X_line, Y_line)   # regression line
plt.scatter(x_new, y_pred) # predicted point
plt.xlabel("Area")
plt.ylabel("Price")
plt.title("Simple Linear Regression")
plt.show()

# 6. Print results
print("Slope (m):", m)
print("Intercept (b):", b)
print("Equation: Y =", m, "* X +", b)
print("Predicted Price for", x_new, ":", y_pred[0])








 Example 2: Linear Regression (Study Hours vs Marks)

👉 Problem Statement

Predict student marks based on study hours.



import numpy as np

import matplotlib.pyplot as plt

from sklearn.linear_model import LinearRegression


# Data

X = np.array([1, 2, 3, 4, 5]).reshape(-1, 1)  # Study hours

Y = np.array([35, 40, 50, 60, 70])            # Marks


# Model

model = LinearRegression()

model.fit(X, Y)


# Slope and intercept

m = model.coef_[0]

b = model.intercept_


# Prediction

hours = 6

predicted_marks = model.predict([[hours]])


# Plot

X_line = np.linspace(1, 6, 100).reshape(-1, 1)

Y_line = model.predict(X_line)


plt.scatter(X, Y)

plt.plot(X_line, Y_line)

plt.scatter(hours, predicted_marks)

plt.xlabel("Study Hours")

plt.ylabel("Marks")

plt.title("Linear Regression: Study Hours vs Marks")

plt.show()


# Output

print("Slope (m):", m)

print("Intercept (b):", b)

print("Equation: Y =", m, "* X +", b)

print("Predicted Marks for", hours, "hours:", predicted_marks[0])






2. Logistic Regression code  

Program 1: Student Pass / Fail Prediction



import pandas as pd
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LogisticRegression
from sklearn.metrics import accuracy_score, confusion_matrix

# Dataset
data = {
    'Hours_Studied': [1,2,3,4,5,6,7,8],
    'Passed': [0,0,0,0,1,1,1,1]
}

df = pd.DataFrame(data)

# Features and target
X = df[['Hours_Studied']]
y = df['Passed']

# Train-test split
X_train, X_test, y_train, y_test = train_test_split(
    X, y, test_size=0.25, random_state=0
)

# Model
model = LogisticRegression()
model.fit(X_train, y_train)

# Prediction
y_pred = model.predict(X_test)

# Results
print("Accuracy:", accuracy_score(y_test, y_pred))
print("Confusion Matrix:\n", confusion_matrix(y_test, y_pred))
print("Intercept (β0):", model.intercept_)
print("Coefficient (β1):", model.coef_)  

OUTPUT 
Accuracy: 1.0 Confusion Matrix: [[1 0] [0 1]] Intercept (β0): [-4.4350521] Coefficient (β1): [[1.01750279]]

Program 2: Salary > 50K Prediction (Binary Classification)

# Logistic Regression – Example 2 (Salary Prediction)

import pandas as pd
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LogisticRegression
from sklearn.metrics import accuracy_score

# Dataset
data = {
    'Age': [22,25,30,35,40,45,50,55],
    'Experience': [0,1,3,5,7,10,15,20],
    'High_Salary': [0,0,0,1,1,1,1,1]
}

df = pd.DataFrame(data)

# Features and target
X = df[['Age', 'Experience']]
y = df['High_Salary']

# Train-test split
X_train, X_test, y_train, y_test = train_test_split(
    X, y, test_size=0.3, random_state=1
)

# Model
model = LogisticRegression()
model.fit(X_train, y_train)

# Prediction
y_pred = model.predict(X_test)

# Results
print("Accuracy:", accuracy_score(y_test, y_pred))
print("Intercept (β0):", model.intercept_)
print("Coefficients (β1, β2):", model.coef_)

Accuracy: 0.6666666666666666
Intercept (β0): [-13.33988536]
Coefficients (β1, β2): [[0.45410297 0.17502853]]
at No comments:
Labels:
Subscribe to: Comments (Atom)

CSS and type of CSS

1. Inline CSS (The "Direct Note")This is written directly inside the HTML tag.  It’s like putting a sticker right on an object.B...