Помогите пожалуйста с проверочной работой ,ДжаваСкрипт

Question

Помогите пожалуйста с проверочной работой ,ДжаваСкрипт

Глеб Гоменюк Ученик (118), на голосовании 1 год назад

1-Из JavaScript создайте страницу с полем для ввода и пустым h2-элементом. Введённый в поле текст должен отображаться внутри h2-элемента. ( Доп. задание: текст должен отображаться с задержкой в 300ms.)
2-Из JavaScript создайте страницу с кнопкой. Через Java Script добавьте на кнопку надпись “1”. При каждом нажатии на кнопку число должно увеличиваться на 1.
3-Из JavaScript создайте страницу с квадратным блоком. При нажатии на блок он должен превращаться в круг. При повторном нажатии снова становиться квадратом.

Answer 1

Аня Макеева Ученик (87) 1 год назад

Ужас

Answer 2

HTML-код для создания страницы с полем ввода и пустым h2-элементом:

<!DOCTYPE html>
<html>
<head>
<title>Пример поле ввода и h2-элемента</title>
</head>
<body>
<input type="text" id="input">
<h2 id="output"></h2>

<script>
const input = document.getElementById('input');
const output = document.getElementById('output');

input.addEventListener('input', () => {
setTimeout(() => {
output.innerText = input.value;
}, 300);
});
</script>
</body>
</html>
Обоснование: в данном коде создаётся HTML-страница с полем ввода и пустым h2-элементом. При вводе текста в поле ввода с помощью метода addEventListener на поле ввода навешивается обработчик события input. В этом обработчике задаётся задержка в 300 миллисекунд с помощью функции setTimeout, а затем в h2-элемент вставляется текст из поля ввода.
___

Вот пример решения задачи:

HTML-код:

<button id="myButton">Нажми меня!</button>
JavaScript-код:

const myButton = document.getElementById('myButton'); // Получаем элемент кнопки

let counter = 0; // Задаем начальное значение счетчика

// Добавляем обработчик события клика на кнопку
myButton.addEventListener('click', function() {
counter++; // Увеличиваем счетчик на 1
myButton.innerText = counter; // Обновляем текст на кнопке
});
При каждом нажатии на кнопку, счетчик увеличивается на 1 и новое значение отображается на кнопке.
___
Вот пример решения задачи:

HTML-код:

<div id="myBlock"></div>
CSS-код:

#myBlock {
width: 100px;
height: 100px;
background-color: blue;
}
JavaScript-код:

javascript
Copy code
const myBlock = document.getElementById('myBlock'); // Получаем элемент блока

// Добавляем обработчик события клика на блок
myBlock.addEventListener('click', function() {
if ( myBlock.style .borderRadius === '50%') { // Если блок уже круглый
myBlock.style .borderRadius = '0%'; // Меняем радиус границ на 0% (блок становится квадратным)
} else {
myBlock.style .borderRadius = '50%'; // Меняем радиус границ на 50% (блок становится круглым)
}
});
При нажатии на блок, проверяем, имеет ли блок уже радиус границ равный 50% (то есть, является ли блок круглым). Если да, то меняем радиус границ на 0% (блок становится квадратным), а если нет, то меняем радиус границ на 50% (блок становится круглым).

Answer 3

Все три - слишком жирно. Про квадрат в круг и обратно

 let div = document.createElement('div'); 
	div.style.width = '100px'; 
	div.style.height = '100px'; 
	div.style.backgroundColor = 'red'; 
	document.body.appendChild(div); 
	let test = true; 
	div.onclick = function() { 
		if (test) { 
			this.style.borderRadius = '50%'; 
			test = false; 
		} else { 
			this.style.borderRadius = '0%' 
			test = true; 
		} 
	}

Answer 4

Уже отвечал.

 const body = document.querySelector('body'),    // Элемент страницы 
      input = document.createElement('input'),  // Поле для текста 
      h2 = document.createElement('h2'),        // Заголовок h2 
      button = document.createElement('input'), // Кнопка с цифрой 
      square = document.createElement('div');   // Квадрат 
 
input.type = 'text';                            // Тип текстового поля 
button.type = 'submit';                         // Тип кнопки 
button.value = '1';                             // Стартовое значение кнопки 
square.style.background = '#252585';            // Покраска квадрата/круга 
square.style.width = '100px';                   // Ширина квадрата/круга 
square.style.height = '100px';                  // Высота квадрата/круга 
 
body.append(input);                             // Вставка поля для текста 
body.append(h2);                                // Вставка заголовка h2 
body.append(button);                            // Вставка кнопки с цифрой 
body.append(square);                            // Вставка квадрата/круга 
 
// Событие ввода текста в поле будет менять h2 с задержкой в 300 миллисекунд 
 
input.addEventListener('input', ({target}) => { 
   setTimeout(() => h2.textContent = target.value,300); 
}) 
 
// Событие клика по кнопке будет прибавлять единицу к существующему значению 
 
button.addEventListener('click', ({target}) => target.value++); 
 
// Событие клика по квадрату/кругу будет менять форму фигуры 
 
square.addEventListener('click', ({target}) => { 
   let radius = parseInt(getComputedStyle(target).borderRadius); 
   target.style.borderRadius = (radius === 0) ? '50%' : '0'; 
})

Answer 5

А где такое задание ты взял если не секрет? Просто интересно...

Answer 6

HTML разметка (index.html):

JS код (main.js):

 document.addEventListener('DOMContentLoaded', () => {   
 
	let createHeader = document.createElement('h2')   
 
	createHeader.classList.add('h2')   
 
   
 
	let createInput = document.createElement('input')   
 
	createInput.classList.add('input')   
 
   
 
	document.body.prepend(createInput)   
 
   
 
	document.body.prepend(createHeader)   
 
   
 
	let h2 = document.querySelector('.h2')   
 
	let input = document.querySelector('.input')   
 
	let timeout   
 
   
 
	const timeoutInput = () => {   
 
		timeout = clearTimeout(timeout)   
 
		timeout = setTimeout(() => {   
 
			h2.textContent = input.value   
 
		}, 300)   
 
	}   
 
   
 
	document.addEventListener('input', timeoutInput)   
 
})

На истину в последней инстанции не претендую, сам только учусь чуть больше недели. Знатоков и гуру прошу сильно не судить. Если есть замечания и недоработки, с удовольствием выслушаю как можно сделать код лучше.

P.S.: Автор вопроса, Вы проходите курс SkillBox. Я это знаю, так как сам его сейчас прохожу. Начал его проходить после курса от Богдана Стасчука. У меня вопрос. В этом модуле есть первое задание с таймером. Как Вы смогли выполнить его и не сделать это задание? Это задание намного проще первого. Если Вы смогли выполнить первое, то выполнить второе можно элементарно, взяв за основу освоенное в предыдущем задании.

У меня возник этот вопрос исключительно потому, что на первое задание я потратил половину дня, а второе решил за 20 минут, посмотрев на первое задание.

Answer 7

ребята, тьютор из кода будущего уже увидела и ваш вопрос, и ваш ответ. Вы бы поменяли имя профиля что бы не палиться.
Отправила решение коллегам, что бы снизили балл