Algo. Anagrams

Is 2 strings are anagrams ? Decision through hash. Complexity O(n).

const s = 'abc';
const s1 = 'cba';

const s2 = 'ac';
const s3 = 'bb';

const hash = (str) => {
let res = 0;  
for (i = 0; i < str.length; i++) {   
  numValue  = str.charCodeAt(i);    
  res = res + (numValue * numValue - numValue - 97) * 35; // to be continued...  
  }   
  return res;  
}
  

document.body.innerHTML = 
  `<div>
 
  <p>${s} = ${s1}   ${(hash(s) === hash(s1))}</p>
  <p>${s2} = ${s3}  ${(hash(s2) === hash(s3))}</p>
  
  </div> `
Posted in Без рубрики | Comments Off on Algo. Anagrams

Js. esLint + prettier in webstorm

as i understood esLint + Prettier will clean and beautify your code, but not all – some thigs you will fix manually.

install eslint, better locally as below (source)

npm install eslint --save-dev

if no package.json create it through the terminal wizard with command

npm init

create a esLint config file through the terminal wizard with command

npx eslint --init

let’s config .eslintrc.js like this

Continue reading

Posted in Без рубрики | Comments Off on Js. esLint + prettier in webstorm

Js.React.Redux.CreateSlice

simplification of work with actions, reducers, etc…

Source

import { createSlice, createAction } from '@reduxjs/toolkit'
import { createStore, combineReducers } from 'redux'

const incrementBy = createAction('incrementBy')
const decrementBy = createAction('decrementBy')

const counter = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
    multiply: {
      reducer: (state, action) => state * action.payload,
      prepare: (value) => ({ payload: value || 2 }), // fallback if the payload is a falsy value
    },
  },
  // "builder callback API", recommended for TypeScript users
  extraReducers: (builder) => {
    builder.addCase(incrementBy, (state, action) => {
      return state + action.payload
    })
    builder.addCase(decrementBy, (state, action) => {
      return state - action.payload
    })
  },
})

const user = createSlice({
  name: 'user',
  initialState: { name: '', age: 20 },
  reducers: {
    setUserName: (state, action) => {
      state.name = action.payload // mutate the state all you want with immer
    },
  },
  // "map object API"
  extraReducers: {
    [counter.actions.increment]: (
      state,
      action /* action will be inferred as "any", as the map notation does not contain type information */
    ) => {
      state.age += 1
    },
  },
})

const reducer = combineReducers({
  counter: counter.reducer,
  user: user.reducer,
})

const store = createStore(reducer)

store.dispatch(counter.actions.increment())
// -> { counter: 1, user: {name : '', age: 21} }
store.dispatch(counter.actions.increment())
// -> { counter: 2, user: {name: '', age: 22} }
store.dispatch(counter.actions.multiply(3))
// -> { counter: 6, user: {name: '', age: 22} }
store.dispatch(counter.actions.multiply())
// -> { counter: 12, user: {name: '', age: 22} }
console.log(`${counter.actions.decrement}`)
// -> "counter/decrement"
store.dispatch(user.actions.setUserName('eric'))
// -> { counter: 6, user: { name: 'eric', age: 22} }
Posted in Без рубрики | Comments Off on Js.React.Redux.CreateSlice

JS.React. Change color of SVG icon

Source

  1. Add the SVG image using an <img> tag.
<img src="dotted-arrow.svg" class="filter-green"/>
  1. To filter to a specific color, use the following Codepen(Click Here to open codepen) to convert a hex color code to a CSS filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. Add the CSS filter into this class.
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
Posted in Без рубрики | Comments Off on JS.React. Change color of SVG icon

Html. Input with clear button

Input with clearButton

Posted in Без рубрики | Comments Off on Html. Input with clear button

JS.React.Counter on hooks

Source

And counter from Rei on his blog and the source code on github

Posted in Без рубрики | Comments Off on JS.React.Counter on hooks

Js.Redux.Use {} for store rather than []

Source

Posted in Без рубрики | Comments Off on Js.Redux.Use {} for store rather than []

Js.Redux.Thunk

Documentation

SimpleExample

Posted in Без рубрики | Comments Off on Js.Redux.Thunk

Js.React.Redux.CounterExample

MyCounter

Source

Posted in Без рубрики | Comments Off on Js.React.Redux.CounterExample

Js.React.Reselect

Source

Docs in russian

selecting data from the state and transfer calculations from view to selectors

Posted in Без рубрики | Comments Off on Js.React.Reselect