DEV Community: Technical Vandar

PHP 8.2.12 Is Vulnerable: How I Patched PHP2Shell RCE by Upgrading to PHP 8.2.35

Technical Vandar — Fri, 23 Oct 2026 14:41:30 +0000

I Found My XAMPP PHP Was Vulnerable — Here's How I Patched It
On October 21, 2026, the PHP project released an urgent security update for two critical vulnerabilities that can potentially allow unauthenticated remote code execution (RCE) on vulnerable PHP installations.

The affected PHP branches included versions below:

PHP 8.5.12
PHP 8.4.27
PHP 8.3.36
PHP 8.2.35 The vulnerabilities are tracked as:
CVE-2026-109618
CVE-2026-109619 Both were rated CVSS 9.2 (Critical). PHP's own release announcement recommends that PHP 8.2 users upgrade to 8.2.35, and states that there is no complete mitigation other than updating. PHP News

So I decided to check the PHP installation on my Windows development machine.

And I found this:

PHP 8.2.12

That version was vulnerable.

Here's exactly how I patched my XAMPP installation and verified that Apache was actually running the patched PHP version.
What Is the PHP Vulnerability?
These vulnerabilities are particularly serious because they affect the PHP runtime itself, rather than simply a vulnerable PHP application or framework.

According to CERT-EU, the vulnerabilities can result in unauthenticated remote code execution.

One vulnerability, CVE-2026-109618, involves memory corruption during PHP's out-of-memory handling.

The second, CVE-2026-109619, involves stale global state that can survive after request-related memory has been freed. CERT-EU

The important point for developers and server administrators is:
Updating your application code alone does not fix these vulnerabilities.

The PHP runtime itself needs to be patched.

The issue affects PHP installations serving web requests, including PHP-FPM, Apache mod_php, CGI, FrankenPHP and LiteSpeed. CERT-EU also notes that mod_php is considered the highest-risk setup. CERT-EU

Step 1 — Check Your PHP Version

The first thing I did was check the PHP version installed by XAMPP.

On Windows PowerShell:

C:\xampp\php\php.exe -v

My old installation returned:

PHP 8.2.12 (cli) (built: Oct 24 2023 21:15:15) (ZTS Visual C++ 2019 x64)
Copyright (c) The PHP Group
Zend Engine v4.2.12

This immediately showed that I was running an older PHP 8.2 release.

Since PHP 8.2 versions before 8.2.35 were affected, I needed to upgrade. CERT-EU

Step 2 — Back Up Everything

Before replacing PHP, I didn't want to risk my existing development environment.

I backed up my:

C:\xampp\htdocs

This contained my PHP projects.

I also backed up the existing PHP installation:

C:\xampp\php

and the relevant Apache/XAMPP configuration.

I also made sure my database data was backed up.

This is important because htdocs does not contain your MySQL databases.
My backup strategy

htdocs
├── Project files
└── PHP applications

php
├── Existing PHP runtime
└── Existing configuration

MySQL
└── Database backup

Never treat upgrading PHP as simply "replace a folder and hope."

Step 3 — Choose the Correct PHP Version

Because my existing installation was PHP 8.2, I decided to move to:

PHP 8.2.35

This was the patched release for the PHP 8.2 branch.

The PHP project released:
PHP Branch Patched Version
PHP 8.2 8.2.35
PHP 8.3 8.3.36
PHP 8.4 8.4.27
PHP 8.5 8.5.12

These versions contain the fixes for the two critical vulnerabilities. CERT-EU

For my existing application, I chose the latest patched 8.2.x release to minimize compatibility changes.

Step 4 — Download the Correct Windows Build

For XAMPP running Apache with PHP as a module, you need to pay attention to the Windows build.

My existing PHP environment was:

x64
ZTS
Visual C++ 2019

So I downloaded the corresponding 64-bit Thread Safe (TS) PHP build.

The important part is not to randomly download a PHP ZIP and overwrite your installation.

For Apache module usage, make sure you're using the appropriate Thread Safe build.

The official Windows PHP downloads are available here:

PHP for Windows — Official Downloads

Step 5 — Keep the Old PHP Installation

Before replacing anything, I renamed:

