Untitled
unknown
html
2 years ago
6.1 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: да се създаде скрипт, чрез който при натискане върху изображение веднъж то се сменя от http://placehold.co/150x150 на http://placehold.co/50x50, а при повторно натискане върху същото избражение, се връща оригиналното http://placehold.co/150x150 -->
<!-- задача 2: да се създаде скрипт, чрез който при натискане на бутон с id = change се взима съдържанието на текстово поле, което може да е число от 1 до 3 и в съотвествие с въведеното число се добавя клас нов progress-bar-animated на 1 от 3-те прогресиращи ленти div.progress-bar (внимавайте да не сложите класа на родителя progress). Нека скриптът да позволи максимално една единствена да е анимирана, т.е. ще трябва да премахвате класа от предишната след смяна. -->
<!-- задача 3: да се създаде скрипт, чрез който при натискане на бутони от едно до пет се взима съответната стойност и я добавя към стойноста в полето. -->
<!-- задача 4: да се създаде скрипт, чрез който при натискане на бутоните "увеличи отляво или отдясно" се увеличава рамка с по 2px на елемент с клас .card-header; рамката по подразбиране започва от 2px solid green и при всяко натискане нараства с по 2px. -->
<script>
document.addEventListener("DOMContentLoaded", function(){
task1();
task2();
task3();
task4();
});
const task1 = () => {
}
const task2 = () => {
}
const task3 = () => {
}
const task4 = () => {
}
</script>
<style>
input[type=button].cube{
width:50px;
height:50px;
}
</style>
</head>
<body>
<!-- задача 1 -->
<div class="container border border-dark py-2">
<div class="row mb-4">
<div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
<div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
<div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
</div>
<div class="row mb-4">
<div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
<div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
<div class="col-lg-2 col-sm-2 col-md-2"><img src="http://placehold.co/150x150" alt=""></div>
</div>
</div>
</div>
<!-- задача 1 -->
<!-- задача 2 -->
<div class="container border border-dark py-2 my-4">
<div class="progress progress-striped " style="height:20px;">
<div class="progress-bar progress-bar-striped bg-success " style="width: 100%;"></div>
</div>
<div class="progress progress-striped " style="height:20px;">
<div class="progress-bar progress-bar-striped bg-info " style="width: 60%;"></div>
</div>
<div class="progress progress-striped " style="height:20px;">
<div class="progress-bar progress-bar-striped bg-danger " style="width: 30%;"></div>
</div>
<div class="form-group">
<input type="text" placeholder="въведете число между 1 и 3" class="form-control" id="progress"/>
<input type="button" class="form-control btn btn-info" value="change" id="change"/>
</div>
</div>
<!-- задача 2 -->
<!-- задача 3 -->
<div class="container my-4 border border-dark py-2">
<div class="form-group">
<label for="paragraph">Страница</label>
<input type="text" class="form-control" id="address">
</div>
<ul class="pagination mt-2" id='c'>
<li class="page-item ">
<a class="page-link bg-info" href="#c">1</a>
</li>
<li class="page-item">
<a class="page-link bg-info" href="#c">2</a>
</li>
<li class="page-item">
<a class="page-link bg-info" href="#c">3</a>
</li>
<li class="page-item">
<a class="page-link bg-info" href="#c">4</a>
</li>
<li class="page-item">
<a class="page-link bg-info" href="#c">5</a>
</li>
</ul>
</div>
<!-- задача 3 -->
<!-- задача 4 -->
<div class="container my-4 border border-dark py-2">
<div class="row">
<div class="col-5 mb-3">
<div class="card" id="">
<div class=" card-header text-center">
Look, I'm in a large well!
</div>
<ul class="col-12 card-body">
<li class="float-start btn btn-default previous" data-store="1"><a href="#b" class="left">← Увеличи отляво</a></li>
<li class="float-end btn btn-default next " data-store="1"><a href="#b" class="right">Увеличи отдясно →</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- задача 4 -->
</body>
</html>Editor is loading...