DEV Community

Harshit Kedia
Harshit Kedia

Posted on

Useful insights I got while building web development projects

Building a music player web app like spotify using HTML, CSS and Javascript!

Currently working on building a section for showing the list of songs in the library. Here are some interesting insights:

Using CSS, the list style of an unordered list (UL) can be modified to none if we want to remove bullet points, it can be set to any other style as well. We can modify the list-style-type to number to use it as an ordered list.

The getElementByTagName returns array of the tags present, for the particular tag we are searching, to use a particular one we have to refer to the position in the array like arr[0], it can also be nested with querySelector if we want to use it in a particular element having an id, similarly, multiple getElementByTagName can be combined by referring to their respective positions in their arrays.

Forof loop can be used for iteration in an array. To return it in HTML in the desired format we can use a template literal to concatenate the outputs of the iteration. Ex: use songUL.innerHTML += <li> ${song} </li> where songUL is a UL with that id, and ‘song’ is the output of iteration in ‘songs’ array.

If we fetch data from a URL of our server, for instance here I want to fetch the list of songs in my database, it will return the array with special characters replaced with encoding. For example: spacebar (‘ ‘) will be returned with ‘%20’, so while returning the output we need to use replaceAll (not ‘replace’ because it will only replace the first instance). Also, using ‘split’ to break the string into 2 parts will give an array with 2 elements, one left part of the string and another one right part, so use [1] in the output array to get the right part of the string.

I wanted to put a ‘play now’ text to appear if i am hovering over an associated image of the play icon. The hovering happening on one element to bring effect on another element can be brought by keeping the text element’s display as none and then keeping the following CSS:

#imgToBeHovered:hover ~ #textToBeDisplayedUponHover{
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

//here imgToBeHovered and textToBeDisplayedUponHover are id names of the elements.

Associated github repository: https://github.com/Harshitnitw/spotify-clone/

– I am Harshit from Varanasi, India, anyone interested in science, technology, etc and would like to learn and grow together, feel free to DM 😊

Image description

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay