123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473 |
- {
- const a = new Person("Вася", "Пупкин")
- const b = new Person("Анна", "Иванова")
- const c = new Person("Елизавета", "Петрова")
- console.log(a.getFullName())
- a.fatherName = 'Иванович'
- console.log(b.getFullName())
- function Person(name, surname) {
- this.name = name,
- this.surname = surname,
- this.getFullName = () => `${this.name} ${this.fatherName || ""} ${this.surname}`
- }
- }
- {
- const a = new Person("Вася", "Пупкин")
- const b = new Person("Анна", "Иванова")
- const c = new Person("Елизавета", "Петрова")
- console.log(a.getFullName())
- a.fatherName = 'Иванович'
- console.log(a.getFullName())
- console.log(b.getFullName())
- function Person(name, surname) {
- Person.prototype.getFullName = function () { return `${this.name} ${this.fatherName || ""} ${this.surname}` }
- this.name = name
- this.surname = surname
- }
- }
- {
- function reducer(state, { type, productName, productQuantity, summ }) {
- if (!state) {
- return {
- пиво: {
- quantity: 100,
- price: 30,
- },
- чипсы: {
- quantity: 100,
- price: 52,
- },
- сиги: {
- quantity: 100,
- price: 89,
- },
- касса: 0
- }
- }
- if (type === 'КУПИТЬ' && productQuantity <= state[productName].quantity && summ >= state[productName].price * productQuantity) {
- return {
- ...state,
- [productName]: {
- quantity: state[productName].quantity - productQuantity,
- price: state[productName].price
- },
- касса: state.касса + state[productName].price * productQuantity
-
- }
- }
- return state
- }
-
- function createStore(reducer) {
- let state = reducer(undefined, {})
- let cbs = []
- this.getState = () => state
- this.dispatch = action => {
- const newState = reducer(state, action)
- if (newState !== state) {
- state = newState
- for (let cb of cbs) cb()
- }
- }
- this.subscribe = cb => (cbs.push(cb),
- () => cbs = cbs.filter(c => c !== cb))
- }
- function actionCreator(type, productName, productQuantity, summ) {
- return {
- type,
- productName,
- productQuantity,
- summ
- }
- }
- const store = new createStore(reducer)
- myState = store.getState()
- const showcase = document.createElement('section')
- document.body.append(showcase)
- showcase.classList.add('showcase')
- const orderSection = document.createElement('section')
- document.body.append(orderSection)
- orderSection.classList.add('orderSection')
- const orderSelectProd = document.createElement('select')
- orderSection.append(orderSelectProd)
- const orderInputQuantity = document.createElement('input')
- orderInputQuantity.type = 'number'
- orderInputQuantity.min = '0'
- orderSection.append(orderInputQuantity)
- const orderInputQuantityName = document.createElement('div')
- orderInputQuantity.before(orderInputQuantityName)
- orderInputQuantityName.innerText = 'количество товара:'
- const orderSendMoney = document.createElement('input')
- orderSendMoney.type = 'number'
- orderSendMoney.min = '0'
- orderSection.append(orderSendMoney)
- const orderSendMoneyName = document.createElement('div')
- orderSendMoney.before(orderSendMoneyName)
- orderSendMoneyName.innerText = 'сумма:'
- const orderBuyButton = document.createElement('input')
- orderBuyButton.type = 'button'
- orderBuyButton.value = 'КУПИТЬ'
- orderSection.append(orderBuyButton)
- orderBuyButton.onclick = () => { store.dispatch(actionCreator(orderBuyButton.value, orderSelectProd.value, +orderInputQuantity.value, +orderSendMoney.value)) }
- for (const elemProduct in store.getState()) {
- if (elemProduct === 'касса') continue
- const productCard = document.createElement('div')
- const productName = document.createElement('h2')
- const productPrice = document.createElement('div')
- const productQuantity = document.createElement('div')
- productCard.append(productName)
- productCard.append(productQuantity)
- productCard.append(productPrice)
- showcase.append(productCard)
- productCard.classList.add('productCard')
- productName.classList.add('productName')
- productPrice.classList.add('productPrice')
- productQuantity.classList.add('productQuantity')
- productName.innerText = elemProduct
- productPrice.innerText = store.getState()[elemProduct].price + ' грн'
- productQuantity.innerText = store.getState()[elemProduct].quantity + ' шт\nв наличии'
- const selectProdOption = document.createElement('option')
- selectProdOption.value = selectProdOption.innerText = elemProduct
- orderSelectProd.append(selectProdOption)
- const productPriceUnsubscribe = store.subscribe(() => {
- productPrice.innerText = store.getState()[elemProduct].price + ' грн'
- })
- const productQuantityUnsubscribe = store.subscribe(() => {
- productQuantity.innerText = store.getState()[elemProduct].quantity + ' шт\nв наличии'
- })
- }
- }
- {
- function Password(parent, open) {
- const inputPass = document.createElement('input')
- parent.append(inputPass)
- const checkboxPass = document.createElement('input')
- checkboxPass.type = 'checkbox'
- parent.append(checkboxPass)
-
- this.setValue = (value) => {
- inputPass.value = value
- if (typeof this.onChange === 'function') this.onChange(this.getValue())
- }
- this.getValue = () => inputPass.value
- this.setOpen = (open) => {
- if (open) {
- checkboxPass.checked = true
- inputPass.type = "text"
- }
- if (!open) {
- checkboxPass.checked = false
- inputPass.type = "password"
- }
- if (typeof this.onOpenChange === 'function') this.onOpenChange(this.getOpen())
- }
- this.getOpen = () => checkboxPass.checked
- this.setOpen(open)
- inputPass.oninput = () => this.setValue(this.getValue())
- checkboxPass.oninput = () => this.setOpen(this.getOpen())
- }
- let p = new Password(document.body, true)
- p.onChange = data => console.log(data)
- p.onOpenChange = open => console.log(open)
- p.setValue('qwerty')
- console.log(p.getValue())
- p.setOpen(false)
- console.log(p.getOpen())
- }
- {
- function Password(parent, open) {
- const inputPass = document.createElement('input')
- parent.append(inputPass)
- const checkboxPass = document.createElement('input')
- checkboxPass.type = 'checkbox'
- parent.append(checkboxPass)
-
- this.setValue = (value) => {
- inputPass.value = value
- if (typeof this.onChange === 'function') this.onChange(this.getValue())
- }
- this.getValue = () => inputPass.value
- this.setOpen = (open) => {
- if (open) {
- checkboxPass.checked = true
- inputPass.type = "text"
- }
- if (!open) {
- checkboxPass.checked = false
- inputPass.type = "password"
- }
- if (typeof this.onOpenChange === 'function') this.onOpenChange(this.getOpen())
- }
- this.getOpen = () => checkboxPass.checked
- this.setOpen(open)
- inputPass.oninput = () => this.setValue(this.getValue())
- checkboxPass.oninput = () => this.setOpen(this.getOpen())
- }
- const LoginForm = document.createElement('div')
- document.body.append(LoginForm)
- const inputLogin = document.createElement('input')
- LoginForm.append(inputLogin)
- let p = new Password(LoginForm, false)
-
- const inputButton = document.createElement('input')
- inputButton.type = 'button'
- inputButton.value = 'войти'
- LoginForm.append(inputButton)
- inputButton.disabled = true
- p.onChange = () => checkButtonDisabled()
- inputLogin.oninput = () => checkButtonDisabled()
- function checkButtonDisabled () {
- if (p.getValue() && inputLogin.value) inputButton.disabled = false
- else inputButton.disabled = true
- }
- }
- {
- function LoginForm(parent, passOpenDefault){
- function Password(parent, open) {
- const inputPass = document.createElement('input')
- parent.append(inputPass)
- const checkboxPass = document.createElement('input')
- checkboxPass.type = 'checkbox'
- parent.append(checkboxPass)
-
- this.setValue = (value) => {
- inputPass.value = value
- if (typeof this.onChange === 'function') this.onChange(this.getValue())
- }
- this.getValue = () => inputPass.value
- this.setOpen = (open) => {
- if (open) {
- checkboxPass.checked = true
- inputPass.type = "text"
- }
- if (!open) {
- checkboxPass.checked = false
- inputPass.type = "password"
- }
- if (typeof this.onOpenChange === 'function') this.onOpenChange(this.getOpen())
- }
- this.getOpen = () => checkboxPass.checked
-
- this.setOpen(open)
- inputPass.oninput = () => this.setValue(this.getValue())
- checkboxPass.oninput = () => this.setOpen(this.getOpen())
-
- }
-
- const LoginForm = document.createElement('div')
- parent.append(LoginForm)
-
- const inputLogin = document.createElement('input')
- LoginForm.append(inputLogin)
-
- let p = new Password(LoginForm, passOpenDefault)
-
- const inputButton = document.createElement('input')
- inputButton.type = 'button'
- inputButton.value = 'войти'
- LoginForm.append(inputButton)
- inputButton.disabled = true
-
- p.onChange = () => checkButtonDisabled()
- inputLogin.oninput = () => checkButtonDisabled()
-
- function checkButtonDisabled () {
- if (p.getValue() && inputLogin.value) inputButton.disabled = false
- else inputButton.disabled = true
- }
- this.getLogin = () => inputLogin.value
- this.setLogin = (value) => {
- inputLogin.value = value
- checkButtonDisabled()
- }
- this.getPass = () => p.getValue()
- this.setPass = (value) => {
- p.setValue(value)
- checkButtonDisabled()
- }
-
- inputButton.onclick = () => {
- if (typeof this.inputButtonOnclick === 'function') this.inputButtonOnclick()
- }
- }
- const t = new LoginForm (document.body, false)
- t.setPass("1111")
- t.setLogin("Абырвалг")
- t.inputButtonOnclick = () => alert ('заходи - не бойся, выходи - не плачь')
- }
- {
- function Password(parent, open) {
- const inputPass = document.createElement('input')
- parent.append(inputPass)
- const checkboxPass = document.createElement('input')
- checkboxPass.type = 'checkbox'
- parent.append(checkboxPass)
-
- this.setValue = (value) => {
- inputPass.value = value
- if (typeof this.onChange === 'function') this.onChange(this.getValue())
- }
- this.getValue = () => inputPass.value
- this.setOpen = (open) => {
- if (open) {
- checkboxPass.checked = true
- inputPass.type = "text"
- }
- if (!open) {
- checkboxPass.checked = false
- inputPass.type = "password"
- }
- if (typeof this.onOpenChange === 'function') this.onOpenChange(this.getOpen())
- }
- this.getOpen = () => checkboxPass.checked
- this.getinputPass = () => inputPass
- this.setOpen(open)
- inputPass.oninput = () => this.setValue(this.getValue())
- checkboxPass.oninput = () => this.setOpen(this.getOpen())
- }
- const pass1 = document.createElement('div')
- document.body.append(pass1)
- const pass2 = document.createElement('div')
- document.body.append(pass2)
- const p1 = new Password (pass1, false)
- const p2 = new Password (pass2, false)
-
- Password.prototype.onChange = function () { passInputEqalityCheck(p1, p2) }
-
- const passInputEqalityCheck = (pass1, pass2) => {
- if ( pass1.getValue() !== pass2.getValue() ) {
- pass1.getinputPass().style.borderColor = 'red'
- pass2.getinputPass().style.borderColor = 'red'
- } else {
- pass1.getinputPass().style.borderColor = 'green'
- pass2.getinputPass().style.borderColor = 'green'
- }
- }
-
- const pass2Open = (pass1GetOpen) => {
- if (pass1GetOpen === true) pass2.style.display = 'none'
- else pass2.style.display = 'block'
- }
- p1.onOpenChange = function () {
- pass2Open (this.getOpen() )
- }
- }
|