← Вернуться к оглавлению
Alterna · глава 8 · страница 8.4

Конструктор веб-страниц

Финальная практика: соберите свою веб-страницу из готовых блоков или напишите с нуля. 10 кейсов разной сложности.

Вы изучили HTML, CSS и JavaScript. Пришло время применить знания на практике.

Два режима: «Из блоков» — собираете страницу как конструктор из 20 готовых элементов, или «С нуля» — пишете код сами. В обоих режимах есть кейсы-задания.

ФГОС · практика ФОП · проектная деятельность
⚙️

Выберите режим

🧱
Из блоков
20 готовых блоков · кликните, чтобы добавить на страницу
✏️
С нуля
Свободный редактор HTML + CSS + JS · пишите код сами
🎯

Кейс-задание

Выберите кейс — соберите страницу из нужных блоков. Или работайте в свободном режиме.

🔨

Конструктор

Блоки

Свободный режим

          

        

      

      

    

  


  
  







';
  var doc=$('#builderPreview').contentDocument||$('#builderPreview').contentWindow.document;
  doc.open();doc.write(html);doc.close();
  $('#codeOutput').textContent=html;
}

$('#btnClear').addEventListener('click',function(){
  addedBlocks=[];
  updatePreview();
  $('#builderFeed').textContent='';
});

$('#btnCode').addEventListener('click',function(){
  $('#codePanel').classList.toggle('show');
});

$('#btnCheck').addEventListener('click',function(){
  if(!activeCase) return;
  var c=BLOCKS_DATA.cases_assembly.find(function(x){return x.id===activeCase;});
  var missing=c.required.filter(function(r){return addedBlocks.indexOf(r)===-1;});
  var extra=addedBlocks.filter(function(a){return c.required.indexOf(a)===-1;});
  if(missing.length===0){
    $('#builderFeed').innerHTML='✓ Отлично! Все необходимые блоки добавлены. '+addedBlocks.length+' блоков на странице.';
    $('#builderFeed').className='feed good';
  }else{
    var mNames=missing.map(function(m){var b=BLOCKS_DATA.blocks.find(function(x){return x.id===m;});return b?b.name:m;});
    $('#builderFeed').innerHTML='Не хватает '+missing.length+' блоков: '+mNames.join(', ')+'';
    $('#builderFeed').className='feed warn';
  }
});

/* ===== FREE MODE ===== */
function initFreeMode(){
  renderFreeCaseGrid();
  initFreeEditor();
}

function renderFreeCaseGrid(){
  var h='
🆓
Свободный
Пишите что хотите
';
  BLOCKS_DATA.cases_freeform.forEach(function(c){
    h+='
'+c.icon+'
'+c.title+'
'+c.desc+'
';
  });
  $('#freeCaseGrid').innerHTML=h;
  $$('.case-card',$('#freeCaseGrid')).forEach(function(el){
    el.addEventListener('click',function(){
      var cid=el.getAttribute('data-fcase');
      activeFreeCase=cid==='free'?null:cid;
      renderFreeCaseGrid();
      if(activeFreeCase){
        var c=BLOCKS_DATA.cases_freeform.find(function(x){return x.id===activeFreeCase;});
        var h2='
Задание: '+c.title+''+c.desc+'
';
        h2+='
Чеклист:
';
        c.checklist.forEach(function(item,i){
          h2+='';
        });
        h2+='
';
        $('#freeCaseInfo').innerHTML=h2;
      }else{
        $('#freeCaseInfo').innerHTML='';
      }
    });
  });
}

function initFreeEditor(){
  var htmlEl=$('#freeHtml'),cssEl=$('#freeCss'),jsEl=$('#freeJs'),preview=$('#freePreview');
  var tabs=$$('.le-tab');
  var defaultHtml=htmlEl.value,defaultCss=cssEl.value,defaultJs=jsEl.value;

  tabs.forEach(function(t){
    t.addEventListener('click',function(){
      tabs.forEach(function(x){x.classList.remove('active');});
      t.classList.add('active');
      var tab=t.getAttribute('data-tab');
      htmlEl.style.display=tab==='html'?'block':'none';
      cssEl.style.display=tab==='css'?'block':'none';
      jsEl.style.display=tab==='js'?'block':'none';
    });
  });

  function updateFree(){
    var doc=preview.contentDocument||preview.contentWindow.document;
    var fullHtml=htmlEl.value;
    if(fullHtml.indexOf('','');
    }
    if(fullHtml.indexOf('','');
    }
    doc.open();doc.write(fullHtml);doc.close();
  }
  htmlEl.addEventListener('input',updateFree);
  cssEl.addEventListener('input',updateFree);
  jsEl.addEventListener('input',updateFree);
  updateFree();

  $('#freeReset').addEventListener('click',function(){
    htmlEl.value=defaultHtml;cssEl.value=defaultCss;jsEl.value=defaultJs;
    updateFree();
  });

  $$('.wt-btn').forEach(function(b){
    b.addEventListener('click',function(){
      $$('.wt-btn').forEach(function(x){x.classList.remove('active');});
      b.classList.add('active');
      preview.style.maxWidth=b.getAttribute('data-w');
      preview.style.margin=b.getAttribute('data-w')==='100%'?'0':'0 auto';
      preview.style.border=b.getAttribute('data-w')==='100%'?'none':'2px solid var(--line)';
      preview.style.borderRadius=b.getAttribute('data-w')==='100%'?'0':'8px';
    });
  });
}