Untitled
unknown
html
2 years ago
4.8 kB
8
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- задача 1: да се създаде скрипт, чрез който при натискане на бутон "Натисни" елемент кутийка с текст се премества по-надясно с по 10 px посредством увеличаващ се margin-left --> <!-- задача 2: да се създаде скрипт, чрез който при натискане на бутон с клас rhyme се създава нов <li class="breadcrumb-item"> елемент от списък breadcrumb, в който има хиперлинк а и съдържанието на текстовата част на линка е текстът от кликнатия елемент --> <!-- задача 3: да се създаде скрипт, чрез който при натискане бутони 20%, 40% и 80% да се коригира широчината на елемент progress-bar. (може да използвате променлива?.style.width за да управлявате широчината ) --> <!-- задача 2: създайте скрипт, чрез който при натискане бутони "Добави" се прочита въведеното в текстово поле и се добавя като елемент от списък select в <option> --> <script> document.addEventListener("DOMContentLoaded", function(){ task1(); task2(); task3(); task4(); }); const task1 = () => { } const task2 = () => { } const task3 = () => { } const task4 = () => { } </script> </head> <body> <!-- задача 1 --> <div class="container my-4 border border-dark py-2"> <div class="row"> <div class="col-12"> <ul class="list-group"> <li class="list-group-item"> <div class="d-inline-block border p-2 bg-primary text-white" data-margin="10" id="">кутийка с текст</div> <input type="button" class="btn btn-info float-end" value="Натисни" id=""> </li> </ul> </div> </div> </div> <!-- задача 1 --> <!-- задача 2 --> <div class="container border border-dark py-2"> <div class="row"> <div class="col-2"> <div class="form-group"> <input type="button" class="form-control rhyme" value="bread"> <input type="button" class="form-control rhyme" value="link" > <input type="button" class="form-control rhyme" value="home"> <input type="button" class="form-control rhyme" value="my profile"> </div> </div> </div> <div class="row"> <div class="col-12 bg-light"> <ul class="breadcrumb pt-2 mx-2 mb-2"> <li class="breadcrumb-item"><a href="#">bread</a></li> <li class="breadcrumb-item"><a href="#">home</a></li> </ul> </div> </div> </div> <!-- задача 2 --> <!-- задача 3 --> <div class="container my-4 border border-dark py-2"> <div class="progress" style="height:20px"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%"></div> </div> <div class="col-12 text-center mt-2"> <a href="#" class="btn btn-success">20%</a> <a href="#" class="btn btn-success">40%</a> <a href="#" class="btn btn-success">80%</a> </div> </div> <!-- задача 3 --> <!-- задача 4 --> <div class="container my-4 border border-dark py-2"> <div class="row"> <div class="col-12"> <div class="form-inline"> <div class="form-group"> <label for="year" class="mx-2 ">Година</label> <input type="text" class="mx-2 form-control" id=""> <select name="select" id="select" class="mx-2 form-select"> <option>1990</option> <option>произволни данни</option> </select> </div> <div class="form-group"> <input type="button" class="mx-2 btn btn-info" value="Добави" id=""> </div> </div> </div> </div> </div> <!-- задача 4 --> </body> </html>
Editor is loading...