• Как сделать в инпутах текст, через js?

    joko_pain
    @joko_pain
    Грешу веб-разработкой и не много дизайном
    Если я вас правильно понял то вам нужно что-то такое:
    <h1 class="Name preName">GGG</h1>
    <p class="Family preSurname">JJJJJJJ</p>
    
    
    <form class="container">
      <input type="text" name="profileName" class="newName inputName" placeholder="Имя" value="Текст">
      <input type="text" name="aboutMe" class="newFamily inputSurname" placeholder="Фамилия" value="Текст">
      <button type class="button">Сохранить</button>
    </form>


    и js:
    //Находим элементы "вёрстки"
    let name = document.querySelector(".preName")
    let surname = document.querySelector(".preSurname")
    
    //Находим инпуты
    let inputName = document.querySelector(".inputName")
    let inputSurname = document.querySelector(".inputSurname")
    
    // Проверяем если элемент не пуст то его содержимое помещаем в инпут
    if (name.innerHTML() !== "") {
        inputName.value = name.innerHTML();
    }
    
    // или можно записать ещё короче
    
    inputSurname.value = (surname.innerHTML() !== "") ? surname.innerHTML() : "";
    Ответ написан
    8 комментариев
  • Оцените дизайн будущего проекта?

    joko_pain
    @joko_pain
    Грешу веб-разработкой и не много дизайном
    Я конечно не великий дизайнер, но буду более многословен чем мои коллеги так сказать.

    Для начала вот что я думаю о текущем дизайне:
    1. Мне кажется что цветовая палитра не плоха, за исключением блока с цитатой, на странице "About", градиент слишком резкий и чёрный цвет шрифта никак не подходит
    2. Шапка слишком простая, попробуйте добавить анимированный фон/слайдер или думаю тут отлично будет смотреться посимвольный вывод "Please rate this page", можете и скомбинировать, но не перегружайте.
    3. Секция "Popular articles". Идея чередовать позицию изображения и карточки в целом выглядит не плохо на бумаге, но после реализации становится понятно: "что-то не так", думаю и вы смотрели на них и думали: "Вроде не плохо, но что-то не так" чуть подробнее об этом будет ниже. Так же тут как по всему сайту есть ещё проблема которую я так же опишу ниже
    4. Градиентный фон "пред-подвальной" части, абсолютно не вписывается в цветовую палитру, я считаю что лучше будет сам подвал сделать больше по высоте и информацию "Have any questions?" и "myemail@gmail.com" перенести в подвал(футер), а отступ сверху соц. иконок в подвале сделать больше раз уж вы дали им такую большую тень при наведении.
    5. Страница "articles". сами по себе такие карточки, не новы, и их давно и успешно используют, тут я лишь хочу отметить, что не стоит делать тень по умолчанию как и тень при наведении столь явной, попробуйте сделать её чуть мягче, и было бы не плохо добавить в них ещё и информацию о дате, авторе, категории и приправить всё это иконками.
    6. Страница "Interesting" по мимо блока с цитатой, о котором я уже говорил, хотелось бы отметить что вы выбрали оттенок синего для тега "b", это не очень хорошая идея так как веб научил людей что текст с оттенком синего это чаще всего ссылка, и человек инстинктивно наводит на нею ожидая этого.


    В целом если это работа из числа первых, то поверьте мне могло быть и хуже))

    Теперь хочу дать несколько советов и так вот они:
    • В вашем дизайне повсеместно нарушается одно из основных правил - "правило внутреннего и внешнего", обязательно прогуглите его, материала на эту тему более чем достаточно, как только вы начнёте его применять сами увидите как преобразится сайт, его стоит применять не только на "текстовых блоках но и по отношению ко всем элементам на странице"
    • Также советую прочитать или посмотреть на ютубе видео про типографику в граф. дизайне. Например это в нём более чем достаточно информации для старта и опять же не забывайте объединять полученные знания.
    • То о чём я говорил когда описывал секцию "Popular articles". Есть в дизайне такое понятие как "F-паттерн", не буду тут его описывать, есть люди что сделали это за меня и сделали гораздо лучше, когда вы прочтёте про него и объедините эти знания с правилом о котором я говорил выше, вы поймёте, что было не так и почему оно казалось не правильным.
    • И последнее, не вполне уверен, но кажется что этот сайт вы верстали что называется "из головы". Мой личный опыт показывает что всегда лучше потратить день а то и два на дизайн в программе которая для этого создана и потом просто верстать по шаблону. Для это есть уйма инструментов: Photoshop, Illustrator, Sketch, XD, Figma и тд. Лично я пользуюсь Figma, она бесплатная, доступна всех устройствах и даёт не плохой функционал.


    Так или иначе, я уверен найдётся люди что со мной не согласятся, но это что называется ИМХО =)
    Надеюсь смог вам помочь. =)
    Ответ написан
    Комментировать
  • Как "налюбить" высоту блока чтобы кнопка заработала?

    joko_pain
    @joko_pain
    Грешу веб-разработкой и не много дизайном
    Просто используйте .scrollTop не на окне, а на самом .page__wrapper.
    let amountScrolled = 100;
    
        $(".page__wrapper").scroll(function() {
          if ( $(".page__wrapper").scrollTop() > amountScrolled ) {
            $('.arrow-up').fadeIn('slow');
          } else {
            $('.arrow-up').fadeOut('slow');
          }
        });
    
        $('.arrow-up').on('click', function() {
          // alert(111);
          $('.page__wrapper').animate({
            scrollTop: 0
          }, 700);
          return false;
        });
    Ответ написан
    Комментировать