kooliris Posts - Answer Overflow

kooliris

•Created by kooliris on 3/12/2024 in #front-end

Force CSS Grid to follow the order of li elements of a ul in the HTML code.

I have this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brands</title>
    <style>
        ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
    </style>
</head>
<body>
    <ul>
        <li>Calypso</li>
        <li>Casio</li>
        <li>CAT</li>
        <li>Esprit</li>
        <li>Ferre Milano</li>
        <li>Guess</li>
        <li>Jaguar</li>
        <li>Lotus</li>
        <li>Lotus Style</li>
        <li>Majorica 1890</li>
        <li>Michael Fellini</li>
        <li>Pierre Cardin</li>
        <li>Raymond Weil Geneve</li>
        <li>Reebok</li>
        <li>Seiko</li>
        <li>Storm</li>
        <li>Trussardi</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brands</title>
    <style>
        ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
    </style>
</head>
<body>
    <ul>
        <li>Calypso</li>
        <li>Casio</li>
        <li>CAT</li>
        <li>Esprit</li>
        <li>Ferre Milano</li>
        <li>Guess</li>
        <li>Jaguar</li>
        <li>Lotus</li>
        <li>Lotus Style</li>
        <li>Majorica 1890</li>
        <li>Michael Fellini</li>
        <li>Pierre Cardin</li>
        <li>Raymond Weil Geneve</li>
        <li>Reebok</li>
        <li>Seiko</li>
        <li>Storm</li>
        <li>Trussardi</li>
    </ul>
</body>
</html>

By default CSS grid is splitting the list in two columns with Calypso on one column and Casio on another. What I want instead is to respect the order and start the second column with Majorica 1890.

5 replies

KPCKevin Powell - Community

•Created by kooliris on 2/15/2023 in #front-end

Calculate the sum of elements in a matrix diagonally

I'm creating a function sum_diagonal(arr) to calculate the sum of elements in a matrix diagonally but when it reaches the center, the element is repeating. for example: 2 6 4 1 3 5 6 2 2 Execution: 2+4+3+3+6+2 how do I get number 3 to appear only once?

function sum_diagonal(arr) {
    let left_diagonal = 0, right_diagonal = 0;
    let output = "";
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length; j++) {
            if (i == j) {
                left_diagonal += arr[i][j];
                output += arr[i][j] + "+";
            }
            if((i + j) == (arr.length - 1)) {
                right_diagonal += arr[i][j];
                output += arr[i][j] + "+";
            }
        }
    }
    return output;
}
console.log(sum_diagonal(result));

function sum_diagonal(arr) {
    let left_diagonal = 0, right_diagonal = 0;
    let output = "";
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length; j++) {
            if (i == j) {
                left_diagonal += arr[i][j];
                output += arr[i][j] + "+";
            }
            if((i + j) == (arr.length - 1)) {
                right_diagonal += arr[i][j];
                output += arr[i][j] + "+";
            }
        }
    }
    return output;
}
console.log(sum_diagonal(result));

4 replies

KPCKevin Powell - Community

•Created by kooliris on 2/12/2023 in #front-end

Problem with For Loop

Can someone help me figure out the difference between the function afficher() using for...in vs the for loop? Using for..in the output is correct but with for it's not. am I missing something?

function afficher(tab, n = 10) {
    let output = "";
    for (let i = 0; i < tab.length; i++) {
        if (tab[i] % n == 0) {
            output += "\n";
        }
        output += tab[i] + " ";
    }
    return output;
}

function createArray(nbr, max) {
    let tab = [];
    for(let i = 0; i < nbr; i++) {
        let x = Math.floor(Math.random() * max);
        tab.push(x);
    }
    return tab;
}

let tableau = createArray(6, 10);
console.log(afficher(tableau, 4));

function afficher(tab, n = 10) {
    let output = "";
    for (let i = 0; i < tab.length; i++) {
        if (tab[i] % n == 0) {
            output += "\n";
        }
        output += tab[i] + " ";
    }
    return output;
}

function createArray(nbr, max) {
    let tab = [];
    for(let i = 0; i < nbr; i++) {
        let x = Math.floor(Math.random() * max);
        tab.push(x);
    }
    return tab;
}

let tableau = createArray(6, 10);
console.log(afficher(tableau, 4));

function afficher(tab, n = 10) {
    let output = "";
    for (index in tab) {
        if (index % n == 0) {
            output += "\n";
        }
        output += tab[index] + " ";
    }
    return output;
}

function createArray(nbr, max) {
    let tab = [];
    for(let i = 0; i < nbr; i++) {
        let x = Math.floor(Math.random() * max);
        tab.push(x);
    }
    return tab;
}

let tableau = createArray(6, 10);
console.log(afficher(tableau, 4));

function afficher(tab, n = 10) {
    let output = "";
    for (index in tab) {
        if (index % n == 0) {
            output += "\n";
        }
        output += tab[index] + " ";
    }
    return output;
}

function createArray(nbr, max) {
    let tab = [];
    for(let i = 0; i < nbr; i++) {
        let x = Math.floor(Math.random() * max);
        tab.push(x);
    }
    return tab;
}

let tableau = createArray(6, 10);
console.log(afficher(tableau, 4));

5 replies

Gaming

Programming