Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- 19/2 -->
<div class="wrapper">
    <h2 class="title">События через атрибуты</h2>
    <!-- 1 -->
    <!-- =================================================================================== -->

    <ol>
      <li class="list">Одинарный клик</li>
      <div class="border-btn">
        <input class="btn" type="button" value="Нажми на меня!" onclick="clickBtn(this)">
      </div>

    <!-- 2 -->
    <!-- =================================================================================== -->

      <li class="list">При наведении</li>
      <div class="border-btn">
        <input class="btn" type="button" value="Наведи на меня!" onmouseover="overBtn(this)">
      </div>

    <!-- 3 -->
    <!-- =================================================================================== -->

      <li class="list">Двойной клик</li>
      <div class="border-btn">
        <input class="btn" type="button" value="Наведи на меня!" ondblclick="dblClickBtn(this)">
      </div>

    <!-- 4 -->
    <!-- =================================================================================== -->

      <li class="list">За областью контейнера</li>
      <div class="container">
        <div class="container-box" onmouseout="outClickBtn(this)">
          <p>Наведи на меня мышь - а потом убери!</p>
        </div>
        <div class="container-box"></div>
      </div>

    <h2 class="title">Метод getElementById и работа с атрибутами</h2>

    <!-- 5 -->
    <!-- =================================================================================== -->

      <li class="list">Алерт значения текста</li>
      <div class="border-btn">
        <input type="text" value="Ку-ку" id="text">
        <input class="btn" type="button" value="Нажми на меня!" onclick="clickBntToText()">
      </div>

    <!-- 6 -->
    <!-- =================================================================================== -->

      <li class="list">Замена текста в текстовом поле</li>
      <div class="border-btn">
        <input type="text" value="Ку-ку" id="text2">
        <input class="btn" type="button" value="Нажми на меня!" onclick="clickBntToChange()">
      </div>

    <!-- 7 -->
    <!-- =================================================================================== -->

      <li class="list">Замена фотографии</li>
      <div class="border-btn elements-near">
        <img class="picture" src="img/1.jpg" alt="Monkey" id="monkey">
        <input class="btn btn-edit" type="button" value="Нажми на меня!" onclick="clickToChangePhoto()">
      </div>

    <!-- 8 -->
    <!-- =================================================================================== -->

        <li class="list">Алекрт из текста</li>
        <div class="border-btn">
          <input type="text" value="Нажми на меня!" onclick="clickByText(this)" id="text3">
        </div>

    <!-- 9 -->
    <!-- =================================================================================== -->
        <li class="list">Алекрт из текста</li>
        <div class="border-btn">
          <input type="text" value="Нажми на меня!" onclick="clickByText2(this)" id="text4">
        </div>

    <!-- 10 -->
    <!-- =================================================================================== -->
        <li class="list">Алекрт из текста</li>
        <div class="border-btn">
          <input class="text-edit" type="text" value="Нажми на меня!" onclick="clickByText3(this)" onblur="blurByText3(this)" id="text5">
        </div>

    <!-- 11 -->
    <!-- =================================================================================== -->
        <li class="list">Замена кнопки</li>
        <div class="border-btn">
          <p>Это input type="submit".</p>
          <input class="btn-edit2" type="submit" value="Нажми на меня!" onclick="clickMyButton(this)" id="myButton">
        </div>

    <!-- 12 -->
    <!-- =================================================================================== -->
        <li class="list">Блокировка кнопки</li>
        <div class="border-btn">
          <p>Это input type="submit".</p>
          <input class="btn-edit2" type="submit" value="Нажми на меня!" onclick="blockMyButton(this)" id="blockButton">
        </div>

    <!-- 13 -->
    <!-- =================================================================================== -->

      <li class="list">Замена фотографии по наведению</li>
      <div class="border-btn">
        <img class="picture" src="img/1.jpg" alt="Monkey" id="monkey2" onmouseover="overMyImg(this)" onmouseout="outMyImg(this)">
      </div>

    <!-- =================================================================================== -->
    <h2 class="title">Работа с CSS</h2>
    <!-- =================================================================================== -->

    <!-- 14 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <input type="text" value="Ку-ку" id="redText">
        <input type="submit" value="Нажми на меня!" onclick="clickMyBtn()">
      </div>

    <!-- 15 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <input type="text" value="Ку-ку" id="closeText">
        <input type="submit" value="Нажми на меня!" onclick="closeMyBtn()">
        <input type="submit" value="Нажми потом на меня!" onclick="openMyBtn()">
      </div>

    <!-- =================================================================================== -->
    <h2 class="title">Задачи</h2>
    <!-- =================================================================================== -->

    <!-- 16 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <input class="text-edit2" type="text" value="Ку-ку" id="changeText">
        <input type="submit" value="Нажми на меня!" onclick="changeMyText()">
      </div>

    <!-- 17 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <p class="text-p">Это input type="submit"</p>
        <input class="btn-edit2" style="margin-bottom: 10px" type="submit" value="Нажми на меня!" onclick="changeMyBtn()" id="doubleBtn">
        <input class="btn-edit2" style="display: none;" type="submit" value="Нажми на меня!" onclick="openedMyBtn()" id="openedBtn">
      </div>

    <!-- 18 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <p class="text-p">Кнопка считает кол-во нажатий по ней</p>
        <input class="btn-edit2" type="submit" value="0" onclick="clickToNumber()" id="toNumber">
      </div>

    <!-- 19 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <input class="text-edit" type="text" value="Ку-ку" id="toLeft">
        <input class="btn" type="submit" value="Нажми на меня!" onclick="clickButton()">
      </div>

    <!-- 20 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <input class="eee www ddd" style="width: 300px" type="text" value="Ку-ку" id="writeNew">
        <input class="btn" type="submit" value="Нажми на меня!" onclick="clickButton2()">
      </div>

      <h2 class="title">Закрепление пройденного</h2>

    <!-- 21 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <input type="text" value="Привет!" id="hello">
        <input type="text" value="Пока!" id='buy'>
        <input type="submit" value="Нажми на меня!" onclick="clickHelloBye()">
      </div>

    <!-- 22 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу<</li>
      <div class="border-btn">
        <p style="margin-bottom: 20px;">По нажатию на кнопку в нижнем инпуте появиться квадрать
          числа из верхнего инпта</p>
        <input type="text" placeholder="Введите число!" id="numberId">
        <input type="text" value="Здесь появиться результат" id="amountNumber" disabled>
        <input type="submit" value="Нажми на меня!" onclick="clicktoButton()">
      </div>

    <!-- 23 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <p style="margin-bottom: 20px;">По нажатию на кнопку в нижнем инпуте появиться квадрать
          числа из верхнего инпта. Если введено не число - должна показаться ошибка</p>
        <input type="text" style="margin-bottom: 20px;" placeholder="Введите число!" id="numberId2"><br>
        <input type="text" style="margin-bottom: 20px;" value="Здесь появиться результат" id="amountNumber2" disabled><br>
        <input type="submit" value="Нажми на меня!" onclick="clicktoButton2()">
      </div>

    <!-- 24 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn">
        <p style="margin-bottom: 20px;">Обратите внимание на курсоср в различных состояниях</p>
        <input type="submit" value="Нажми на меня!" onclick="clicktoBlock()" id="toBlock">
      </div>

    <!-- 25 -->
    <!-- =================================================================================== -->
      <li class="list">Повторить по данному образцу</li>
      <div class="border-btn" style="display: flex; flex-direction: column">
        <input type="text" style="margin-bottom: 20px;" value="" id="count">
        <input class="btn-edit" type="submit" value="Я добавлю +" onclick="clickToAdd('+')">
        <input class="btn-edit" type="submit" value="Я добавлю -" onclick="clickToAdd('-')">
        <input class="btn-edit" type="submit" value="Я добавлю /" onclick="clickToAdd('/')">
        <input class="btn-edit" style="margin-bottom: 30px;" type="submit" value="Я добавлю *" onclick="clickToAdd('*')">
        <input class="btn-edit" type="submit" value="1" onclick="clickToAdd(1)">
        <input class="btn-edit" type="submit" value="2" onclick="clickToAdd(2)">
        <input class="btn-edit" type="submit" value="3" onclick="clickToAdd(3)">
        <input class="btn-edit" type="submit" value="4" onclick="clickToAdd(4)">
        <input class="btn-edit" type="submit" value="5" onclick="clickToAdd(5)">
        <input class="btn-edit" type="submit" value="6" onclick="clickToAdd(6)">
        <input class="btn-edit" type="submit" value="7" onclick="clickToAdd(7)">
        <input class="btn-edit" type="submit" value="8" onclick="clickToAdd(8)">
        <input class="btn-edit" type="submit" value="9" onclick="clickToAdd(9)">
        <input class="btn-edit" type="submit" value="0" onclick="clickToAdd(0)">
      </div>
    </ol>
  </div>
              
            
