Untitled

mail@pastecode.io avatar
unknown
html
a year ago
6.3 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: да се създаде скрипт, чрез който при натискане бутони за плодове или зеленчуци, съответната стойност от бутона се пренася в текстовото поле, като лявото текстово поле може да съдържа само плодове, а дясното само зеленчуци. При повторно натискане на бутон, предишната стойност се заменя с новата, взета от съответния бутон.-->

	<!-- задача 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>