HTML, CSS and JavaScript CheatSheet & Key Points

HTML, CSS and JavaScript key points

• Get button value:

<button type="button" class="btn" data-filter="all">All</button>

e.target.dataset.filter; //provide button value

• Hide input outline visibility on click:

CSS-> outline:none

• Control overflow from y axis:

CSS -> overflow-y: scroll

• For hide scroll bar:

CSS -> 

#container::-webkit-scrollbar {

    display: none;

}

• Use for images

CSS-> object-fit: cover

• Dynamic url:

const url = `https://...`;

More correct approach to fetch data from API:

async function search(){

    const url = 'http://...';

    const res = await fetch(rul);

    const data = await res.json();

    console.log(data);

}

CSS background properties:

background: red url()no-repeat,center center/cover;

    background-size: 10%;

Script for pre loader:

const loader = document.getElementById('loader');

window.addEventListener('load', () =>{

    loader.style.display = 'none';

});

//this will load fast on local host, but its real working will see on server

CSS Flex:

flex: 0 0 21%;

HTML:

Menu icon -> &#9776; and &times;