<div class="console">
  <h3>Output:</h3> 
  <div id="output"></div>
</div>
body > main > * { width: 90%; max-width: 768px; margin-left: auto; margin-right: auto; padding-top: 170px; }
.console { width: calc(100% - 80px); overflow-y: auto;height: calc(100% - 60px); position: fixed; background: #060606; padding: 20px; left: 20px; top: 10px; border-radius: 11px; }
#output { font-size: 16px;  }
html, body { width: 100vw; max-width: 100vw; min-width: 320px; margin: 0; padding: 0; background-color: #282a36; color: rgba(248, 248, 242, 0.8); font-family: georgia; }
.title{color:#d05a24;margin-bottom:0}
br{line-height:0}
//Object Literal
console.log("<p class='title'>Object Literal:</p>")
const person = {
    name: "Myname", 
    age: 30,
    job: "Software Developer"
};
console.log(person)
//-------------------------------------- 
console.log("<p class='title'>Using an Object Constructor</p>")
function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.getCarInfo = function() {
        return `${this.year} ${this.make} ${this.model}`;
    };
}
const myCar = new Car("Toyota", "Camry", 2021);
const yourCar = new Car("Honda", "Civic", 2022);
console.log(myCar.getCarInfo()); 
console.log(yourCar.getCarInfo()); 
//--------------------------------------
console.log("<p class='title'>Using Object.assign()</p>")
const defaultSettings = {
    theme: "light",
    fontSize: "medium",
    showNotifications: true
};
const userSettings = {
    theme: "dark",
    fontSize: "large",
    customUser:true
};
const finalSettings = Object.assign({}, defaultSettings, userSettings);
console.log(finalSettings); 
//--------------------------------------
console.log("<p class='title'>Using Object.create()</p>")
const proto = {
    greet: function() {
        console.log(`Hello, my name is ${this.firstName}`);
    }
};

const person2 = Object.create(proto);
person2.firstName = "JavaScript"; 
person2.greet()
//--------------------------------------
console.log("<p class='title'>Using Object.fromEntries())</p>")
const urlParams = [
    ['page', '1'],
    ['sort', 'name'],
    ['filter', 'active']
];
const paramsObject = Object.fromEntries(urlParams);
console.log(paramsObject); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://mindsharehub.com/js-lib/consol.log.js