Data Object Manipulation (Javascript)

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>
<div>
<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;
}