DEV Community: Zarrukh Jurakulov

JavaScript interview questions: step by step

Zarrukh Jurakulov — Tue, 21 Mar 2023 16:35:47 +0000

Easy

What is the DOM?
What is the “use strict”?
How many data types are in js?
What is the difference between primitive and non-primitive data types?
What is the Symbol data type?
What is the BigInt data type?
What is the difference between strict equality and loose equality?
How many are there ways of creating an Array?
How many are there ways of creating Objects?
How many are there ways of declaring function?

Medium

What is the hoisting?
What is the difference between var, let, and const?
What is the difference between arrow function and function expression?
What is the scope and how many are they?

Hard

What is the prototype?
What is the difference between prototype and proto?
What is the “this (call, apply, bind)”?
What is the closure?
What is an event loop?
What is the callback hell and explain the promise? Promise methods?
What is the polyfill in JS?
JS classes?
Async awaits, try-catch, fetch?
What is a proxy?
Function generator, symbol iterator, for of, for in?
Array methods (forEach, map, reduce, filter)?
Map, Set, WeakMap, WeakSet?
Spread vs Rest?
Object and Array Destruction?
Local storage, session storage, cookies, index DB?

JavaScript Simple Counter

Zarrukh Jurakulov — Wed, 05 Jan 2022 09:52:36 +0000

Hi everyone! We make counter today.
Firstly create 3 files index.html, script.js, style.css.
Firstly open html file and and connect with css and js file.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Counter</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="header">
        <h1>Js mini projects: <span class="mainHeader">Counter</span></h1>
    </div>
    <div class="main">
      <button onclick="decrease()" type="button" name="button" id="minusBtn">-</button>
        <h1 id="countNumber">0</h1>
      <button onclick="increase()" type="button" name="button" id="plusBtn">+</button>
    </div>
    <script src="./script.js" charset="utf-8"></script>
  </body>
</html>

Secondle, we should give some styling.

.header {
  background-color: lightgray;
  width: 30%;
  text-align: center;
  height: auto;
  padding: 3px;
}

.mainHeader {
  color: darkblue;
}

.main {
  background-color: lightgray;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  margin: auto;
  margin-top: 50px;
}

button {
  margin: 10px;
  padding: 10px;
  background: darkgray;
  font-weight: bold;
  width: 50px;
}

Thirdly, we go to the js file.
First of all, we declare a variable equal to 0.

let countingNumber = 0

Then, create two function named increase and decrease.

const decrease = () => {}
const increase = () => {}

Then in function we get value of countNumber with id

const decrease = () => {
  document.getElementById("countNumber").innerHTML;
};
const increase = () => {
  document.getElementById("countNumber").innerHTML;
};

for counting we write prefix increment and prefix decrement operator.

const decrease = () => {
  document.getElementById("countNumber").innerHTML = --countingNumber;
};
const increase = () => {
  document.getElementById("countNumber").innerHTML = ++countingNumber;
};

Full of width of js file.

let countNumber = 0;

const decrease = () => {
  document.getElementById("countNumber").innerHTML = --countNumber;
};

const increase = () => {
  document.getElementById("countNumber").innerHTML = ++countNumber;
};

i18next translation demo

Zarrukh Jurakulov — Sat, 04 Dec 2021 09:08:38 +0000

Tutorial github link:
https://github.com/zarrukh-jurakulov/i18next-translation-demo

Hello everyone! In this tutorial we learn how to translate languages to another. Firstly we create new project :
npx create-react-app i18next-translation-demo.

Firstly we install npm i i18next i18next-browser-languagedetector react-i18next libraries. Then we open locales folder. In locales folder we create en folder for english language and ru for russian language. In both of folder we create translation.json json file.

In en folder of translation.json file we write some codes:

{
  "title": "Welcome to learning i18next library",
  "part1": "Lets start learning",
  "part2": "Click here !"
}

In ru folder of translation.json file we write some codes:

{
  "title": "Добро пожаловать в изучение библиотеки i18next",
  "part1": "Начнем учиться",
  "part2": "Кликните сюда !"
}

Create i18n file and write:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./locales/en/translation.json";
import translationRU from "./locales/ru/translation.json";
import detector from "i18next-browser-languagedetector";
// the translations
const resources = {
  en: {
    translation: translationEN,
  },
  ru: {
    translation: translationRU,
  },
};
i18n
  .use(detector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    fallbackLng: "en", // use en if detected lng is not available
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });
export default i18n;

In App folder we write:

import React from "react";
import { useTranslation } from "react-i18next";
import i18n from "./i18n";
import "./App.css";
// the hoc
function App() {
  const { t } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div>
      <button onClick={() => changeLanguage("en")}>english</button>
      <button onClick={() => changeLanguage("ru")}>russian</button>
      <h1>{t("title")}</h1>
      <h3>{t("part1")}</h3>
      <h3>{t("part2")}</h3>
      <a href='https://www.i18next.com/'>https://www.i18next.com/</a>
    </div>
  );
}
export default App;