DOM | DOM Manipulation Lecture - Code Along

README.md

DOM | DOM Manipulation Lecture - Code Along

Files:

index.html

style.css

dom-manipulation.js

dom-manipulation.js

'use strict';

console.log('connected');

let linksHTMLCollection = document.getElementsByClassName('link');

let linksArray = [...linksHTMLCollection];

console.log(linksArray);

let h1 = document.querySelector('h1');

let googleLink = document.getElementById('google-link');

let headlineId = h1.getAttribute('id');
let headlineClass = h1.getAttribute('class');
let url = googleLink.getAttribute('href');

console.log(headlineId);
console.log(headlineClass);
console.log(url);

h1.setAttribute('class', 'main-headline');

h1.removeAttribute('id');

let h2Tag = document.createElement('h2');

h2Tag.innerHTML = 'Sub Title';

let body = document.getElementsByTagName('body')[0];
body.appendChild(h2Tag);

//
//
//

let articleBrief = document.createElement('h3');
let articleContent = document.createElement('p');

let textContent1 = document.createTextNode(
  'Amazon is turning up the heat once again in the world of groceries',
);
let textContent2 = document.createTextNode(
  'Amazon is turning up the heat once again in the world of groceries, and specifically grocery delivery, to make its service more enticing in face of competition from Walmart, as well as a host of delivery companies like Postmates. Today, the company announced that it would make Amazon Fresh — the fresh food delivery service it now offers in some 2,000 cities in the US and elsewhere — free to use for Prime members, removing the $14.99/month fee that it was charging for the service up to now. Alongside free delive',
);

articleBrief.appendChild(textContent1);
articleContent.appendChild(textContent2);

body.appendChild(articleBrief);
body.appendChild(articleContent);

// 1. Create an image node in your JavaScript file:
let articleImage = document.createElement('img');

// 2. Add the src attribute with the link to an image - setAttribute
articleImage.setAttribute(
  'src',
  'https://techcrunch.com/wp-content/uploads/2018/08/IMG_1709.jpg?w=730&crop=1',
);

// 3. Add style.width and style.height to the image node

articleImage.style.width = '400px';
articleImage.style.height = 'auto';
articleImage.style.display = 'block';
articleImage.style.margin = '0 auto';

// 4. Append the image before the `articleBrief` - insertBefore

body.insertBefore(articleImage, articleContent);

h2Tag.remove();

let button = document.getElementById('add-item-button');

// button.addEventListener('mouseover', backgroundRed);
// button.addEventListener('mouseout', backgroundWhite);
// button.addEventListener('click', removeEventListeners);

function backgroundRed() {
  this.style.backgroundColor = 'red';
}

function backgroundWhite() {
  this.style.backgroundColor = 'white';
}

function removeEventListeners() {
  button.removeEventListener('mouseover', backgroundRed);
  button.removeEventListener('mouseout', backgroundWhite);
  this.style.backgroundColor = 'white';

  console.log('IN REMOVE CALLBACK');

  // button.removeEventListener('click', removeEventListeners);
}

let dropdownDiv = document.getElementById('dropdown-div');
let hideButton = document.getElementById('hide-div');

dropdownDiv.classList.add('open');

hideButton.addEventListener('click', function() {
  dropdownDiv.classList.toggle('close');

  if (hideButton.innerHTML === 'Hide') {
    hideButton.innerHTML = 'Show';
  } else {
    hideButton.innerHTML = 'Hide';
  }
});

// get ul element
let itemsList = document.querySelector('.items-list');
let addItemButton = document.getElementById('add-item-button');

// add a click event to the Add Item button
addItemButton.addEventListener('click', function() {
  // create new li element
  let newListItem = document.createElement('li');

  // add text to li element
  newListItem.innerHTML = `Item number ${itemsList.children.length + 1}`;

  // append that li element to the ul element
  itemsList.appendChild(newListItem);
});

let input = document.querySelector('input');
let sendButton = document.getElementById('send-btn');
let list = document.getElementById('new-list');

sendButton.addEventListener('click', function(event) {
  event.preventDefault();

  let listItem = document.createElement('li');
  listItem.innerHTML = input.value;

  list.appendChild(listItem);

  console.log(event.currentTarget);

  input.value = '';
});

index.html

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM Manipulation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <a href="https://google.com" id="google-link" class="link">Google</a>

  <div id="dropdown-div">Additional Content</div>
  <button id="hide-div">Hide</button>

  <main id="content">
    <h1 id="title">Amazon axes $14.99 Amazon Fresh fee, making grocery delivery free for Prime members to boost use</h1>
	  <ul id="item-list"></ul>
  </main>

    <form>
      <label for="username">Name</label>
      <input name="username" type="text">
      <button id="send-btn">Send</button>
     </form>
     <ul id="new-list"></ul>


    <ul class="items-list">
      <li>Item number 1</li> 
      <li>Item number 2</li> 
      <li>Item number 3</li> 
      <li>Item number 4</li> 
      <li>Item number 5</li> 
    </ul>
    <button id="add-item-button">Add item</button>
  


  <script src="dom-manipulation.js"></script>

</body>
</html>

style.css

.open {
  height: 200px;
  width: 100%;
  border: 2px solid black;
  transition: all 1s;
}

.close {
  height: 0px;
  border: 0px solid black;
  color: transparent;
}