!

CSS

              
                * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 600px;
  margin: 0 auto;
}

.border-btn {
  width: 100%;
  border: 2px dotted #999;
  padding: 20px;
}


.elements-near {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#text2 {
  width: 300px;
}

.title {
  text-align: center;
  margin: 10px;
}

.list {
  padding: 5px 0 10px 0;;
  list-style-type: none;
  counter-increment: item;
}

.list:before {
  content: counter(item)". ";
  font-weight: bold;
}

.btn {
  padding: 0 5px;
}

.btn-edit {
  width: 200px;
  margin-top: 5px;
}

.btn-edit2 {
  width: 400px;
}


.text-edit {
  width: 300px;
}

.text-edit2 {
  display: block;
  width: 80px;
  margin-bottom: 30px;
}

.text-p {
  margin-bottom: 10px;
}

.container {
  border: 2px dotted #999;
  padding: 20px;
}

.container-box {
  width: 300px;
  height: 300px;
  border: 1px solid #f00;
}

.picture {
  width: 150px;
}

.picture-edit {
  float: left;
}

.picture {
  width: 200px;
  height: 150px;
}

              
            
!

JS

              
                // ============================================================================
var name = ('Задачи н основы работы с DOM в JS');
console.log('Урок № 19 ' + name);
// ============================================================================

