Untitled

 avatar
unknown
html
2 years ago
6.1 kB
6
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">&larr; Увеличи отляво</a></li>
	            <li class="float-end btn btn-default next " data-store="1"><a href="#b" class="right">Увеличи отдясно &rarr;</a></li>
	          </ul>
	        </div>
        </div>
      </div>
    </div>

	<!-- задача 4 -->

</body>
</html>