<input type="text" value="hello world" onclick="setCursor(event)">const setCursor = (e) => {
const input = e.target
input.focus();
input.setSelectionRange(0, 0);
}// Чтобы проще было понять
const methods = {
"-": (a, b) => a - b,
"+": (a, b) => a + b
};
console.log(methods["+"](1, 5)) // 6
console.log(methods["-"](10, 1)) // 9methods["+"](1, 5) // 1 + 5
// Это тоже самое что
const methods = {
substract: (a, b) => a - b
add: (a, b) => a + b
};
methods.add(1,5)<div class="container"></div>const run = () => {
const words =['King', 'Queen', 'Sword', 'King', 'Armor', 'King'];
const $container = document.querySelector(".container");
const getIndexes = (arr, target) => {
return arr.reduce((acc, word, i) => {
if(target === word) {
acc.push({
name: word,
index: i
})
} else {
acc.push({name: word});
}
return acc
}, [])
}
const insertHTML = (list) => {
list.forEach((item) => {
if(item.index !== undefined) {
var template = `<div data-index="${item.index}">${item.name}</div>`;
} else {
var template = `<div data-index="">${item.name}</div>`
}
$container.insertAdjacentHTML('beforeend', template)
})
}
insertHTML(getIndexes(words, "King"))
$container.addEventListener('mouseover', (e) => {
const index = e.target.getAttribute('data-index');
if(index) {
console.log(index)
}
})
}
run()// main.js
export default {
title: "sun",
subtitle: "earth",
r: "mars"
}<h1></h1>
<h2></h2>
<p></p>//index.js
import data from './main.js';
// Пишем функцию, чтобы не менять каждый элемент вручную
const changeHtmlText = (querySelector, data) => {
const $element = document.querySelector(querySelector);
$element.textContent = data
}
changeHtmlText("h1", data.title);
changeHtmlText("h2", data.subtitle);
changeHtmlText("p", data.r);// link - наша ссылка
// На ссылку вешаем событие onclick, в коллбэк передаем event(событие)
// preventDefault предотвращает дэфолтное поведение элементов страницы,
// То есть если это ссылка, то браузер не перейдет по ссылке, если это форма, то форма не отправиться и тд...
link.addEventListener('click', (e) =>{
e.preventDefault();
})<div class="app" id="app">
<input class="type" type="search"placeholder="Добавить дело">
<button id="add"> add</button>
<button id="clear"> clear</button>
<div class="out">
</div>
</div><script>
let input = document.querySelector('.type'),
out = document.querySelector('.out'),
add = document.getElementById('add'),
clear = document.getElementById('clear'),
list = {}; // Объект в котором будет храниться наш todo-список
// Функция рендера, каждый раз после изменения объекта list будет заново перерисовывать контент
const renderList = () => {
out.innerHTML = ''// Очищаем блок out
for(let i in list){
// Через цикл пробегаемся через объект, и создаем соотвественные чекбоксы с класом и data-id
// data-id мы создаем когда добавляем новый todo элемент в функции addToList
let comp = document.createElement('div')
if(list[i].checked){
comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}" checked/> ${list[i].value}`
} else {
comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}"/> ${list[i].value}`
}
out.appendChild(comp)
}
}
const toggleCheckbox = (e) => {
// Изменяем статус чекбокса в объекте list
if(!e.target.classList.contains('checkbox-item')) return;
const todoId = e.target.getAttribute('data-id');
list[todoId].checked = !list[todoId].checked
}
// Функция для добавления элемента todo
const addToList = () => {
const todoId = '_' + Date.now() // Генерируем уникальный айдишник
// Это конкретный todo элемент по умолчанию checked:false
list[todoId] = {
value: input.value,
checked: false
}
input.value = ''// Очищаем форму ввода
renderList()
}
// Функция для очистки списка
// Через цикл бежим по объекту, если todo элемент имеет статус checked значит мы удаляем его из объекта
const clearList = () => {
for(let i in list){
if(list[i].checked){
delete list[i]
}
}
renderList()
}
// Слушатели событий
add.addEventListener('click', () => addToList())
clear.addEventListener('click', () => clearList())
out.addEventListener('click', () => toggleCheckbox(event))
</script>