Jump to content

Интересное задание от работодателя


Recommended Posts

Всем привет. Примерно год назад, я пытался устроиться в одну компанию( не помню название). В общем там дали 3 тестовых задания для рассмотрения знаний. Первый был связан с html и css. Остальные два с javascript и mysql. На все про все давалось пол дня. По первому впечатлению первый оказался самым легким, но не тут то было (из-за чего я и провалил тест), о нем и пойдет речь в этой теме, так как с остальными я управился за час.

После провала, я решил не сдаваться и попробовать добить это первое задание. Бился на нем днями. Так его и не решил. Так его и не решили мои знакомые друзья (которые имеют хороший опыт в верстке). Я не знаю в чем подвох, может вы мне подскажите?

 

Вот само задание

Цитата

Имеется HTML разметка:


<style>
    .columns {width: 100%; overflow: hidden;}
    .sidebar-left {width: 300px;}
    .sidebar-right {width: 300px;}
</style>
<div class="columns">
    <div class="content"></div>
    <div class="sidebar-left"></div>
    <div class="sidebar-right"></div>
</div>


Допишите необходимые стили, чтобы на экране блоки отображались в следующем порядке:  sidebar-left,  content,  sidebar-right. При необходимости в разметку можно добавить один блок div. Использование bootstrap, flexbox, javascript и css функции calc запрещено.
Боковые столбцы фиксированные, центральная занимает оставшееся пространство. Высота колонок должна формируется в зависимости от их содержимого, а не от явного ее указания в css.
Запрещается менять местами div контейнеры в html разметке.  Ни одна из колонок не должна перекрывать содержимое, которое может идти сразу под колонками.
 

Может кто из вас сможет его решить, потому что я уже перепробовал очееень много разных способов? Может даже создатель этого задания сидит тут.

В заранее, прежде чем думать, что вы решили его за 5 минут с лета, внимательно прочитайте все условия (Тут не все так просто и вправду нужно подумать)

Никакие советы не принимаются. только готовое решение, которое вы сами уже протестировали. Буду проверять, укажу на ошибки, если будут.

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

Link to post
Share on other sites

Здравствуйте.

Это действительно простая задача, на решение которой требуется не более 5 минут.

Дело в том, что такое решение не актуально много лет, с тех пор как "float" был вытеснен боле современными инструментами. А вот 10-15 лет назад такое можно было увидеть достаточно часто.

Я бы удивился увидев такое тестовое задание последние лет 7 так точно. Самое задание устарело как и его решение.

По моему мнению сейчас давать такое задание — равносильно что кичится.

Link to post
Share on other sites

 

5 часов назад, klierik сказал:

Я бы удивился увидев такое тестовое задание последние лет 7 так точно. Самое задание устарело как и его решение.

По моему мнению сейчас давать такое задание — равносильно что кичится.

У работодателя видно были свои (как и его борода) взгляды на все это.
Решение засчитывается, но с требованием "за 5 минут" я бы поспорил, как минимум из-за margin-right -100%. Я не знаю, что нужно пережить, зная такую хитрость).
Значит пункт с добавлением еще одного div был выходом. Я старался его избежать из-за слов "при необходимости". Не знаю возможно ли его вообще выполнить.

У меня было одно решение (с таблицами), но слабое, так как каждая колонка тянет за собой вертикальный размер:

<html>
	<head>
		<style type="text/css">
			body
			{
				margin: 0px;
			}
			.columns
			{
				display:inline-table;
				table-layout: fixed;
				width: 100%;
				background: #FCE600;
				overflow:hidden;
				position: relative;
			}
			.sidebar-right
			{
				display:table-cell;
				position:relative;
				width: 300px;
				background: #0000ff;
			}
			.sidebar-left
			{
				display:table-cell;
				position:relative;
				right:100%;
				transform: translateX(200%);
				width: 300px;
				background: #ff0000;
			}
			.content
			{
				display:table-cell;
				position:relative;
				right:-300px;
				background: #54B948;
				word-wrap:break-word;
			}
		</style>
	</head>
	<body>
		<div class="columns">
			<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque eius odio eveniet suscipit quidem, vero commodi maiores explicabo ab labore modi? Nostrum veritatis ducimus corporis voluptatibus magni nobis velit veniam.</div>
			<div class="sidebar-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque eius odio eveniet suscipit quidem, vero commodi maiores explicabo ab labore modi? Nostrum veritatis ducimus corporis voluptatibus magni nobis velit veniam.</div>
			<div class="sidebar-right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem deserunt odit illum accusantium esse quo inventore molestias natus quasi quidem tempora, alias ullam expedita minus eius, aspernatur aperiam dolorem nostrum.
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque eius odio eveniet suscipit quidem, vero commodi maiores explicabo ab labore modi? Nostrum veritatis ducimus corporis voluptatibus magni nobis velit veniam.</div>
		</div>
	</body>