C:\xampp\php

to:

C:\xampp\php_old

Instead of deleting it.

That gave me an easy rollback option if something went wrong.

Then I created:

C:\xampp\php

and extracted the new PHP 8.2.35 build there.

Step 6 — Preserve My PHP Configuration

My existing application already had a working PHP configuration.

So I copied my existing:

php.ini

from:

C:\xampp\php_old\php.ini

to:

C:\xampp\php\php.ini

However, this caused a small problem.

When I initially tested PHP, I got:

PHP Warning: Cannot open
"C:\xampp\php\extras\browscap.ini"

PHP Fatal error:
Unable to start standard module

The problem was that my old php.ini referenced an extras\browscap.ini path that wasn't present in the new installation.

I searched php.ini for:

browscap

and disabled the obsolete configuration:

;browscap = "C:\xampp\php\extras\browscap.ini"

Then I tested PHP again.

Step 7 — Verify the New PHP Installation

I ran:

C:\xampp\php\php.exe -v

And this time I got:

PHP 8.2.35 (cli) (built: Oct 20 2026 04:17:59)
(ZTS Visual C++ 2019 x64)

Copyright (c) The PHP Group
Zend Engine v4.2.35

Success.

My PHP version had gone from:

8.2.12

to:

8.2.35

Step 8 — Start Apache

Next, I opened the XAMPP Control Panel and started Apache.

This step is important because checking:

php -v

only proves that the CLI PHP binary is patched.

It doesn't necessarily prove that Apache is using the same PHP runtime.

So I needed to verify PHP through Apache itself.

Step 9 — Verify PHP Through Apache

I created a temporary file:

C:\xampp\htdocs\php-test.php

with:

<?php
phpinfo();

Then opened:
http://localhost/php-test.php
The page showed:

PHP Version 8.2.35

More importantly, it showed:

Server API: Apache 2.0 Handler

and:

Thread Safety: enabled

The loaded configuration was:

C:\xampp\php\php.ini

This confirmed that Apache itself was running PHP 8.2.35.

That distinction matters.

You don't want this situation:

CLI PHP       → 8.2.35
Apache PHP    → 8.2.12

You want:

CLI PHP       → 8.2.35 ✅
Apache PHP    → 8.2.35 ✅

Step 10 — Verify PHP Extensions

I also checked the PHP modules:

C:\xampp\php\php.exe -m

The important modules were loading correctly, including:

curl
gd
mbstring
mysqli
mysqlnd
openssl
PDO
pdo_mysql
pdo_sqlite
session
xml
xmlreader
xmlwriter

For a typical PHP/MySQL application, things like:
PDO

pdo_mysql
mysqli

are particularly important.

No extension errors appeared.

Step 11 — Test the Actual Application

At this point, the PHP runtime was patched.

But I still needed to make sure my application didn't break.

I opened my existing PHP project and tested:

- Homepage
- Login
- Admin login
- Database connection
- Product CRUD
- Image upload
- File upload
- CKEditor
- Sessions
- Search
- Admin dashboard
- MySQL/PDO operations

This is an important step after changing a PHP runtime.

A successful:

php -v

doesn't mean your application is automatically healthy.

Step 12 — Delete the Temporary phpinfo() File

Once verification was complete, I deleted:

C:\xampp\htdocs\php-test.php

You shouldn't leave a publicly accessible phpinfo() page on a production server because it exposes detailed information about the PHP environment.
**

Final Verification

**
My final environment looked like this:

Before
────────────────────────────
PHP:          8.2.12
Apache:       XAMPP
Status:       Vulnerable

After:

After
────────────────────────────
PHP:          8.2.35
Architecture: x64
Thread Safe:  Yes
Server API:   Apache 2.0 Handler
php.ini:      C:\xampp\php\php.ini
Status:       Patched

I also verified:

CLI PHP       → 8.2.35 ✅
Apache PHP    → 8.2.35 ✅
PHP modules   → Loading ✅
PDO/MySQL     → Loading ✅
Application   → Tested ✅

What You Should NOT Do

Don't try to "patch" these vulnerabilities by simply changing your application code.

For example, adding:

if (...) {
    // security check
}

