Как бы вы решили эту задачу?

Question

[fgehte]

Все привет!
Нужно создать функцию, которая принимает массив чисел и возвращает преобразованную строку
- Есть строка '102px 32px 50px 30px 48px 116px 24px'
- Нужно создать из строки массив чисел [102, 32, 50 ...]
- Имея массив чисел, нужно создать "условно" сетку из строк с помощью linear-gradient св-ва background
- В градиенте должно быть 7(из условия) строк и у каждой должен быть "условный" border-top и border-bottom
- Сама функция должна возвращать строку следующего вида:

'linear-gradient("to bottom, 
  black 0px, black 1px,             // верхний border,
  tomato 1px, tomato 102px,         // сама строка 
  black 102px, black 103px,         // нижний border для первой строки и верхний для второй
  tomato 103px, tomato 135px(103 + 32),   // вторая строка
  black 135px, black 136px // нижний border для второй строки
")' и тд. - пример двух строк

Как бы вы решили эту задачу? Загляну за ответом после того как решу сам)

Comments

[0xD34F]

Загляну за ответом после того как решу сам

Верю.

"Я бездарный говнокодер, не знаю, чего делать. Так что давайте-ка вы, уроды, накидаете мне решений."

[fgehte]

0xD34F, Самокритично!
А если серьезно, то почему бы и не поверить? В любом случае это будет на моей совести.
Решил эту задачу вчера, но без использования градиента. Сегодня решил переделать с помощью градиента, и да, вызвало больше трудностей чем вчера с помощью дивов. Не собираюсь смотреть ответ в пустую сам не попробовав, если так и не получиться решить, то есть этот вопрос где знающие люди смогут помочь!

[dmitry-toster]

fgehte, тут так не принято. сначала решите (по крайней мере попытайтесь), покажите свой код, а там будет видно

[fgehte]

dmitry-toster,

тут так не принято

по крайней мере попытайтесь

Небо и земля, в уровне ответов Вашего комментария и первого!
Согласен, что так будет правильнее. Скину как решу.

[lamer350]

fgehte, простите, но задача простая же. О каких решениях речь?
1. Распарсить строку на массив
2. Пробежаться по массиву составить карту градиента, условия же простые текщее число массива +1 и сложить текущее и следующе
3. Подставляем карту градиента в css

Что тут можно сделать по другому?
Почему сложность - средняя?
Это задача из каких то тупых учебников что ли?

[fgehte]

Ваш ход

const arr = `102.4px 32px 49.8px 30px 48px 116px 24px`.split(' ').map(it => Math.round(parseFloat(it)))

  function createRow(arr) {
    let sum = 0
    let oldSum = 0

    return arr.map((value, i, arr) => {
      if (i === 0) {
        sum += value
        return `
          tomato 1px, tomato ${value}px,
        `
      } else if (i < arr.length) {
        oldSum = sum + i
        sum += value
        return `
          black ${oldSum - 1}px, black ${oldSum}px,
          tomato ${oldSum}px, tomato ${sum + i}px,
          ${i === arr.length - 1 ? `black ${sum + i}px, black ${sum + i + 1}px` : ``}
        `
      }
    }).join(`\n`)
  }
  const linearGradient = `linear-gradient(to bottom, black 0px, black 1px, ${createRow(arr)})`

  console.log(linearGradient)

[fgehte]

lamer350,
О тех решениях, авторы которых могут написать опираясь на свой опыт

простите, но задача простая же. О каких решениях речь?

Всё можно сделать по другому, вопрос только как до этого додуматься

Что тут можно сделать по другому?

Для Вас легкая, для меня чуть труднее, для кого-то вообще не выполнимая. Всё относительно)

Почему сложность - средняя?

Нет. Захотел написать код, который ищет по странице элементы с классом "grid" и строит сетку на основе grid-templat'ов. Код с созданием дивов смог сделать. Решил переделать с помощью псевдоэлементов и градиентов, столкнулся с трудностями, захотел узнать как эту задачу решат "Кураторы" тега JavaScript и все остальные кому интересно было бы. По итогу, все могут только советы давать, а я вроде конкретно в самом начале вопроса попросил показать ВАШЕ решение, а я САМ решу, и потом зайду посмотреть КАКИМИ МОГУТ БЫТЬ решения ещё

Это задача из каких то тупых учебников что ли?

Всем спасибо за крутые решения!

[Вадим]

fgehte, Мне кажется, Вы не совсем верно понимаете суть данного сервиса.

Из правил сервиса, раздел 3:

«Хабр Q&A» не является форумом, чатом или социальной сетью.

Сюда приходят люди и задают вопросы, когда им нужна помощь. Когда они уже что-то попробовали (в идеале перепробовали всё, что знали) и у них не получилось.

Это не сервис с менторами и не кружок по интересам, участникам которого было бы интересно соперничество в решении Вашей задачи.
Это может сработать только если задача покажется сложной и\или интересной, но не потому, что Вы об этом попросили, а только как личный вызов.

Если же всё, что написано выше - не верно, и Вы понимаете суть данного сервиса, то Ваш пассивно-агрессивный выпад что никто не захотел решать Вашу задачу вместо(вместе) вас(с вами) - не уместен.

[fgehte]

Вадим,
Согласен с Вами, что возможно не стоило тут задавать этот вопрос!
Не согласен с Вами, что с моей стороны был "пассивно-агрессивный выпад". Возможно, это видится так со стороны, но это только со стороны.
Если по Вашему мнению мои комментарии можно расценивать как "пассивно-агрессивный выпад", то интересна оценка первого прокомментировавшего)
Поймите, я тут не огрызаюсь на всех кто мне отвечает) Мне просто не понятна позиция первого автора, если же последующие комментаторы, как-то пытались помочь или же указывали на ошибки в области правил сервиса и т.д., то повторюсь позиция первого мне не понятна)

[Вадим]

fgehte, Свою точку зрения озвучивать не стану, однако, поймите, это не важно, понятна Вам чья-то позиция или нет. Это не социальная сеть. Не нравится чей-то ответ - игнорируйте. Это не Ваша проблема. Это проблема того, кто его Вам дал, так как он потратил на это своё время. Бесплатно. Дальнейшее обсуждение выходит за тематику сервиса, поэтому предлагаю на этом закончить.