Proper method for positioning text in a line

Trying to recreate the image below, but facing alignment issues with the text in my code. How can I vertically align the text so that they are aligned like in the photo? Flexbox hasn't helped due to varying text lengths causing misalignment.

const storeItems = [
    {
        name: 'TV',
        price: 800.00,
        inStock: true,
        details: '4K Ultra HD'
    },
    ...
];

storeItems.forEach(function(n, i, a) {
  if (n.inStock == true) {
   $('.boxes').append('<div class="container">' + '<p>$' + n.price +'</p>' + '<p>' + n.name + '</p>' + '<p>' + n.details + '</p>'
   + 
  '</div>');
  }
 if (n.inStock == false) {
  $('.boxes').append('<p class="notInStock">' + n.name + ': $' + 
  n.price + ' Not in stock' + '</p>');
  }
  
})

$('#clickMe').appendTo('.boxes');



$('#clickMe').click(function(){
    $('#contentContainer').toggleClass('darkModeBackground');
    $('.container').toggleClass('darkModeContainers');
    $(this).toggleClass('darkModeClickMe');
})
  
body {
  font-family: Helvetica;
  background-color: #d3d3d3;
  color: black;
}

.shrink-container {
  width: 800px;
  height: 50px;
  margin: 0 auto;
}
...

<!DOCTYPE html>
<html>
...
</html>

javascripthtmlcsscontainersalignment

Answer №1

Here is a solution that utilizes the <table> element.

const products = [
    {
        name: 'TV',
        price: 800.00,
        inStock: true,
        details: '4K Ultra HD'
    },
    {
        name: 'Phone',
        price: 700.00,
        inStock: false,
        details: '5G'
    },
    // Additional product data here
];

products.forEach(function(product) {
  $('#productTable').append('<tr><td>$' + product.price +'</td><td>' + product.name + '</td><td>' + product.details + '</td></tr>');
})

$('#darkModeToggle').click(function(){
    $('body').toggleClass('darkModeTheme');
    $('#productTable').toggleClass('darkModeTable');
    $(this).toggleClass('darkModeButton');
})
body {
  font-family: Helvetica;
  background-color: #d3d3d3;
  color: black;
}

#productTable {
  border-spacing: 0 .5em;
}

.darkModeTable tr {
  background-color: #333333;
  color: white;
}
// Additional CSS styles for dark mode and button

#darkModeToggle button {
  padding: 10px;
  font-family: Helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h1>Products</h1>
  <table id="productTable"></table>
  <div id="darkModeToggle"><button>Toggle Dark Mode</button></div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the unnecessary reloading of Ajax data when navigating back using the browser's back button in Chrome and Internet Explorer

I am currently designing a website where the main page showcases the latest 10 blog entries. As I scroll down and approach the end of the last item on the screen, another set of 10 blog entries automatically load through infinite scrolling. If a user clic ...

javascriptjqueryajaxback-buttoninfinite-scroll

Is it possible to transform a webpack configuration into a Next.js configuration?

i have come across a webpack configuration setup from https://github.com/shellscape/webpack-plugin-serve/blob/master/recipes/watch-static-content.md: const sane = require('sane'); const { WebpackPluginServe: Serve } = require('webpack-plugin ...

javascriptnode.jswebpacknext.jswebpack-config

Issue with Enter key not working on an individual textbox within Javascript/PHP chat functionality

Recently, I created a chat feature with text boxes that send messages when the ENTER key is pressed. However, I encountered an issue with it not working for the "Warning" functionality. Whenever I press Enter in this context, nothing happens. Can anyone pr ...

javascriptphphtml

Differences Between Vuetify Breakpoints and CSS Helper Classes

As I browse through the Vuetify documentation and various code snippets on the web, I often come across examples that mention using either a Vuetify breakpoint or a CSS helper class to make an element responsive to screen size changes. Is there a preferre ...

javascripthtmlcssvue.jsvuetify.js

Using AJAX in a loop presents a challenge: What is the best way to initiate an ajax request for every item in an array?

Hey there! I'm a new member of the StackOverflow community and I could really use some assistance. My current challenge involves performing an inverse geocode to retrieve addresses from coordinates. I have a functional URL that works with ajax, but I ...

javascriptjqueryajax

Looping through multiple AJAX calls