// ============================================================================
console.log('1. Повторите страницу под анному образцу');
// ============================================================================

function clickBtn(elem) {
  elem = 'Привет!';
  alert(elem);
}

// ============================================================================
console.log('2. Повторите страницу под анному образцу');
// ============================================================================

function overBtn(elem) {
  elem = 'Привет!';
  alert(elem);
}

// ============================================================================
console.log('3. Повторите страницу под анному образцу');
// ============================================================================

function dblClickBtn(elem) {
  elem = 'Привет!';
  alert(elem);
}

// ============================================================================
console.log('4. Повторите страницу под анному образцу');
// ============================================================================

function outClickBtn(elem) {
  elem = 'Привет!';
  alert(elem);
}

// ============================================================================
console.log('5. Повторите страницу под анному образцу');
// ============================================================================

function clickBntToText() {
  var elem = document.getElementById('text');
  alert(elem.value);
}

// ============================================================================
console.log('6. Повторите страницу под анному образцу');
// ============================================================================

function clickBntToChange() {
  var elem = document.getElementById('text2');
  elem.value = 'Ой, я помнял свой текст!';
}

// ============================================================================
console.log('7. Повторите страницу под анному образцу');
// ============================================================================

function clickToChangePhoto() {
  var elem = document.getElementById('monkey');
  elem.src = 'img/2.jpg';
}

// ============================================================================
console.log('8. Повторите страницу под анному образцу');
// ============================================================================

function clickByText() {
  var text = document.getElementById('text3');
  alert(text.value);
}

// ============================================================================
console.log('9. Повторите страницу под анному образцу');
// ============================================================================

function clickByText2() {
  var text = document.getElementById('text4');
  text.value = 'Ой, поменял текст';
}

// ============================================================================
console.log('10. Повторите страницу под анному образцу');
// ============================================================================