to your application doesn't patch a vulnerability in the PHP runtime.

These vulnerabilities exist in PHP's internal request handling.

The PHP project explicitly recommends upgrading, and CERT-EU says that only an update fully fixes the vulnerabilities. PHP News

What If You Can't Upgrade Immediately?

If you absolutely cannot patch immediately, CERT-EU lists temporary mitigations for specific attack paths.

However, these are not replacements for upgrading.

For example, CERT-EU discusses controls around memory limits, upload sizes and session upload progress depending on the vulnerability. But the advisory explicitly states that only updating PHP fully fixes the vulnerabilities. CERT-EU

So the preferred order is:

1. Upgrade PHP
        ↓
2. Restart PHP/Apache
        ↓
3. Verify runtime
        ↓
4. Test application
        ↓
5. Review logs if previously exposed

What If My Server Was Already Public?
This is where things get more serious.

If a vulnerable PHP installation was publicly reachable before patching, don't assume that updating PHP means there was never an intrusion.

The vulnerabilities were publicly discussed and proof-of-concept material began circulating after disclosure. CERT-EU recommended immediate patching and, where patching isn't feasible, isolating internet-facing applications. CERT-EU

If the server was exposed while vulnerable, consider reviewing:

Web server access logs
PHP/application logs
Authentication logs
Recently modified files
Unexpected PHP files
New administrator accounts
Suspicious scheduled tasks
Unexpected outbound connections
API keys/secrets that may have been accessible to the application If compromise is suspected, don't simply reinstall PHP and call it done. Investigate the system and rotate potentially exposed credentials.

One More Important Thing: PHP 8.2

Although 8.2.35 is the correct patched release for the 8.2 branch, PHP 8.2 is approaching the end of its normal security-support lifecycle.

So I consider this upgrade a necessary security patch, not a reason to stay on PHP 8.2 forever.

My next step will be testing the application against a newer supported PHP branch before eventually migrating.

Final Takeaway

If you run PHP, check your version today.

Run:

php -v

If you're on an affected branch, upgrade to at least:

PHP 8.2.35
PHP 8.3.36
PHP 8.4.27
PHP 8.5.12

depending on your branch. CERT-EU

For my XAMPP environment, the fix was:

PHP 8.2.12
      ↓
Backup
      ↓
Install PHP 8.2.35
      ↓
Preserve configuration
      ↓
Fix obsolete browscap configuration
      ↓
Restart Apache
      ↓
Verify php -v
      ↓
Verify phpinfo() through Apache
      ↓
Verify PHP extensions
      ↓
Test application
      ↓
Delete phpinfo()
      ↓
PATCHED ✅

The most important lesson is simple:

Don't just check the PHP version in your terminal. Verify the PHP runtime actually serving your web application.

Official References

Two critical PHP vulnerabilities can allow unauthenticated remote code execution on vulnerable PHP installations. Here's how I discovered my XAMPP environment was running PHP 8.2.12, upgraded it to PHP 8.2.35, fixed a configuration issue, verified Apache, checked extensions, and tested the application.

Top 5 Tech Trends of 2024

Technical Vandar — Mon, 09 Sep 2024 14:57:31 +0000

**Top 5 Tech Trends of 2024
**In this fast-paced world of technology, 2024 is set to witness groundbreaking advancements that will shape our future.

1. AI Evolution: Artificial Intelligence continues to evolve, making a profound impact across industries. From smart robots to advanced AI systems, this trend is revolutionizing how we work and interact with technology.

2. Web3 & Blockchain: Web3 and blockchain technologies are transforming the digital landscape by enabling decentralized applications. This shift promises increased transparency and security, ushering in a new era of digital innovation.

3. 5G & IoT: The rollout of 5G networks is set to enhance connectivity, providing faster and more reliable connections for Internet of Things (IoT) devices. With smart homes and connected gadgets, 5G will facilitate seamless interactions and experiences.

Search and Filter items of table using pure JavaScript.

Technical Vandar — Mon, 02 May 2022 14:19:58 +0000

Here is the code for search and filter items from table
Simply HTML code to generate Table.


<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Search and Filter Using JavaScript!</title>
</head>

