inline list

by jgarrido

HTML

<ul>
  <li>
    <a href="#">One</a>
  </li>
  <li>
    <a href="#">Two</a>
  </li>
  <li>
    <a href="#">Three</a>
  </li>
  <li>
<!--     <a href="#">Four</a> -->
    <input />
  </li>
</ul>

CSS

/* Apply consistent box-sizing for all elements */
*, *:before, *:after {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

li {
    flex: 1; /* Makes each li take up equal width */
    margin: 0;
    display: flex; /* Making each li a flex container */
    align-items: center; /* Vertically centering the content */
}

li a, li input {
    flex: 1; /* This ensures both anchor and input take up the full width of their parent li */
    padding: 10px 15px;

    /* Styling */
    background-color: #ddd;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    outline: none; 
}

li input {
  flex: 1;
  padding: 12px 0;
  min-width: 0;
  width: 0;
}

li input[type="text"]:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

JavaScript

/* var empty = {'hi':'sup'};
console.log(Object.keys(empty).length === 0);
 */

/* var object = { 'a': 1, 'b': '2', 'c': 3 };
var {a, c} = object;
var newObj = {a, c};
console.log("newObj:", newObj); */


/* let user = {
  id: '6503beb8f3a4a7a2c1289be3',
  firstName: 'Test',
  lastName: 'User',
  email: '[email protected]',
  roles: [ 'donor' ],
  accountIds: [ '6503c65970125ca86c327450' ],
  transactionIds: null,
  scheduleIds: null,
  accounts: [
    {
      id: '6503c65970125ca86c327450',
      accNumTrunc: '1111',
      accType: 'VISA',
      vaultId: '23091421500130202TEST',
      lastUsed: '1694746201528',
      sV: '1',
      userId: '6503beb8f3a4a7a2c1289be3'
    },
    {
      id: '7h892734h92837h498237',
      accNumTrunc: '5454',
      accType: 'MSTR',
      vaultId: '72837492837498273TEST',
      lastUsed: '1694746201528',
      sV: '1',
      userId: '6503beb8f3a4a7a2c1289be3'
    },
    {
      id: '2h823fnn928n93ea974928379832',
      accNumTrunc: '9876',
      accType: 'AMEX',
      vaultId: '387298729845723TEST',
      lastUsed: '1694746201528',
      sV: '1',
      userId: '6503beb8f3a4a7a2c1289be3'
    }
  ]
};

const accounts = user.accounts.map((it) => it.vaultId);
console.log("accounts:", accounts);


let user = {
  firstName: 'Bob',
  lastName: 'Malooga',
  email: '[email protected]',
  roles: ['donor', 'admin']
};
user.roles = [...(user.roles || []), 'donor'];
console.log(user);

let a = false;
let b = "blue";
let c = "you";

let newVariable = b + (a && c);
console.log(newVariable);

const pay_subtotal = 543.25;
let percent = pay_subtotal / 100 * 2;
percent = Math.round((percent + Number.EPSILON) * 100) / 100;
const total = pay_subtotal + percent;
console.log( pay_subtotal, percent, total );


let str = "Iлｔèｒｎåｔïｏｎɑｌíƶａｔï߀ԉ";
// let newStr = String.fromCharCode(parseInt(str,16));
let str1 = "Altagracía Vázquez-Herñández";
// console.log(newStr);
console.log(str1.normalize("NFD").replace(/[\u0300-\u036f]/g, ""));

let someVar;
try {
  someVar...