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...