var title,id,cname,align,styleColor,stylePadding,styleBack,
styleVisibility,addContent, queryTitle;
title = document.getElementById('title');
//id
// id = document.getElementById('title').id;
id = title.id
//class name
//cname = document.getElementById('title').className;
cname = title.className;


console.log("Project Id is #:" + id);

console.log("Project class is :" + cname);
console.log(title);


//add styles
align = document.getElementById('title').style.textAlign = 'center';
styleColor = title.style.color = 'red';
stylePadding = title.style.padding = '10px';
styleBack = title.style.background = '#333';
styleVisibility = title.style.display = 'none';
styleVisibility = title.style.display = 'block';

//add text innerText, textContent
addContent = title.textContent = 'New Title';
addContent = title.innerText = 'New Title1';
//add html tags innerHtml
addContent = title.innerHTML = '<div class="new-title"><span style="font-size:50px;">Title</span></div>';


//querySelector



queryTitle = document.querySelector('#title');
queryTitle = document.querySelector('.project-title');
queryTitle = document.querySelector('.todo-list-element').style.background ="#555";
queryTitle = document.querySelector('li:last-child').style.background ="green";
queryTitle = document.querySelector('li:nth-child(2)').style.background ="orangered";
queryTitle = document.querySelector('li:nth-child(3)').style.background ="blue";
queryTitle = document.querySelector('li:last-child').textContent ="This is added with querySelector";
console.log(queryTitle);