Javanoscript + React - Day 20

useSet

Implement a useSet hook that manages a JavaScript Set of items with additional utility methods.

It is more convenient to use useSet over plain useState because in the latter case, you would always have to create a new Set, mutate it, then set state to use the new set, which can be quite cumbersome.

The hook should work generically with items of any types.

export default function Component() {
  const { set, add, remove, toggle, reset, clear } = useSet(new Set(['hello']));

  return (
    <div>
      <button onClick={() => add(Date.now().toString())}>Add</button>
      <button onClick={() => remove('hello')} disabled={!has('hello')}>
        Remove 'hello'
      </button>
      <button onClick={() => toggle('hello')}>Toggle hello</button>
      <button onClick={() => reset()}>Reset</button>
      <button onClick={() => clear()}>Clear</button>
      <pre>{JSON.stringify(Array.from(set), null, 2)}</pre>
    </div>
  );
}

Arguments

- initialState: The initial Set of items

Returns

The hook returns an object with the following properties:

- set: The current set of items
- add: (item) => void: A function that adds item to the set
- remove: (item) => void: A function that removes item from the set
- toggle: (item) => void: A function that toggles the presence of item in the set
- reset: () => void: A function that resets the set to initialState
- clear: () => void: A function that removes all items in the set

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 21

useTimeout

Implement a useTimeout hook that invokes a callback function after a specified delay.

Note that the hooks can be called again with different values since the initial call:

- Different callback: The pending timer should invoke the latest callback. If the timer has already expired, the callback is not executed and no new timer will be set
- Different delay: The previous timeout should be cancelled if the timer hasn't expired, a new timer is set with the new delay value

The primary benefit of useTimeout is so that you don't have to manually clear call clearTimeout() if the component unmounts before the timer expires.

export default function Component() {
  const [loading, setLoading] = useState(true);

  useTimeout(() => setLoading(false), 1000);

  return (
    <div>
      <p>{loading ? 'Loading' : 'Ready'}</p>
    </div>
  );
}

Arguments

1. callback: () => void: A function to be called after the specified delay
2. delay: number | null: The delay in milliseconds before the invocation of the callback function. If null, the timeout is cleared

Returns

Nothing.

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 22

useWindowSize

Implement a useWindowSize hook that returns the current height and width of the window (window.innerHeight and window.innerWidth). It should re-render the component if the screen properties changes.

export default function Component() {
  const screen = useWindowSize();

  return (
    <div>
      <p>The current window dimensions are:</p>
      <code>{JSON.stringify(screen, null, 2)}</code>
    </div>
  );
}

Arguments

Nothing.

Returns

The hook returns an object with the following properties:

- height: number: Current height of the screen
- width: number: Current width of the screen

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 23

Classnames

classnames is a commonly-used utility in modern front end applications to conditionally join CSS class names together. If you've written React applications, you likely have used a similar library.

Implement the classnames function.

Examples

classNames('foo', 'bar'); // 'foo bar'
classNames('foo', { bar: true }); // 'foo bar'
classNames({ 'foo-bar': true }); // 'foo-bar'
classNames({ 'foo-bar': false }); // ''
classNames({ foo: true }, { bar: true }); // 'foo bar'
classNames({ foo: true, bar: true }); // 'foo bar'
classNames({ foo: true, bar: false, qux: true }); // 'foo qux'

Arrays will be recursively flattened as per the rules above.

classNames('a', ['b', { c: true, d: false }]); // 'a b c'

Values can be mixed.

classNames(
  'foo',
  {
    bar: true,
    duck: false,
  },
  'baz',
  { quux: true },
); // 'foo bar baz quux'

Falsey values are ignored.

classNames(null, false, 'bar', undefined, { baz: null }, ''); // 'bar'

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 24

Data Merging

A data set of gym sessions looks like this:

[
  { user: 8, duration: 50, equipment: ['bench'] },
  { user: 7, duration: 150, equipment: ['dumbbell'] },
  { user: 1, duration: 10, equipment: ['barbell'] },
  { user: 7, duration: 100, equipment: ['bike', 'kettlebell'] },
  { user: 7, duration: 200, equipment: ['bike'] },
  { user: 2, duration: 200, equipment: ['treadmill'] },
  { user: 2, duration: 200, equipment: ['bike'] },
];

Each session has the following fields:

- user: User ID of the session's user.
- duration: Duration of the session, in minutes.
- equipment: Array of equipment used during the sessions, in alphabetical order. There are only 5 different equipments.

Implement a method mergeData, which is used to return a unified view of each user's activities by merging data from each user. It has the interface mergeData(sessions). Sessions from the same user should be merged into one object. When merging:

- Sum up the duration fields.
- Combine all the equipment used, de-duplicating the values and sorting alphabetically.

The order of the results should always remain unchanged from the original set, and in the case of merging sessions with the same users, the row should take the place of the earliest occurrence of that user. The input objects should not be modified.

Examples
The following example uses the data set above:

mergeData(sessions);
// [
//   { user: 8, duration: 50, equipment: ['bench'] },
//   { user: 7, duration: 450, equipment: ['bike', 'dumbbell', 'kettlebell'] },
//   { user: 1, duration: 10, equipment: ['barbell'] },
//   { user: 2, duration: 400, equipment: ['bike', 'treadmill'] },
// ];

Data of user 7 and user 2 are merged into the first occurrence of that user.


@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 25

Event Emitter

In the observer pattern (also commonly known as the publish-subscribe model), we can observe/subscribe to events emitted by publishers and execute code whenever an event happens.

Implement an EventEmitter class similar to the one in Node.js that follows such an observer pattern.

Example usage of the EventEmitter class:

const emitter = new EventEmitter();

function addTwoNumbers(a, b) {
  console.log(`The sum is ${a + b}`);
}
emitter.on('foo', addTwoNumbers);
emitter.emit('foo', 2, 5);
// > "The sum is 7"

emitter.on('foo', (a, b) => console.log(`The product is ${a * b}`));
emitter.emit('foo', 4, 5);
// > "The sum is 9"
// > "The product is 20"

emitter.off('foo', addTwoNumbers);
emitter.emit('foo', -3, 9);
// > "The product is -27"

Implement the following APIs:

* new EventEmitter()

Creates an instance of the EventEmitter class. Events and listeners are isolated within the EventEmitter instances they're added to, aka listeners shouldn't react to events emitted by other EventEmitter instances.

* emitter.on(eventName, listener)

Adds a callback function (listener) that will be invoked when an event with the name eventName is emitted.

eventName : string : The name of the event.
listener : Function : The callback function to be invoked when the event occurs.

Returns the EventEmitter instance so that calls can be chained.

* emitter.off(eventName, listener)

Removes the specified listener from the list of listeners for the event with the name eventName.

eventName : string : The name of the event.
listener : Function : Callback function to be removed from the list of listeners for the event.

Returns the EventEmitter instance so that calls can be chained.

* emitter.emit(eventName[, ...args])
Invokes each of the listeners listening to eventName with the supplied arguments in order.

eventName : string : The name of the event.
...args : any : Arguments to invoke the list of listener functions with.

Returns true if the event had listeners, false otherwise.

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 26

Flatten

Implement a function flatten that returns a newly-created array with all sub-array elements concatenated recursively into a single level.

Examples

// Single-level arrays are unaffected.
flatten([1, 2, 3]); // [1, 2, 3]

// Inner arrays are flattened into a single level.
flatten([1, [2, 3]]); // [1, 2, 3]
flatten([
  [1, 2],
  [3, 4],
]); // [1, 2, 3, 4]

// Flattens recursively.
flatten([1, [2, [3, [4, [5]]]]]); // [1, 2, 3, 4, 5]

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + HTML - Day 27

getElementsByStyle

Implement a method getElementsByStyle() that finds DOM elements that are rendered by the browser using the specified style. It is similar to Element.getElementsByClassName() but with some differences:

- It is a pure function which takes in an element, a property string, and a value string representing the style's property/value pair to be matched on the elements descendants. E.g. getElementsByStyle(document.body, 'font-size', '12px').

- Similar to Element.getElementsByClassName(), only descendants of the element argument are searched, not the element itself.

- Return an array of Elements, instead of an HTMLCollection of Elements.

Do not use document.querySelectorAll() which will make the problem trivial otherwise. You will not be allowed to use it during real interviews.

Examples

const doc = new DOMParser().parseFromString(
  `<div>
    <span style="font-size: 12px">Span</span>
    <p style="font-size: 12px">Paragraph</p>
    <blockquote style="font-size: 14px">Blockquote</blockquote>
  </div>`,
  'text/html',
);

getElementsByStyle(doc.body, 'font-size', '12px');
// [span, p] <-- This is an array of elements.

Hint
You might find the Window.getComputedStyle() method helpful.

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + HTML - Day 28

HTML Serializer

Given an object which resembles a DOM tree, implement a function that serializes the object into a formatted string with proper indentation (one tab (\t character) per nesting level) and one tag per line.

Examples

const tree = {
  tag: 'body',
  children: [
    { tag: 'div', children: [{ tag: 'span', children: ['foo', 'bar'] }] },
    { tag: 'div', children: ['baz'] },
  ],
};

serializeHTML(tree);
// Output:
`<body>
  <div>
    <span>
      foo
      bar
    </span>
  </div>
  <div>
    baz
  </div>
</body>`;

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 29

JSON.stringify

Implement a function jsonStringify, similar to JSON.stringify that converts a JavaScript value into a JSON string.

- Only JSON-serializable values (i.e. boolean, number, null, array, object) will be present in the input value.

- Ignore the second and the third optional parameters in the original API.

Examples

jsonStringify({ foo: 'bar' }); // '{"foo":"bar"}'
jsonStringify({ foo: 'bar', bar: [1, 2, 3] }); // '{"foo":"bar","bar":[1,2,3]}'
jsonStringify({ foo: true, bar: false }); // '{"foo":true,"bar":false}'

Other types

jsonStringify(null); // 'null'
jsonStringify(true); // 'true'
jsonStringify(false); // 'false'
jsonStringify(1); // '1'
jsonStringify('foo'); // '"foo"'

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 30

List Format

Given a list of strings, implement a function listFormat that returns the items concatenated into a single string. A common use case would be in summarizing the reactions for social media posts.

The function should support a few options as the second parameter:

- sorted: Sorts the items by alphabetical order.
- length: Show only the first length items, using "and X other(s)" for the remaining. Ignore invalid values (negative, 0, etc).
- unique: Remove duplicate items.

Examples

listFormat([]); // ''

listFormat(['Bob']); // 'Bob'
listFormat(['Bob', 'Alice']); // 'Bob and Alice'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John']);
// 'Bob, Ben, Tim, Jane and John'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 3,
}); // 'Bob, Ben, Tim and 2 others'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 4,
}); // 'Bob, Ben, Tim, Jane and 1 other'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 3,
  sorted: true,
}); // 'Ben, Bob, Jane and 2 others'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John', 'Bob'], {
  length: 3,
  unique: true,
}); // 'Bob, Ben, Tim and 2 others'

listFormat(['Bob', 'Ben', 'Tim', 'Jane', 'John'], {
  length: 3,
  unique: true,
}); // 'Bob, Ben, Tim and 2 others'

listFormat(['Bob', 'Ben', '', '', 'John']); // 'Bob, Ben and John'

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 31

Memoize

A memoize function is a higher-order function that takes in a function and returns a memoized version of it. The memoized function caches the results of expensive function calls and returns the cached result when it receives the same inputs again. This can significantly improve the performance of functions that involve complex processing / significant latency and are called with the same arguments repeatedly.

Implement a function memoize(func) that takes in a function parameter func and returns a memoized version of the function. You may assume that func only accepts a string or number as its only argument.