<body>
    <div class="main w-50 my-4 py-4 m-auto">
        <input type="search" class="form-control" placeholder="Type Here To Search" id="inp" onkeyup="searchFunction()">
        <table id="table" class="my-4 py-4 table table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">S.no</th>
                    <th scope="col">Name</th>
                    <th scope="col">Profession</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Sudip</td>
                    <td>FullStack Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Ram</td>
                    <td>Frontend Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Ramesh</td>
                    <td>Backend Web Deveoper</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Shyam</td>
                    <td>App Developer</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Hari</td>
                    <td>Graphics Designer</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>Arjun</td>
                    <td>Video Editor</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>

</html>

This code generate simple search bar and table than we'll add JavaScript code to make this working
**

JS Code

function searchFunction() {
      // Declare variables
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("inp");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }

JS code gives logic to do task

Final File index.html:


<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Search and Filter Using JavaScript!</title>
</head>

<body>
    <div class="main w-50 my-4 py-4 m-auto">
        <input type="search" class="form-control" placeholder="Type Here To Search" id="inp" onkeyup="searchFunction()">
        <table id="table" class="my-4 py-4 table table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">S.no</th>
                    <th scope="col">Name</th>
                    <th scope="col">Profession</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Sudip</td>
                    <td>FullStack Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Ram</td>
                    <td>Frontend Web Developer</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Ramesh</td>
                    <td>Backend Web Deveoper</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>Shyam</td>
                    <td>App Developer</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>Hari</td>
                    <td>Graphics Designer</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>Arjun</td>
                    <td>Video Editor</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>
