tutorials/css - the complete guide/9. working_with_js_and_css.md

Working With JavaScript And CSS

Adding A Modal

CSS for the modal:

.modal {
  position: fixed;
  display: none;
  z-index: 200;
  top: 20%;
  left: 30%;
  width: 40%;
  background: white;
  padding: 1rem;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.modal__title {
  text-align: center;
  margin: 0 0 1rem 0;
}

.modal__actions {
  text-align: center;
}

.modal__action {
  border: 1px solid #0e4f1f;
  background: #0e4f1f;
  text-decoration: none;
  color: white;
  font: inherit;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.modal__action:hover,
.modal__action:active {
  background: #2ddf5c;
  border-color: #2ddf5c;
}

.modal__action--negative {
  background: red;
  border-color: red;
}

.modal__action--negative:hover,
.modal__action--negative:active {
  background: #ff5454;
  border-color: #ff5454;
}

Selecting & Manipulating Styles With JavaScript

JavaScript allows us to run code after the page is loaded. We can use it to change the content or styling of the page.

We can add the JavaScript using the inline <script src="shared.js"></script> element, preferebly at the end of the document, before the close </body> tag, so we are sure everything else is loaded.

    ...
    <script src="shared.js"></script>
</body>

Inside JavaScript, we can use the querySelector('') to select an element. The querySelector('') only selects a single element, that is the first element it finds.

    var backdrop = document.querySelector('.backdrop');
    console.dir(backdrop);

You can use any valid CSS selector name as an argument to the querySelector('').

To select all elements or array of elements, we can use the querySelectorAll('') method.

The style property of an html node in JavaScript only shows the inline styles. We can use this property to manipulate the inline styles of an element, keep in mind that inline styles has the highest specificity and overwrites any other styles applied.

Adding An Event Listener

var backdrop = document.querySelector('.backdrop');
var modal = document.querySelector('.modal');
var selectPlanButtons = document.querySelectorAll('.plan button');

for (var i = 0; i < selectPlanButtons.length; i++>) {
    selectPlanButtons[i].addEventListener('click', function() {
        modal.style.display = 'block';
        backdrop.style.display = 'block';
    })
}

Adding A Side Navigation

Add a side navigation bar for mobile devices:

 <nav class="mobile-nav">
    <ul class="mobile-nav__items">
        <li class="mobile-nav__item">
            <a href="packages/index.html">Packages</a>
        </li>
        <li class="mobile-nav__item">
            <a href="customers/index.html">Customers</a>
        </li>
        <li class="mobile-nav__item mobile-nav__item--cta">
            <a href="start-hosting/index.html">Start Hosting</a>
        </li>
    </ul>
</nav>

.mobile-nav {
  display: none;
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  background: white;
  width: 80%;
  height: 100vh;
}

.mobile-nav__items {
  width: 90%;
  height: 100%;
  list-style: none;
  margin: 10% auto;
  padding: 0;
  text-align: center;
}

.mobile-nav__item {
  margin: 1rem 0;
}

.mobile-nav__item a {
  font-size: 1.5rem;
}

Opening And Closing The Hamburger Menu

var backdrop = document.querySelector(".backdrop");
var modal = document.querySelector(".modal");
var modalNoButton = document.querySelector(".modal__action--negative");
var selectPlanButtons = document.querySelectorAll(".plan button");
var toggleButton = document.querySelector('.toggle-button');
var mobileNav = document.querySelector('.mobile-nav');

// console.dir(backdrop);
for (var i = 0; i < selectPlanButtons.length; i++) {
  selectPlanButtons[i].addEventListener("click", function() {
    modal.style.display = "block";
    backdrop.style.display = "block";
  });
}

backdrop.addEventListener("click", function() {
    mobileNav.style.display = 'none';
    closeModal();
});

modalNoButton.addEventListener("click", closeModal);

function closeModal() {
  backdrop.style.display = "none";
  modal.style.display = "none";
}

toggleButton.addEventListener('click', function() {
    mobileNav.style.display = 'block';
    backdrop.style.display = 'block';
});

Manipulating Element Classes

Instead of setting inline styles using the style property on html node objects, we can also add or remove css classes to a html node using the classList property.

.open {
    display: block !important;
}

// to display the modal
modal.classList.add('open');
backdrop.classList.add('open');

// to hide the modal
modal.classList.remove('open');
backdrop.classList.remove('open');

Understanding Property Notations

When using css properties using JavaScript, we use camelCase notation instead of kebab-case. e.g. modal.style.backgroundImage.