DEV Community: Lakshyaraj Dash

10 useful html tags

Lakshyaraj Dash — Wed, 10 Jun 2026 01:56:06 +0000

10 Underrated HTML Tags That Will Replace Your Bloated JS Libraries

As web developers, we love custom JavaScript packages. We install third-party libraries for autocomplete dropdowns, modal managers, disclosure accordions, and custom progress indicators.

But every line of JavaScript we ship is code the browser has to download, parse, and execute. It increases page weight and introduces potential accessibility bugs.

Did you know that native HTML has built-in features that can replace a surprising amount of custom JS and CSS? In this post, we'll explore 10 underrated, highly semantic HTML elements that will help you write faster, cleaner, and more accessible code out of the box.

1. `<datalist>` (Native Autocomplete)

The Problem

Building a custom autocomplete dropdown usually requires a heavy select component library or complex JS event listeners to filter arrays and toggle menu visibility on keypress.

Why it matters

The <datalist> element acts as a native autocomplete menu linked to a standard <input> field.

Native Autocomplete: It filters values automatically based on user typing.
Custom entries allowed: Unlike a <select> drop-down, users can select an option or type their own custom text.
Form Integration: Works seamlessly inside any standard <form>.

Code Example

<label for="city-choice">Choose a city:</label>
<input id="city-choice" list="cities" placeholder="Start typing a city..." />

<datalist id="cities">
  <option value="Bhubaneswar" />
  <option value="Brahmapur" />
  <option value="Cuttack" />
  <option value="Puri" />
  <option value="Sambalpur" />
</datalist>

2. `<dialog>` (Native Modals & Focus Trapping)

The Problem

