Untitled
unknown
html
2 years ago
6.3 kB
9
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: да се създаде скрипт, чрез който при натискане бутони за плодове или зеленчуци, съответната стойност от бутона се пренася в текстовото поле, като лявото текстово поле може да съдържа само плодове, а дясното само зеленчуци. При повторно натискане на бутон, предишната стойност се заменя с новата, взета от съответния бутон.-->
<!-- задача 2: да се създаде скрипт, чрез който при натискане върху секция, тя се премества на първо място в списък с клас table-of-contents. Скриптът трябва да работи за всички елементи и да е възможно няколкократното пренареждане на един и същи елемент.-->
<!-- задача 3: да се създаде скрипт, чрез който при натискане бутони "Изпълни" се взима числова стойност от едноредово поле и се изтрива съдържанието на клетка, чиито пореден номер отговаря на въведената стойност. Напр. въвежда се 7 и се изтрива съдържанието на клетка ZZ, въвежда се 16 и се изтрива съдържание на клетка [[[-->
<!-- задача 4: да се създаде скрипт, чрез който при натискане върху изображение img с клас border се добавя стил border-radius:5px. При повторно натискане се добавят още 5px и така до без край (при 150x150 размери след 75px border-radius изображението прилича на окръжност).-->
<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">
<div class="row">
<div class="form-group col-lg-6 col-md-6 col-sm-6">
<input type="text" id="fruit" class="form-control ">
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6">
<input type="text" id="vegetable" class="form-control ">
</div>
</div>
<div class="row">
<div class="form-group col-lg-6 col-md-6 col-sm-6">
<a href="#" class="btn btn-primary food-btn" data-food="fruit">Ябълка</a>
<a href="#" class="btn btn-primary food-btn" data-food="fruit">Портокал</a>
<a href="#" class="btn btn-primary food-btn" data-food="fruit">Манго</a>
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-6">
<a href="#" class="btn btn-primary food-btn" data-food="vegetable">Домат</a>
<a href="#" class="btn btn-primary food-btn" data-food="vegetable">Репичка</a>
<a href="#" class="btn btn-primary food-btn" data-food="vegetable">Картоф</a>
</div>
</div>
</div>
</div>
<!-- задача 1 -->
<!-- задача 2 -->
<div class="container" id="ladder">
<div class="row">
<div class="col">
<ul class="list-group table-of-contents">
<a class="list-group-item" href="#navbar">Navbar</a>
<a class="list-group-item bg-info" href="#buttons">Buttons</a>
<a class="list-group-item bg-primary text-white" href="#typography">Typography</a>
<a class="list-group-item" href="#tables">Tables</a>
<a class="list-group-item bg-danger" href="#forms">Forms</a>
<a class="list-group-item bg-success" href="#navs">Navs</a>
<a class="list-group-item" href="#indicators">Indicators</a>
<a class="list-group-item bg-warning" href="#progress-bars">Progress bars</a>
<a class="list-group-item" href="#containers">Containers</a>
<a class="list-group-item bg-secondary" href="#dialogs">Dialogs</a>
</ul>
</div>
</div>
</div>
<!-- задача 2 -->
<!-- задача 3 -->
<div class="container my-4 border border-dark py-2">
<div class="row">
<div class="col-2">
<table class="table table-hover table-bordered" id="">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>XX</td>
<td>YY</td>
<td>ZZ</td>
<td>VV</td>
</tr>
<tr>
<td>+</td>
<td>-</td>
<td>*</td>
<td>/</td>
</tr>
<tr>
<td><<<</td>
<td>{{{</td>
<td>(((</td>
<td>[[[</td>
</tr>
</table>
<div class="form-group">
<input type="text" class="form-control" id="">
</div>
<input type="button" class="btn btn-info" id="" value="Изпълни"/>
</div>
</div>
</div>
<!-- задача 3 -->
<!-- задача 4 -->
<div class="container my-4">
<div class="row">
<div class="col">
<img src="http://placehold.co/150x150" alt="" class="border border-success">
</div>
</div>
</div>
<!-- задача 4 -->
</body>
</html>Editor is loading...