function getOrientation() {  
    const isPortrait = screen.orientation.type.startswith('portrait')  
    return isPortrait ? 'portrait' : 'landscape'
}

screen.orientation.lock(orientation)

el.requestFullscreen()

document.documentElement.requestFullscreen()

document.exitFullscreen()

if (document.exitFullscreen) {    
    document.exitFullscreen()
}

document.fullscreenElement // returns 'null' or the fullscreen-enabled DOM element

document.fullscreenElement    
    || document.mozFullscreenElement    
    || document.msFullscreenElement    
    || document.webkitFullscreenElement

function toggleFullScreen() { 
    if (!document.fullscreenElement) {   
        document.documentElement.requestFullscreen(); 
    } else {  
        if (document.exitFullscreen) {   
            document.exitFullscreen();  
        } 
    }
}

const options = {  
    root: null, // use viewport  
    threshold: 0.75
}

const observer = new IntersectionObserver(callback, options)

function callback(entry) {
  if (entry.intersectionRatio > 0.75) {
    // ...
  }
}

function callback(entry) {
  if (entry.intersectionRatio > 0.75) {
    entry.target.classList.add('active')
  }
}

function callback(entry) {
  if (entry.intersectionRatio > 0.75) {
    entry.target.classList.add('active')
  } else {
    entry.target.classList.remove('active')
  }
}

let wakelock = null

async function play() {
    // … 
    wakelock = await navigator.wakeLock.request('screen')
}

async function pause() {
  // ...
  await wakelock.release()
}

document.addEventListener('visibilitychange', async () => {  
    if (wadocument.addEventListener('visibilitychange', async () => {  
    if (wakelock !== null && document.visibilityState === 'visible') {    
        wakelock = await navigator.wakeLock.request('screen')  
    }
})

const options = {
    video: {
        cursor: 'always' // show the cursor
    },
    audio: false // don't record audio
}
navigator.mediaDevices.getDisplayMedia(options) // returns a promise

<video autoplay id="preview"></video>

previewElem = document.getElementById('preview')
previewElem.srcObject = await navigator.mediaDevices.getDisplayMedia(options)

let tracks = previewElem.srcObject.getTracks()

tracks.forEach(() => track.stop())
previewElem.srcObject = null

import { openDB } from 'idb';

const db = await openDB('contacts', 1, {
    // Creates a new database if it doesn't exist.
    upgrade(db) {
        db.createObjectStore('contacts', {
            // The 'id' property of the object will be the key.
            keyPath: 'id',
            // If it isn't explicitly set, create a value by auto incrementing.
            autoIncrement: true,
        })

        // Create an index on the 'name' property of the objects.
        store.createIndex('name', 'name');
    }
})

await db.add('contacts', {
    name: 'John Doe',
    age: 25,
    email: 'johndoe@john.doe'
})

// Get all contacts in name order:
const contacts = await db.getAllFromIndex('contacts', 'name')

function subscribe() {
    // ...
    localStorage.setItem('is-newsletter-subscribed', true)
}

function isSubscribed() {
    return localStorage.hasOwnProperty('is-newsletter-subscribed') ? localStorage.getItem('is-newsletter-subscribed') : false
}

// index.js

button.addEventListener('click', (e) => {
    const {x: offsetX, y: offsetY} = button.getBoundingClientRect()
    const [x, y] = [e.clientX - offsetX, e.clientY - offsetY]

    button.style.setProperty('--x', x)
    button.style.setProperty('--y', y)
    // ...
})

// index.js

button.addEventListener('click', (e) => {
    // ...

    const start = performance.now()
    requestAnimationFrame(function step(now) {
        const tick = Math.floor(now - start)
        button.style.setProperty('--tick', tick)

        // Continue animation
        requestAnimationFrame(step)
    })
})

// index.js

button.addEventListener('click', (e) => {
    // ...

    requestAnimationFrame(function step(now) {
        const tick = Math.floor(now - start)
        button.style.setProperty('--tick', tick)

        // Stop the animation after 1 second
        if (tick > 1000) {
            button.style.setProperty('--tick', 0)
            return
        }

        // Continue animation
        requestAnimationFrame(step)
    })
})

// ripple.js

registerPaint('ripple', class {
    static get inputProperties() {
        return ['--x', '--y', '--tick']
    }
})

// ripple.js

registerPaint('ripple', class {
    //...

    paint(ctx, {width}, props) { 
        // Retrieve props
        const x = parseFloat(props.get('--x').toString())
        const y = parseFloat(props.get('--y').toString())
        let tick = parseFloat(props.get('--tick').toString())

        // Clamp tick in [0, 1000]
        if (tick < 0) tick = 0
        if (tick > 1000) tick = 1000

        // Draw ripple
        const rippleColor = 'rgba(255,255,255,0.54)'
        ctx.fillStyle = rippleColor
        ctx.globalAlpha = 1 - tick/1000
        ctx.arc(
            x, y, // center
            width * tick/1000, // radius
            0, 2 * Math.PI // full circle
        )

        ctx.fill()
    }
})

// index.js

if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('ripple.js')
}

button {
    background-color: #0d1117;
    background-image: paint(ripple);
}

const shareData = {
  title: 'Smashing Magazine',
  text: 'Smashing Magazine — For Web Designers And Developers',
  url: 'https://www.smashingmagazine.com/'
}

await navigator.share(shareData)

await navigator.clipboard.writeText('Howdy, partner!')

const text = await navigator.clipboard.readText()

const text = window.getSelection().toString()

document.visibilityState // 'visible' or 'hidden'

let hidden;
let visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

document.addEventListener(visibilityChange, handleVisibilityChange);

function handleVisibilityChange() {
  if (document[hidden]) {
    // page is hidden
  } else {
    // page is visible
  }
}

function handleVisibilityChange() {
  if (document[hidden]) {
    document.title = 'Please stay!!!'
  } else {
    document.title = 'Shopping website'
  }
}