I have come across numerous questions on this topic, but I am still struggling to find a solution that will make my code function correctly. There is a specific function for calling AJAX that I am unable to modify due to security restrictions. Here is how ...

javascriptjqueryajaxjsonfor-loop

Submitting information from a single form to two separate URLs

Is it possible to send a post from one form to two different URLs simultaneously? For example, sending POST name data to both process.php and confirm.php at the same time. $(document).ready(function(){ $("#myform").validate({ debug: false, ...

javascriptphpajaxarraysforms

Choosing an option from a PHP MySQL table based on a JavaScript value

I am attempting to create a select box that displays a value based on whether the database has a "yes" or "no" in the specified column. Despite my efforts, I am unable to identify any syntax errors causing this code snippet to not function properly. JavaSc ...

javascriptphphtmlmysql

Error encountered while sending AJAX request with JSON data type

Is it possible to submit a Form using ajax with the jsontype? Suppose I have 5 fields in the form, where 4 of them are normal textboxes and one field contains JSON. When trying to send this data via ajax, an error is thrown. How can I resolve this issue? ...

javascriptjqueryjsonajax

What is the best way to transfer the http server variable between different layers in node.js without requiring it in a separate file?

I've developed a nodeJS application that involves creating a server in the file server.js. The code looks like this: http.createServer(app).listen(app.get('port'), function (err) { if (err) { console.error(err); } else { ...

javascriptnode.jsexpress

Submitting HTML elements from a webpage using PHP

Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...

htmlpost

When linking to a section, the Bootstrap navbar obscures the top part of

I have been working on my inaugural website for educational purposes and encountered the following issue: Every time I try to link to a specific section on the same page, it opens as intended but the top portion is obscured by the navbar. <body data-s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

A Step-by-Step Guide to Mocking a jQuery Function Using Jasmine in an Angular Directive Specification

When working with an angular directive, I am currently using $(element).fdatepicker(). How can I mock or stub this function in a jasmine test for the directive? If I don't stub it, I encounter the following error: TypeError: 'undefined' is ...

javascriptangularjsangularjs-directivejasmine

What is the best location for storing buddypress css files?

Recently, I set up buddypress on a fresh WordPress installation and am interested in developing a child theme with personalized styles. Following advice from the buddypress codex, I copied the buddypress theme from plugins > buddypress > bp-template ...

csswordpressbuddypress

JavaScript: a single function and two calls to Document.getElementById() results in both returning "undefined"

Within my JavaScript file, I have a function that utilizes two variables: choice and courseChosen. The latter variable must be converted into an object first. In the HTML, the tags courseName and courseInfo are used for choice and courseChosen respectively ...

javascripthtmljsonfunctiontags

Issues with Laravel 8's datatable scripts causing dysfunction

In my practice with the AdminBSB template, I am facing an issue where the Jquery datatable plugin JS is not functioning properly in my blade template. I aim to achieve a datatable layout similar to this example: https://i.sstatic.net/krfPl.jpg However, t ...

javascriptphpcsslaravellaravel-blade

Lately, I've been coming across mentions of "myApp.controllers" and "myApp.modules" in Angular JS. Can anyone explain the significance of these terms?

Recently, I've come across code that looks like this: angular.module('app.controllers') This pattern has appeared in a few tutorials I've read. However, the purpose of the .controllers within the module name is unclear to me. I'v ...

javascriptangularjs

Activate the Twitter Bootstrap Lightbox when the page is loaded

Is there a way to make my twitter bootstrap lightbox automatically trigger when the HTML page loads? Currently, I have this script in my 'main.js' file: function lightbox(){ $('#myLightbox').lightbox(); }; I heard that I can us ...

htmlcsszend-frameworktwitter-bootstraplightbox

Is there a way to successfully submit a form in PHP once it has been validated using JavaScript?

I'm interested in creating a register/login system. I've set up a form in Register.php and handled the validation part in JavaScript, but I'm encountering an issue where no values are being sent to the database upon clicking submit. Registe ...

javascriptphpajaxformsbackend

What is the process for restarting the timer within a timer controlled by the react-countdown component?

Looking for guidance on how to implement a reset() function in ReactJS and JavaScript to reset a timer when the "Reset Clock" button is clicked on my webpage. The goal is to have the timer return to its initial value. Open to suggestions on how to achieve ...

javascriptreactjs