function LearnToCode() {

const [skills, setSkills] = useState([]);

const [isLearning, setIsLearning] = useState(true);

useEffect(() => {

if (isLearning) {

// Keep adding new skills

const timer = setInterval(() => {

setSkills(prev => [...prev, getNewSkill()]);

}, 1000);

return () => clearInterval(timer);

}

}, [isLearning]);

return (

{skills.map(skill => (

))}

AceDevHub

Frontend

Backend

Database

DevOps

Preparing your learning journey...

learning.jsx

1function LearnToCode() {

2 const [skills, setSkills] = useState([]);

3 const [isLearning, setIsLearning] = useState(true);

5 useEffect(() => {

6 if (isLearning) {

7 // Keep adding new skills

8 const timer = setInterval(() => {

9 setSkills(prev => [...prev, getNewSkill()]);

10 }, 1000);

12 return () => clearInterval(timer);

13 }

14 }, [isLearning]);

16 return (

17 <div className="developer">

18 {skills.map(skill => (

19 <Skill key={skill.id} name={skill.name} />

20 ))}

21 </div>

22 );

23}

DOM Manipulation

The Document Object Model (DOM) allows JavaScript to interact with HTML elements dynamically.

Selecting Elements

javascript
// Single element selection
const element = document.getElementById('myId');
const element2 = document.querySelector('.my-class');
const element3 = document.querySelector('div[data-id="123"]');

// Multiple elements
const elements = document.getElementsByClassName('my-class');
const elements2 = document.getElementsByTagName('div');
const elements3 = document.querySelectorAll('.item');

// Convert NodeList to Array
const elementsArray = [...document.querySelectorAll('.item')];

Creating and Modifying Elements

javascript
// Create elements
const newDiv = document.createElement('div');
const newText = document.createTextNode('Hello World');

// Set content
newDiv.textContent = 'Simple text';
newDiv.innerHTML = '<strong>HTML content</strong>';

// Set attributes
newDiv.id = 'new-element';
newDiv.className = 'my-class';
newDiv.setAttribute('data-value', '123');

// Style manipulation
newDiv.style.color = 'blue';
newDiv.style.backgroundColor = 'lightgray';
newDiv.style.cssText = 'color: red; font-size: 16px;';

Adding and Removing Elements

javascript
const container = document.getElementById('container');
const newElement = document.createElement('p');
newElement.textContent = 'New paragraph';

// Add elements
container.appendChild(newElement);
container.insertBefore(newElement, container.firstChild);
container.insertAdjacentHTML('beforeend', '<span>New span</span>');

// Remove elements
newElement.remove();
container.removeChild(newElement);

// Replace elements
const replacement = document.createElement('h2');
replacement.textContent = 'Replacement heading';
container.replaceChild(replacement, newElement);

Working with Classes and Attributes

javascript
const element = document.querySelector('.my-element');

// Class manipulation
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');
element.classList.contains('hidden'); // returns boolean

// Attribute manipulation
element.getAttribute('data-id');
element.setAttribute('data-id', '456');
element.hasAttribute('data-id');
element.removeAttribute('data-id');

// Data attributes
element.dataset.userId = '123'; // sets data-user-id="123"
console.log(element.dataset.userId); // gets data-user-id value

Practical Examples

javascript
// Dynamic list creation
function createList(items) {
  const ul = document.createElement('ul');
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    li.classList.add('list-item');
    ul.appendChild(li);
  });
  
  return ul;
}

// Toggle visibility
function toggleElement(selector) {
  const element = document.querySelector(selector);
  element.style.display = element.style.display === 'none' ? 'block' : 'none';
}

// Form data collection
function getFormData(formId) {
  const form = document.getElementById(formId);
  const formData = new FormData(form);
  const data = {};
  
  for (let [key, value] of formData.entries()) {
    data[key] = value;
  }
  
  return data;
}

// Element position and size
function getElementInfo(element) {
  const rect = element.getBoundingClientRect();
  return {
    width: rect.width,
    height: rect.height,
    top: rect.top,
    left: rect.left,
    bottom: rect.bottom,
    right: rect.right
  };
}