Untitled

mail@pastecode.io avatar
unknown
html
3 years ago
5.7 kB
3
Indexable
Never
<!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(){
			clean(document.body);

			task1();
			task2();
			task3();
			task4();

		});

		const task1 = () => {

		}
			
		const task2 = () => {

		}

		const task3 = () => {

		}

		const task4 = () => {

		}

		const clean = (node) =>
        {
          for(var n = 0; n < node.childNodes.length; n ++)
          {
            var child = node.childNodes[n];
            if
            (
              child.nodeType === 8
              ||
              (child.nodeType === 3 && !/\S/.test(child.nodeValue))
            )
            {
              node.removeChild(child);
              n --;
            }
            else if(child.nodeType === 1)
            {
              clean(child);
            }
          }
        }
	</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" 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" 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.it/150x150" alt="" class="border border-success">
			</div>
		</div>
	</div>
	<!-- задача 4 -->

</body>
</html>