Objects
In Javascript, Objects are given different properties. The properties can also known as the pairs of the object. Example of an object is a person that can have properties age, name and height making it a pair.
Creating the html page
Create a section in index.html
<div id=”section”></div>
Add CSS in index.css
display: flex;
flex-wrap: wrap;
height: auto;
HTML Document selector
We now get our section from html to javascript to the index.js file
const sectionselect = document.querySelector(‘#section’);
Adding objects
Now we create the objectsin the index.js file
const objects = [
{
name: ‘Obect 1’,
description: ‘ Lorem ipsum dolor sit amet, consectetur adipiscing elit.’,
notes: ‘ Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.’,
},
{
name: ‘Obect 2’,
description: ‘ Lorem ipsum dolor sit amet, consectetur adipiscing elit.’,
notes: ‘ Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.’,
},
{
name: ‘Obect 3’,
description: ‘ Lorem ipsum dolor sit amet, consectetur adipiscing elit.’,
notes: ‘ Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.’,
},
{
name: ‘Obect 4’,
description: ‘ Lorem ipsum dolor sit amet, consectetur adipiscing elit.’,
notes: ‘ Aenean posuere neque a turpis ullamcorper consectetur. Nam consectetur ullamcorper ante, ut gravida urna faucibus nec.’,
},
];
Adding the objects to the html file
What we do next is to loop through the array to get each object on the web without overlapping the other.
for the code below we add it to the index.js
objects.forEach((object) => {
const webdisplay = `<div class=”main”>
<div class=”content”>
<h4>${object.name}</h4>
<h6><em>${object.description}</em></h6>
<hr>
<p>${object.notes}</p>
</div>
</div>`;
objects.innerHTML += webdisplay;
});
from this we will get each object display
Then we can add this in the index.css file
.main {
display: flex;
flex-direction: row;
}
.content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 70%;
margin: auto;
}
.content h4 {
font-size: 13px;
line-height: 14px;
}
.content h6 {
font-size: 13px;
line-height: 15px;
color: #ec5242;
}
.content hr {
width: 20%;
color: #ec5242;
margin: 0;
}
.content p {
font-size: 12px;
line-height: 14px;
margin-top: 10px;
}