Variable Declaration always follows the pattern of: [ = ];
- Every Variable has a type
.chart { | |
background: #b0e0f8; | |
margin: 5px; | |
} | |
.chart rect { | |
stroke: white; | |
fill: steelblue; | |
} |
Variable Declaration always follows the pattern of: [ = ];
You can use : box-sizing: border-box
so that width takes border-width into calculations.
Use box shadow and set either border or box-shadow to transparent and then color in on hover
.div {
box-shadow: inset 0px 0px 0px 4px transparent;
}
.div:hover {
//animate DOM elemnst using js //setInterval //setInterval function calls a callback function every n milliseconds and we have to pass that n milliseconds as second argument after callback function.
//If you need to achieve 60 FPS, that means you need to move an element 60 times in a second. //That means, element has to move in roughly about (1000 ms /60 frames) = 16.7 ms
//script
var element = document.getElementById('box');
function* repeatedArray(arr) {
let index = 0;
while (true) {
yield arr[index++ % arr.length];
}
}
const lifts = ['squat', 'bench', 'deadlift', 'press'];
const nextLiftGenerator = repeatedArray(lifts);
# A naive recursive solution
def fib(n):
if n == 1 or n == 2:
result = 1
else:
result = fib(n-1) + fib(n-2)
return result
import axios from 'axios';
export const loadJsonHttp = (url, resObj) => {
return fetch(url, resObj)
.then(response => {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
Use Element.getBoundingClientRect() and the window.inner(Width|Height) values to determine if a given element is visible in the viewport. Omit the second argument to determine if the element is entirely visible, or specify true to determine if it is partially visible.
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
const getScrollPos = (el = window) =>
({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
// getScrollPos() -> {x: 0, y: 200}