FinGanapre

Может вам нужны не кнопки а радио кнопки или чек боксы в зависимости от логики? Или вообще select option.

Вариант первый:
отдельно выносим диски в две радио кнопки ( hdd, ssd )
отдельно выносим системы в две радио кнопки ( windows, linux )
Обрабатываем через всплытие.

Вариант второй:
Селект с четырьмя заготовленными option: win + ssd / wid + hdd / lin + ssd / lin + hdd

Например так

let num = prompt('Введите трехзначное число');
let sum = 0;
let digit;
let valid = true; // создадим переменную для хранение валидно / не валидно
for ( let i = 0; i < num.length; i++){
    digit = parseInt(num[i]);
    if (digit){
        sum = sum + digit;
    } else{
        valid = false; // зададим значения не валидно
        alert('Ввыдите только числа');
    }
}

// проверим и выведим сумму только если ввод был валиден
valid ? alert(sum) : null; // if ( valid ) { alert(sum)  }

Вы не указали какой шаблонизатор используете в проекте. Но, при этом используете метод render.
Вот пример из документации если используется pug: клик
Если используете какой-то другой, то смотрите, как он подключается. В express есть примеры для всех популярных шаблонизаторов, так что проблем не возникнет:)

Вы перезаписываете содержимое страницы.

Лучше так:
insertAdjacentHTML

То, что исполняется в самом приложении - зависимость ( dependencies )
То, что нужно только для сборки приложения/тестов - зависимость для разработки ( devDependencies )

В репозитории пакета чаще всего указывается правильная команда для установки. Либо просто npm i [name] либо npm i -D [name]. Но я встречал ошибки в некоторых, когда команда написана как npm i, хотя либа нужна только для сборки.

Просто думайте о том, где вы этот пакет применяете. Если знаний не хватает, чтобы это определить, то.. мм.. можно посмотреть package.json в бойлерплейтах.

Ещё вариант для проверки. То, что вы импортируете при разработке приложения (в компонентах и index.js) это dependencies

Это в итоге должен быть сервис, на котором люди создают портфолио или это просто ваше личное портфолио будет тут размещаться?

когда я делал себе портфолио/резюме я добавлял следующее:
1. Базовую информацию о себе ( ФИО, дата рождения, подходящие должности, семейное положение, о себе, зп)
2. Образование
3. Опыт работы
4. Навыки (технологии/ПО/ОС/проф компетенции)
5. Портфолио. Проекты, в которых участвовал (название, дата, описание, ссылка если не nda) с сортировкой по годам
6. Книги (прочитал, читаю сейчас, хочу прочитать)
7. Курсы, сертификаты
8. Youtube каналы, которые смотрю с описание что полезного там нашёл, чему научился

Само резюме делил на 3 блока (резюме - то, о чём 8 пунктов, контакты, pdf )

В контактах собственно контакты и инфа о том согласен ли на релокацию и куда и на каких условиях с картой
В pdf экспорт в pdf:) Чтобы наполнять всё это дело и не париться с оформлением pdf.

this.list.add()

Если я правильно вас понял и вам нужен клик каждый раз при смене слайда, то так:
1. В api находим метод mySwiper.on(event, handler).
2. Переходим в раздел событий. Вас интересует событие slideChange.
3. Пишем обработчик. Он будет запускаться каждый раз, когда слайдер меняет слайд.

Если через phpmyadmin, то ничего не мешает сделать хэш самостоятельно:) например так Первое, что попалось под руку. Думаю есть ещё

Если с примерами, то вам нужно сделать так

Как к этому прийти?
Открываем исходники иконочного шрифта ( например 4 версии )
Видим, что все классы с иконками просто задают :before с content: '/код иконки с сайта'
А основной класс задаёт семейство шрифтов.
Комбинируем в вашем классе то и другое - получаем результат.

Повысьте специфичность селектора или поместите .fix ниже в css чем .number

.number.fix {
background-color: blue;
}

Общий смысл:
1. Нужно получить проценты. Проценты - величина относительная. В моём случае - относительно максимального веса.
2. Становиться ясно, что нужно найти максимальный вес и высчитать относительно него остальные
3. За ширину отвечает width, значит её мы и будем задавать динамически
4. Погнали:) Это только пример. Не нужно реализовывать всё точно так, особенно рендер.

.line {
  height: 10px;
  background-color: #333;
}

// полагаю, вы получаете с сервера нечно такое:
const data = [
  {
    weight: '76'
  },
  {
    weight: '54'
  },
  {
    weight: '30'
  }
]

// находим максимум
const maxWeight = Math.max.apply(null, data.map( item => +item.weight ))

// относительно максимума высчитываем проценты
const percents = data.map( item => {
  return +item.weight / maxWeight * 100
})

// генерируем линии
const generateLine = percents => {
  return percents.map( percent => {
    return `
      <div style="width:${percent}%" class="line"></div>
    `
  }).join('')
}

// делаем функцию для рендеринга
const render = html => {
  document.body.innerHTML = html
}

// рендерим
render( generateLine( percents ) )

Если у вас максимум всегда 10, присваиваем maxWeight 10 и в объекте меняем значения на числа в диапазоне от 0 до 10.

Вот так:
console.log('Значение для выбранного ключа: '+obj[key]);

<form id="form-id">
  <input type="text" name="some_name" value="">
  <input type="text" name="some_name2" value="">
  <button type="submit">Отправить</button>
</form>

window.onload = e => {
  const form = document.querySelector('#form-id')
  
  const formHandler = e => {
    e.preventDefault()
    const formData = new FormData( e.target )
    console.log(...formData)
  }
  
  form.addEventListener('submit', formHandler)
}