Добавляет демо калькулятор NTH #4769
Conversation
|
Есть ощущение, что пришло время сделать такой калькулятор в виде демки :) |
Я его тоже рассматривала, он очень хорош) Но мне показалось, что калькулятор на этой странице нужен как раз-таки для тех, кто не умеет писать формулы. Первый калькулятор позволяет делать именно это: указать паттерн и получить готовую формулу. А второй на основе уже готовой формулы отображает паттерн. По красоте, конечно, второй превосходит. Возможно, Светлана права и надо писать самим калькулятор с хорошим дизайном и богатым функционалом!) Я бы взялась, но где-то через месяц, когда освою Джаваскрипт:))) |
|
Всё же уметь посчитать формулы для NTH — важный навык, который пригодиться любому верстальщику (ворчит по-старчески). По предложенной мною ссылке тоже есть пара заготовленных примеров, которые можно ткнуть и получить готовую формулу. Ещё один момент относительно ссылки на кодпен — она может «протухнуть» в любой момент. А CSS-tricks, кажется, будут жить и здравствовать ещё долго =) Предложу альтернативу, между ссылкой на сайт и изготовлением собственного калькулятора с нуля. Может быть мы перетащим код из кодпена к нам? Тогда мы сможем допилить стиль, гарантировать работоспособность демки и нанести пользу. Если ты согласишься на такой вариант, то мы с @skorobaeus поможем =) |
А, этот момент я не учла) Да, я согласна сделать, очень вдохновлена! Правильно понимаю, что этот калькулятор можно оформить внутри существующей статьи (не переходя по ссылке)? Только скажите, с чего начать, и я в деле! |
|
Предлагаю всё делать в этом же пиаре. Просто переименовать его. |
Оки! Спасибо! Беру в работу:) |
makarovaiuliia
changed the title
|
Добрый день! У меня уже есть первые наработки, которые я могу представить. |
|
Чтобы коммиты влились в этот же пиар нужно запушить их в ту же ветку — |
|
Добрый день! Спасибо за ответ, я разобралась! Посмотрите, пожалуйста, в правильном ли направлении я двигаюсь. Моя идея: сделать калькулятор "двухсторонним": то есть соединить функционал двух калькуляторов (пользователь может получить формулу, потыкав на чекбоксы, а также ввести формулу самостоятельно). Что я уже сделала:
Буду рада любой критики и предложениям! Спасибо! |
|
Ах, я очень рада, что этот калькулятор становится реальностью ❤ Мы так давно хотели его добавить! У меня возник такой вопрос: а нужна ли возможность изменять количество элементов в родителе? Работа формул в селекторе от этого не зависит (за редчайшим исключением). Я бы это убрала, наверное — меньше придётся кодить :) Зато предложила бы добавить возможность скопировать в буфер обмена получившуюся формулу. Тогда можно будет задизайнить как-то так:
Я сделала больший акцент на интерактивных элементах, т.к. они являются ключом этой демки, и ещё убрала CSS-правило, ведь на самом деле мы хотим получить только формулу :) |
|
Добрый день! Да, действительно, эта возможность кажется излишней) мне очень нравится дизайн! Прямо отличный! Спасибо, в первой половине недели постараюсь отправить новую версию с обновленным дизайном:) p.s. Случайно нажала close with comment, уже переоткрыла. Надеюсь, что я ничего не сломала…GitHub все еще новый для меня😁 |
|
Всё окей, а если и случится что, всё починим :) |
|
Всем привет! Направляю калькулятор с полным функционалом (по крайней мере, мои тест-способности считают, что он правда работает во всех случаях). Он умеет:
Он умеет считывать все нужные формулы, а именно:
Он умеет выдавать все, которые перечислены в возможностях считывания Из фишек:
Можно добавить заготовленные формулы как у css tricks Насчет дизайна: Я все делала примерно по изображению, но в некоторых местах меняла размеры (например, увеличила ширину ввода формулы, чтобы там могло поместиться три формулы). Прикрепляю макет из Figma. Если что то не нравится по размерам, можно там поправить и мне скинуть, чтобы я точно знала, где и на сколько пикселей менять) |
|
Красота! 😍 Я очень тронута тем, что ты перенесла в фигму макет ❤ Все пришедшие мне в голову формулы сработали, по оформлению вопросов нет, кажется, остаётся только донастроить адаптив. Вот как поле ввода ведёт себя при разных ширинах окна:
Предлагаю сделать его резиновым, чтобы оно заполняло доступное пространство, а между ним и кнопками всегда был гэп:
И сделать мобильно-планшетную версию, в которой квадратики разместить в 3 или 4 ряда (благо, их 12, они встанут красиво), а элементы формы друг под другом. Я обычно делаю только один брейкпоинт (<768px) простоты ради))) |
|
Отлично! Рада, что все работает🥰 Тогда начинаю адаптив - в ближайшие дни будет!) |
|
Всем привет! Держу в курсе: я немного просела на адаптивный верстке...но удачно сложилось, что у меня на курсе фронтенда как раз на следующей неделе будет адаптивная верстка. Если можно, я взяла бы неделю на обучение и уже после сразу применю новые знания. Сейчас я закоммитила следующие изменения: чтоб не слипались поле ввода и кнопка добавила Gap. Так что декстопная версия, хоть и с костылями, но готова более менее. После обучения я изменю css для декстопной версии и добавлю для мобильной |
|
Конечно, давай! Это очень круто ❤ Учимся сами и помогаем другим — пиковый дока-экспириенс! |
|
Всем привет! Добавила адаптивную верстку для калькулятора, старалась сделать резиновой, как могла) Буду рада комментариям, предложениям и критике:) |
Превью контента из 6574f26 опубликовано. |
|
Только после мёрджа вспомнила, что надо отметить твой вклад! Пожалуйста, приноси пиарчик, где добавляешь себя в контрибьюторы этой статьи. Надо будет создать свой профиль в папке people/. Вот тут процесс описан подробнее → https://github.com/doka-guide/content/blob/main/docs/people.md |
* Добавляет рабочую ссылку на калькулятор NTH * Добавляет nth-calculator с неполным функционалом * Добаляет nth-calculator в неполном функционале v.2 * Добавляет демо NTH calculator * Вставляет демо в текст статьи * Ублажает спеллер, форматирует JS * Исправляет опечатку * 😩 ещё раз исправляет опечатку * Добавляет гэп между текстовым импутом и кнопкой * Добавляет адаптивную верстку в nth-calculator --------- Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com> Co-authored-by: Alena Batitskaia <batickaya.a@gmail.com>
Описание
Closes #
Демо https://content-4769.dev.doka.guide/css/child/demos/nth-calculator/
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)