<script>
    function searchFunction() {
      // Declare variables
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("inp");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
    </script>

</html>

Copy to clipboard using javascript.

Technical Vandar — Mon, 02 May 2022 12:12:13 +0000

Here is the code for copy to clipboard using pure javascript you can use this code on your project for copy something.

Code

function Copy(){
        var copyText=document.getElementById("textbox");
        copyText.select();
        copyText.setSelectionRange(0, 999);
        document.execCommand("copy");
        alert("Copied");
    }

Using this code you can copy the content of textbox in webpage.

GUI Youtube video downloader using python, tkinter and pytube.

Technical Vandar — Tue, 26 Apr 2022 11:25:07 +0000

here is the source code for GUI youtube video downloader with python

# GUI youtube video downloader using python, pytube, tkinter
from email import message
from tkinter import *
from tkinter import messagebox
from tkinter import ttk
from turtle import width
import pytube


# Creating window
window=Tk()
window.title("Youtube Video Downloader")
window.geometry("400x200")
window.resizable(0, 0)


labelframe=ttk.Frame(window)
label=ttk.Label(labelframe, text="Youtube Video Downloader", font=('Arial', 20))
label.grid(row=0, column=0)
labelframe.grid(row=0, column=0, padx=25, pady=10)

centerframe=ttk.Frame(window)
urllabel=ttk.Label(centerframe, text="Enter Video Url: ")
text_box=ttk.Entry(centerframe, width=40)
download_button=ttk.Button(centerframe, text="Download Video")

urllabel.grid(row=0, column=0)
text_box.grid(row=0, column=1)
download_button.grid(row=1, column=1, pady=15)
centerframe.grid(row=1, column=0, pady=15)

def download_video():
    try:
        url=text_box.get()
        yt=pytube.YouTube(url)
        video=yt.streams.filter(only_video=True).first()
        video.download()
        messagebox.showinfo("Download Success", "Video Downloaded Successfully")
    except:
        messagebox.showerror("Error", "Please Enter Valid Url")

download_button.config(command=download_video)

window.mainloop()

Final Output:

GUI url shortener using python

Technical Vandar — Fri, 28 Jan 2022 09:46:06 +0000

Here is the Code for GUI Url Shortener using python

from tkinter import *
from tkinter import ttk
import pyshorteners # pip install pyshortneres
import webbrowser

# main window
root=Tk()
root.title("URL Shortner")
root.geometry("500x250")
root.resizable(0, 0)
# label
label=ttk.Label(root, text="URL Shortener", font=('Popping', 25))
label.grid(row=0)
# label for input URL
url_input=ttk.Label(root, text="Enter URL: ")
url_input.grid(row=1, column=0, pady=10)
# input fied for URL
url=StringVar()
url_entry=ttk.Entry(root, textvariable=url, width=40)
url_entry.grid(row=1, column=1, pady=10)

# Button for Short URL
shorten_button=ttk.Button(root, text="Shorten", command= lambda: shorten_url(url.get()))
shorten_button.grid(row=2, column=0, pady=10)

# label for shortebed Url
shortened_url_label=ttk.Label(root, text="Shortened Url: ")
shortened_url_label.grid(row=4, column=0, pady=10)
# input field for output Url
output_url=StringVar()
output_url_entry=ttk.Entry(root, textvariable=output_url, width=40)
output_url_entry.grid(row=4, column=1, pady=10)

# button for Copy Url
copy_button=ttk.Button(root, text="Copy", command=lambda: copy_url(output_url.get()))
copy_button.grid(row=5, column=0, pady=10)
# open Button
open_button=ttk.Button(root, text="Open", command=lambda: open_url(url.get()))
open_button.grid(row=5, column=1, pady=10)

# Function to short URL
def shorten_url(url):
    try:
        short_url=pyshorteners.Shortener().tinyurl.short(url)
        output_url.set(short_url)
    except:
        print("Invalid Url")

# function to copy url
def copy_url(url):
    try:
        url_entry.clipboard_clear()
        url_entry.clipboard_append(url)
        print("Url Copied to clipboard")
    except:
        print("invalid URL")

# function to open URL
def open_url(url):
    try:
        webbrowser.open(url)
    except:
        print("invalid Url")
root.mainloop()

Youtube Tutorial

Watch Here

Find Me On:

Facebook
Youtube
Github

C Program For Working Calculator.

Technical Vandar — Thu, 11 Nov 2021 12:35:45 +0000

Here Is The Complete C Programming Code For Working Calculator.

#include<stdio.h>
int main()
{
    int a, b;
    char op;
    float result;
    printf("Enter First Number:");
    scanf("%d", &a);
    printf("Enter Second Number:");
    scanf("%d", &b);
    printf("Enter Operater What Do You Want:");
    scanf(" %c", &op);
    switch (op)
    {
    case '+':
        result=a+b;
        printf("The Sum Is %f", result);
        break;
    case '-':
        result=a-b;
        printf("The Subtract Is %f", result);
        break;
    case '*':
        result=a*b;
        printf("The Multiply Is %f", result);
        break;
    case '/':
        result=a/b;
        printf("The Division Is %f", result);
        break;
        default:
    printf("Please Enter Envalid Operater");
        break;
    }
}

Responsive Contact Form Using Pure HTML and CSS.

Technical Vandar — Wed, 13 Oct 2021 14:32:10 +0000

Here Is The Full Source Code Of This Form:

SOURCE CODE:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact US Form</title>
</head>
<body>
    <div class="container">
        <form action="" autocomplete="off">
            <h1>Contact US</h1>
            <div class="name">
                <label for="name">Name:   <span>*</span></label><br>
                <input type="text" name="name" id="name" placeholder="Name" required>
            </div>
            <div class="email">
                <label for="email">E-mail: <span>*</span></label><br>
                <input type="email" name="email" id="email" placeholder="E-mail" required>
            </div>
            <div class="website">
                <label for="website">Phone: <span>*</span></label><br>
                <input type="number" name="number" id="number" placeholder="Contact No." required>
            </div>
            <div class="message">
                <label for="message">Message</label><br>
                <textarea name="message" id="message" cols="35" rows="5" placeholder="Describe Your Message Here...."></textarea>
            </div>
            <div class="button">
                <button>Send Message</button>
            </div>
            <div class="required">
                <h5>NOTE: All * are Required</h5>
            </div>
        </form>
    </div>
</body>
</html>

CSS CODE:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: sans-serif;
    user-select: none;
}
body{
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: #333645;
}
.container{
    height: 75vh;
    width: 25vw;
    background-color: rgb(82, 209, 226);
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: 0 5px 20px #7f868f;
    border-radius: 8px;
}
form{
    height: 75vh;
    width: 30vw;
    display: grid;
    place-content: center;
    place-items: center;
}
form h1{
    margin-top: -15px;
    text-align: center;
}
input{
    outline: none;
    border: none;
    margin: 10px 0;
    height: 30px;
    font-size: 18px;
    padding: 15px;
    width: 22.5vw;
    box-shadow: 0 2px 5px #b6bebb;
}
form{

}
label{
    font-size: 20px;
}