Creating accessible modal overlays from scratch is notoriously difficult. You have to write custom JavaScript to handle background scroll blocking, trap the keyboard focus inside the modal (so users don't tab out into the background), and listen for the Escape key to close it.

Why it matters

The <dialog> tag represents a native overlay box that solves these challenges natively:

Automatic Focus Management: Tabbing is naturally restricted to the modal elements when opened with showModal().
Keyboard support: Pressing Escape closes the modal natively without a single line of JS.
Semantic backdrop: Style the background dimming using the ::backdrop CSS pseudo-element.
Clean API: Controlled using native methods: .show(), .showModal(), and .close().

Code Example

<button commandfor="contact-modal" command="show-modal">Open Modal</button>

<dialog id="contact-modal">
  <h2>Contact Form</h2>
  <form method="dialog">
    <label for="name">Name</label><br>
    <input type="text" id="name" required><br><br>

    <label for="email">Email</label><br>
    <input type="email" id="email" required><br><br>

    <button type="submit">Submit</button>
    <button type="button" commandfor="contact-modal" command="close">Close</button>
  </form>
</dialog>

3. `<details>` + `<summary>` (No-JS Accordions)

The Problem

For collapsible cards, FAQs, or disclosures, developers often write JavaScript toggle functions, toggling classes like .is-open or .hidden.

Why it matters

The <details> and <summary> tags create a disclosure widget out-of-the-box:

Zero JS Accordions: Clicking the <summary> automatically expands the nested contents.
CSS hooks: The browser appends the open attribute natively. You can style the open state using the CSS details[open] selector.
SEO & Search Friendly: Text inside closed details tags is still indexed by search engine crawlers and is natively searchable using Ctrl+F.

Code Example

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language used to structure pages on the web.</p>
</details>

4. `<progress>` (Semantic Status Indicators)

The Problem

Creating progress bars usually involves nested <div> tags, a custom width style in CSS, and ARIA roles added manually for screen reader compatibility.

Why it matters

The <progress> element semantically represents the completion progress of a task:

Accessibility built-in: Screen readers inherently announce the value and max bounds without manually setting role="progressbar".
Indeterminate states: If you omit the value attribute, it natively renders a bouncing animation indicating a pending state (perfect for page loading spinners).

Code Example

<h2>File Upload</h2>
<progress value="75" max="100"></progress>

5. `<meter>` (Scalar Range Gauges)

The Problem

Often, developers use <progress> or custom bars to display scalar values (e.g., password strength, disk usage, or ratings). This is semantically incorrect because a progress bar is meant to track completion, not a fixed measurement.

Why it matters

The <meter> tag is specifically designed for scalar measurements within a known range:

Intelligent thresholds: Supports advanced attributes: min, max, low, high, and optimum.
Auto-coloring: Browsers natively change the gauge color (e.g. Green for optimum, Yellow/Red for low/high) depending on the value and thresholds.

Code Example

<h2>Password Strength</h2>
<meter min="0" max="100" low="35" high="70" optimum="85" value="80">Strong</meter>

6. `<output>` (Semantic Form Resulting)

The Problem

Form calculation results (like a shopping cart total) are usually outputted inside generic <span> or <div> tags, making it hard for screen readers to notice when the numbers update dynamically.

Why it matters

The <output> element represents the outcome of a user calculation:

Implicit ARIA live-region: Many screen readers treat the tag as a live region (aria-live="polite"), automatically reading the new calculation aloud to users when it changes.
Logical link: You can link it to the input fields that generated the value using the for attribute.

Code Example

<form oninput="result.value=Number(a.value)+Number(b.value)">
  <input type="number" id="a" value="10">
  +
  <input type="number" id="b" value="20">
  =
  <output name="result" for="a b">30</output>
</form>

7. `<mark>` (Contextual Highlighting)

The Problem

Highlighting search query matches in text usually involves wrapping strings in a <span class="highlight"> styled with a yellow background.

Why it matters

The <mark> tag indicates text highlighted for reference or relevance:

Semantic meaning: Communicates relevance to search engine crawlers and accessibility utilities, not just visual styling.
Default Styles: Instantly applies a readable yellow background that is compatible with user dark mode preferences.

Code Example

<p>Modern developers should learn how to write <mark>semantic HTML</mark> first.</p>

8. `<kbd>` (Keyboard Input Formatting)

The Problem

When writing technical documentation or tutorials, formatting keyboard shortcuts can look inconsistent if we only rely on generic inline code tags.

Why it matters

The <kbd> tag represents user keyboard input:

Nesting support: Nesting tags (like <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>) represents multi-key shortcuts clearly.
Monospace rendering: Rendered in monospace font by default for instant visual recognition.

Code Example

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the document.</p>

9. `<time>` (Machine-Readable Dates)

The Problem

Humans read dates in diverse formats (e.g. "December 25, 2026", "25/12/26"). Search engines and calendar APIs struggle to parse these correctly without semantic annotations.

Why it matters

The <time> element associates human-friendly dates with a standardized ISO date-time string:

SEO Benefits: Crawlers can index publication dates and schedule timings with 100% confidence.
Integration: Browsers and reader apps can parse the datetime attribute to add events straight to the user's calendar.

Code Example

<p>The conference is scheduled for <time datetime="2026-12-25">December 25, 2026</time>.</p>

10. `<template>` (Inert DOM Fragments)

The Problem

Before framework components, creating reusable HTML fragments in vanilla JavaScript required writing long, unsafe innerHTML strings or hiding elements using display: none (which still downloaded active images and executed inline scripts).

Why it matters

The <template> tag holds HTML content that is not rendered when the page loads:

Inert content: Any media inside (images, video) doesn't load and scripts don't run until the template is instantiated.
Safe & Fast: Cloning the template node using document.importNode() or cloneNode(true) is significantly safer and faster than executing innerHTML.

Code Example

<!-- The markup below remains hidden and inert until cloned -->
<template id="productCard">
  <article style="border: 1px solid #ccc; padding: 15px; border-radius: 8px;">
    <h3>Wireless Mouse</h3>
    <p>Price: $10.00</p>
    <button>Add to Cart</button>
  </article>
</template>

<script>
  const temp = document.getElementById('productCard');
  const container = document.body;

  // Clone the template content (true for deep clone)
  const clone = temp.content.cloneNode(true);
  container.appendChild(clone);
</script>

Wrap-up

These elements show that HTML is not just a layout tool; it is a feature-rich application layer. By choosing semantic HTML first, you:

Reduce your JS bundle size (making pages load faster).
Improve accessibility (a11y) out-of-the-box for assistive technologies.
Boost search engine indexability (SEO).

The next time you reach for a custom JS library to handle common UI interactions, check if native HTML can solve it first!

Happy coding! 🚀

Pattern 1

Print the following patterns

* 
* * 
* * * 
* * * * 
* * * * *

Code

void pattern1(int n) {
    for (int i = 0; i < n; i++)
    {
        for (int j = 0; j < i+1; j++)
        {
            cout << "* ";
        }
        cout << endl;
    }
}

Pattern 2

Print the following patterns

Code

void pattern2(int n) {
    for (int i = 1; i <= n; i++)
    {
        for (int j = 1; j < i+1; j++)
        {
            cout << j << " ";
        }
        cout << endl;
    }
}

Pattern 3

Print the following patterns

Code

void pattern3(int n) {
    for (int i = 1; i <= n; i++)
    {
        for (int j = 1; j < i+1; j++)
        {
            cout << i << " ";
        }
        cout << endl;
    }
}

Pattern 4

Print the following patterns

* * * * *
* * * *
* * *
* *
*

Code

void pattern4(int n) {
    for (int i = n; i > 0; i--)
    {
        for (int j = 0; j < i; j++)
        {
            cout << "* ";
        }
        cout << endl;   
    }
}

Pattern 5

Print the following patterns

Code

void pattern5(int n) {
    for (int i = n; i >= 1; i--)
    {
        for (int j = 1; j <= i; j++)
        {
            cout << j << " ";
        }
        cout << endl;   
    }
}

Pattern 6

Print the following patterns

    *
   ***
  *****
 *******
*********

Code

void pattern6(int n) {
    for (int i = 0; i < n; i++)
    {
        for (int j = 0; j < n-i-1; j++)
        {
            cout << " ";
        }

        for (int j = 0; j < 2*i+1; j++)
        {
            cout << "*";
        }

        for (int j = 0; j < n-i-1; j++)
        {
            cout << " ";
        }

        cout << endl;
    }
}

Pattern 7

Print the following patterns

*********
 *******
  *****
   ***
    *

Code

void pattern7(int n) {
    for (int i = 0; i < n; i++)
    {
        for (int j = 0; j < i; j++)
        {
            cout << " ";
        }

        for (int j = 0; j < 2*n - (2*i+1); j++)
        {
            cout << "*";
        }

        for (int j = 0; j < i; j++)
        {
            cout << " ";
        }

        cout << endl;
    }
}

Pattern 8

Print the following patterns

    *
   ***
  *****
 *******
*********
*********
 *******
  *****
   ***
    *

Code

void pattern8(int n) {
    for (int i = 0; i < n; i++)
    {
        for (int j = 0; j < n-i-1; j++)
        {
            cout << " ";
        }

        for (int j = 0; j < 2*i+1; j++)
        {
            cout << "*";
        }

        for (int j = 0; j < n-i-1; j++)
        {
            cout << " ";
        }

        cout << endl;
    }

    for (int i = 0; i < n; i++)
    {
        for (int j = 0; j < i; j++)
        {
            cout << " ";
        }

        for (int j = 0; j < 2*n - (2*i+1); j++)
        {
            cout << "*";
        }

        for (int j = 0; j < i; j++)
        {
            cout << " ";
        }

        cout << endl;
    }
}

Pattern 9

Print the following patterns

*
* *
* * *
* * * *
* * * * *
* * * *
* * *
* *
*

Code

void pattern9(int n) {
    for (int i = 1; i <= 2*n-1; i++)
    {
        int stars = i;
        if (i > n) stars = 2*n - i;
        for (int j = 1; j <= stars; j++)
        {
            cout << "* ";
        }
        cout << endl;
    }
}

Pattern 10

Print the following patterns

Code

void pattern10(int n) {
    int start = 1;
    for (int i = 0; i < n; i++)
    {
        if (i%2 != 0) start = 0;
        else start = 1;

        for (int j = 0; j <= i; j++)
        {
            cout << start << " ";
            start = 1 - start;
        }
        cout << endl; 
    }
}

Pattern 11

Print the following patterns

Code

void pattern11(int n) {
    for (int i = 1; i <= n; i++)
    {
        for (int j = 1; j <= i; j++)
        {
            cout << j;
        }

        for (int j = 1; j <= 2*(n-i); j++)
        {
            cout << " ";
        }

        for (int j=i; j>=1; j--) {
            cout << j;
        }

        cout << endl;
    }
}

Pattern 12

Print the following patterns

1
2 3
4 5 6
7 8 9 10
11 12 13 14 15

Code

void pattern12(int n) {
    int num = 1;
    for (int i = 1; i <= n; i++)
    {
        for (int j = 1; j <= i; j++)
        {
            cout << num << " ";
            num += 1;
        }
        cout << endl;
    }
}

Pattern 13

Print the following patterns

A
A B
A B C
A B C D
A B C D E

Code

void pattern13(int n) {
    for (int i = 0; i < n; i++)
    {
        for (char c = 'A'; c <= 'A' + i; c++)
        {
            cout << c << " ";
        }
        cout << endl;
    }
}

Pattern 14

Print the following patterns

A B C D E
A B C D
A B C
A B
A

Code

void pattern14(int n) {
    for (int i = n-1; i >= 0; i--)
    {
        for (char c = 'A'; c <= 'A' + i; c++) {
            cout << c << " ";
        }
        cout << endl;
    }
}

Pattern 15

Print the following patterns

A
B B
C C C
D D D D
E E E E E

Code

void pattern15(int n) {
    char c = 'A';
    for (int i = 1; i <= n; i++)
    {
        for (int j = 1; j <= i; j++)
        {
            cout << c << " ";
        }
        cout << endl;
        c++;
    }
}

Pattern 16

Print the following patterns

    A
   ABA
  ABCBA
 ABCDCBA
ABCDEDCBA

Code

void pattern16(int n) {
    for (int i = 0; i < n; i++)
    {
        for (int j = 0; j < n-i-1; j++)
        {
            cout << " ";
        }

        char c = 'A';
        int breakpt = i;
        for (int j = 0; j < 2*i+1; j++)
        {
            cout << c;
            if (j < breakpt) c++;
            else c--;
        }

        for (int j = 0; j < n-i-1; j++)
        {
            cout << " ";
        }
        cout << endl;
    }
}

Pattern 17

Print the following patterns

E
D E
C D E
B C D E
A B C D E

Code

void pattern17(int n) {
    for (int i = 0; i < n; i++)
    {
        char c = 'E' - i;
        for (c; c <= 'E'; c++) {
            cout << c << " ";
        }
        cout << endl;
    }
}

Pattern 18

Print the following patterns

**********
****  ****
***    ***
**      **
*        *
*        *
**      **
***    ***
****  ****
**********

Code

void pattern18(int n) {
    int inis = 0;
    for (int i = 0; i < n; i++)
    {
        for (int j = 1; j <= n-i; j++) {
            cout << "*";
        }

        for (int j=0; j < inis; j++) {
            cout << " ";
        }

        for (int j=1; j <= n-i; j++) {
            cout << "*";
        }

        cout << endl;
        inis += 2;
    }

    inis = 2*n-2;
    for (int i = 1; i <= n; i++)
    {
        for (int j = 1; j <= i; j++) {
            cout << "*";
        }

        for (int j=0; j < inis; j++) {
            cout << " ";
        }

        for (int j=1; j <= i; j++) {
            cout << "*";
        }

        cout << endl;
        inis -= 2;
    }
}

Pattern 19

Print the following patterns

*        *
**      **
***    ***
****  ****
**********
****  ****
***    ***
**      **
*        *

Code

void pattern19(int n) {
    int inis = 2 * n - 2;
    for (int i = 1; i <= 2 * n - 1; i++)
    {
        int stars = i;
        if (i > n) stars = 2 * n - i;

        for (int j = 1; j <= stars; j++) {
            cout << "*";
        }

        for (int j = 1; j <= inis; j++) {
            cout << " ";
        }

        for (int j = 1; j <= stars; j++) {
            cout << "*";
        }

        cout << endl;
        if (i < n) inis -= 2;
        else inis += 2;
    }
}

Pattern 20

Print the following patterns

*****
*   *
*   *
*   *
*****

Code

void pattern20(int n) {
    for (int i = 0; i < n; i++)
    {
        for (int j = 0; j < n; j++)
        {
            if (i == 0 || j == 0 || i == n-1 || j == n-1) {
                cout << "*";
            } else {
                cout << " ";
            }
        }
        cout << endl;
    }
}

Pattern 21

Print the following patterns

5 5 5 5 5 5 5 5 5
5 4 4 4 4 4 4 4 5
5 4 3 3 3 3 3 4 5
5 4 3 2 2 2 3 4 5
5 4 3 2 1 2 3 4 5
5 4 3 2 2 2 3 4 5
5 4 3 3 3 3 3 4 5
5 4 4 4 4 4 4 4 5
5 5 5 5 5 5 5 5 5

Code

void pattern21(int n) {
    for (int i = 0; i < 2*n-1; i++)
    {
        for (int j = 0; j < 2*n-1; j++)
        {
            int top = i;
            int left = j;
            int right = (2*n - 2) - j;
            int bottom = (2*n - 2) - i;

            cout << (n - min(min(top, bottom), min(right, left))) << " ";
        }
        cout << endl;
    }   
}

How to generate thumbnails from video ?

Lakshyaraj Dash — Sun, 23 Jun 2024 07:55:41 +0000

In this tutorial, you will learn how to generate thumbnails from a video file.

Warning!!! Please use small video files only, if your machine is low-end.

We will primarily use the fluent-ffmpeg library to perform the action.

For this, download the ffmpeg library from the official site of ffmpeg https://ffmpeg.org/.

Extract the zip and add the bin folder to your environment variables path.

Steps:

Create a folder for the conversion, name it as video-thumbnail-generator .

Initialize it as a nodejs package.

$ npm init -y

Install the fluent ffmpeg library

$ npm install fluent-ffmpeg

Import the library

const ffmpeg = require('fluent-ffmpeg')

The first argument of the ffmpeg will be the path to the video file

ffmpeg('path_to_videofile')

Take screenshot and save to the folder (Note: Multiple screenshots can be taken at a time, but we will take only 1)

ffmpeg('path_to_videofile')
  .screenshots({
     count: 1,
     filename: 'thumbnail-%s.png',
     folder: 'output_path/'
  })

Entire code

const ffmpeg = require('fluent-ffmpeg')
ffmpeg('path_to_videofile')
  .on('filenames', (filenames) => {
     console.log(filenames.join(', ') // Display the filenames to be generated
  })
  .on('end', () => {
     console.log('Screenshots taken!');
  })
  .screenshots({
     count: 1,
     filename: 'thumbnail-%s.png',
     folder: 'output_path/'
  })

CRUD App Using Binary files in python

Lakshyaraj Dash — Mon, 05 Feb 2024 11:53:57 +0000

First we need to import pickle module (it is a built-in module):

import pickle

Then we will create a function to load the file and return the data

def load_file(filename: str):
    try:
        with open(filename, 'rb') as c:
            l = []
            try:
                while True:
                    rec = pickle.load(c)
                    l.append(rec)
            except EOFError:
                return l
    except FileNotFoundError:
        open(filename, 'w')
        print(filename, "was not found, instead it was created!")

Then we will create a function to create data

def add_data(filename: str, data: dict):
    with open(filename, "ab") as c:
        pickle.dump(data, c)

    print('Data inserted successfully!')
    opt = input("Do you want to read the data ?\n")
    if opt.lower() == 'y':
        l = load_file(filename)
        for rec in l:
            print(rec)

Then we will create a function to update existing data

def update_data(filename: str, data: dict):
    recs = load_file(filename)
    for i in data:
        for rec in recs:
            if i in rec:
                rec[i] = data[i]
    with open(filename, "wb") as c:
        c.seek(0)
        for i in recs:
            pickle.dump(i, c)
    print('Data updated successfully!')
    opt = input("Do you want to read the data ?\n")
    if opt.lower() == 'y':
        l = load_file(filename)
        for rec in l:
            print(rec)

Then we will create a function to delete data

def delete_data(filename: str, key: str):
    recs = load_file(filename)
    for rec in recs:
        if key in rec:
            recs.pop(recs.index(rec))
    with open(filename, "wb") as c:
        c.seek(0)
        for i in recs:
            pickle.dump(i, c)     
    print('Data deleted successfully!')
    opt = input("Do you want to read the data ?\n")
    if opt.lower() == 'y':
        l = load_file(filename)
        for rec in l:
            print(rec)

The following fragment will run the entire program:

if __name__ == "__main__":
    filename = "student.dat"
    print('''
    1. Enter 'c' to create data
    2. Enter 'r' to read data
    3. Enter 'u' to update existing data
    4. Enter 'd' to delete data
    ''')
    ch = 'y'

    while ch == 'y':
        opt = input('Enter your option: ')
        if opt in 'crud':
            if opt == 'c':
                name = input('Enter student name: ')
                roll = input('Enter student roll no: ')
                marks = input('Enter student marks: ')

                data = {name: [roll, marks]}
                add_data(filename, data)

            if opt == 'r':
                l = load_file(filename)
                for rec in l:
                    print(rec)

            if opt == 'u':
                name = input('Enter student name (whose data is to be updated): ')
                roll = input('Enter student roll no: ')
                marks = input('Enter student marks: ')

                data = {name: [roll, marks]}
                update_data(filename, data)

            if opt == 'd':
                name = input('Enter student name (whose data is to be deleted): ')
                delete_data(filename, name)
        ch = input('Do you want to continue ?: (y for Yes or n for No)').lower()

How to find mean, median & mode of the elements of a tuple or list (no statistics module used) ?

Lakshyaraj Dash — Fri, 01 Dec 2023 13:41:15 +0000

Today we will learn the easiest way to find the mean, median and mode of the elements of a tuple using normal concepts.

Note: No statistics module has been used

t = ()
n = int(input("Enter the number of elements: "))

for i in range(n):
    num = int(input("Enter the element: "))
    t += (num,)

mean = 0
median = 0
mode = 0

length = len(t)
s = sum(t)
mean = s / length

st = sorted(t)

if (len(st)%2 != 0):
    medInd = int(len(st)/2)
    median = st[medInd]
else:
    medInd1 = int(len(st)/2)
    medInd2 = int(len(st)/2) - 1
    median = (st[medInd1] + st[medInd2])/2

d = {}
for i in t:
    d[i] = t.count(i)

max_occur = max(list(d.values()))

for i in t:
    if t.count(i) == max_occur:
        mode = i

print(f'Mean: {mean}')
print(f'Median: {median}')
print(f'Mode: {mode}')

Custom HTML video player

Lakshyaraj Dash — Sun, 14 May 2023 05:12:16 +0000

Hello developers! In this tutorial I will teach you all how you can create your custom HTML video player using css and JavaScript.

First Let's create the basic html structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Custom Video Player - HTML, CSS and JavaScript</title>
    <link href="./style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="video-container">
            <video src="./video.mp4" width="100%" height="auto" id="video"></video><br>
        </div>
        <div class="progress-container">
            <span id="currentTime"></span>&nbsp;<input type="range" name="seekbar" id="seekbar" min="0" max="100" style="width: 100%;">&nbsp;<span id="videoDuration"></span>
        </div>
        <br>
        <div style="margin: auto; display: block;">
            <div class="controllers">
                <div class="play-controllers">
                    <button class="btn" id="rewindBtn"><span class="material-icons">fast_rewind</span></button>
                    <button class="btn" id="playBtn"><span class="material-icons">play_circle</span></button>
                    <button class="btn" id="forwardBtn"><span class="material-icons">fast_forward</span></button>
                </div>
                <div class="volume-controllers">
                    <button class="btn" id="muteBtn"><span class="material-icons">volume_off</span></button>
                    <span class="material-icons" id="volume_icon">volume_up</span>
                    <input type="range" name="volume" id="volume" min="0" max="100" style="width: 100%;">
                    <span id="volumePercent"></span>
                </div>
            </div>
        </div>
    </div>

    <script src="./script.js"></script>
</body>
</html>

Next we will write the css for designing our pages

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: skyblue;
}

.container {
  width: 50%;
  background: white;
  padding: 8px;
  border-radius: 4px;
}

.video-container {
  padding: 6px;
  background: #000;
  border-radius: 4px;
}

.progress-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.volume-controllers {
  display: flex;
  align-items: center;
}

.btn {
  width: fit-content;
  height: fit-content;
  padding: 2px;
  cursor: pointer;
  background: #d3d3d3;
  border: none;
  border-radius: 4px;
}

.material-icons {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
  padding-bottom: 0;
}

.controllers {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

At last let us wrap up by completing the javascript logic

// Initialize the global variables
let video = document.getElementById("video"); 
let playBtn = document.getElementById("playBtn");
let videoDuration = document.getElementById("videoDuration");
let currentTime = document.getElementById("currentTime");
let volume = document.getElementById("volume");
let volume_icon = document.getElementById("volume_icon");
let volumePercent = document.getElementById("volumePercent");
let muteBtn = document.getElementById("muteBtn");
let seekbar = document.getElementById("seekbar");
let rewindBtn = document.getElementById("rewindBtn");
let forwardBtn = document.getElementById("forwardBtn");

// Set the seekbar value to current time of the video
seekbar.value = video.currentTime;
currentTime.innerHTML = '0:0:0' // Set the initial value of current time to 0:0:0

video.addEventListener("loadedmetadata", () => {
    const duration = Math.floor(video.duration); // Get the video duration
    // Get hours, minutes and seconds from the duration
    const hours = Math.floor(duration / 3600);
    const minutes = Math.floor((duration - (hours * 3600)) / 60);
    const seconds = duration - (hours * 3600) - (minutes * 60);
    videoDuration.innerHTML = `${hours}:${minutes}:${seconds}`;

    // Set the initial video volume to 0.5 (50%)
    video.volume = 0.5;
    volume.value = video.volume * 100;
    volumePercent.innerHTML = `${volume.value}%`
})

// Play the video
playBtn.addEventListener("click", () => {
    if (video.paused) {
        video.play();
        // Update the current timestamp of the video
        video.addEventListener("timeupdate", () => {
            const duration = Math.floor(video.currentTime);
            const hours = Math.floor(duration / 3600);
            const minutes = Math.floor((duration - (hours * 3600)) / 60);
            const seconds = duration - (hours * 3600) - (minutes * 60);
            currentTime.innerHTML = `${hours}:${minutes}:${seconds}`;
            // Update the seekbar value
            seekbar.value = (video.currentTime / video.duration) * 100;
        })
        playBtn.innerHTML = `<span class="material-icons">pause_circle</span>`;
    } else {
        video.pause();
        playBtn.innerHTML = `<span class="material-icons">play_circle</span>`;
    }
})

// Reset all the values when video has ended
video.addEventListener("ended", () => {
    seekbar.value = 0;
    video.currentTime = 0;
    playBtn.innerHTML = `<span class="material-icons">play_circle</span>`;
})

let interval;
// Rewind the video for 10 seconds
rewindBtn.addEventListener("mousedown", () => {
    interval = setInterval(() => {
        video.currentTime -= 10;
    }, 100)
})
rewindBtn.addEventListener("mouseup", () => {
   clearInterval(interval)
})

// Forward the video for 10 seconds
forwardBtn.addEventListener("mousedown", () => {
    interval = setInterval(() => {
        video.currentTime += 10;
    }, 100)
})
forwardBtn.addEventListener("mouseup", () => {
   clearInterval(interval)
})

// Switch to the particular timestamp of the video on seekbar changes
seekbar.addEventListener("input", () => {
    let duration = video.duration;
    let progress = seekbar.value;
    let currentTime = (progress / 100) * duration;
    video.currentTime = currentTime;
    const totalSeconds = Math.floor(video.currentTime);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
    const seconds = totalSeconds - (hours * 3600) - (minutes * 60);
    currentTime.innerHTML = `${hours}:${minutes}:${seconds}`;
})

// Volume change functionality
volume.addEventListener("input", (e) => {
    video.volume = e.target.value / 100;
    volumePercent.innerHTML = `${e.target.value}%`
    if (e.target.value == 0) {
        volume_icon.innerHTML = 'volume_off'
    } else {
        volume_icon.innerHTML = 'volume_up'
    }
})

// Mute or Unmute the video
muteBtn.addEventListener("click", () => {
    if (video.muted) {
        volume.value = video.volume * 100;
        video.muted = false; // Unmute the video
        volume_icon.innerHTML = 'volume_up'
        muteBtn.innerHTML = `<span class="material-icons">volume_off</span>`;
    } else {
        volume.value = 0;
        video.muted = true; // Mute the video
        volume_icon.innerHTML = 'volume_off'
        muteBtn.innerHTML = `<span class="material-icons">volume_up</span>`;
    }
    volumePercent.innerHTML = `${volume.value}%`
})

Test the above code and like this post if you like my project.

How to record your screen on Windows ?

Lakshyaraj Dash — Mon, 14 Nov 2022 09:35:14 +0000

Today, in this new article, you will learn how to record your screen on windows.

You might think that I will probabbly tell you the name of some third party softwares but you can record your screen with a simple shortcut Windows key + Alt + R to start recording your screen.

To access the recordings hit Windows key + G to view the recorded videos.

How to code almost every programming language in your phone ?

Lakshyaraj Dash — Tue, 25 Oct 2022 00:20:29 +0000

You must have read articles telling you "how to install vs code in mobile phones" but it has the best alternative.

If you've ever used replit, you might know what are its features. If you've no laptop or desktop computer at your home/remote areas, the best alternative is the replit app.

You do not need to follow the complex steps like install vs code through termux. Just one click and you can start coding in your mobile phones.

Link for installation (android link):
https://tinyurl.com/ddzm9969

Link for installation (iOS link):
https://tinyurl.com/ywyuysfp

Is c++ getting old ? What to do now ?

Lakshyaraj Dash — Mon, 24 Oct 2022 01:01:36 +0000

All of us know that C/C++ are the machine or lower level programming languages. But as time is evolving so Google has released a new superset of C++ and Rust languages ie Carbon language.

A bunch of articles are out there over the internet about carbon language.

Carbon is the super set of c++ language as well as open source language by Google.

GitHub url: https://github.com/carbon-language/carbon-lang

TicTacToe game using python

Lakshyaraj Dash — Mon, 24 Oct 2022 00:50:22 +0000

Hello world, in this article you will learn how to build a simple tic, tac, toe game using python programming language.

Watch this awesome tutorial from codewithharry (in Hindi): https://youtu.be/E8fmDDtaHLU

def sum(a, b, c):
  return a + b + c


def printBoard(xState, zState):
  zero = 'X' if xState[0] else ('O' if zState[0] else 0)
  one = 'X' if xState[1] else ('O' if zState[1] else 1)
  two = 'X' if xState[2] else ('O' if zState[2] else 2)
  three = 'X' if xState[3] else ('O' if zState[3] else 3)
  four = 'X' if xState[4] else ('O' if zState[4] else 4)
  five = 'X' if xState[5] else ('O' if zState[5] else 5)
  six = 'X' if xState[6] else ('O' if zState[6] else 6)
  seven = 'X' if xState[7] else ('O' if zState[7] else 7)
  eight = 'X' if xState[8] else ('O' if zState[8] else 8)
  print(f"{zero} | {one} | {two} ")
  print(f"--|---|---")
  print(f"{three} | {four} | {five} ")
  print(f"--|---|---")
  print(f"{six} | {seven} | {eight} ")


def checkWin(xState, zState):
  wins = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8],
          [0, 4, 8], [2, 4, 6]]
  for win in wins:
    if (sum(xState[win[0]], xState[win[1]], xState[win[2]]) == 3):
      print("X Won the match")
      return 1
    if (sum(zState[win[0]], zState[win[1]], zState[win[2]]) == 3):
      print("O Won the match")
      return 0
  return -1


