Untitled

mail@pastecode.io avatar
unknown
html
a year ago
4.8 kB
6
Indexable
Never
<!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>