I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list.
Check out this image for reference
In the example image provided, instead of having a shared border and color for all words in the list, I would like to give each word its own distinct border and spacing between them. Is this something that can be achieved?
Check out this method for achieving the desired outcome (but remember to attempt solving it independently next time):
If your HTML looks like this:
<div id="sample">apple, banana, orange</div>
Your JavaScript code should be:
function separateItems() {
var element = document.getElementById("sample");
var itemsArray = element.innerHTML.split(", ");
element.innerHTML = "";
for (var j = 0; j < itemsArray.length; j++) {
var newSpan = document.createElement("span");
var itemValue = itemsArray[j].trim();
newSpan.innerHTML = itemValue;
element.appendChild(newSpan);
}
}
separateItems();
CSS styling:
#sample span { padding: 4px 6px; background-color: #f0f0f0; margin: 0 8px; border-radius: 5px;}
Hey there Henrik! If you're looking to style a specific word with some special CSS, you can do that by using the span tag like:
<span class="highlight">Highlighted Text</span>
Then in your CSS file, you would add:
.highlight{color: yellow;}
If you want to add a border as well, you can create another class like
.border-highlight{border: 2px solid yellow;}It may get a bit more complex if the content is generated dynamically, but it's definitely achievable. Hope this solution works for you!
Ahhh, the trick is to use Indexof to separate each word and then apply unique CSS to them individually.
I've noticed a discrepancy between the HTML source code displayed in my browser and the code I receive when using Python's requests.get function. You can see the image depicting this issue at the following link: Any thoughts on why this might be ...
Currently, I'm in the process of constructing an ajax file uploader. This is made possible thanks to the recently introduced FormData interface. Everything seems to work as expected when using the original file. However, I encounter issues when conver ...
On my HTML page, there is a certain code snippet: <a href="example.com"><i class="myclass"></i></a> <a href="http://www.google.com" class="cart visible-xs"><i class="t-icon t-icon-cart-xs-2"></i></a> Des ...
Currently working on revamping a tech night website for my school. I made some changes to the navbar, switching it from the side to the top. However, I'm struggling to get the table data and menu to center properly within the div. If you'd like ...
As I continued scrolling on my page, I encountered an issue with adjusting the top offset using jQuery on my element. I want the element with id goToLog to become fixed on the page after scrolling 80px. This functionality is working correctly. However, wh ...
When attempting to send a request with data, I am only getting "f {$$state: {…}}" in the console. $scope.createTask = function () { var req = $http.post('api/insert', { title: $scope.newTitle, description: ...
I am currently working on a Vue application and utilizing the x-ray-scraper library. However, when I attempt to run npm run serve in the terminal to preview the application locally, I encounter the following error: This dependency was not found: * _http_c ...
Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...
If you're looking to create a page with hidden content that is revealed when specific radio buttons are clicked, you've come to the right place. The concept is simple - the page starts off blank, but upon selecting a radio button, one div is show ...
After much experimentation, I am on the verge of achieving an inset box shadow for IE8 without relying on JavaScript. Take a look at the screenshot below: Since Internet Explorer versions 5.5 through 8 only support Microsoft's "dropshadows" and "sha ...
Is there a way to restrict the type of property of a class in an aliased conditional expression? Short: I am trying to perform a type narrowing check within a class method, like this._end === null && this._head === null, but I need to assign the r ...
Can you assist me in achieving this specific look? I have my MUI app bar and home page set up, but I'm unsure how to create the blue-ish box behind the image. Should I place the container within my app bar or integrate it into my homepage file? Additi ...
I successfully created an HTML page using AngularJS. <form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() --> <input type="submit" value="Save" class="myButton" name="submit" style="margin: ...
I'm working with a table that contains checkboxes. After selecting them, I want to calculate the sum of values from the table in a modal before confirming the form submission. Can someone guide me on how to render the AJAX response from the controller ...
With the help of a post on StackOverflow, I managed to modify my select: method to prevent users from adding an event on a date before NOW. However, there is a drawback. When a user clicks on an empty time slot and the system displays an alert message, th ...
Snippet of AngularJs code to display different content based on selection: <select> <option value="0">--Select--</option> <option value="1">Individual</option> <option value="2"> ...
Is it possible to create a regular expression that allows integers and decimals? var reg = /^((\s*)|([0-9]\d{0,9}(\.\d{1,3})?%?$))$/.; How can users input 0 to 5 groups of integers and decimals separated by |? Updated: This regex sh ...
Is there a way to keep a div pinned to the bottom of the viewport while applying a filter to the body in CSS? I tried using position: fixed; bottom: 0px, but it seems to mess up the positioning when a filter is added to the body. body { filter: bright ...
Flexbox - align element to the right using flex-direction: column; without relying on position in CSS Hello everyone, I am looking to move my row element to the right without using positioning. This code includes flex-direction: column; and I do not have ...
Check out this snippet of code async function fetchData() { const response = await fetch('http://127.0.0.1:1337/api/posts', { method: 'GET', headers: { 'Content-Type': 'application/json', Author ...