if __name__ == "__main__":
  xState = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  zState = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  turn = 1  # 1 for X and 0 for O
  print("Welcome to Tic Tac Toe")
  while (True):
    printBoard(xState, zState)
    if (turn == 1):
      print("X's Chance")
      value = int(input("Please enter a value: "))
      xState[value] = 1
    else:
      print("O's Chance")
      value = int(input("Please enter a value: "))
      zState[value] = 1
    cwin = checkWin(xState, zState)
    if (cwin != -1):
      print("Match over")
      break

    turn = 1 - turn

How to convert decimal number to bin, octal and hex format using python ?

Lakshyaraj Dash — Thu, 20 Oct 2022 06:02:15 +0000

In today's article you will see how to convert a decimal number to binary, octal and hexadecimal format.

n = int(input("Enter a number: "))
n1, n2, n3 = n, n, n
temp = n
bin_of_n = ""
while n1!=0:
    rem = n1%2
    bin_of_n += str(rem)
    n1 = n1//2
oct_of_n = ""
while n2!=0:
    rem = n2%8
    oct_of_n += str(rem)
    n2 = n2//8
hex_of_n = ""
dict1 = {
    '10': 'A',
    '11': 'B',
    '12': 'C',
    '13': 'D',
    '14': 'E',
    '15': 'F'
}
while n3!=0:
    rem = n3%16
    if rem > 9 and rem < 16:
        hex_of_n += dict1[str(rem)]
    else:
        hex_of_n += str(rem)
    n3 = n3//16
