What is the best way to print out multiple objects using console.log?

Question

What is the best way to print out multiple objects using console.log?

I am working on a JavaScript exercise where I want to create a function that produces an icon output using FontAwesome. While I have managed to display the icon and message, I am struggling to incorporate my custom styles for titles, emphasis, etc., using a function. I have attempted to use Switch, but it simply copies CSS as a string without applying it.

function generateIcon(ico_name, text, style ){ 
    switch(ico_name) { 
        case 'user':
            ico_name = '%c '
            font = 'font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 20px; content: "\f434";'
        break
    }  
    switch(style) { 
        case 'title':
            text = 'color: red'
        break
    }
    console.log(ico_name, font, text) 
}
generateIcon('user', 'player', 'title')

https://i.sstatic.net/cap6E.png

javascript css function

Answer 1

Answer №1

If you're unsure if this is the solution you need, consider utilizing document.getElementById() to access an element within the webpage and then implement CSS styles accordingly.

For example, if the element you want to adjust the font for has an id attribute set as "changeMyFont":

<span id="changeMyFont"></span>

You can modify its CSS properties using JavaScript like this:

var elem = document.getElementById("changeMyFont");
elem.style.fontFamily = "Font Awesome 5 Free";
elem.style.fontWeight = 900;
elem.style.fontSize = "20px";

To change the text color to red for a specific element, you can use the same approach. And when changing the content inside an HTML tag, utilize innerHTML (refrain from allowing user input here as it poses an XSS risk):

document.getElementById("elementToChange").innerHTML = "HTML goes here";

An HTML escape can be utilized in this scenario.

Answer 2

If you're unsure if this is the solution you need, consider utilizing document.getElementById() to access an element within the webpage and then implement CSS styles accordingly.

For example, if the element you want to adjust the font for has an id attribute set as "changeMyFont":

<span id="changeMyFont"></span>

You can modify its CSS properties using JavaScript like this:

var elem = document.getElementById("changeMyFont");
elem.style.fontFamily = "Font Awesome 5 Free";
elem.style.fontWeight = 900;
elem.style.fontSize = "20px";

To change the text color to red for a specific element, you can use the same approach. And when changing the content inside an HTML tag, utilize innerHTML (refrain from allowing user input here as it poses an XSS risk):

document.getElementById("elementToChange").innerHTML = "HTML goes here";

An HTML escape can be utilized in this scenario.

Answer 3

Answer №2

After several hours of trial and error, I managed to achieve my goal. The key was to combine 2 styles in a single console.log statement, although the code may appear convoluted and definitely needs improvement.

function icones(ico_nome,texto,style ){ // Captures the icon name, style to be used, and the text
    switch(ico_nome) { // Check argument icon
        case 'user':
            ico_nome = '%c ' // Icon will only be displayed after CSS declaration
            font_icon = 'font-family:"Font Awesome 5 Free"; font-weight: 900; font-size: 20px;' //Declare font for display
        break
    }  
    switch(style) { // Styling text
        case 'titulo': // Set styles for titles
            font_icon += 'color:red;' // Set Red color for Icon
            style_text = 'color:blue; font-family: Arial;' // Set styles for texts
        break
        default: 
            font_icon += 'color: black' // Set default color
    }
    console.log(ico_nome + ' ' + '%c' + texto,font_icon,style_text)  //Combine the 2 styles and display the output
}
icones('user','Usuario', 'titulo') //Applying values to function

Final outcome ---- View Console Output I still don't know how to directly insert the image into the post, sorry :)

Answer 4

After several hours of trial and error, I managed to achieve my goal. The key was to combine 2 styles in a single console.log statement, although the code may appear convoluted and definitely needs improvement.

function icones(ico_nome,texto,style ){ // Captures the icon name, style to be used, and the text
    switch(ico_nome) { // Check argument icon
        case 'user':
            ico_nome = '%c ' // Icon will only be displayed after CSS declaration
            font_icon = 'font-family:"Font Awesome 5 Free"; font-weight: 900; font-size: 20px;' //Declare font for display
        break
    }  
    switch(style) { // Styling text
        case 'titulo': // Set styles for titles
            font_icon += 'color:red;' // Set Red color for Icon
            style_text = 'color:blue; font-family: Arial;' // Set styles for texts
        break
        default: 
            font_icon += 'color: black' // Set default color
    }
    console.log(ico_nome + ' ' + '%c' + texto,font_icon,style_text)  //Combine the 2 styles and display the output
}
icones('user','Usuario', 'titulo') //Applying values to function

Final outcome ---- View Console Output I still don't know how to directly insert the image into the post, sorry :)

Answer 5

Answer №3

One way to apply styling using Jquery is by utilizing the .css() function. Here's an example:

$("#element").css("font-size", "20pt")

Answer 6

One way to apply styling using Jquery is by utilizing the .css() function. Here's an example:

$("#element").css("font-size", "20pt")

What is the best way to print out multiple objects using console.log?

Answer №1

Answer №2

Answer №3

Similar questions

How can I enhance Parallax scrolling performance on Chrome?

Highcharts facing issues with data rendering

A variable that can be changed is available within a closure in Angular services

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

A guide to selecting the bookmark with a URL that is on a currently opened page

Utilizing HighCharts Bubble Graph with JSON Data Feed

Using Vue.js, learn how to target a specific clicked component and update its state accordingly

What steps should I take to transform the chart data generation process during an AJAX callback?

Attempting to cycle through rows of a table and triggering setInterval for each row does not appear to be successful

There is a lack of output coming from jasmine-node

Managing CSS background images for various screen aspect ratios, from 16:9 to 9:16

Vue.js Google Places Autocomplete Plugin

endless refreshing material ui accordion

What is the best way to align grid elements vertically instead of horizontally on mobile devices using JQuery Mobile?

Sending a parameter from MVC 3 to JavaScript

What is the best way to include a maximum height in my ScrollToBottom element?

Tips for placing images on top of each other without overlapping other sections using 'position: absolute' in HTML and CSS

Issues arise with the functionalities of FireFox related to transformations and transitions

In NextJs SSR, external components from a different package do not inherit styles when applied

Customizable form with dynamic content and interactive button within a set location