</html>


 

Link to post
Share on other sites
1 час назад, envoleon сказал:

Решение засчитывается, но с требованием "за 5 минут" я бы поспорил, как минимум из-за margin-right -100%. Я не знаю, что нужно пережить, зная такую хитрость).

Нужно уметь верстать под IE6 😉

Link to post
Share on other sites
10.11.2019 в 03:09, envoleon сказал:

из-за margin-right -100%. Я не знаю, что нужно пережить, зная такую хитрость).

Нужно просто знать как работают отрицательные маржины 🙂

У меня решение заняло чуть больше времени. Но я искал решение без использования дополнительного div. Единственный минус - не работает в IE6, но ведь в условии про него ничего и не сказано, верно? 🙂 Если бы до меня это сразу дошло, решил бы быстрее, а так где -то минут за 40 управился. Причем я не сказал бы что я хорошо разбираюсь в верстке 🙂

.columns {
  width: 100%;
  overflow: hidden; 
}

.sidebar-left {
  width: 300px;
  float: left;
}

.sidebar-right {
  width: 300px;
  float: right;
}

.content{
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-left: 300px;
  padding-right: 300px;
  margin-right: -100%;
}

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By cozy_eternity
      Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь..

       
      <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
    • By Alex_st22
      Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
       
      Код
      HTML:
      <!DOCTYPE html>
      <html lang="ru">
        <head>
          <meta charset="utf-8">
          <title>Иконы</title>
          <link rel="stylesheet" href="style.css">
        </head>
        <body>      
            <div class="open-button">
                <button onclick="openForm()">Открыть форму</button>
          </div>
          <div class="form-popup" id="IconForm">
                <form class="form-container">
                     <h1>Параметры иконы</h1>
                  <label for="bordercolor"><b>Цвет границы</b></label>
                  <select id='select_bc' size='1'>
                      <option value='#000'>Чёрный</option>
                      <option value='#00f'>Синий</option>
                      <option value='#f00'>Красный</option>
                      <option value='#0f0'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="background"><b>Цвет фигуры</b></label>
                  <select id='select_bg' size='1'>
                      <option value='#fff'>Белый</option>
                      <option value='#bbf'>Синий</option>
                      <option value='#fbb'>Красный</option>
                      <option value='#bfb'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="fontcolor"><b>Цвет текста</b></label>
                  <select id='select_fc' size='1'>
                      <option value='#000'>Чёрный</option>
                      <option value='#00f'>Синий</option>
                      <option value='#f00'>Красный</option>
                      <option value='#0f0'>Зелёный</option>
                  </select>
                  <p></p>
                  <label for="text"><b>Содержание фигуры</b></label>
                  <textarea id="text_in" cols="20" rows="3"></textarea>
                  <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button>
                  <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button>
                </form>
          </div>
          <div id="Draw"></div>
          
          <script type="text/javascript" src="script.js"></script>
        </body>
      </html>
      CSS:
      {box-sizing: border-box;}
      /* Кнопка, используемая для открытия формы */
      .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        width: 280px;
      }
      /* Всплывающая форма-скрыта по умолчанию */
      .form-popup {
        display: none;
        position: fixed;
        border: 3px solid #f1f1f1;
        z-index: 9;
      }
      /* Добавить стили для контейнера формы */
      .form-container {
        max-width: 300px;
        padding: 10px;
        background-color: white;
      }
      /* Поля ввода полной ширины */
      .form-container input[type=text], .form-container input[type=password] {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
      }
      /* Когда входы получают фокус, сделайте что-нибудь */
      .form-container input[type=text]:focus, .form-container input[type=password]:focus {
        background-color: #ddd;
        outline: none;
      }
      /* Стиль для кнопок */
      .form-container .btn {
        background-color: green;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom:10px;
        opacity: 0.85;
      }
      /* Красный цвет фона для кнопки "Отмена" */
      .form-container .cancel {
        background-color: red;
      }
      /* Добавить некоторые эффекты наведения на кнопки */
      .form-container .btn:hover, .open-button:hover {
        opacity: 1;
      }
       
      JS:
      function openForm() {
        document.getElementById("IconForm").style.display = "block";
      }
      function closeForm() {
        document.getElementById("IconForm").style.display = "none";
        return false;
      }
      function drawIcon(bc, bg, fc, text) {
        var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';
        svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';
        svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";   
        svg += text + "</text></svg>";
        alert(svg);
        document.getElementById('Dragon').innerHTML += svg;
        return true;
      }
      function acceptArgs() {
        var bc = document.getElementById("select_bc");
        bc = bc.options[bc.selectedIndex].value;
        var bg = document.getElementById("select_bg");
        bg = bg.options[bg.selectedIndex].value;
        var fc = document.getElementById("select_fc");
        fc = fc.options[fc.selectedIndex].value;
        var text = document.getElementById("text_in").value;
        closeForm();
        drawIcon(bc, bg, fc, text);
        
      }
    • By 7908.96
      <!doctype html> <html>   <head>     <meta charset="utf-8">     <title>Тритон Авто</title>     <style>       * {         margin: 0;         padding: 0;         font-family: Tahoma, Geneva, sans-serif;         color: #2e2e2e;       }       body {         background: #f8f7f3;       }       a {         color: #037d64;       }       #page {         width: 1100px;         margin: 0 auto;       }       #header {         background-image: url(‪C:\Users\vip_c\Desktop\html\img\qq.jpg);       }     </style>   </head>   <body>     <div id="page">       <div id="header">       </div>     </div>   </body> </html>  
  • Member Statistics

    47,172
    Total Members
    1,451
    Most Online
    LilyK
    Newest Member
    LilyK
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Есть бесплатные образовательные сайты для обучения программированию. Вот, например, список одних из - https://thetrickycoders.com/post/kak-nauchitsya-programmirovat. 
    • А давайте все возьмем MS Edge на базе Chromium и начнем делать нормальные PWA, которые устанавливаются в систему. FF сознательно сломал всю свою экосистему переписав CSS на Rust. Это говно не только глючить начало, но и тормозить. У нас есть общепринятый Webkit, который работает на Chromium и Safari. Что еще нужно? Не смотрите вообще на FireFox. Те кто гикает на Linux - нормальными не считаются. Linux - серверам, Windows - десктопам. Люди покупают чаще ПК или ноутбук с предустановленной Windows, а там стоит нормальный себе Edge, который уже не нуждается ни в каких извращениях. Зачем понимать Java и изучать отдельные извращенства на React, Vue или Angular, если можно сделать то же Progressive Web Application просто на том же jQuery или чистом JS? Выбор очевиден. Не имеет смысла даже рассказывать что все разработчики всех браузеров работают по одной программе. Я вот забил бы на вашем месте выяснять почему так с FireFox - я бы просто по башке Mozilla настучал и выгнал их исправлять ошибки. Никто ведь про их браузер из нормальных людей ни чего даже не знает. Его никто не устанавливает так как первым делом русские лезут на Яндекс или Mail и скачивают тот же хромиум в стрингах. А еще раньше они берут в руки свой Android, а там просто Chrome на любом устройстве. Не воскрешайте труп пожалуйста.
    • Скорее всего, особенности работы движка. Firefox принимает естественную, а не действительную ширину изображения. Из-за этого и распирает обертку. Тут ведь цикличная зависимость получается: высота изображения зависит от контейнера → изображение вычисляет ширину с учетом соотношения сторон → контейнер должен получить теперь эту ширину. WebKit или какие там сейчас движки, по-видимому, пересчитывают эту ширину (последний этап), FF – нет. Как исправить? Зависит от задачи. Для чего вам эта обертка нужна. Используется ли как-то? Как вариант, позиционировать само изображение... Повторю, зависит от контекста задачи.
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...