print(f"Binary form of {temp} is:", bin_of_n[::-1])
print(f"Octal form of {temp} is:", oct_of_n[::-1])
print(f"Hexadecimal form of {temp} is:", hex_of_n[::-1])

Create a rest api using expressjs and postgresql

Lakshyaraj Dash — Thu, 20 Oct 2022 01:45:00 +0000

Hello world! In this article we will learn how to create a rest api using postgresql and expressjs. We will use javascript for this project.

First let us know what are the pre-requisites for this project:-
One must have:

the basic knowledge of javascript and nodejs
must be familiar with basic crud operations
must be familiar with sql commands
must have a basic knowledge of expressjs

Useful links

Installer links

NodeJS: https://nodejs.org/en/download/
Postgresql: https://www.postgresql.org/download/

First we will initialize the project folder with a "package.json".

npm init -y

Then we will install express, cors (for allowing cross origin requests) & pg (to connect to postgresql).

npm i express cors pg

Then we will install nodemon as a dev dependency to reload our server automatically.
Do not use nodemon in production servers

npm i -D nodemon

Before connecting to database, we will first create the database

Create a database and name it of your own choice.

Then go into the schemas and right click on tables. Give a name of "blogs" to your table.

Create the specified columns for the table

Create a file "db.js", where we will connect to the database

const { Pool } = require('pg');

const pool = new Pool({
    host: 'localhost',
    user: 'username',
    password: 'password',
    port: 5432,
    database: 'db_name'
})

module.exports = pool;

Now let's create a folder called routes and create a file "blog.js" inside it.

Then make the required imports

const express = require('express');
const router = express.Router();
const pool = require('../db');

The first api route will be to query all the blogs from the database. We will use pool.query('') to run our sql commands.

router.get('/', async (req, res) => {
    let blogs = await pool.query('SELECT * FROM blogs ORDER BY blogs.timestamp ASC'); // Order posts by ascending order
    res.status(200).json({ status: 200, totalResults:blogs.rowCount ,blogs: blogs.rows });
})

Then the second api route will be to query a specific blog from the database.

router.get('/:slug', async (req, res) => {
    let blog = await pool.query(`SELECT * FROM blogs WHERE slug='${req.params.slug}'`);
    if (blog.rowCount === 0) {
        res.status(404).json({ status: 404, message: 'No such blog was found!' });
    }else {
        res.status(200).json({ status: 200, blog: blog.rows });
    }
})

Then the third api route will be to add a blog to the database the database.

router.post('/addblog', async (req, res) => {
    const { title, tagline, slug, description } = req.body;
    let saveBlog = await pool.query(`INSERT INTO blogs (title, tagline, slug, description) VALUES ('${title}', '${tagline}', '${slug}', '${description}')`);
    if (!saveBlog) {
        res.status(404).json({ status: 404, message: 'Some error occurred! Cannot save blog :(' });
    }else {
        res.status(200).json({ status: 200, messaeg: 'Your blogpost has been added successfully!' });
    }
})

