CreateElement Exercises

1. Create a Heading

const heading = document.createElement('h1');

heading.textContent = 'Welcome to My Website';

document.body.appendChild(heading);

2. Create a List

const ul = document.createElement('ul');

const fruits = ['Apple', 'Banana', 'Cherry'];

fruits.forEach(fruit => {

const li = document.createElement('li');

li.textContent = fruit;

ul.appendChild(li);

});

document.getElementById('fruit-list').appendChild(ul);
3. Create a Button

const button = document.createElement('button');

button.textContent = 'Click Me!';

button.onclick = () => alert('Button Clicked!');

document.body.appendChild(button);

4. Create an Image

const img = document.createElement('img');

img.src = 'https://via.placeholder.com/150';

img.alt = 'Sample Image';

document.body.appendChild(img);

5. Create a Paragraph

const paragraph = document.createElement('p');

paragraph.textContent = 'This is a dynamic paragraph.';

document.querySelector('.content').appendChild(paragraph);
6. Create a Table

const table = document.createElement('table');

const thead = document.createElement('thead');

const tbody = document.createElement('tbody');

const headerRow = document.createElement('tr');

['Name', 'Age', 'City'].forEach(text => {

const th = document.createElement('th');

th.textContent = text;

headerRow.appendChild(th);

});

thead.appendChild(headerRow);

const row = document.createElement('tr');

const data = ['John Doe', 30, 'New York'];

data.forEach(text => {

const td = document.createElement('td');

td.textContent = text;
 row.appendChild(td);

});

tbody.appendChild(row);

table.appendChild(thead);

table.appendChild(tbody);

document.body.appendChild(table);

7. Create a Form

const form = document.createElement('form');

const input = document.createElement('input');

input.type = 'text';

input.placeholder = 'Name';

const submitButton = document.createElement('button');

submitButton.type = 'submit';

submitButton.textContent = 'Submit';

form.appendChild(input);

form.appendChild(submitButton);
document.getElementById('form-container').appendChild(form);

8. Create a Footer

const footer = document.createElement('footer');

footer.textContent = '© 2024 Your Name';

document.body.appendChild(footer);

9. Create a Section with Articles

const section = document.createElement('section');

for (let i = 1; i <= 3; i++) {

const article = document.createElement('article');

const heading = document.createElement('h2');

heading.textContent = `Article ${i}`;

const paragraph = document.createElement('p');

paragraph.textContent = 'This is an article about something

article.appendChild(heading);
 article.appendChild(paragraph);

section.appendChild(article);

document.body.appendChild(section);

10. Create a Nav Bar

const nav = document.createElement('nav');

const links = ['Home', 'About', 'Contact'];

links.forEach(linkText => {

const link = document.createElement('a');

link.textContent = linkText;

link.href = '#'; // Placeholder href

nav.appendChild(link);

});

document.querySelector('header').appendChild(nav);
11. Create a List of Checkboxes

const checkboxContainer = document.createElement('div');

const hobbies = ['Reading', 'Traveling', 'Gaming'];

hobbies.forEach(hobby => {

const label = document.createElement('label');

label.textContent = hobby;

const checkbox = document.createElement('input');

checkbox.type = 'checkbox';

label.prepend(checkbox);

checkboxContainer.appendChild(label);

});

document.getElementById('hobby-
list').appendChild(checkboxContainer);

12. Create a Select Dropdown

const select = document.createElement('select');

const countries = ['USA', 'Canada', 'Mexico'];

countries.forEach(country => {
 const option = document.createElement('option');

option.value = country;

option.textContent = country;

select.appendChild(option);

});

document.querySelector('.country-selector').appendChild(select);

13. Create a Modal

const modal = document.createElement('div');

modal.style.display = 'none'; // Hidden initially

modal.style.position = 'fixed';

modal.style.top = '50%';

modal.style.left = '50%';

modal.style.transform = 'translate(-50%, -50%)';

modal.style.border = '1px solid black';

modal.style.padding = '20px';

const modalHeader = document.createElement('h2');

modalHeader.textContent = 'Modal Title';

closeButton.textContent = 'Close';

closeButton.onclick = () => modal.style.display = 'none';

modal.appendChild(modalHeader);

modal.appendChild(closeButton);

document.body.appendChild(modal);

const openModalButton = document.createElement('button');

openModalButton.textContent = 'Open Modal';

openModalButton.onclick = () => modal.style.display = 'block';

document.body.appendChild(openModalButton);

14. Create a Card Component

const card = document.createElement('div');

card.style.border = '1px solid #ccc';

card.style.padding = '10px';

card.style.margin = '10px';
const cardImage = document.createElement('img');

cardImage.src = 'https://via.placeholder.com/100';

const cardTitle = document.createElement('h3');

cardTitle.textContent = 'Card Title';

const cardDescription = document.createElement('p');

cardDescription.textContent = 'This is a description of the card.';

card.appendChild(cardImage);

card.appendChild(cardTitle);

card.appendChild(cardDescription);

document.getElementById('cards').appendChild(card);

15. Create a Progress Bar

const progressBar = document.createElement('div');

progressBar.style.width = '100%';

progressBar.style.background = '#f3f3f3';

const progressFill = document.createElement('div');

progressFill.style.width = '50%'; // Set the fill percentage

progressFill.style.height = '30px';
progressFill.style.background = '#4caf50';

progressBar.appendChild(progressFill);

document.body.appendChild(progressBar);

16. Create a Quotes Section

const blockquote = document.createElement('blockquote');

blockquote.textContent = "The greatest glory in living lies not in never

const cite = document.createElement('cite');

cite.textContent = "- Nelson Mandela";

blockquote.appendChild(cite);

document.getElementById('quotes').appendChild(blockquote);

17. Create a Countdown Timer

let countdownValue = 10;

const countdownDiv = document.createElement('div');

countdownDiv.textContent = countdownValue;

document.body.appendChild(countdownDiv);
const countdownInterval = setInterval(() => {

countdownValue--;

countdownDiv.textContent = countdownValue;

if (countdownValue <= 0) {

clearInterval(countdownInterval);

countdownDiv.textContent = "Time's up!";

}, 1000);

18. Create a Social Media Icons Section

const socialMediaContainer = document.createElement('div');

const socialMedia = ['Facebook', 'Twitter', 'Instagram'];

socialMedia.forEach(platform => {

const link = document.createElement('a');

link.href = '#'; // Placeholder link

link.textContent = platform;

socialMediaContainer.appendChild(link);

});
document.querySelector('footer').appendChild(socialMediaContainer);

19. Create a Dynamic Gallery

const gallery = document.createElement('div');

const images = [

'https://via.placeholder.com/150',

'https://via.placeholder.com/150/0000FF',

'https://via.placeholder.com/150/FF0000'

];

images.forEach(src => {

const img = document.createElement('img');

img.src = src;

img.style.margin = '10px';

gallery.appendChild(img);

});

document.body.appendChild(gallery);
20. Create a Welcome Message on Load

window.onload = () => {

const welcomeMessage = document.createElement('h2');

welcomeMessage.textContent = 'Welcome to My Site!';

document.body.appendChild(welcomeMessage);

};