{% extends 'base.html' %}
{% block title %} Лаба {% endblock %}
{% load static %}

{% block styles %}
    <style>
    #example-content {
        border: 1px solid red;
    }

    #lab-content {
        border: 1px solid green;
        margin: 3em;
    }
    </style>
{% endblock %}

{% block content %}
    <h1 class=deprecated-page-header"> Страница для выполнения лабы </h1>

    <div id="example-content">
        <span id="c">Тут будет текст из JS</span>
        <script>
            let tcolor = prompt("Введите цвет текста (стиль CSS)", "red")
            document.getElementById("c").innerHTML = `Вы выбрали цвет текста: <span style="color: ${tcolor}">${tcolor}</span>`
        </script>
    </div>

    <div id="lab-content">
        <table id="mul-table"></table>
        <script>
            let table = document.getElementById("mul-table")
            let html = "<tbody>"
            for (let y = 1; y <= 10; y++) {
                html += "<tr>"
                for (let x = 1; x < 10; x++) {
                    let color = "#" + Math.round(Math.random() * 0xFFFFFF).toString(16)
                    html += `<td style="background: ${color}">${x * y}</td>`
                }
                html += "</tr>"
            }

            html += "</tbody>"

            table.innerHTML = html
        </script>
    </div>

{% endblock %}