Then the fourth api route will be to update a specific blog in the database.

router.put('/updateblog/:slug', async (req, res) => {
    const { title, tagline, slug, description } = req.body;
    let saveBlog = await pool.query(`UPDATE blogs SET title='${title}', tagline='${tagline}', slug='${slug}', description='${description}' WHERE slug='${req.params.slug}'`);
    if (!saveBlog) {
        res.status(404).json({ status: 404, message: 'Some error occurred! Cannot update blog :(' });
    }else {
        res.status(200).json({ status: 200, messaeg: 'Your blogpost has been updated successfully!' });
    }
})

Then the fourth api route will be to delete a specific blog from the database.

router.delete('/deleteblog/:slug', async (req, res) => {
    let saveBlog = await pool.query(`DELETE FROM blogs WHERE slug='${req.params.slug}'`);
    if (!saveBlog) {
        res.status(404).json({ status: 404, message: 'Some error occurred! Cannot delete blog :(' });
    }else {
        res.status(200).json({ status: 200, messaeg: 'Your blogpost has been deleted successfully!' });
    }
})

Then we will export the router module

module.exports = router;

Create a "index.js" file to handle all the api routes.
Make the necessary imports

const express = require('express');
const cors = require('cors'); 
const app = express(); // initialization of express with app
const port = 5000;

