lectures fix

longer lectures
lectures done
2026-01-09 19:35:08 +10:00 · 2026-01-03 22:59:02 +10:00 · 2026-01-03 15:32:33 +10:00 · 2026-01-03 13:44:33 +10:00 · 2026-01-03 13:40:15 +10:00 · 2026-01-03 01:21:46 +10:00
65 changed files with 1672 additions and 86 deletions
--- a/hw/hw7/favicon.ico
+++ b/hw/hw7/favicon.ico
--- a/hw/hw7/hw7.css
+++ b/hw/hw7/hw7.css
@@ -0,0 +1,108 @@
+.desctription-heading{
+    font-size: medium;
+    text-align: center;
+}
+
+.main-container {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.scheme-image{
+    flex: 1;
+    max-width: 400px;
+    height: auto;
+    object-fit: contain;
+}
+
+.controls-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    flex: 1;
+    min-width: 300px;
+    max-width: 400px;
+}
+
+.inputs{
+    min-width: 300px;
+}
+.outputs{
+    min-width: 300px;
+}
+.radio-label{
+    display: inline-block;
+}
+
+p{
+    line-height: 0;
+}
+.max-w{
+    width: 100%;
+}
+
+.bad-input-tooltip {
+    display: block;
+    background: #ffffff;    
+    color: #721c24;
+    border: 1px solid #8f0c19;
+    padding: 4px 8px;
+    max-width: 220px;
+    white-space: normal;
+}
+
+.bad-input-highlight {
+    outline: 2px solid #990917;
+}
+
+.hidden{
+    display: none;
+}
+body{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+}
+
+th, td {
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+th {
+    background-color: #f5f5f5;
+    font-weight: bold;
+}
+
+tr:nth-child(even) {
+    background-color: #fafafa;
+}
+
+@media (max-width: 800px) {
+    .main-container {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .scheme-image {
+        max-width: 100%;
+        width: 100%;
+    }
+    
+    .controls-container {
+        width: 100%;
+        max-width: none;
+    }
+    
+    .inputs, .outputs {
+        min-width: unset;
+        width: 100%;
+    }
+}
--- a/hw/hw7/hw7.html
+++ b/hw/hw7/hw7.html
@@ -0,0 +1,71 @@
+<html>
+
+<head>
+    <title>калькулятор равнобедренного треугольника</title>
+    <link rel="stylesheet" href="./hw7.css">
+    <link rel="icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://unpkg.com/xp.css/dist/98.css"
+>
+</head>
+
+<body>
+    <h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3>
+    
+    <div class="main-container">
+        <div class="image-container">
+            <img src="./imgs/type1.png" class="scheme-image" id="schemeImageA">
+            <img src="./imgs/type2.png" class="scheme-image hidden" id="schemeImageB">
+        </div>
+
+        <div class="controls-container">
+            <div class="inputs" id="inputsForm">
+                <p>Выберете варинат входных данных:</p>
+                <input type="radio" name="input-type" id="radioButtonA" checked>
+                <label class="radio-label" for="radioButtonA">
+                    <span>боковая сторона и угол при основании</span>
+                </label><br>
+                <input type="radio" name="input-type" id="radioButtonB">
+                <label class="radio-label" for="radioButtonB">
+                    <span>основание и прилежащий к нему угол</span>
+                </label>
+                <form>
+                    <fieldset id="inputTypeFieldsetA">
+                        <legend>входные данные</legend>
+                        <label for="equalSideLength">Длина боковой стороны B:<span class="bad-input-tooltip hidden" id="equalSideLengthErr"></span></label><br>
+                        <input class="max-w" type="number" min="0" id="equalSideLength">
+                        <br>
+                        <label for="baseAngle">Угол при основании α (в градусах):<span class="bad-input-tooltip hidden" id="baseAngleErr"></span></label><br>
+                        <input class="max-w" type="number" min="0" max="180" id="baseAngle">
+                    </fieldset>
+                    <fieldset id="inputTypeFieldsetB" class="hidden">
+                        <legend>входные данные</legend>
+                        <label for="baseSideLength">Длина основания A:<span class="bad-input-tooltip hidden" id="baseSideLengthErr"></span></label><br>
+                        <input class="max-w" type="number" min="0" id="baseSideLength">
+                        <br>
+                        <label for="baseAdjacentAngle">Угол прилежащий основанию β:<span class="bad-input-tooltip hidden" id="baseAdjacentAngleErr"></span></label><br>
+                        <input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle">
+                    </fieldset>
+                    <fieldset id="outputsFieldset">
+                        <legend>что вычислить</legend>
+                        <span class="bad-input-tooltip hidden" id="outputValuesErr"><br></span>
+                        <input type="checkbox" name="output-valuesR" id="outputValuesR" checked>
+                        <label for="outputValuesR">радиус вписанной окружности</label><br>
+                        <input type="checkbox" name="output-valuesH" id="outputValuesH" checked>
+                        <label for="outputValuesH">высоты треугольника</label><br>
+                        <input type="checkbox" name="output-valuesL" id="outputValuesL" checked>
+                        <label for="outputValuesL">длины сторон треугольника</label><br>
+                    </fieldset>
+                    <button id="calculateButton" disabled>Вычислить</button>
+                    <button id="clearButton">Отчислить</button>
+                </form>
+            </div>
+            <table class="outputs hidden" id="outputsTable">
+
+            </table>
+        </div>
+    </div>
+</body>
+<script src="./hw7.js">
+</script>
+
+</html>
--- a/hw/hw7/hw7.js
+++ b/hw/hw7/hw7.js
@@ -0,0 +1,357 @@
+let elements = {
+    radioA: document.getElementById('radioButtonA'),
+    radioB: document.getElementById('radioButtonB'),
+    fieldsetA: document.getElementById('inputTypeFieldsetA'),
+    fieldsetB: document.getElementById('inputTypeFieldsetB'),
+    imageA: document.getElementById('schemeImageA'),
+    imageB: document.getElementById('schemeImageB'),
+
+    inputsForm: document.getElementById('inputsForm'),
+
+    equalSideLength: document.getElementById('equalSideLength'),
+    equalSideLengthErr: document.getElementById('equalSideLengthErr'),
+    baseAngle: document.getElementById('baseAngle'),
+    baseAngleErr: document.getElementById('baseAngleErr'),
+    baseSideLength: document.getElementById('baseSideLength'),
+    baseSideLengthErr: document.getElementById('baseSideLengthErr'),
+    baseAdjacentAngle: document.getElementById('baseAdjacentAngle'),
+    baseAdjacentAngleErr: document.getElementById('baseAdjacentAngleErr'),
+
+    outputsFieldset: document.getElementById('outputsFieldset'),
+    outputValuesErr: document.getElementById('outputValuesErr'),
+    outputR: document.getElementById('outputValuesR'),
+    outputH: document.getElementById('outputValuesH'),
+    outputL: document.getElementById('outputValuesL'),
+    calculateButton: document.getElementById('calculateButton'),
+    clearButton: document.getElementById('clearButton'),
+    outputsTable: document.getElementById('outputsTable')
+}
+console.log("loaded js!");
+
+let currentModeIsA = true;
+let outputFields = {};
+
+let inputsA = {
+    l: null,
+    angle: null
+};
+
+let inputsB = {
+    l: null,
+    angle: null
+};
+
+function highlightErrorElement(errorFieldIndex, add = true) {
+    let fields = [
+        elements.equalSideLength,
+        elements.baseAngle,
+        elements.baseSideLength,
+        elements.baseAdjacentAngle,
+        outputsFieldset
+    ];
+    if (fields[errorFieldIndex]) {
+        if (add) {
+            fields[errorFieldIndex].classList.add("bad-input-highlight");
+        }
+        else {
+            fields[errorFieldIndex].classList.remove("bad-input-highlight");
+        }
+    }
+
+}
+
+function setErrTooltip(errorFieldIndex, tooltip) {
+    let errElem = [
+        elements.equalSideLengthErr,
+        elements.baseAngleErr,
+        elements.baseSideLengthErr,
+        elements.baseAdjacentAngleErr,
+        elements.outputValuesErr
+    ][errorFieldIndex];
+    if (errElem) {
+        highlightErrorElement(errorFieldIndex, tooltip !== "");
+
+        if (tooltip !== "") {
+            errElem.classList.remove("hidden");;
+        }
+        else {
+            errElem.classList.add("hidden");;
+        }
+        if (errorFieldIndex == 4) {
+            tooltip += "<br>"
+        }
+        errElem.innerHTML = tooltip;
+    }
+
+
+}
+
+function deg2rad(degrees) {
+    return degrees * (Math.PI / 180);
+}
+
+function getCalculations() {
+    let heights = [];//base related, side realted
+    let lengths = [];// base side
+    let radius = 0;
+    let baseAngle = 0;
+    let sideAngle = 0;
+    if (currentModeIsA) {
+        lengths[0] = 2 * Math.sin(deg2rad(inputsA.angle) / 2) * inputsA.l;
+        lengths[1] = inputsA.l;
+        baseAngle = inputsA.angle;
+        sideAngle = (180 - baseAngle) / 2;
+    }
+    else {
+        lengths[0] = inputsB.l;
+        lengths[1] = inputsB.l / (2 * Math.cos(deg2rad(inputsB.angle)));
+        sideAngle = inputsB.angle;
+        baseAngle = 180 - 2 * sideAngle;
+    }
+    
+
+    let a = lengths[0]; 
+    let b = lengths[1]; 
+    let p = (a + b + b) / 2;
+    radius = Math.sqrt((p - a) * (p - b) * (p - b) / p);
+
+    heights[0] = lengths[1] * Math.sin(deg2rad(sideAngle));
+    heights[1] = lengths[0] * Math.sin(deg2rad(baseAngle));
+    return {
+        radius: radius,
+        heights: heights,
+        lengths: lengths
+    };
+}
+
+function updateCheckboxes() {
+    outputFields["radius"] = elements.outputR.checked;
+    outputFields["heights"] = elements.outputH.checked;
+    outputFields["lengths"] = elements.outputL.checked;
+    let ret = !outputFields.radius && !outputFields.heights && !outputFields.lengths;
+    if (ret) {
+        setErrTooltip(4, "Выберите хотя бы один параметр для вывода.");
+    } else {
+        setErrTooltip(4, "");
+    }
+    updateCalculateButton();
+}
+
+function updateCalculateButton() {
+    let ret = false;
+    if (currentModeIsA) {
+        ret = inputsA["l"] !== null && inputsA["angle"] !== null
+    }
+    else {
+        ret = inputsB["l"] !== null && inputsB["angle"] !== null
+    }
+    ret &= elements.outputR.checked || elements.outputH.checked || elements.outputL.checked;
+
+    elements.calculateButton.disabled = !ret;
+}
+
+function switchInputs(selectA) {
+    if (selectA) {
+        elements.imageA.classList.remove("hidden");
+        elements.imageB.classList.add("hidden");
+        elements.fieldsetA.classList.remove("hidden");
+        elements.fieldsetB.classList.add("hidden");
+    }
+    else {
+        elements.imageA.classList.add("hidden");
+        elements.imageB.classList.remove("hidden");
+        elements.fieldsetA.classList.add("hidden");
+        elements.fieldsetB.classList.remove("hidden");
+    }
+    updateCalculateButton();
+}
+
+function displayTable(calcResults) {
+    let table = elements.outputsTable;
+    table.innerHTML = ""; // Clear previous content
+
+    let header = "<tr><th>Параметр</th><th>Значение</th></tr>";
+    let rows = "";
+
+    if (outputFields.radius) {
+        rows += `<tr><td>R</td><td>${calcResults.radius.toFixed(3)}</td></tr>`;
+    }
+    if (outputFields.heights) {
+        rows += `<tr><td>h1</td><td>${calcResults.heights[0].toFixed(3)}</td></tr>`;
+        rows += `<tr><td>h2</td><td>${calcResults.heights[1].toFixed(3)}</td></tr>`;
+    }
+    if (outputFields.lengths) {
+        rows += `<tr><td>A</td><td>${calcResults.lengths[0].toFixed(3)}</td></tr>`;
+        rows += `<tr><td>B</td><td>${calcResults.lengths[1].toFixed(3)}</td></tr>`;
+    }
+    table.innerHTML = header + rows;
+
+    if (rows === "") {
+        table.innerHTML = `<h3>Выберите параметры для вычислений, сейчас таблица пустая</h3>`;
+    }
+
+    table.classList.remove("hidden");
+
+}
+
+function clearCurrentInputs() {
+    if (currentModeIsA) {
+        elements.equalSideLength.value = null;
+        elements.baseAngle.value = null;
+        setErrTooltip(0, "");
+        setErrTooltip(1, "");
+        inputsA = {
+            l: null,
+            angle: null
+        };
+    }
+    else {
+        inputsB = {
+            l: null,
+            angle: null
+        };
+        setErrTooltip(2, "");
+        setErrTooltip(3, "");
+        elements.baseSideLength.value = null;
+        elements.baseAdjacentAngle.value = null;
+    }
+    elements.outputsTable.classList.add("hidden");
+    updateCalculateButton()
+}
+
+function check180Angle(angleString) {
+    let angle = parseFloat(angleString);
+    if (isNaN(angle)) {
+        return "Введите корректное число";
+    }
+    if (angle <= 0) {
+        return "Угол должен быть больше 0";
+    }
+    if (angle >= 180) {
+        return "Угол должен быть меньше 180";
+    }
+    return "";
+}
+
+function check90Angle(angleString) {
+    let angle = parseFloat(angleString);
+    if (isNaN(angle)) {
+        return "Введите корректное число";
+    }
+    if (angle <= 0) {
+        return "Угол должен быть больше 0";
+    }
+    if (angle >= 90) {
+        return "Угол должен быть меньше 90";
+    }
+    return "";
+}
+
+function checkLength(lengthString) {
+    let length = parseFloat(lengthString);
+    if (!isFinite(length)) {
+        return "Введите корректное число";
+    }
+    if (length <= 0) {
+        return "Длина должна быть больше 0";
+    }
+    return "";
+}
+
+function handleSwitchInputs(event) {
+    if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") {
+        currentModeIsA = true;
+        switchInputs(true);
+        console.log("Switching inputs to A");
+    }
+    else {
+        currentModeIsA = false;
+        switchInputs(false);
+        console.log("Switching inputs to B");
+    }
+}
+
+function handleInputsUpdate(event) {
+    switch (event.target.id) {
+        case "equalSideLength":
+            {
+                const err = checkLength(event.target.value);
+                setErrTooltip(0, err);
+                if (err === "") {
+                    inputsA.l = parseFloat(event.target.value);
+                } else {
+                    inputsA.l = null;
+                }
+            }
+            break;
+        case "baseAngle":
+            {
+                const err = check180Angle(event.target.value);
+                setErrTooltip(1, err);
+                if (err === "") {
+                    inputsA.angle = parseFloat(event.target.value);
+                } else {
+                    inputsA.angle = null;
+                }
+            }
+            break;
+        case "baseSideLength":
+            {
+                const err = checkLength(event.target.value);
+                setErrTooltip(2, err);
+                if (err === "") {
+                    inputsB.l = parseFloat(event.target.value);
+                } else {
+                    inputsB.l = null;
+                }
+            }
+            break;
+        case "baseAdjacentAngle":
+            {
+                const err = check90Angle(event.target.value);
+                setErrTooltip(3, err);
+                if (err === "") {
+                    inputsB.angle = parseFloat(event.target.value);
+                } else {
+                    inputsB.angle = null;
+                }
+            }
+            break;
+        default:
+            console.log(event.target.id)
+            break;
+    }
+    updateCalculateButton();
+
+}
+
+function handleFieldsetEvent(event) {
+    if (event.target.type === 'radio') {
+        handleSwitchInputs(event);
+    } else if (event.target.type === 'number') {
+        handleInputsUpdate(event);
+    }
+}
+elements.inputsForm.addEventListener('change', handleFieldsetEvent);
+elements.inputsForm.addEventListener('input', handleFieldsetEvent);
+
+elements.outputsFieldset.addEventListener('change', (event) => {
+    if (event.target.type === 'checkbox') {
+        updateCheckboxes();
+    }
+});
+
+elements.clearButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    clearCurrentInputs()
+});
+
+elements.calculateButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    displayTable(getCalculations());
+});
+
+
+// чтобы не сконфузило
+updateCheckboxes();
+switchInputs(elements.radioA.checked);
--- a/hw/hw7/imgs/type1.png
+++ b/hw/hw7/imgs/type1.png
--- a/hw/hw7/imgs/type2.png
+++ b/hw/hw7/imgs/type2.png
--- a/lectures/lec1/task1.html
+++ b/lectures/lec1/task1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <meta charset="UTF-8">
+    <title>task 1</title>
+</head>
+
+<body>
+
+    <h3><i>Возможности HTML</i></h3>
+    <hr width='30%' align=left>
+    <ol>
+        <li> Выделение текста:
+            <ul type=circle>
+                <li>жирным;</li>
+                <li>курсивным;</li>
+            </ul>
+        </li>
+        <li>Характеристика шрифта.</li>
+        <li><a href=#>Вставка рисунков. </a></li>
+        <li> Оформление текста:
+            <ul type=circle>
+                <li>заголовки; </li>
+                <li>абзацы;</li>
+                <li>списки.</li>
+            </ul>
+        </li>
+    </ol>
+    <hr align=left width=30%>
+    <p align="justify">Средствами HTML осуществляется переход на другие страницы сети Интернет.</p>
+</body>
+
+</html>
--- a/lectures/lec1/task2.html
+++ b/lectures/lec1/task2.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Пройдите тест</title>
+</head>
+
+<body>
+    <h2>Пройдите тест</h2>
+    <form>
+        <ol>
+            <li>
+                Что будет выведено в окно браузера после выполнения оператора:<br>
+                <code>document.write("&lt;strong&gt;a&lt;sub&gt;i&lt;/sub&gt; = 2&lt;sup&gt;i&lt;/sup&gt;&lt;/strong&gt;")</code>
+                <br><br>
+                <input type="radio" name="q1" id="q1a" value="a1">
+                <label for="q1a">a<sub>i</sub> = 2<sup>i</sup></label><br>
+                <input type="radio" name="q1" id="q1b" value="a2">
+                <label for="q1b"><strong>a<sub>i</sub> = 2<sub>i</sub></strong></label><br>
+                <input type="radio" name="q1" id="q1c" value="a3">
+                <label for="q1c"><strong>a<sub>i</sub> = 2i</strong></label><br>
+                <input type="radio" name="q1" id="q1d" value="a4">
+                <label for="q1d">a<sup>i</sup> = 2<sup>i</sup></label>
+            </li>
+            <br>
+            <li>
+                Отметьте верные названия переменных:<br>
+                <input type="checkbox" id="q2a" name="q2" value="name">
+                <label for="q2a">name</label><br>
+                <input type="checkbox" id="q2b" name="q2" value="name+age">
+                <label for="q2b">name+age</label><br>
+                <input type="checkbox" id="q2c" name="q2" value="nameAge">
+                <label for="q2c">nameAge</label><br>
+                <input type="checkbox" id="q2d" name="q2" value="3name">
+                <label for="q2d">3name</label><br>
+                <input type="checkbox" id="q2e" name="q2" value="name(age)">
+                <label for="q2e">name(age)</label>
+            </li>
+            <br>
+            <li>
+                Какое значение получит переменная <code>result</code> после выполнения следующих операторов:<br>
+                <code>
+                        let a = 7;<br>
+                        let b = 4;<br>
+                        let result = a % 3 + b % 2;
+                </code>
+                <br>
+                Ответ: <input type="text" name="q3" size="5">
+            </li>
+        </ol>
+        <button type="submit">Закончить тестирование</button>
+        <button type="reset">Повторить тестирование</button>
+    </form>
+</body>
+
+</html>
--- a/lectures/lec2/part1/task1.css
+++ b/lectures/lec2/part1/task1.css
@@ -0,0 +1,26 @@
+.menuItem {
+    text-align: center;
+}
+
+#menu ul {
+    padding-left: 0;
+    margin: .5%;
+}
+
+#menu li {
+    display: inline-block;
+    width: 16%;
+    background: #F00;
+}
+
+#menu a {
+    text-decoration: none;
+    color: white;
+}
+
+.pict {
+    width: 70%;
+    background: rgba(0, 255, 0, .5);
+    margin: 5px auto;
+    padding: 5px 0;
+}
--- a/lectures/lec2/part1/task2.html
+++ b/lectures/lec2/part1/task2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Задание 2</title>
+    <style>
+        h1,
+        h2 {
+            text-align: center;
+            color: maroon;
+        }
+
+        ins {
+            text-decoration: underline;
+        }
+
+        i {
+            font-style: italic;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>
+        <ins>Основы HTML</ins>
+    </h1>
+    <h2>
+        <i>Оглавление</i>
+    </h2>
+</body>
+
+</html>
--- a/lectures/lec2/part1/task3.html
+++ b/lectures/lec2/part1/task3.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>Задание 3</title>
+    <style>
+        .blue-bold {
+            font-weight: bold;
+            color: blue;
+        }
+        .big-font{
+            font-size: 20px;
+            color: green;
+        }
+        .center-red {
+            color: red;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <p class="blue-bold">Каскадность CSS:</p>
+    <ul>
+        <li class="center-red">расширение свойств;</li>
+        <li class="big-font center-red">переопределение свойств.</li>
+    </ul>
+</body>
+</html>
--- a/lectures/lec2/part1/task4-5.html
+++ b/lectures/lec2/part1/task4-5.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta charset=utf-8">
+    <title>Task 4</title>
+    <style>
+        div {
+            box-sizing: border-box;
+            background: lightblue;
+            text-align: center;
+            margin: 5px 5px;
+            
+        }
+
+        .menu{
+            text-align: end;
+        }
+        .menu > div{
+            width: 100px;
+            height: 50px;
+            display: inline-block;
+            background: violet;
+
+        }
+        .gray {
+            background: gainsboro;
+        }
+
+        .w50 {
+            width: 48%;
+            display: inline-block;
+            height: 250px;
+        }
+
+
+        .top {
+            width: 70%;
+            margin: 0 auto 20px;
+        }
+
+        .left {
+            display: inline-block;
+            width: 63%
+        }
+
+        .left .part {
+            height: 80px;
+        }
+
+        .right {
+            float: right;
+            width: 35%;
+            height: 340px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="menu">
+        <div>меню1</div>
+        <div>меню2</div>
+        <div>меню3</div>
+        <div>меню4</div>
+    </div>
+    <div class="top">
+        <div class="gray w50"><span>рисунок 1</span></div>
+        <div class="gray w50"><span>рисунок 2</span></div>
+    </div>
+    <div class="main">
+        <div class="left">
+            <div class="gray part"><span>часть 1.1</span></div>
+            <div class="gray part"><span>часть 1.2</span></div>
+            <div class="gray part"><span>часть 1.3</span></div>
+            <div class="gray part"><span>часть 1.4</span></div>
+        </div>
+        <div class="gray right"><span>часть 2</span></div>
+    </div>
+</body>
+
+</html>
--- a/lectures/lec2/part2/task1.css
+++ b/lectures/lec2/part2/task1.css
@@ -0,0 +1,23 @@
+.main > p:last-child{
+    color:green;
+}
+
+/* 
+<div class="menu">
+    <ol>
+        <li><a href="#">Комбинация селекторов</a></li>
+        <li><a href="#">Селекторы атрибутов</a></li>
+    </ol>
+    <p>CSS селекторы</p>
+</div>
+<div class="main">
+    <h2>Комбинация селекторов</h2>
+    <img src="tree.png">
+    <p> Различают следующие виды селекторов: </p>
+    <ol>
+        <li><a href="#">вложенный селектор;</a></li>
+        <li><a href="#">родительский селектор;</a></li>
+    </ol>
+    <p> Соединение селекторов</p> --- ВОТ ЕГО КРАСИМ!!!
+</div>
+*/
--- a/lectures/lec2/part2/task2.css
+++ b/lectures/lec2/part2/task2.css
@@ -0,0 +1,24 @@
+.main li > [href="#"] {
+    color:green
+}
+
+
+/*
+<div class="menu">
+    <ul>
+        <li><a href="a1.html">Комбинация селекторов</a></li>
+        <li><a href="#">Селекторы атрибутов</a></li>
+    </ul>
+    <p>CSS селекторы</p>
+</div>
+<div class="main">
+    <h2>Комбинация селекторов</h2>
+    <img src="tree.png">
+    <p> Различают следующие виды селекторов: </p>
+    <ol>
+        <li><a href="#">вложенный селектор;</a></li>
+        <li><a href="b1.html">родительский селектор;</a></li>
+    </ol>
+    <p> <a href="#"> Соединение селекторов </a></p>
+</div>
+*/
--- a/lectures/lec2/part2/task3.css
+++ b/lectures/lec2/part2/task3.css
@@ -0,0 +1,24 @@
+h2, ol >li:nth-child(2) , ol + p{
+    color: green;
+}
+
+
+/* 
+<div class="menu">
+    <ul>
+        <li><a href="a1.html">Комбинация селекторов</a></li>
+        <li><a href="#">Селекторы атрибутов</a></li>
+    </ul>
+</div>
+<div class="main">
+    <h2>Комбинация селекторов</h2> ---  
+    <img src="tree.png">
+    <p> Различают следующие виды селекторов: </p>
+    <ol>
+        <li><a href="#">вложенный селектор;</a></li>
+        <li><a href="#">родительский селектор;</a></li> ---  
+        <li><a href="#">соседний селектор</a></li>
+    </ol>
+    <p> <a href="#"> Соединение селекторов </a></p> ---  
+</div>
+*/
--- a/lectures/lec2/part3/task1.css
+++ b/lectures/lec2/part3/task1.css
@@ -0,0 +1,8 @@
+div > a > img{
+    width: 10vw;
+}
+
+div > a {
+    display: inline-block;
+}
+ 
--- a/lectures/lec2/part3/task2.css
+++ b/lectures/lec2/part3/task2.css
@@ -0,0 +1,8 @@
+div > a > img{
+    width: 10vw;
+    min-width: 170px;
+}
+div > a {
+    min-width: 170px;
+    display: inline-block;
+}
--- a/lectures/lec2/part3/task3.css
+++ b/lectures/lec2/part3/task3.css
@@ -0,0 +1,26 @@
+div > a > img{
+    width: 10vw;
+    min-width: 170px;
+}
+div > a {
+    min-width: 170px;
+}
+div {
+    display: flex;
+}
+@media (max-width: 600px) {
+    div {
+        flex-direction: column;
+        align-items: center;
+    }
+    div > a {
+        width: 80vw;
+        max-width: 300px;
+        min-width: 0;
+    }
+    div > a > img {
+        width: 80vw;
+        max-width: 300px;
+        min-width: 0;
+    }
+}
--- a/lectures/lec2/part4/task1.html
+++ b/lectures/lec2/part4/task1.html
@@ -0,0 +1,24 @@
+<div class="container">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+</div>
+
+<style>
+.container {
+    display: flex;
+    flex-wrap: no-wrap;
+    background: LightGreen;
+}
+.container div {
+    min-width: 120px;
+    height: 50px;
+    margin: 5px;
+    border: solid thin green;
+}
+</style>
--- a/lectures/lec2/part4/task2.html
+++ b/lectures/lec2/part4/task2.html
@@ -0,0 +1,38 @@
+
+
+<style>
+.pict {
+    display: flex;
+    flex-wrap: nowrap;
+
+    justify-content: center;
+    align-items: center;
+}
+
+.pict a img {
+    min-width:280px;
+    min-height:280px;
+}
+
+@media (max-width: 1000px) {
+    .pict {
+        flex-wrap: wrap;
+    }
+}
+
+@media (max-width: 700px) {
+    .pict {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+</style>
+<hr>
+<div class="pict">
+    <a href="#"><img src="images/image_1.jpg"></a>
+    <a href="#"><img src="images/image_2.jpg"></a>
+    <a href="#"><img src="images/image_3.jpg"></a>
+    <a href="#"><img src="images/image_4.jpg"></a>
+    <a href="#"><img src="images/image_5.jpg"></a>
+</div>
+<hr>
--- a/lectures/lec2/part4/task3.html
+++ b/lectures/lec2/part4/task3.html
@@ -0,0 +1,46 @@
+<style>
+    .pict {
+        display: flex;
+        flex-wrap: nowrap;
+
+        justify-content: center;
+        align-items: center;
+    }
+
+    .pict a img {
+        min-width: 280px;
+        min-height: 280px;
+    }
+
+    .big {
+        min-width: 330px;
+        min-height: 330px;
+    }
+
+    @media (max-width: 1000px) {
+        .pict {
+            flex-wrap: wrap;
+        }
+
+        .big {
+            min-width: 280px;
+            min-height: 280px;
+        }
+    }
+
+    @media (max-width: 700px) {
+        .pict {
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+</style>
+<hr>
+<div class="pict">
+    <a href="#"><img src="images/image_1.jpg"></a>
+    <a href="#"><img src="images/image_2.jpg"></a>
+    <a href="#" class="big"><img src="images/image_3.jpg"></a>
+    <a href="#"><img src="images/image_4.jpg"></a>
+    <a href="#"><img src="images/image_5.jpg"></a>
+</div>
+<hr>
--- a/lectures/lec3/task1.html
+++ b/lectures/lec3/task1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap Template</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .col{
+            background: lightgray;
+            border: solid thin grey;
+        }
+        .row{
+            border: solid thin red;
+        }
+    </style>
+</head>
+
+<body class="container-fluid">
+
+    <div class="row m-2">
+        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
+        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
+        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
+        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
+        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
+        <div class="col-6 col-md-3 col-lg-2 h-2 p-3 bg-light"><h3>aboba</h3></div>
+    </div>    
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+</html>
--- a/lectures/lec3/task2.html
+++ b/lectures/lec3/task2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap Template</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .col {
+            background: lightgray;
+            border: solid thin grey;
+        }
+
+        .row {
+            border: solid thin red;
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <div class="container d-flex align-items end">
+        <h5 class="bg-light">Ворота на запад</h5>
+        <p>192-метровая арка в Сент-Луисе (штат Миссури, США)</p>
+        <img src="images/image1.jpg" alt="">
+    </div>
+     <div class="container d-grid justify-content-center">
+        <h5 class="bg-light">Ворота на запад</h5>
+        <p>192-метровая арка в Сент-Луисе (штат Миссури, США)</p>
+        <img src="images/image1.jpg" alt="">
+    </div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+</html>
--- a/lectures/lec3/task3.html
+++ b/lectures/lec3/task3.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap Template</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .col {
+            background: lightgray;
+            border: solid thin grey;
+        }
+
+        .row {
+            border: solid thin red;
+        }
+    </style>
+</head>
+
+<body>
+<div class="container"></div>
+    <div class="row p-2 border justify-content-between">
+        <div class="col-12 col-md-7 p-2 m-md-2 border bg-primary text-white">
+            Строка 1, столбец 1
+        </div>
+        <div class="col-12 col-md-3 p-2 m-md-2 border">
+            Строка 1, столбец 2
+        </div>
+    </div>
+    <div class="row p-2 border justify-content-between">
+        <div class="col-12 col-md-3 p-2 m-md-2 border">
+            Строка 2, столбец 1
+        </div>
+        <div class="col-12 col-md-7 bg-primary text-white col p-2 m-md-2 border">
+            Строка 2, столбец 2
+        </div>
+    </div>
+</div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+</html>
--- a/lectures/lec4/part1/task1.html
+++ b/lectures/lec4/part1/task1.html
@@ -0,0 +1,22 @@
+...
+
+<body>
+    <div class="main">
+        <div class="main__card">
+            <div class="main__card-header">Заголовок</div>
+            <div class="main__card-image main__card-image--position_right">Рисунок</div>
+            <div class="card__content"></div>
+        </div>
+
+        <div class="main__card">
+            <div class="main__card-header">Заголовок</div>
+            <div class="main__card-content"></div>
+        </div>
+        
+        <div class="main__card">
+            <div class="main__card-image main__card-image--position_left">Рисунок</div>
+            <div class="main__card-header">Заголовок</div>
+            <div class="main__card-content"></div>
+        </div>
+    </div>
+</body>
--- a/lectures/lec4/part2/task1.pug
+++ b/lectures/lec4/part2/task1.pug
@@ -0,0 +1,10 @@
+ol#list(type="I")
+  li Препроцессоры HTML
+    ul(type="disc")
+      li.first
+        a(href="#") Haml
+      li Pug
+  li Препроцессоры CSS
+    ul(type="circle")
+      li.first SAAS
+      li Stylus
--- a/lectures/lec4/part2/task2.pug
+++ b/lectures/lec4/part2/task2.pug
@@ -0,0 +1,9 @@
+ol#list(type="I")
+  li Препроцессоры HTML
+    ul(type="disc")
+      li.first: a(href="#") Haml
+      li Pug
+  li Препроцессоры CSS
+    ul(type="circle")
+      li.first SAAS
+      li Stylus
--- a/lectures/lec4/part2/task3.pug
+++ b/lectures/lec4/part2/task3.pug
@@ -0,0 +1,10 @@
+- var tag = 'h'
+- var i = 1
+
+#{tag+i} Уровень #{i}
+- i++
+#{tag+i} Уровень #{i}
+- i++
+#{tag+i} Уровень #{i}
+- i++
+#{tag+i} Уровень #{i}
--- a/lectures/lec4/part2/task4.pug
+++ b/lectures/lec4/part2/task4.pug
@@ -0,0 +1,6 @@
+- var products ={"Товар":"Цена","ручка":30.5, "карандаш":50, "альбом":156, "тетрадь":21.5, "ластик":10.2}
+table
+    each name,price in products
+        tr
+            td= name
+            td= price
--- a/lectures/lec4/part2/task5.pug
+++ b/lectures/lec4/part2/task5.pug
@@ -0,0 +1,8 @@
+table
+    - for(var i=0;i<10;i++)
+        tr
+            - for(var j=0;j<10;j++)
+                - if((i + j) % 2 == 0)
+                    td.white 
+                - else 
+                    td.black
--- a/lectures/lec4/part2/task6.pug
+++ b/lectures/lec4/part2/task6.pug
@@ -0,0 +1,12 @@
+mixin createList(listType, items, tag)
+  - var dispListType = "ul"
+  - if (listType == "ol")
+    - dispListType = "ol"
+
+  #{dispListType}.list
+    each item in items
+      li
+        #{tag} #{item}
+
+// Вызов миксина
+createList('ul', ['Python', 'JavaScript', 'Java'], 'strong')
--- a/lectures/lec4/part3/task1.styl
+++ b/lectures/lec4/part3/task1.styl
@@ -0,0 +1,5 @@
+size=1%
+section
+  box-shadow: size size (2*size)  rgba(0,0,0,0.5)
+  padding:size*2
+  margin:size*4
--- a/lectures/lec4/part3/task2.styl
+++ b/lectures/lec4/part3/task2.styl
@@ -0,0 +1,10 @@
+.block
+    display flex
+    flex-wrap wrap
+    p
+        display inline-block
+        background gray
+        &:hover
+            color green
+    &:hover
+        color red
--- a/lectures/lec4/part3/task3.css
+++ b/lectures/lec4/part3/task3.css
@@ -0,0 +1,19 @@
+.block {
+    color: blue;
+}
+
+.block .menu {
+    color: navy;
+}
+
+.block .menu a {
+    color: red;
+}
+
+.block .menu h1 {
+    color: green;
+}
+
+.block:hover {
+    color: white;
+}
--- a/lectures/lec4/part3/task4.styl
+++ b/lectures/lec4/part3/task4.styl
@@ -0,0 +1,7 @@
+style-tag(tagName, color_)
+    & {tagName}
+        color: color_
+
+div
+    style-tag(ul,Navy)
+
--- a/lectures/lec4/part3/task5.styl
+++ b/lectures/lec4/part3/task5.styl
@@ -0,0 +1,8 @@
+color-inv(r,g,b)
+    color: rgb(255 - r,255 - g ,255 - b)
+    
+
+a
+    color-inv(1,2,3)
+
+// оказывается пробелы обязательны при вычилеениях, иначе парсер ругается. неожиданно получислоь
--- a/lectures/lec5/p1/task1.js
+++ b/lectures/lec5/p1/task1.js
@@ -0,0 +1,2 @@
+alert("Hello, world!");
+document.write("Hello, world!");
--- a/lectures/lec5/p1/task2.js
+++ b/lectures/lec5/p1/task2.js
@@ -0,0 +1,6 @@
+let _name = "Алина";
+let email = "alina@test.ru";
+
+let message = `Доброго времени суток, ${_name}! Мы отправили Вам приглашение на почту ${email}.`;
+
+document.write(`<h3>${message}</h3>`);
--- a/lectures/lec5/p1/task3.js
+++ b/lectures/lec5/p1/task3.js
@@ -0,0 +1,8 @@
+let p = prompt("Введите значение переменной p:");
+
+if (isNaN(parseFloat(p)) || !isFinite(Number(p))) {
+    alert("Ошибка: введено не число.");
+} else {
+    p = Number(p) + 1;
+    alert(`Увеличенное значение переменной p: ${p}`);
+}
--- a/lectures/lec5/p1/task4.js
+++ b/lectures/lec5/p1/task4.js
@@ -0,0 +1 @@
+let result = n > 0 ? 1 / n : n < 0 ? 1 / n ** 2 : 0;
--- a/lectures/lec5/p1/task5.js
+++ b/lectures/lec5/p1/task5.js
@@ -0,0 +1,10 @@
+let n = 81;
+let i = 1;
+
+let out = "<select>";
+for (let i = 1; i ** 2 <= n; i+=2) {
+    out += `<option>${i**2}</option>`
+}
+out += "</select>";
+
+document.write(out);
--- a/lectures/lec5/p1/task6.js
+++ b/lectures/lec5/p1/task6.js
@@ -0,0 +1,11 @@
+function sum() {
+    return arguments.reduce((total, num) => total + num, 0);
+}
+
+function sum() {
+    let total = 0;
+    for (let i = 0; i < arguments.length; i++) {
+        total += arguments[i];
+    }
+    return total;
+}
--- a/lectures/lec5/p1/task7.js
+++ b/lectures/lec5/p1/task7.js
@@ -0,0 +1,13 @@
+sum = function(...args)  {
+    return args.filter(num => num % 2 !== 0).reduce((acc, num) => acc + num, 0);
+}
+
+sum = function(...args) {
+    let total = 0;
+    for (let num of args) {
+        if (num % 2 !== 0) {
+            total += num;
+        }
+    }
+    return total;
+}
--- a/lectures/lec5/p1/task8.js
+++ b/lectures/lec5/p1/task8.js
@@ -0,0 +1,12 @@
+sum = (...args) => {
+    return args.filter(num => num % 2 !== 0).reduce((acc, num) => acc + num, 0);
+}
+sum = (...args) => {
+    let total = 0;
+    for (let i = 0; i < args.length; i++) {
+        if (args[i] % 2 !== 0) {
+            total += args[i];
+        }
+    }
+    return total;
+}
--- a/lectures/lec5/p2/task1.js
+++ b/lectures/lec5/p2/task1.js
@@ -0,0 +1,4 @@
+function sumNumbers(str){
+    str=str.split(" ");
+    return str.filter(substr => !isNaN(parseFloat(substr)) && isFinite(Number(substr))).reduce((acc,num) => acc+num,0);
+}
--- a/lectures/lec5/p2/task2.js
+++ b/lectures/lec5/p2/task2.js
@@ -0,0 +1,46 @@
+function extractText(html){
+    return html.split("<p>")
+    .filter(substr => substr
+    .includes("</p>"))
+    .map((substr) => substr.split("</p>")[0]);
+}
+
+let html = `<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <meta charset="UTF-8">
+    <title>task 1</title>
+</head>
+
+<body>
+
+    <h3><i>Возможности HTML</i></h3>
+    <hr width='30%' align=left>
+    <ol>
+        <li> Выделение текста:
+            <ul type=circle>
+                <li>жирным;</li>
+                <li>курсивным;</li>
+            </ul>
+        </li>
+        <li>Характеристика шрифта.</li>
+        <li><a href=#>Вставка рисунков. </a></li>
+        <li> Оформление текста:
+            <ul type=circle>
+                <li>заголовки; </li>
+                <li>абзацы;</li>
+                <li>списки.</li>
+            </ul>
+        </li>
+    </ol>
+    <hr align=left width=30%>
+    <p>Средствами HTML осуществляется переход на другие страницы сети Интернет.</p>
+    <p>Средствами HTML осуществляется переход на другие страницы сети Интернет.</p>
+    <p>123.</p>
+</body>
+
+</html>`
+
+console.log(extractText(html))
+
--- a/lectures/lec5/p2/task3.js
+++ b/lectures/lec5/p2/task3.js
@@ -0,0 +1,8 @@
+let arr = [12, 17, 12, 67, 23, 67, 8, 8, 9, 12, 8];
+
+let newArr = arr.filter(function (item, index) {
+    return arr.indexOf(item) === index;
+});
+
+alert(newArr);
+//12,17,67,23,8,9
--- a/lectures/lec5/p2/task4.js
+++ b/lectures/lec5/p2/task4.js
@@ -0,0 +1,8 @@
+function sortNumbers(str){
+    str=str.split(" ");
+    return str.filter(substr => !isNaN(parseFloat(substr)) && isFinite(Number(substr))).map(Number).sort((a,b) => {return Number(a)-Number(b)});
+}
+
+alert(sortNumbers(" 12 234 67 aboba 123 123 83 27 6"))
+
+
--- a/lectures/lec5/p3/task1.js
+++ b/lectures/lec5/p3/task1.js
@@ -0,0 +1,10 @@
+let items = {
+    'ручка': 20,
+    'альбом': "a16",
+    'тетрадь': 10
+};
+
+let entries = Object.entries(items);
+items=Object.fromEntries(entries.filter(entry =>!isNaN(parseFloat(entry[1]) && isFinite(Number(entry[1])))))
+
+console.log(items);
--- a/lectures/lec5/p3/task2.js
+++ b/lectures/lec5/p3/task2.js
@@ -0,0 +1,17 @@
+
+function updateObject(oldObject, newObject) {
+    const [newKey, newValue] = Object.entries(newObject)[0];
+    if (newKey in oldObject) {
+        oldObject[newKey] += newValue;
+    } else {
+        oldObject[newKey] = newValue;
+    }
+    return oldObject;
+}
+
+
+const oldObject = { 1: 10, 2: 20, 3: 30 };
+const newObject = { 2: 15 };
+
+const updatedObject = updateObject(oldObject, newObject);
+console.log(updatedObject);
--- a/lectures/lec5/p3/task3.js
+++ b/lectures/lec5/p3/task3.js
@@ -0,0 +1,15 @@
+let objGoods = {
+    "ручка": [100, 50.60],
+    "карандаш": [120, 30.00],
+    "тетрадь": [200, 10.50]
+};
+
+outArr = [];
+Object.entries(objGoods).forEach((entry) => {
+    let name = entry[0];
+    entry[1].forEach(price => {
+        outArr.push({ "name": name, amount: price })
+    })
+});
+
+console.log(outArr);
--- a/lectures/lec5/p3/task4.js
+++ b/lectures/lec5/p3/task4.js
@@ -0,0 +1,11 @@
+let items = {
+    'ручка': 20,
+    'альбом': 16,
+    'тетрадь': 10
+};
+
+let entries = Object.entries(items);
+entries.sort((a,b) => Number(a[1])-Number(b[1]));
+items=Object.fromEntries(entries)
+
+console.log(items);
--- a/lectures/lec6/part1/part4.js
+++ b/lectures/lec6/part1/part4.js
@@ -0,0 +1,7 @@
+document.getElementsByName("img").forEach((elem) => {
+    if (elem.hasAttribute("width") && elem.hasAttribute("height")) {
+        elem.removeAttribute("width");
+        elem.removeAttribute("height");
+    }
+    elem.classList.add("pict");
+})
--- a/lectures/lec6/part1/task1.js
+++ b/lectures/lec6/part1/task1.js
@@ -0,0 +1,6 @@
+let elemList = document.getElementsByTagName("*")
+elemList.forEach(element => {
+    if(element.children.length==3){
+        console.log(element)
+    }
+});
--- a/lectures/lec6/part1/task2.js
+++ b/lectures/lec6/part1/task2.js
@@ -0,0 +1,5 @@
+let elemList = document.getElementsByTagName("ol");
+
+elemList.forEach(olElem => {
+    olElem.children.forEach(child =>{child.display = "none";})
+});
--- a/lectures/lec6/part1/task3.js
+++ b/lectures/lec6/part1/task3.js
@@ -0,0 +1,7 @@
+document.getElementsByName("*").forEach((elem) => {
+    for (attr in ["align", "width", "height"]) {
+        if (elem.hasAttribute(attr)) {
+            elem.removeAttribute(attr);
+        }
+    }
+})
--- a/lectures/lec6/part1/task5.js
+++ b/lectures/lec6/part1/task5.js
@@ -0,0 +1,11 @@
+
+const paragraphs = ['C++', 'C#', 'JavaScript'];
+const textDiv = document.getElementById('text');
+
+let elemLink = textDiv.firstElementChild;
+paragraphs.forEach(paragraph => {
+    const p = document.createElement('p');
+    p.innerHTML = paragraph;
+    textDiv.insertBefore(p, elemLink);
+    elemLink = elemLink.nextElementSibling;
+});
--- a/lectures/lec6/part1/task6.js
+++ b/lectures/lec6/part1/task6.js
@@ -0,0 +1,4 @@
+const menu = document.getElementById('menu');
+while (menu.firstChild) {
+    menu.removeChild(menu.firstChild);
+}
--- a/lectures/lec6/part2/task1.txt
+++ b/lectures/lec6/part2/task1.txt
@@ -0,0 +1,3 @@
+1. юзер нажимает мышь в поле с объектами -> onmousedown 
+2. мышь движется куда-то зачем-то -> onmousemove
+3. пользователь отпускает мышь -> onmouseup
--- a/lectures/lec6/part2/task2.txt
+++ b/lectures/lec6/part2/task2.txt
@@ -0,0 +1,10 @@
+Последовательность событий, происходящих при вводе значения в текстовое поле:
+1. focus  текстовое поле получает фокус 
+--- следующие повторяются
+2. onpaste ктрл в прожато
+3. keydown  пользователь нажимает клавишу на клавиатуре.
+4. input  значение текстового поля изменяется (например, при вводе символа).
+5. keyup  пользователь отпускает клавишу.
+--- следующие не повторяются
+6. change  пользователь завершает ввод и текстовое поле теряет фокус, если значение было изменено.
+7. blur  текстовое поле теряет фокус (например, пользователь кликает вне текстового поля).
--- a/lectures/lec6/part2/task3.js
+++ b/lectures/lec6/part2/task3.js
@@ -0,0 +1,11 @@
+document.getElementById('aboba').addEventListener('mouseover', function() {
+    const parent = this.parentElement;
+    parent.style.paddingTop = `${parseFloat(window.getComputedStyle(parent).paddingTop) * 1.1}px`;
+    parent.style.paddingBottom = `${parseFloat(window.getComputedStyle(parent).paddingBottom) * 1.1}px`;
+});
+
+document.getElementById('aboba').addEventListener('mouseout', function() {
+    const parent = this.parentElement;
+    parent.style.paddingTop = `${parseFloat(window.getComputedStyle(parent).paddingTop) / 1.1}px`;
+    parent.style.paddingBottom = `${parseFloat(window.getComputedStyle(parent).paddingBottom) / 1.1}px`;
+});
--- a/lectures/lec6/part2/task4.js
+++ b/lectures/lec6/part2/task4.js
@@ -0,0 +1,9 @@
+document.querySelectorAll('img').forEach(function(img) {
+    img.addEventListener('mouseover', function() {
+        this.classList.add('border');
+    });
+
+    img.addEventListener('mouseout', function() {
+        this.classList.remove('border');
+    });
+});
--- a/lectures/lecture3.txt
+++ b/lectures/lecture3.txt
@@ -1,69 +0,0 @@
-ol#list(type="I")
-  li Препроцессоры HTML
-    ul(type="disc")
-      li.first
-        a(href="#") Haml
-      li Pug
-  li Препроцессоры CSS
-    ul(type="circle")
-      li.first SAAS
-      li Stylus
-
-
-
-
-
-
- var tag = 'h'
- var i = 1
-
-#{tag+i} Уровень #{i}
- i++
-#{tag+i} Уровень #{i}
- i++
-#{tag+i} Уровень #{i}
- i++
-#{tag+i} Уровень #{i}
-
- 
-
-
- var products ={"Товар":"Цена","ручка":30.5, "карандаш":50, "альбом":156, "тетрадь":21.5, "ластик":10.2}
-table
-    each name,price in products
-        tr
-            td #{name}
-            td #{price}
-
-
-
-table
-    - for(var i=0;i<10;i++)
-        tr
-            - for(var j=0;j<10;j++)
-                - if((i + j) % 2 == 0)
-                    td.white 
-                - else 
-                    td.black
-
-
-
-mixin createList(listType, items, tag)
-  - var dispListType = "ul"
-  - if (listType == "ol")
-    - dispListType = "ol"
-
-  #{dispListType}.list
-    each item in items
-      li
-        #{tag} #{item}
-
-// Вызов миксина
-+createList('ul', ['Python', 'JavaScript', 'Java'], 'strong')
-
-
-size=1%
-section
-    box-shadow: size size (2*size)  rgba(0,0,0,0.5)
-    padding:size*2
-    margin:size*4
--- a/lectures/readme.md
+++ b/lectures/readme.md
@@ -0,0 +1,159 @@
+#Сборник конспектов лекций
+## 0 История интернета и начало HTML
+В лекции подробно описано происхождение интернета, начиная от проекта ARPANET и его эволюции к современной всемирной сети, которую мы знаем сегодня. Также рассказано про знаменитые браузерные войны между различными компаниями и про окончательную победу Chrome в борьбе за доминирование на рынке браузеров. Лекция охватывает развитие веб-технологий от WEB1.0 (статичные страницы) через WEB2.0 (интерактивные социальные сети) до современного WEB3.0 (децентрализованные технологии и блокчейн).
+ 
+## 1 HTML
+Лекция посвящена изучению основ языка разметки HTML, включая синтаксис, правила оформления кода и подробную информацию по существующим тегам стандарта HTML4. Особое внимание уделено работе с формами, правильному использованию лейблов и их привязке к элементам ввода (инпутам) для обеспечения доступности и удобства использования веб-страниц.
+задачи:
+1. исправить код
+2. написать свой продублировав страничку с картинки
+
+## 2 CSS
+
+### p1
+Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей
+id > class >tag
+блочное\строчное\блочно-строчное отображение элемента
+элемент и его padding  border  margin
+обобщённые свойства (border background margin font )
+какие атрибуты применимы на блочные, а какие на строчные
+
+задачи:
+1. отформатировать код css
+2. отчистить код от атрибутов внутри тегов
+3. применить теги на код в нужном порядке
+4. скопировать страницу 
+5. добавить меню на скопированную страницу
+
+### p2
+Во второй части раздела основной фокус сделан на изучении различных типов селекторов CSS, включая сложные псевдоклассы типа :nth-child, :hover, :focus и другие. Также подробно рассматриваются псевдоэлементы (::first-line, ::before, ::after), которые позволяют стилизовать части элементов без добавления дополнительной разметки в HTML.
+
+задачи:
+1. практика на селекторы, выбор элемента из кода
+2. практика на селекторы, выбор элемента из кода
+3. практика на селекторы, выбор элемента из кода
+
+### p3
+В третьей части подробно рассказывается про адаптивную и динамическую вёрстку, включая использование viewport-единиц измерения: vw (viewport width), vh (viewport height), vmin и vmax для создания отзывчивых макетов. Также изучаются ограничивающие свойства min/max-width и min/max-height, а также основы работы с медиа-запросами для создания адаптивного дизайна под разные устройства и размеры экрана.
+
+
+задачи:
+1. применить vh
+2. ограничение max-width
+3. медиазапрос
+
+### p4
+### p4 - Flexbox
+В четвёртом модуле рассказыватется про flex и его использование, атрибуты выравнивания внутри контейнера и внутри элементов контейнеров, перенос\запрет переноса и т.д., а ну и про gap тоже разумеется row-gap, column-gap. Также затрагиваются такие свойства, как flex-grow, flex-shrink и flex-basis, которые определяют, как элементы растягиваются, сжимаются или занимают пространство в контейнере. Рассматриваются различные значения для justify-content, align-items и align-self. Так-же упоминается  order, позволяющий изменять порядок элементов в контейнере.
+
+задачи:
+1. осознать что когда запрет на wrap то wrap очевидно запрещается
+2. изменеие направления flex на медиазапросе, включение отключение переноса
+3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов
+
+### p5
+Пятая часть посвящена изучению CSS Grid Layout - мощной системы двумерного макетирования, начиная с основных определений, свойств контейнера и общих атрибутов грид-системы. Подробно рассказывается про специальные единицы размеров fr (fractional unit), функции repeat() и minmax() для создания гибких сеток, а завершается изучение темой grid-areas - формированием именованных зон в таблицах и размещением элементов в произвольных позициях независимо от их расположения в HTML-дереве.
+
+
+## 3 Bootstrap
+Определение фреймворка, примеры того как им пользоваиться
+описание 12 колоночной вёрстки и связанных с ней предварительно готовых классо, концепция контрольныз точек (sm md ls xl xxl).
+так-же затронуты контейнеры, они имеют фиксированый max-width который определяется соотв. атрибутом чекпоинта.
+так-же немного расказано о внутрянке самого фрейморка (контейнеры построены на flex) и опять-же про аналог алинга айтемов как в гридах или флексе.
+В Bootstrap существует три уровня: базовый (контейнеры и сетка), компоненты (кнопки, формы, карточки) и утилиты (классы для быстрого изменения внешнего вида). Так-же описывается создание атомарных классов и можификаторов цветов...
+
+задачи:
+1. задача на чекпоинты и их понимание
+2. применение разных дисплеев
+3. задача на align и чекпоинты
+
+## 4 Препроцессоры
+
+### p1 - Методологии вёрстки
+Лекция посвящена изучению методологии БЭМ (Блок__Элемент--Модификатор) - популярного подхода к именованию CSS-классов, основанного на принципе называния блоков по смыслу и функциональности, которую они выполняют. Кроме БЭМ также рассматриваются альтернативные методологии организации CSS-кода, такие как SMACSS (Scalable and Modular Architecture for CSS) и ECSS (Enduring CSS), каждая из которых предлагает свой подход к структурированию и масштабированию стилей.
+
+задачи:
+1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... )
+
+### p2 - препорцессоры  HTML
+
+Идея препроцессоров - инструмент преобразующий код из одного вида в другой в рамках однго языка, используется для сокращения кода который пишет разработчик и для упрощения жизни в целом.
+в лекции упомянуты несколько препроцессоров, но основной фокус идёт на pug (JADE), далее речь в основном о нём
+Вся лекция в целом описывает работу , начиная от создания структуры и  комментариями и заканчивая  атрибутами  и разными нюансами, далее основаня информация в  названии задач.
+после всех задач была рассмотрена концепция шаблонов для упрощеня создания повторяющихся страниц
+
+задачи:
+1. базовая структура + атрибуры
+2. структура атрибуты shothand для классов
+3. переменные, инкрементация и подстановка текста
+4. each, подстановка занчений по рано
+5. циклы, вложенность?
+6. mixin - местный аналог макроса из C
+
+### p3 - препроцессоры CSS
+Упомянуто несолкьо препроцессоров, фокус на stylus.
+в целом содержание лекции видно в задачах
+хотя в заданиях не затрагивался момент с возвращением значениев из миксинов, но всё равно инетересно
+так-же оказалось что пробелы  при написании операторов вычислений обязательны, это меня удивило конечно
+задачи:
+1. переменные
+2. вложенность
+3. опять вложенность и на осознание принципов компиляции и частичных ссылок
+4. миксины и вложенность
+5. миксины и выисление
+
+## 5 JavaScript
+
+### p1 - операторы языка
+Введение в основы JavaScript, синтаксис языка, базовые операторы и конструкции. Рассматриваются способы вывода информации (alert, document.write), работа с переменными и типами данных, шаблонные строки, условные операторы, циклы и функции. Особое внимание уделяется тернарному оператору, различным способам объявления функций (function declaration, function expression, arrow functions) и работе с аргументами функций.
+
+задачи:
+1. вывод с помощью alert и document.write
+2. работа с переменными и шаблонными строками
+3. условные операторы и проверка чисел
+4. тернарный оператор 
+5. циклы for и создание HTML-элементов
+6. объявление функций и работа с arguments
+7. function expression 
+8. arrow functions 
+
+### p2 - структуры данных
+Лекция посвящена изучению работы с основными структурами данных в JavaScript - массивами и строками, включая освоение функциональных методов обработки массивов. Подробно рассматриваются методы высшего порядка: filter() для фильтрации элементов, map() для преобразования данных, reduce() для агрегации значений, sort() для сортировки, а также различные методы работы со строками для парсинга и обработки текстовой информации.
+
+
+задачи:
+1. извлечение и сумма чисел из строки 
+2. извлечение текста из HTML-тегов 
+3. на понимание работы оператора filter
+4. фильтрация, преобразование и сортировка чисел из строки
+
+### p3 - объекты
+Лекция охватывает комплексную работу с объектами в JavaScript, включая различные способы их создания, модификации структуры и обработки содержащихся в них данных. Изучаются методы перебора свойств объектов (for...in, Object.keys(), Object.values(), Object.entries()), техники фильтрации и сортировки данных внутри объектов, а также операции с вложенными структурами и преобразование объектов.
+
+задачи:
+1. фильтрация свойств объекта по типу значений 
+2. обновление объекта с добавлением или увеличением значений
+3. unford вложенныз свойств
+4. сортировка объекта по значениям свойств 
+
+## 6 JS  (DOM, Events)
+
+### p1 - DOM
+В лекции описано взаимодействие с древом документа, методы поиска элементов (getElementsByTagName, getElementsByName, getElementById), работа с атрибутами элементов (hasAttribute, removeAttribute), манипуляция с классами (classList.add), создание и вставка новых элементов (createElement, insertBefore), удаление элементов (removeChild), навигация по DOM-дереву (children, firstElementChild, nextElementSibling).
+
+задачи:
+1. поиск элементов с определенным количеством дочерних элементов
+2. скрытие элементов списка через изменение display
+3. удаление устаревших атрибутов (align, width, height) у всех элементов
+4. удаление размерных атрибутов у изображений и добавление CSS-класса
+5. динамическое создание и вставка параграфов в документ
+6. полная очистка содержимого элемента через removeChild
+
+### p2 - Events
+Изучение системы событий в JavaScript, последовательность срабатывания событий мыши и клавиатуры, работа с обработчиками событий через addEventListener. Рассматриваются события мыши (mousedown, mousemove, mouseup, mouseover, mouseout), события ввода текста (focus, keydown, input, keyup, change, blur, paste), динамическое изменение стилей элементов при взаимодействии пользователя.
+
+задачи:
+1. описание последовательности событий мыши
+2. описание последовательности событий при вводе текста
+3. изменение размеров родительского элемента при наведении/убирании мыши
+4. добавление/удаление CSS-классов для изображений при наведении мыши 
--- a/lectures/temp.js
+++ b/lectures/temp.js
@@ -1,17 +0,0 @@
-
-
-function updateDict(dict, update) {
-    let key, value = update.entries()[0];
-    dict[key] = value + (key in dict) ? dict[key] : 0;
-}
-
-
-
-aboba={"asd":123}
-upd={"asd":123}
-upd1={"asd":123}
-
-updateDict(aboba,upd1)
-console.log(aboba)
-updateDict(aboba,upd1)
-console.log(aboba)
Author	SHA1	Message	Date
OkunElya	df21df0fff	lectures fix	2026-01-09 19:35:08 +10:00
OkunElya	d10f15a34a	longer lectures	2026-01-03 22:59:02 +10:00
OkunElya	f982d05a54	lectures done	2026-01-03 15:32:33 +10:00
OkunElya	b6776f93fd	duplicated solutions in loops to match themes	2026-01-03 13:44:33 +10:00
OkunElya	e6806a2366	js lec 1 added	2026-01-03 13:40:15 +10:00
OkunElya	cca7d57569	lec 3 done	2026-01-03 01:21:46 +10:00
OkunElya	1c50d7ce0e	finished up to bootstrap	2026-01-01 23:38:59 +10:00
OkunElya	b00d7fb34d	added readme for lectures lec2 done	2026-01-01 20:05:31 +10:00
OkunElya	7818949863	lec 1 added	2026-01-01 18:08:32 +10:00
OkunElya	5d7ecb1f13	math fixed	2026-01-01 15:57:09 +10:00
OkunElya	9fef1e5b0d	finishing touches	2026-01-01 15:24:08 +10:00
OkunElya	c09b7b5769	images fixed	2026-01-01 15:05:20 +10:00
OkunElya	cf80fd251e	small refactor	2026-01-01 14:37:53 +10:00
OkunElya	46e3696d85	reset bug fixed	2026-01-01 14:17:34 +10:00
OkunElya	9e5950490a	values checking added	2026-01-01 14:04:53 +10:00
OkunElya	26bc727758	tooltip for output fields added	2026-01-01 13:52:51 +10:00
OkunElya	04db81b55a	math fixed	2025-12-31 22:13:22 +10:00
OkunElya	4ab5967abe	basic structure created	2025-12-31 20:42:21 +10:00
				`@@ -0,0 +1 @@`
				`let result = n > 0 ? 1 / n : n < 0 ? 1 / n ** 2 : 0;`