Иван, добрый день! А почему мы следующие валидации поместили в changeModalState.js, а не в forms.js? checkNumInputs("#width"); checkNumInputs("#height"); По-идее, ведь, это не относится никак к модулю changeModalState. Да, и второй момент, есть баг. У нас по умолчанию выбрано деревянное остекление. Если мы не будем выбирать другой вариант, то деревянное остекление не запишется в state.
@@campfireschool будет много просмотров, не первый раз нахожу каналы с крутым контентом и не разу не видел ,что бы они не выстреливали. В один один момент попрут просмотры и все.
@@campfireschool Иван, пожалуйста дайте ссылку или создайте видео, для только только вот "подснежников", не могу реализовать практику. 1. создаем кнопку( тут понятно) 2. кнопка 1 на экране, после ее нажатия всплывает модульное окно с простыми действиями, посчитать или умножить. Не понимаю как реализовать данный замысел для практики...
Если не клацать в самом начале по выбору формы окна (например клиента устраивает форма по умолчанию 1 таб) и в select тоже оставить по умолчанию (деревянное окно), то эти данные не передаются на сервер - array(5) { ["user_name"]=> string(10) "слава" ["user_phone"]=> string(8) "12345678" ["width"]=> string(3) "100" ["height"]=> string(3) "200" ["profile"]=> string(12) "теплое" }
Чет сложное дз) Как сделать валидацию не пойму. Еще проблема в том, что если пользователь не выберет тип окна на первой модалке или тип остекления, где селект, то в стейт ничего не заносится, хотя это как бы значения по умолчанию. Может быть надо иницилизировать стейт с дефолтными значениями?
@@АннаШвецова-б7ъ я тоже не особо пока силен в js, поэтому пришлось посидеть над решением, и это как снежный ком - начинает одно за другое цепляться и размер кода разрастается))) я тоже осуществил проверку заполненности полей за счет наличия требуемых свойств у объекта modalState, но без использования alert, после отправки формы еще нужно удалить все свойства у объекта modalState, т.к. чтобы не было багов, если пользователь снова откроет это модальное окно, ну и очистка не только инпутов, но также селекта, чекбоксов и возвращение табов выбора формы в первоначальное значение. Решение выложил на гитхаб github.com/arokokko/plastic_windows/tree/calculator , branch 'calculator' последние 3 коммита посвящены этому, кому будет интересно заглядывайте, предлагайте свои доработки
@@aleksgavrilovcoach Да, спасибо большое за то, что код выложил, а то я 4 часа сидел мучался решал. Но зато реализовал другие функции которые ты не сделал. Как успехи сейчас?
Привет! Я ученик с beonmax! Очень круто все доходит! Замечательный преподаватель! Можно вопрос? Я прохожу курс веб-разработчик 2019. Следующий курс - кончено же полный Js. Можно ли создавать сайты(хотя бы одностраничные) зная html и Js. И конечно же компиляторы и всё то, что входит в данные курсы =)
@@daniilkuzmichev466 Советую пока сконцентриваться на одном языке и когда уже комфортно будешь себя чувствовать в этом языке, то уже особых проблем не будет переходить на другие, так как основы то одни у них всех.
Отлично все объясняете. Архитектура эта модульная на основе import доступна благодаря webpack? Если gulp сборка, то просто файлы с модулями склеивать или в одном файле все делать?
по стандарту в селекте выбран тип деревянного остекления, и если пользователь не трогает селект, то этот тип не запоминается, как пофиксить? Как сделать тип по дефолту? Единственное решение, которое я знаю, это вместо уже выбранного типа сделать надпись "выбрать тип" и по клику уже открывать список
@@campfireschool прошел теоретический курс (11 часов), слушаю уроки и понимаю, что сам не написал бы ничего, как тренировать именно самостоятельное написание кода?
Всім привіт! Дякую за Ваше відео! Навчаємося в 2023 попри все
Спасибо большое, это просто отвал бошки!
Потрясающе! 2022 все работает, кайф!)
Круто! Это не тяп-ляп, а реальный уровень, такие ребята мотивируют, спасибо!
Мощно, сразу видно уровень исполнителя..
Спасибо! Отличный урок)
Спасибо большое за урок, у меня все получилось, нужно просто все делать очень внимательно, из-за этого были ошибки
Я по-любому на этом этапе начал бы городить тонны бесполезного кода, как всегда все усложняя, как научиться использовать такие же простые способы?
Иван, добрый день!
А почему мы следующие валидации поместили в changeModalState.js, а не в forms.js?
checkNumInputs("#width");
checkNumInputs("#height");
По-идее, ведь, это не относится никак к модулю changeModalState.
Да, и второй момент, есть баг. У нас по умолчанию выбрано деревянное остекление. Если мы не будем выбирать другой вариант, то деревянное остекление не запишется в state.
Контент очень хороший. Спасибо Иван. Только что то просмотров маловато.
Лайкайте, делитесь :)
@@campfireschool будет много просмотров, не первый раз нахожу каналы с крутым контентом и не разу не видел ,что бы они не выстреливали. В один один момент попрут просмотры и все.
мало кто доходит до такого уровня). Гораздо выгодней клипать ролики по основам
@@campfireschool Иван, пожалуйста дайте ссылку или создайте видео, для только только вот "подснежников", не могу реализовать практику.
1. создаем кнопку( тут понятно)
2. кнопка 1 на экране, после ее нажатия всплывает модульное окно с простыми действиями, посчитать или умножить.
Не понимаю как реализовать данный замысел для практики...
Очень полезный видос, спасибо! Тоже реализовывал подобный кейс
Спасбо огромное за такой отличный контент!
Если не клацать в самом начале по выбору формы окна (например клиента устраивает форма по умолчанию 1 таб) и в select тоже оставить по умолчанию (деревянное окно), то эти данные не передаются на сервер - array(5) {
["user_name"]=>
string(10) "слава"
["user_phone"]=>
string(8) "12345678"
["width"]=>
string(3) "100"
["height"]=>
string(3) "200"
["profile"]=>
string(12) "теплое"
}
Чет сложное дз) Как сделать валидацию не пойму. Еще проблема в том, что если пользователь не выберет тип окна на первой модалке или тип остекления, где селект, то в стейт ничего не заносится, хотя это как бы значения по умолчанию. Может быть надо иницилизировать стейт с дефолтными значениями?
Вот да))) я тоже потупила. И не уверена, что мое решение красивое. Правда работает. Лучше я не придумала. Оправдываю себя тем, что я не просто не джун, а недобейби пока что в js)))))) Если кто укажет на корявости и подскажет, как красиво, буду благодарна.
в main js в вызов функции modals, добавила modalState -> modals(modalState);
И в файлу modals.js в части, где обрабатывается событие по клику на триггер, поменяла код:
const modals = (state) => {
function bindModals(triggerSelector, modalSelector, closeSelector, closeOnClick = true) {
const trigger = document.querySelectorAll(triggerSelector),
modal = document.querySelector(modalSelector),
close = document.querySelector(closeSelector),
allModals = document.querySelectorAll('[data-modal]');
trigger.forEach((item) => {
item.addEventListener('click', (e) => {
if (e.target) {
e.preventDefault();
}
function hide() {
allModals.forEach((item) => {
item.style.display = 'none';
});
modal.style.display = 'block';
document.body.style.overflow = 'hidden';
}
switch (modalSelector) {
case '.popup_calc_profile':
if (!state.width || !state.height) {
alert('укажите размер окна');
} else {
hide();
}
break;
case '.popup_calc_end':
if (!state.profile) {
alert('выберите профиль');
} else {
hide();
}
break;
default:
hide();
break;
}
});
});
close.addEventListener('click', () => {
allModals.forEach((item) => {
item.style.display = 'none';
});
modal.style.display = 'none';
document.body.style.overflow = '';
});
modal.addEventListener('click', (e) => {
if (e.target === modal && closeOnClick) {
allModals.forEach((item) => {
item.style.display = 'none';
});
modal.style.display = 'none';
document.body.style.overflow = '';
}
});
}
function showModalAfter(selector, time) {
setTimeout(() => {
document.querySelector(selector).style.display = 'block';
document.body.style.overflow = 'hidden';
}, time);
}
bindModals('.popup_engineer_btn', '.popup_engineer', '.popup_engineer .popup_close');
bindModals('.phone_link', '.popup', '.popup .popup_close');
bindModals('.popup_calc_btn', '.popup_calc', '.popup_calc_close', false);
bindModals('.popup_calc_button', '.popup_calc_profile', '.popup_calc_profile_close', false);
bindModals('.popup_calc_profile_button', '.popup_calc_end', '.popup_calc_end_close', false);
// showModalAfter('.popup', 6e4);
};
export default modals;
@@АннаШвецова-б7ъ я тоже не особо пока силен в js, поэтому пришлось посидеть над решением, и это как снежный ком - начинает одно за другое цепляться и размер кода разрастается))) я тоже осуществил проверку заполненности полей за счет наличия требуемых свойств у объекта modalState, но без использования alert, после отправки формы еще нужно удалить все свойства у объекта modalState, т.к. чтобы не было багов, если пользователь снова откроет это модальное окно, ну и очистка не только инпутов, но также селекта, чекбоксов и возвращение табов выбора формы в первоначальное значение. Решение выложил на гитхаб github.com/arokokko/plastic_windows/tree/calculator , branch 'calculator' последние 3 коммита посвящены этому, кому будет интересно заглядывайте, предлагайте свои доработки
@@aleksgavrilovcoach Да, спасибо большое за то, что код выложил, а то я 4 часа сидел мучался решал. Но зато реализовал другие функции которые ты не сделал. Как успехи сейчас?
Привет! Я ученик с beonmax! Очень круто все доходит! Замечательный преподаватель! Можно вопрос? Я прохожу курс веб-разработчик 2019. Следующий курс - кончено же полный Js. Можно ли создавать сайты(хотя бы одностраничные) зная html и Js. И конечно же компиляторы и всё то, что входит в данные курсы =)
Daniil Kuzmichev добрый день) да, конечно же можно)
Прошу прощения, но я задам еще вопрос. Что вы думаете о Python? Я собираюсь его изучать после Js.
@@daniilkuzmichev466 Советую пока сконцентриваться на одном языке и когда уже комфортно будешь себя чувствовать в этом языке, то уже особых проблем не будет переходить на другие, так как основы то одни у них всех.
А зачем для каждого шага создавать отдельную модалку? не лучше ли сделать одну модалку, в которой и будут все шаги?
Отлично все объясняете.
Архитектура эта модульная на основе import доступна благодаря webpack? Если gulp сборка, то просто файлы с модулями склеивать или в одном файле все делать?
Константин К да, именно webpack собирает все модули в один файл.
Если без него - то придется весь код прописывать в одном файле, что не есть круто)
@@campfireschool а как реализовать подключение модулей без него,? А то не сильно понимаю нужен ли он в простых проектах как и сам gulp
номер телефона в буквах ушел после калькулятора окна
по стандарту в селекте выбран тип деревянного остекления, и если пользователь не трогает селект, то этот тип не запоминается, как пофиксить?
Как сделать тип по дефолту?
Единственное решение, которое я знаю, это вместо уже выбранного типа сделать надпись "выбрать тип" и по клику уже открывать список
Класс
Смотреть на скорости 0.5 в самый раз, можно успеть понять что говорит и код рассмотреть
может не чекбоксы, а инпуты? Доступность, все дела
ту мач сложно, это сколько надо лет задрачивать js чтоб так писать?)
alex cherepanov пару месяцев 🙂
@@campfireschool как учился ?
@@campfireschool прошел теоретический курс (11 часов), слушаю уроки и понимаю, что сам не написал бы ничего, как тренировать именно самостоятельное написание кода?
@@campfireschool как практиковались?