Then write these two lines of code

app.use(cors()); // enable cross origin requests
app.use(express.json()); // use default json body parser to parse the data.

Use the api routes

app.use('/api/blogs', require('./routes/blog'))

Create a custom 404 message

app.use((req, res, next) => {
    res.status(404).json({ status: 404, message: 'No such route was found! Please go to /api/blogs.' });
})

Listen on the given port

app.listen(port, () => {
    console.log(`RestAPI listening on http://localhost:${port}`)
})

Yay! You have successfully created your rest api.

DEV Community: Lakshyaraj Dash

10 useful html tags

10 Underrated HTML Tags That Will Replace Your Bloated JS Libraries

1. <datalist> (Native Autocomplete)

The Problem

Why it matters

Code Example

2. <dialog> (Native Modals & Focus Trapping)

The Problem

Why it matters

Code Example

3. <details> + <summary> (No-JS Accordions)

The Problem

Why it matters

Code Example

4. <progress> (Semantic Status Indicators)

The Problem

Why it matters

Code Example

5. <meter> (Scalar Range Gauges)

The Problem

Why it matters

Code Example

6. <output> (Semantic Form Resulting)

The Problem

Why it matters

Code Example

7. <mark> (Contextual Highlighting)

The Problem

Why it matters

Code Example