Examples

function expensiveFunction(n) {
  console.log('Computing...');
  return n * 2;
}

// Create a memoized version of the function.
const memoizedExpensiveFunction = memoize(expensiveFunction);

// First call (computes and caches the result).
console.log(memoizedExpensiveFunction(5)); // Output: Computing... 10

// Second call with the same argument (returns the cached result).
console.log(memoizedExpensiveFunction(5)); // Output: 10

// Third call with a different argument (computes and caches the new result).
console.log(memoizedExpensiveFunction(10)); // Output: Computing... 20

// Fourth call with the same argument as the third call (returns the cached result).
console.log(memoizedExpensiveFunction(10)); // Output: 20

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 32

Middlewares

Implement a middlewares function that takes any number of middleware functions and composes them into a single callable function. This composed function accepts a context, returns a Promise, and calls each middleware in order.

Each middleware is a function that receives two arguments:

- context: An object shared across all middlewares
- next: A function that invokes the next middleware in the chain

When next() is called, the next middleware should run. If a middleware does not call next, the chain stops.

The execution should be asynchronous and sequential, similar to how middleware works in frameworks like Koa.

Examples

async function fn1(ctx, next) {
  ctx.stack.push('fn1-start');
  await next();
  ctx.stack.push('fn1-end');
}

async function fn2(ctx, next) {
  ctx.stack.push('fn2-start');
  await new Promise((resolve) => setTimeout(resolve, 1000));
  await next();
  ctx.stack.push('fn2-end');
}

function fn3(ctx, next) {
  ctx.stack.push('fn3-start');
  next();
  ctx.stack.push('fn3-end');
}

const composedFn = middlewares(fn1, fn2, fn3);

const context = { stack: [] };
await composedFn(context);

console.log(context.stack);
// ['fn1-start', 'fn2-start', 'fn3-start', 'fn3-end', 'fn2-end', 'fn1-end']

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 33

Promise.all

" Promise.all() is a method that takes an iterable of elements (usually Promises) as an input, and returns a single Promise that resolves to an array of the results of the input promises. This returned promise will resolve when all of the input's promises have resolved, or if the input iterable contains no promises. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error. "

Promise.all() is frequently used when there are multiple concurrent API requests and we want to wait for all of them to have completed to continue with code execution, usually because we depend on data from both responses.

const [userData, postsData, tagsData] = await Promise.all([
  fetch('/api/user'),
  fetch('/api/posts'),
  fetch('/api/tags'),
]);

Let's implement our own version of Promise.all(), a promiseAll function, with the difference being the function takes in an array instead of an iterable. Be sure to read the denoscription carefully and implement accordingly!

Examples

// Resolved example.
const p0 = Promise.resolve(3);
const p1 = 42;
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 100);
});

await promiseAll([p0, p1, p2]); // [3, 42, 'foo']

// Rejection example.
const p0 = Promise.resolve(30);
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('An error occurred!');
  }, 100);
});

try {
  await promiseAll([p0, p1]);
} catch (err) {
  console.log(err); // 'An error occurred!'
}

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

قرار نبود پست بذارم ولی به دلیل کاهش پوزیشن‌های فرانت و افزایش پوزیشن‌های امنیت و دوآپس ، قصد دارم دوره زیر رو برگزار کنم که نفراتی که علاقه دارن ، سوییچ رو شروع کنن. علاوه بر اون , دانش لینوکسی ، بسیار رزومه شما رو قوی میکنه حتی اگر فرانت بمونید.

(اگر خودخوان باشید ، خودتون به راحتی میتونید یادبگیرید و نیاز به دوره ندارید)

عنوان دوره : Linux Essentials

هزینه دوره : ۲ میلیون تومان

زمان برگزاری :

جلسه اول : 3 بهمن 1404 ساعت 11 الی 13
جلسه دوم : 10 بهمن 1404 ساعت 11 الی 13
جلسه سوم : 17 بهمن 1404 ساعت 11 الی 13
جلسه چهارم : 24 بهمن 1404 ساعت 11 الی 13
جلسه تکمیلی : 1 اسفند 1404 ساعت 11 الی 13

