Untitled

Projekt indywidualny



Podejście komponentowe



<div class="btn btn-success">Przycisk</div>
<a href="#" class="btn btn-success">Przycisk</a>
<button class="btn btn-success">Przycisk</button>




<div class="btn btn-success">Normalny zielony przycisk</div>
<div class="btn btn-danger">Normalny czerwony przycisk</div>
<div class="btn btn-lg btn-success">Duży zielony przycisk</div>
<div class="btn btn-sm btn-danger">Mały czerwony przycisk</div>




Przygotowujemy styleguide




<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
<p>Lorem ipsum dolor sit amet, consectetur <strong>adipiscing elit</strong>. Maecenas blandit diam urna, eu <a href="#">dignissim</a> ex dignissim consequat. Duis porta lectus lorem, quis eleifend justo scelerisque eget. Duis ac sem et turpis tincidunt molestie in non ipsum. Maecenas ut augue erat. Phasellus eu est commodo est hendrerit tempor. Mauris dignissim ex vel magna aliquet, sit amet facilisis turpis tincidunt. Fusce quis blandit libero, sed dapibus nisl. Pellentesque vitae ligula sed tellus sagittis dapibus eu non metus. Mauris rutrum ligula ut sapien varius, pellentesque volutpat diam porta. Ut at nunc ac tortor dapibus sodales id at leo. Nunc posuere lorem non feugiat elementum. Nunc sagittis diam justo, nec malesuada sapien tristique id. Vivamus in consequat nibh. Etiam tempor id ligula a dapibus. Proin vitae arcu nulla.</p>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<ul>
  <li>Lorem ipsum dolor, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
  <li>Lorem ipsum dolor <strong>sit amet</strong></li>
  <li>Lorem ipsum dolor <strong>sit amet</strong>, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
</ul>
<ol>
  <li>Lorem ipsum dolor, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
  <li>Lorem ipsum dolor <strong>sit amet</strong></li>
  <li>Lorem ipsum dolor <strong>sit amet</strong>, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
</ol>







Rozszerzamy nasze komponenty






<div class="btn btn-success">Normalny zielony przycisk</div>
<div class"=btn btn-danger">Normalny czerwony przycisk</div>
<div class="btn btn-lg btn-success">Duży zielony przycisk</div>
<div class="btn btn-sm btn-danger">Mały czerwony przycisk</div>










Sterowanie menu




function toggleMenu(visible) {
  document.querySelector('.menu').classList.toggle('show', visible)
}





document.querySelector('.hamburger').addEventListener('click', function(e) {
  e.preventDefault();
  toggleMenu()
});




HTML5 srcset




<img
  src="/images/foo.png"
  alt="bar"
  srcset="/images/foo-medium.png 1024w,
               /images/foo-large.png 2048w,
               /images/foo.png 800w"
/>







<picture>
   <source media="(min-width: 1024px)" srcset="foo-large.jpg  1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />
   <source srcset="foo@2x.jpg 2x, foo.jpg 1x" />
   <img src="foo.jpg" alt="Bar" />
</picture>









Obrazki SVG






<div>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</div>





Label


<input type="checkbox" name="zgoda" id="poleZgody">
<label for="poleZgody">Wyrażam zgodę na przetwarzanie danych...</label>





Własne reguły walidacji w JS




document.querySelector('form').addEventListener('submit', function(event) {
  ...
})






document.querySelector('form').addEventListener('submit', function(event) {
  var isFormValidate = true;
  // Tutaj napiszemy reguły walidacji
  return !isFormValidate ? event.preventDefault() : true;
})








document.querySelector('form').addEventListener('submit', function(event) {
  var isFormValidate = true;

  var emailAddressInput = event.target.querySelector('input[name="email_address"]')
  if(emailAddressInput.value.indexOf('@') < 0) {
    isFormValidate = false;
    emailAddressInput.parentElement.querySelector('.error').innerHTML = 'Błędny adres e-mail';
  }

  return !isFormValidate ? event.preventDefault() : true;
})










Podczepiamy JavaScript







function closeModal() {
  document.getElementById('overlay').classList.remove('show')
}










document.querySelectorAll('#overlay .js--close-modal').forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    e.preventDefault()
    closeModal()
  })
})










document.querySelector('#overlay').addEventListener('click', function(e) {
  if(e.target === this) {
    closeModal()
  }
})












document.addEventListener('keyup', function(e) {
  if(e.keyCode === 27) {
    closeModal()
  }
})









function openModal(modal) {
  document.querySelectorAll('#overlay > *').forEach(function(modal) {
    modal.classList.remove('show')
  })
  document.querySelector('#overlay').classList.add('show')
  document.querySelector(modal).classList.add('show')
}








Tworzymy wykresy






<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>







Implementacja




<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>




<canvas id="myChart"></canvas>