8. <kbd> (Keyboard Input Formatting)

The Problem

Why it matters

Code Example

9. <time> (Machine-Readable Dates)

The Problem

Why it matters

Code Example

10. <template> (Inert DOM Fragments)

The Problem

Why it matters

Code Example

Wrap-up

Top 21 Pattern Printing Questions

Pattern 1

Pattern 2

Pattern 3

Pattern 4

Pattern 5

Pattern 6

Pattern 7

Pattern 8

Pattern 9

Pattern 10

Pattern 11

Pattern 12

Pattern 13

Pattern 14

Pattern 15

Pattern 16

Pattern 17

Pattern 18

Pattern 19

Pattern 20

Pattern 21

How to generate thumbnails from video ?

Warning!!! Please use small video files only, if your machine is low-end.

Entire code

CRUD App Using Binary files in python

How to find mean, median & mode of the elements of a tuple or list (no statistics module used) ?

Custom HTML video player

How to record your screen on Windows ?

How to code almost every programming language in your phone ?

Is c++ getting old ? What to do now ?

TicTacToe game using python

How to convert decimal number to bin, octal and hex format using python ?

Create a rest api using expressjs and postgresql

1. `<datalist>` (Native Autocomplete)

2. `<dialog>` (Native Modals & Focus Trapping)

3. `<details>` + `<summary>` (No-JS Accordions)

4. `<progress>` (Semantic Status Indicators)

5. `<meter>` (Scalar Range Gauges)

6. `<output>` (Semantic Form Resulting)

7. `<mark>` (Contextual Highlighting)

8. `<kbd>` (Keyboard Input Formatting)

9. `<time>` (Machine-Readable Dates)

10. `<template>` (Inert DOM Fragments)