tararoutray

/**
 * Create an arrow function that will be called when an image is selected.
 */
const previewImage = (event) => {
    /**
     * Get the selected files.
     */
    const imageFiles = event.target.files;
    /**
     * Count the number of files selected.

tararoutray

h1 {
    margin: 0 auto;
    margin-top: 5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.image-preview-container {
    width: 50%;
    margin: 0 auto;

tararoutray

<h1>Preview an Image Before Uploading Using JavaScript</h1>
<div class="image-preview-container">
    <div class="preview">
        <img id="preview-selected-image" />
    </div>
    <label for="file-upload">Upload Image</label>
    <input type="file" id="file-upload" accept="image/*" onchange="previewImage(event);" />
</div>

tararoutray

const openSidebar = () => {
    document.getElementById("mySidebar").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
};

const closeSidebar = () => {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
};

tararoutray

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #2b9348;
    overflow-x: hidden;
    padding-top: 60px;

tararoutray

<div id="mySidebar" class="sidebar">
    <a href="javascript:void(0)" class="closebtn" onclick="closeSidebar()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

<div id="main">
    <button class="openbtn" onclick="openSidebar()">&#9776; Open Sidebar</button>

tararoutray

<?php

/*
 * Connect to the MySQL server.
 */
try {
    /*
     * Provide the database credentials.
     */
    $pdo = new PDO("mysql:host=192.x.x.x;dbname=mydatabase", "tararoutray", "mystrongpassword");

tararoutray

<div>
    <form class="flex items-center space-x-6">
        <div class="shrink-0">
            <img class="h-16 w-16 object-cover rounded-full bg-blue-100" src="https://tararoutray.com/assets/images/tararoutray.png" alt="Current profile photo" />
        </div>
        <label class="block">
            <span class="sr-only">Choose profile photo</span>
            <!-- Utility used: text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200 -->
            <input type="file" class="block w-full text-sm text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200" />
        </label>

tararoutray

<div>
    <div>
        <label>
            <!-- Utilty used: accent-rose-500 -->
            <input type="checkbox" class="accent-rose-500" checked> Customized Checkbox
        </label>
    </div>
    <div>
        <label>
            <!-- Utilty used: accent-rose-500 -->

tararoutray

<div>
    <!-- Utilty used: aspect-video -->
    <!-- You can also customize the aspect ratio by using arbitrary values like:
    aspect-[4/3] -->
    <iframe class="w-full aspect-video" src="https://www.youtube.com/embed/TwXilp2mUtE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>