thiscodeWorks - Organizing the best of code online

// the oldler way
function heroBtnScroll() {

  const featuresEl = document.querySelector('#section--1');   // target element
  const featuresElPosition = featuresEl.getBoundingClientRect(); // element positioned
  console.log(featuresElPosition);
  const { top, left } = featuresElPosition; //destructure to get positions from the getBoundingClientRect()
  window.scrollTo({
    left: left,
    top: top + window.scrollY,
    behavior: 'smooth',
  });
}
const heroBtn = document.querySelector('.btn--scroll-to');
if (heroBtn) {
  heroBtn.addEventListener('click', heroBtnScroll);
}



//the newer way using scrollIntoView

function heroBtnScroll() {
  const featuresEl = document.querySelector('#section--1');
  featuresEl.scrollIntoView({ behavior: 'smooth' });
}

const heroBtn = document.querySelector('.btn--scroll-to');
if (heroBtn) {
  heroBtn.addEventListener('click', heroBtnScroll);
}




// testing scrolling behaviours with the document and the viewport in the console
window.addEventListener('scroll', () => {
  console.log('Viewport height:', document.documentElement.clientHeight);
  console.log('Vertical scroll position:', window.scrollY);
});

#dom #css #inline #getcomputedstyle

remove 'px' from number

let heightStr = '56.54px';

let number = parseFloat(heightStr.replace('px', ''));
console.log(number)

// or on a DOM Element

 const message = document.querySelector('.message-container');
 console.log(getComputedStyle(message).height);
message.style.height =
    Number.parseFloat(getComputedStyle(message).height, 10) + 22.5 + 'px';

#javascript #dom #events #web #client-side #hander

Handler for event «HTML document has been completely loaded and parsed», JavaScript / web / client-side

document.addEventListener('DOMContentLoaded', function (evt) {
  /* ... */
})

#javascript #array #random #randomarray #dom

Generate Random Number without repetition

let clickMe = document.querySelector('button');

function getRandomNumber(min, max) {
  let totalEle = max - min + 1;
  let result = Math.floor(Math.random() * totalEle) + min;
  return result;
}
function createArrayOfNumber(start, end) {
  let myArray = [];
  for (let i = start; i <= end; i++) {
    myArray.push(i);
  }
  return myArray;
}
let numbersArray = createArrayOfNumber(1, 10);

clickMe.addEventListener('click', () => {
  if (numbersArray.length === 0) {
    console.log('No more random number');
    return;
  }
  let randomIndex = getRandomNumber(0, numbersArray.length - 1);
  let randomNumber = numbersArray[randomIndex];
  numbersArray.splice(randomIndex, 1);
  console.log(randomNumber);
});

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #javascript #jsfunctions #dom #dommanipulation

How to change any attribute of a HTML element

<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

#html #javascript #dom #dommanipulation

innerHTML - How to get or change the inside of a HTML element

<html>	
	<div id="target">
    	<p>This is some text</p>
    </div>

  <script>

    //GET
      var divElement = document.getElementById("target").innerHTML;

    //CHANGE
      var heading = '<h1>Example text</h1>';
      document.getElementById("target").innerHTML = heading;

    //TO MAKE DIV EMPTY
        document.getElementById("target").innerHTML = '';

  </script>
  
</html>

scrolling behaviour test 1

remove 'px' from number

Handler for event «HTML document has been completely loaded and parsed», JavaScript / web / client-side

Generate Random Number without repetition

getAttribute() - how to get the value of any attribute of HTML element

How to change any attribute of a HTML element

innerHTML - How to get or change the inside of a HTML element

Save snippets that work with our extensions