Fetch ResourceProblem StatementWrite an async function `fetchData(url)` that fetches data from the URL and returns the parsed JSON object.Approach 1. Use the `fetch` API. 2. Await the response. 3. Call and await `.json()`. Solution`async function fetchData(url) { const response = await fetch(url); const data = await response.json(); return data;
LocalStorage SetProblem StatementWrite a function `saveToLocal(key, value)` that saves a string value to the browser's localStorage.Approach 1. Use `localStorage.setItem(key, value)`. Solution`function saveToLocal(key, value) { localStorage.setItem(key, value);
LocalStorage GetProblem StatementWrite a function `getFromLocal(key)` that retrieves a value from localStorage.Approach 1. Use `localStorage.getItem(key)`. Solution`function getFromLocal(key) { return localStorage.getItem(key);
LocalStorage RemoveProblem StatementWrite a function `removeFromLocal(key)` that deletes a specific item from localStorage.Approach 1. Use `localStorage.removeItem(key)`. Solution`function removeFromLocal(key) { localStorage.removeItem(key);
SessionStorage SetProblem StatementWrite a function `saveToSession(key, value)` that saves a value to sessionStorage.Approach 1. Use `sessionStorage.setItem(key, value)`. Solution`function saveToSession(key, value) { sessionStorage.setItem(key, value);
JSON ParsingProblem StatementWrite a function `parseJSON(str)` that converts a JSON string into a JavaScript object.Approach 1. Use `JSON.parse(str)`. Solution`function parseJSON(str) { return JSON.parse(str);
JSON StringifyProblem StatementWrite a function `stringify(obj)` that converts a JavaScript object into a JSON string.Approach 1. Use `JSON.stringify(obj)`. Solution`function stringify(obj) { return JSON.stringify(obj);
Current PositionProblem StatementWrite a function `getPosition(successCb, errorCb)` that requests the user's current geolocation.Approach 1. Use `navigator.geolocation.getCurrentPosition(successCb, errorCb)`. Solution`function getPosition(successCb, errorCb) { navigator.geolocation.getCurrentPosition(successCb, errorCb);
URL Search ParamsProblem StatementWrite a function `getQueryParam(url, param)` that extracts a specific query parameter from a URL string.Approach 1. Use `new URL(url)`. 2. Use `urlObj.searchParams.get(param)`. Solution`function getQueryParam(urlString, param) { const url = new URL(urlString); return url.searchParams.get(param);
Copy to ClipboardProblem StatementWrite an async function `copyText(text)` that copies the provided text to the system clipboard.Approach 1. Use `navigator.clipboard.writeText(text)`. Solution`async function copyText(text) { await navigator.clipboard.writeText(text);
Fetch as BlobProblem StatementWrite an async function `fetchBlob(url)` that fetches an image and returns it as a Blob.Approach 1. Fetch the URL. 2. Await `response.blob()`. Solution`async function fetchBlob(url) { const response = await fetch(url); return await response.blob();
Console TimeProblem StatementUse the console API to start and end a timer labeled "MyTimer".Approach 1. Use `console.time("MyTimer")`. 2. Use `console.timeEnd("MyTimer")`. Solution`function profile() { console.time("MyTimer"); // code... console.timeEnd("MyTimer");
Intersection ObserverProblem StatementWrite a function `observe(element, callback)` that triggers the callback when the element enters the viewport.Approach 1. Create a `new IntersectionObserver(callback)`. 2. Call `observer.observe(element)`. Solution`function observe(element, callback) { const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { callback();
Canvas ContextProblem StatementWrite a function `getCanvas2D(canvas)` that returns the 2D rendering context for a canvas element.Approach 1. Use `canvas.getContext('2d')`. Solution`function getCanvas2D(canvas) { return canvas.getContext('2d');
History PushProblem StatementWrite a function `goToPage(url)` that adds a new entry to the browser's history using the History API.Approach` 1. Use `window.history.pushState({Solution`function goToPage(url) { window.history.pushState({
Listens for BreakpointProblem StatementWrite a function `isMobile(callback)` that calls the callback whenever the screen width crosses 768px.Approach 1. Use `window.matchMedia('(max-width: 768px)')`. 2. Add an event listener to the result. Solution`function isMobile(callback) { const mq = window.matchMedia('(max-width: 768px)'); mq.addEventListener('change', (e) => callback(e.matches));
Scroll PositionProblem StatementWrite a function that returns the current vertical scroll position of the window.Approach 1. Use `window.scrollY`. Solution`function getScrollY() { return window.scrollY;
Dispatch Custom EventProblem StatementWrite a function dispatchCustom(element, name, data) that creates and dispatches a CustomEvent with detail data.Approach 1. Use `new CustomEvent(name, { detail: data })`. 2. Use `element.dispatchEvent(event)`. Solution`function dispatchCustom(element, name, data) { const event = new CustomEvent(name, { detail: data
Request NotificationsProblem StatementWrite a function `requestNotify()` that requests permission for browser notifications and returns the result.Approach 1. Use `Notification.requestPermission()`. Solution`async function requestNotify() { return await Notification.requestPermission();
Device VibrationProblem StatementWrite a function `vibratePhone(ms)` that makes the device vibrate for `ms` milliseconds.Approach 1. Use `navigator.vibrate(ms)`. Solution`function vibratePhone(ms) { if (navigator.vibrate) { navigator.vibrate(ms);