منبع اصلی :
https://learning.lpi.org/pdfstore/LPI-Learning-Material-010-160-en.pdf

جلسه ۱ — معرفی لینوکس و مفاهیم پایه

هدف کلی: آشنایی با فلسفه و تاریخچه‌ی لینوکس، جامعه‌ی متن باز، و کاربردهای آن.

سرفصل‌ها:

مقدمه: لینوکس چیست؟ تاریخچه و دلیل پیدایش
مفاهیم Free & Open Source Software (FOSS)
کاربردهای لینوکس در دنیای امروز
آشنایی با توزیع‌های مهم لینوکس
تفاوت با دیگر سیستم‌عامل‌ها
نصب و راه‌اندازی یک توزیع ساده (مثلاً Ubuntu یا Fedora)

جلسه ۲ — کار با خط فرمان و مدیریت فایل‌ها

هدف کلی: تسلط به فرمان‌های پایه‌ی لینوکسی و مدیریت فایل‌ها.

سرفصل‌ها:

آشنایی با Shell و ترمینال
فرمان‌های پایه: ls, cd, pwd, cp, mv, rm, mkdir
مسیرهای نسبی و مطلق
کار با دایرکتوری‌ها و فایل‌ها
جستجو: grep, نمایش محتوا: cat, less
استفاده از کمک: man, --help

جلسه ۳ — ابزارهای خط فرمان پیشرفته و اسکریپت‌نویسی

هدف کلی: یادگیری ابزارهای قدرتمند مدیریت داده در خط فرمان و مقدمه‌ای بر اسکریپت‌نویسی.

سرفصل‌ها:

آرشیو و فشرده‌سازی: tar, gzip, zip
ورودی/خروجی و لوله‌ها (Pipes)
دستورات مفید: head, tail, sort, wc, cut
مفاهیم اولیه Bash Scripting
نوشتن اسکریپت‌های ساده (متغیر، حلقه، شرط)
اجرای اسکریپت‌ها و مجوزها

جلسه ۴ — مفاهیم سیستم، امنیت کاربرا و شبکه

هدف کلی: درک ساختار سیستم، مدیریت کاربران، امنیت پایه و ارتباط شبکه.

سرفصل‌ها:

معماری سیستم و درک بخش‌های مختلف لینوکس
مدیریت کاربران و گروه‌ها (useradd, groupadd)
مجوزهای فایل و دایرکتوری (chmod, chown)
شبکه‌ی ساده: IP, اتصال، ابزارهای Network
مرور کامل سرفصل‌ها
تمرین‌های ترکیبی و جمع‌بندی

هدف این دوره ، آشنایی شما با دنیای لینوکسه. قرار نیست خیلی مهارت تخصصی پیدا کنید ولی برای ادامه مسیر ضروریه. اگر از قبل لینوکس بلدید و تمام مفاهیم توی سرفصل‌ها رو مسلطید ، از lpic1 شروع کنید. برای اینکه ببینید بلدید یا نه ، پی دی اف توی لینک رو مطالعه کنید.

در صورت علاقه به شرکت در دوره بهم پیام بدید. @alithecodeguy

دوره ضبط نمیشه.

هزینه این دوره در آنیسا : ۴.۵
مجتمع فنی : ۷.۵

🍁 لطفا این پست رو برای دوستای علاقه‌مندتون بفرستید 🍁

Javanoscript - Day 34

Promise.any

Note: If you haven't completed the Promise.all question, you should attempt that first.

" Promise.any() takes an iterable of elements (usually Promises). It returns a single promise that resolves as soon as any of the elements in the iterable fulfills, with the value of the fulfilled promise. If no promises in the iterable fulfill (if all of the given elements are rejected), then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors. "

