🙋♂️ Hi everyone!
Today I continued following the free SuperSimpleDev course and learned how to generate HTML with JS. This is so cool, now I suddenly realize how many websites are made that have complicated repeating elements!
My Code
The actual project I made in that course is just a todo list. Nothing special. But rendering the HTML is just cool 🙂 - Oh yea also now we separated the JavaScript and saved it in a separate file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<p>Todo List</p>
<input placeholder="Todo name" class="js-name-input">
<button onclick="addTodo();">Add</button>
<div class="js-todo-list"></div>
<script src="scripts/11-todo.js"></script>
</body>
</html>
const todoList = ['make dinner', 'wash dishes'];
renderTodoList();
function renderTodoList() {
let todoListHTML = '';
for (let i = 0; i < todoList.length; i++) {
const todo = todoList[i];
const html = `<p>${todo}</p>`; // 'generating the HTML'
todoListHTML += html;
}
console.log(todoListHTML);
document.querySelector('.js-todo-list').innerHTML = todoListHTML;
}
function addTodo() {
const inputElement = document.querySelector('.js-name-input');
const name = inputElement.value;
todoList.push(name);
console.log(todoList);
inputElement.value = ''
renderTodoList();
}
Top comments (0)