Untitled
unknown
html
3 years ago
5.2 kB
20
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- задача 1: да се създаде скрипт, чрез който при натискане бутони за плодове или зеленчуци, съответната стойност от бутона се пренася в текстовото поле, като лявото текстово поле може да съдържа само плодове, а дясното само зеленчуци. При повторно натискане на бутон, предишната стойност се заменя с новата, взета от съответния бутон.-->
<!-- задача 2: да се създаде скрипт, чрез който при натискане върху секция, тя се премества на първо място в списък с клас table-of-contents. Скриптът трябва да работи за всички елементи и да е възможно няколкократното пренареждане на един и същи елемент.-->
<!-- задача 3: да се създаде скрипт, чрез който при натискане на бутон "Провери" се прочита число от едноредово текстово поле и се проверява дали числото се чете по еднакъв начин отляво надясно и отдясно наляво ( пример 132231), отговорът да се запише в конзолата с да или не.-->
<!-- задача 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">
<ul class="list-group table-of-contents">
<a class="list-group-item" href="#navbar">Navbar</a>
<a class="list-group-item alert-info" href="#buttons">Buttons</a>
<a class="list-group-item alert-primary text-white" href="#typography">Typography</a>
<a class="list-group-item" href="#tables">Tables</a>
<a class="list-group-item alert-danger" href="#forms">Forms</a>
<a class="list-group-item alert-success" href="#navs">Navs</a>
<a class="list-group-item" href="#indicators">Indicators</a>
<a class="list-group-item alert-warning" href="#progress-bars">Progress bars</a>
<a class="list-group-item" href="#containers">Containers</a>
<a class="list-group-item alert-secondary" href="#dialogs">Dialogs</a>
</ul>
</div>
<!-- задача 2 -->
<!-- задача 3 -->
<div class="container my-4">
<div class="row">
<div class="col-2">
<input type="text" class="form-control my-1" id="check">
<input type="button" class="btn btn-danger" 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...