" If an empty iterable is passed, then the promise returned by this method is rejected synchronously. The rejected reason is an AggregateError object whose errors property is an empty array. "

Let's implement our own version of Promise.any(), a promiseAny function, with the difference being the function takes in an array instead of an iterable and AggregateErrors returned just have to return an array of error reasons, the message doesn't have to be set. Refer to the AggregateError constructor examples on MDN.

Be sure to read the denoscription carefully and implement accordingly!

Examples

const p0 = Promise.resolve(42);
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(21);
  }, 100);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    resolve(42);
  }, 100);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 400);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    reject(42);
  }, 400);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 100);
});

try {
  await promiseAny([p0, p1]);
} catch (err) {
  console.log(e instanceof AggregateError); // true
  console.log(e.errors); // [ 42, "Err!" ]
}

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript - Day 35

Squash Object

Implement a function that returns a new object after squashing the input object into a single level of depth where nested keys are "squashed" together with a period delimiter (.).

Examples

const object = {
  a: 5,
  b: 6,
  c: {
    f: 9,
    g: {
      m: 17,
      n: 3,
    },
  },
};

squashObject(object); // { a: 5, b: 6, 'c.f': 9, 'c.g.m': 17, 'c.g.n': 3 }

Any keys with null-ish values (null and undefined) are still included in the returned object.

const object = {
  a: { b: null, c: undefined },
};
squashObject(object); // { 'a.b': null, 'a.c': undefined }

It should also work with properties that have arrays as the value:

const object = { a: { b: [1, 2, 3], c: ['foo'] } };
squashObject(object); // { 'a.b.0': 1, 'a.b.1': 2, 'a.b.2': 3, 'a.c.0': 'foo' }

Empty keys should be treated as if that "layer" doesn't exist.

const object = {
  foo: {
    '': { '': 1, bar: 2 },
  },
};
squashObject(object); // { foo: 1, 'foo.bar': 2 }

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 36

useInputControl

Implement a useInputControl hook that manages a controlled input value and tracks additional form input states like:

[Property : Tracks : When it becomes true : When it becomes false]

* Touched : If input has been focused then blurred : When the user blurs the input (focus -> blur) : Never resets automatically

* Dirty : If value has been changed before : When the user types something Never resets automatically : -

* Different : If value is different from the original : When the value is different from the initial : When the value is same as the initial

The handleX functions returned by the hook are meant to be called on the relevant event handlers of <input> in order for the hook to work as intended.

export default function Component() {
  const nameInput = useInputControl('Oliver');

  return (
    <form>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          value={nameInput.value}
          onChange={nameInput.handleChange}
          onBlur={nameInput.handleBlur}
        />
      </div>
      <p>Touched: {nameInput.touched.toString()}</p>
      <p>Dirty: {nameInput.dirty.toString()}</p>
      <p>Different: {nameInput.different.toString()}</p>
      <button type="submit" disabled={!nameInput.different}>
        Submit
      </button>
      <button type="button" onClick={nameInput.reset}>
        Reset
      </button>
    <form>
  );
}

Arguments

- initialValue: string: The initial value of the input

Returns

The hook returns an object with the following properties:

- value: string: The current value of the input
- dirty: boolean: Whether the user has been modified at least once
- touched: boolean: Whether the input was focused and blurred
- different: boolean: Whether the value is different from the initial value
- handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void: A function that updates the value of the input
- handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void: A function that to be called when the input is blurred
- reset: () => void: A function to reset to the initial value as well as the value of all states

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 37

useMediaQuery

Implement a useMediaQuery hook that subscribes and responds to media query changes (e.g. screen size, resolution, orientation, etc.).

export default function Component() {
  const isSmallDevice = useMediaQuery('only screen and (max-width: 768px)');

  return <div>{isSmallDevice && <a href="#">Menu</a>}</div>;
}

Hint: The window.matchMedia API would be helpful.

Arguments

- query: string: The media query to match. It must be a valid CSS media query string

Returns

The hook returns a boolean value that indicates whether the media query is a match.

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87