<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);
This Pen doesn't use any external CSS resources.