function clickByText3() {
  var text = document.getElementById('text5');
  text.value = 'Ой, поменял текст!';
}

function blurByText3() {
  var text = document.getElementById('text5');
  text.value = 'Ой, теперь еще раз поменял!';
}

// ============================================================================
console.log('11. Повторите страницу по данному образцу');
// ============================================================================

function clickMyButton(button) {
  myButton.value = 'Ку-Ку';

  // or

  button.value = 'Ку-Ку';
}

// ============================================================================
console.log('12. Повторите страницу по данному образцу');
// ============================================================================

function blockMyButton() {
  blockButton.disabled = true;
  blockButton.value = 'О, теперь на меня больше не нажать';
}

// ============================================================================
console.log('13. Повторите страницу по данному образцу');
// ============================================================================

function overMyImg() {
  monkey2.src = 'img/2.jpg';
}

function outMyImg() {
  monkey2.src = 'img/1.jpg';
}

// ============================================================================
console.log('14. Повторите страницу по данному образцу');
// ============================================================================

function clickMyBtn() {
  var input = document.getElementById('redText');
  input.style.color = '#f00';
  input.style.width = '300px';
}

// ============================================================================
console.log('15. Повторите страницу по данному образцу');
// ============================================================================

function closeMyBtn() {
  closeText.style.display = 'none';
}

function openMyBtn() {
  closeText.style.display = 'inline-block';
}

// ============================================================================
console.log('16. Повторите страницу по данному образцу');
// ============================================================================

function changeMyText() {
  changeText.style.color = '#f00';
  changeText.value = 'Ой, я поменял свой текст и css!';
  changeText.style.width = '300px';
  changeText.style.height = '50px';
  changeText.style.borderRadius = '10px';
}

// ============================================================================
console.log('17. Повторите страницу по данному образцу');
// ============================================================================

function changeMyBtn() {
  doubleBtn.value = 'О, теперь на меня больне на нажать!';
  doubleBtn.disabled = true;
  openedBtn.style.display = 'inline-block';
  openedBtn.value = 'Нажми чтобы разблокировать элемент';
}

function openedMyBtn() {
  doubleBtn.disabled = false;
  doubleBtn.value = 'О, на меня сново можно нажать!';
  openedBtn.style.display = 'none';
}

// ============================================================================
console.log('18. Повторите страницу по данному образцу');
// ============================================================================

function clickToNumber() {
  toNumber.value = Number(toNumber.value) + 1;
}

// ============================================================================
console.log('19. Повторите страницу по данному образцу');
// ============================================================================

function clickButton() {
  toLeft.style.cssFloat = 'right';
  toLeft.value = 'Теперь я плаваю справа!';
}

// ============================================================================
console.log('20. Повторите страницу по данному образцу');
// ============================================================================

function clickButton2() {
  writeNew.value = 'Мои css классы: ' + writeNew.className;
}

// ============================================================================
console.log('21. Повторите страницу по данному образцу');
// ============================================================================

function clickHelloBye() {
  var hello2 = hello.value;
  var buy2 = buy.value;
  hello.value = buy2;
  buy.value = hello2;
}

// ============================================================================
console.log('22. Повторите страницу по данному образцу');
// ============================================================================

function clicktoButton() {
  amountNumber.value = numberId.value * numberId.value;
}

// ============================================================================
console.log('23. Повторите страницу по данному образцу');
// ============================================================================

function clicktoButton2() {
  amountNumber2.value = numberId2.value * numberId2.value;
  if (isNaN(amountNumber2.value)) {
    alert('Не число');
    numberId2.value = 'Введите число!';
  }
}

// ============================================================================
console.log('24. Повторите страницу по данному образцу');
// ============================================================================

function clicktoBlock() {
  toBlock.disabled = true;
  toBlock.style.cursor = 'not-allowed';
}

// ============================================================================
console.log('25. Повторите страницу по данному образцу');
// ============================================================================

function clickToAdd(elem) {
  count.value = count.value + elem;
}

              
            
!
999px

Console