textarea{
    padding: 15px;
    border: none;
    outline: none;
    font-size: 18px;
    width: 22.5vw;
    box-shadow: 0 2px 5px #abbdb5;
}
.button{
    text-align: center;

}
button{
    font-size: 22px;
    font-weight: 650;
    cursor: pointer;
    border: none;
    outline: none;
    margin-top: 20px;
    box-shadow: 0 2px 4px #718494;
    padding: 10px;
    color: white;
    background: #000;
}
span{
    color: red;
}
h5{
    margin-top: 20px;
    color: #d900ff;
}

Find Me On:

Facebook
Youtube
Github

Animated Gradient Loader Using Pure HTML & CSS.|

Technical Vandar — Fri, 08 Oct 2021 12:39:51 +0000

Hi Guys This is Awesome animated Gradient Loader Here you can get source code.

Source Code:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Gradient Loader HTML and CSS</title>
</head>
<body>
    <div class="loader">
        <span></span>
    </div>

</body>
</html>

CSS Code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #010113;
}
.loader{
    position: relative;
    overflow: hidden;
    box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),
                10px 10px 10px rgba(0, 0, 0, 0.4),
                inset -5px -5px -5px rgba(255, 255, 255, 0.2),
                inset 10px 10px 10px rgba(0, 0, 0, 0.4);
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.loader:before{
    position: absolute;
    content: '';
    z-index: 10;
    opacity: 10;
    top: 25px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    background-color: #010113;
    border-radius: 50%;
    box-shadow: -5px -5px -5px rgba(255, 255, 255, 0.1),
    10px 10px 10px rgba(0, 0, 0, 0.4),
    inset -5px -5px -5px rgba(255, 255, 255, 0.2),
    inset 10px 10px 10px rgba(0, 0, 0, 0.4);
}
.loader span{
    position: absolute;
    height: 100%;
    width: 100%;
    filter: blur(20px);
    border-radius: 50%;
    background: linear-gradient(#0e11d4, #0b8f84, #d81587);
    animation: loader 0.6s linear infinite;
}
@keyframes loader {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Youtube Tutorial

Watch Here

Find Me On:

Facebook
Youtube
Github

Glass Morphism Simple Interest Calculator Using Pure HTML, CSS & JS.

Technical Vandar — Sat, 02 Oct 2021 05:50:57 +0000

Simple Interest Calculator Using Pure HTML, CSS & JS.

SOURCE CODE:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Interest Calculator</title>
</head>
<body>
    <div class="container">
        <h1>Simple Interest Calculator</h1>
        <div class="inpSection">
            <div class="amt">
                <label for="amount">Enter Total Amount:   </label>
                <input type="number" name="amount" id="amount" placeholder="Enter Total Amount">
            </div>
            <div class="time">
                <label for="time">Enter Time:   </label>
                <input type="number" name="time" id="time" placeholder="Enter Time">
            </div>
            <div class="rate">
                <label for="rate">Rate: </label>
                <input type="number" name="rate" id="rate" placeholder="Enter Rate">
            </div>
            <div class="button">
                <button onclick="Calculate()">Calculate</button>
            </div>
            <div class="result">
                <h3 id="si"></h3>
            </div>
        </div>
    </div>

</body>
</html>

CSS CODE:

*{
    user-select: none;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    display: grid;
    height: 100vh;
    width: 100%;
    place-items: center;
    background: linear-gradient(90deg, rgba(179,52,178,1) 0%, rgba(182,120,49,1) 28%, rgba(106,68,159,1) 56%, rgba(23,137,190,1) 78%, rgba(0,212,255,1) 100%);
}
.container
{
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(214, 202, 202, 0.05);
    height: 62vh;
    width: 28vw;
    background: radial-gradient(at center, rgba(214, 202, 202, 0.05), rgba(224, 217, 217, 0.5));
}

.container h1
{
    margin: 10px;
}
.inpSection{

    margin: 20px 50px;
    text-align: left;
}
input{
    color: rgba(51, 45, 45, 0.5);
    font-weight: 650;
    outline: none;
    border: none;
    box-shadow: 0 2px 4px rgba(214, 202, 202, 0.05);
    font-size: 18px;
    padding: 15px;
    height: 35px;
    margin: 10px;
    display: flex;
    width: 20vw;
}
.button button{
    padding: 10px;
    margin: 10px 110px;
    font-size: 18px;
    font-weight: 650;
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: 0 2px 4px rgba(224, 217, 217, 0.5);
}
.result{
    position: relative;
    margin: 20px 0;
}
label{
    font-weight: 600;
}

h3{
    font-size: 20px;
}

    function Calculate()
    {
        let p=document.getElementById('amount').value;
        let t=document.getElementById('time').value;
        let r=document.getElementById('rate').value;

        let  SI=(p*t*r)/100;

        document.getElementById('si').innerHTML="The Total Simple Intrest Is: "+SI;
    }

Youtube Tutorial

Watch Here

Find Me On:

Facebook
Youtube
Github

Glass morphism Calculator Using Pure HTML, CSS & JS.

Technical Vandar — Tue, 28 Sep 2021 07:40:30 +0000

Here Is The Working Calculator with glassmorphism effect.

SOURCE CODE:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Calculator</title>
</head>
<body>
    <div class="calc-body">
        <input type="text" name="" id="inp" readonly>
        <table>
            <tr>
                <td>(</td>
                <td>)</td>
                <td>C</td>
                <td>/</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>+</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>*</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>-</td>
            </tr>
            <tr>
                <td class="zero">0</td>
                <td>.</td>
                <td>%</td>
                <td class="equal">=</td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS CODE:

*{
    font-family: sans-serif;
    user-select: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 100vh;
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
.calc-body{
    height: 65.5vh;
    width: 21vw;
    background: radial-gradient(at 100% 50%, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.5));
    border-radius: 15px;
}
input{
    font-size: 45px;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 105px;
    width: 21vw;
    border: none;
    outline: none;
    background: transparent;
}
table{
    justify-content: center;
    align-items: center;
    display: flex;
}
td{
    cursor: pointer;
    font-size: 30px;
    text-align: center;
    height: 70px;
    width: 70px;
    border-right: 1px solid rgba(192, 192, 192, 0.2);
    border-bottom: 1px solid rgba(192, 192, 192, 0.2);
}
td:hover{
    background-color: rgb(255, 0, 179);
}
.zero{
    border-bottom-left-radius: 15px;
}
.equal{
    border-bottom-right-radius: 15px;
}

JavaScript Code:

 let screen=document.getElementById('inp');
    let buttons=document.querySelectorAll('td');
    let screenValue='';
    for(item of buttons){
        item.addEventListener('click', (e)=>{
            buttonText=e.target.innerText;
            if(buttonText=="C"){
                screenValue="";
                screen.value=screenValue;
            }
            else if(buttonText=="="){
                screen.value=eval(screenValue);
            }
            else{
                screenValue+=buttonText;
                screen.value=screenValue;
            }
        });
    }

Youtube Tutorial

Watch Here

Find Me On:

Facebook
Youtube
Github

Responsive Online Book Store Website Using HTML and Bootsrap5.

Technical Vandar — Mon, 27 Sep 2021 08:59:28 +0000

i have made this website using bootstrap, you can use code and you can download book and also add book in that.

Source Code All In One:

FULL SOURCE CODE:


<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <title>Online Book Store</title>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
        </ul>
      </div>
    </div>
  </nav>

  <h1 class="text-center my-4">Top Courses Pdf Books Free Download</h1>
  <br><br>
  <div class="row row-col-1 row-cols-md-3 m-auto my-4">
    <div class="m-auto col-md-3" id="cards">
      <div class="card h-100">
        <img src="https://miro.medium.com/max/1800/1*5eV1xmJs2-sJ4DdejfdnQA.png" class="card-img-top" alt="..." />
        <div class="card-body">
          <h5 class="card-title">Javascript</h5>
          <p class="card-text">
            This Is A Book For Javascript. Beginner Friendly all Things need foe beginners there in pdf book mentioned
            please Download and gain knowledge about javascript
          </p>
          <a href="https://drive.google.com/file/d/1YOuhfAak-Z3Ra_NBX9_AMhFShuQsMMpI/view?usp=sharing" download
            target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
            title="Download Book">Download Book</a>
        </div>
      </div>
    </div>
    <div class="m-auto col-md-3">
      <div class="card h-100">
        <img src="https://i.pinimg.com/originals/1f/ec/3e/1fec3ee0665075852c4665a01259682d.png" class="card-img-top"
          alt="..." />
        <div class="card-body">
          <h5 class="card-title">C Programming</h5>
          <p class="card-text">Advance C Programming Course From Pdf File Please Download This File From Here and You
            Have From Zero To Hero In C Programming</p>
          <a href="https://drive.google.com/file/d/1_NA-zRm6BXcI8Q45UJmQ0o1NGBQkFQF8/view?usp=sharing" download
            target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
            title="Download Book">Download Book</a>
        </div>
      </div>
    </div>
    <div class="col-md-3 m-auto">
      <div class="card h-100">
        <img src="https://www.vtc.com/files/images/courses/33797.jpeg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h5 class="card-title">C++ Course</h5>
          <p class="card-text">
            Advance C++ Course in Simple English Labguage Please Download A Pdf From Here and Gain Your Knowlwdge in C++
          </p>
          <a href="https://drive.google.com/file/d/11W13yROf4_qr7N0P9HbBeB-SKTdeQs6W/view?usp=sharing" download
            target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
            title="Download Book">Download Book</a>

        </div>
      </div>
    </div>

  </div>
  </div>
  <div class="row row-col-1 row-cols-md-3 m-auto my-4 mb-8">
    <div class="m-auto col-md-3">
      <div class="card h-100">
        <img src="https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h5 class="card-title">Python Programming</h5>
          <p class="card-text">
            Python Programming Course From Basic To Advance Level Please Download a Pdf File and Make You To A
            Professional Python Developer Or Freelancer.
          </p>
          <a href="https://drive.google.com/file/d/1BQsKJ7yCo93vCW9SoJibFOUGPYivdgQ_/view?usp=sharing" download
            target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
            title="Download Book">Download Book</a>

        </div>
      </div>
    </div>
    <div class="m-auto col-md-3">
      <div class="card h-100">
        <img src="https://d1jnx9ba8s6j9r.cloudfront.net/imgver.1551437392/img/co_img_193_1504782213.png"
          class="card-img-top" alt="..." />
        <div class="card-body">
          <h5 class="card-title">Java Programming</h5>
          <p class="card-text">Java Programming Language From Basic To Advance Level. Learn Java Programming With Object
            Oriented Programming(OOP) From This Pdf Book.</p>
          <a href="https://drive.google.com/file/d/1I_D-UmWHdXkNKNODdlvfNxtzHyMkA8M8/view?usp=sharing" download
            target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
            title="Download Book">Download Book</a>

        </div>
      </div>
    </div>
    <div class="col-md-3 m-auto">
      <div class="card h-100">
        <img src="https://www.surat-training-course.com/ampimage/fluttercourseinsurat.webp" class="card-img-top"
          alt="..." />
        <div class="card-body">
          <h5 class="card-title">Flutter(DART)</h5>
          <p class="card-text">
            Learn Flutter From Basic To Advance Level. you can build android, desktop and ios application using flutter.
          </p>
          <a href="https://drive.google.com/file/d/1wY9Ky8cHO1D5WCnCr0ppFSyL2RiHYP0K/view?usp=sharing" download
            target="_blank" class="btn btn-info" data-toggle="tooltip" data-bs-placement="right"
            title="Download Book">Download Book</a>

        </div>
      </div>
    </div>

  </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
    crossorigin="anonymous"></script>


</body>
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

</html>

Youtube Tutorial

Watch Here

Find Me On:

Facebook
Youtube
Github