smart-onion · May 26, 2025 07:34
diff --git a/hw8.js b/hw8.js
 <!doctype html>
 <html class="no-js" lang="">

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
 </head>

 <style>
  #form1{
    width: 300px;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(0, 0, 0, 0.65);
    padding: 25px 15px;
  }
  #remember{
    display: inline;
    width: 30px;
    float: left;
  }

  #form2{
  display: flex;
    flex-direction: column;
    width: 300px;
  }
  #colors{


  }
 </style>
 <body>
 <form id="form1" action="/submit" method="POST">
  <label for="login">Your login:</label>
  <input id="login" type="text" name="login" placeholder="login" required/>
  <label for="password">Your password:</label>
  <input id="password" type="password" name="password" placeholder="password" required/>
  <label for="remember">Remember me</label>
  <input type="checkbox" name="remember" id="remember" />
  <input type="submit" name="submit" value="Log in"/>
 </form>

 <div id="colors">
  <form id="form2">
    <div>
      <label for="r">R</label>
      <input id="r" type="number" name="r" min="0" max="255" value="0" />
      <label for="g">G</label>
      <input id="g" type="number" name="g" min="0" max="255" value="0" />
      <label for="b">B</label>
      <input id="b" type="number" name="b" min="0" max="255" value="0" />
    </div>
    <input type="submit" name="addColor" value="Add color"/>

  </form>
 </div>

 </body>
 <script>
  //task 1
  function getCookies() {
    let cookiesArr = document.cookie.split(';');
    let cookies ={};
    for (let i = 0; i < cookiesArr.length; i++) {
      let cookie = cookiesArr[i].trim();
      if (cookie.length > 0) {
        let parts = cookie.split('=');
        cookies[parts[0]] = parts[1];
      }
    }
    return cookies;
  }
  function task1(){
  let form = document.getElementById('form1');

  let cookies = getCookies();
  console.log(cookies);
  if(cookies.remember === 'true') {
    form.login.value = cookies.login;
    form.password.value = cookies.password;
    form.remember.checked = true;
  }

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    let remember = form.remember.checked;
    if (remember) {
      document.cookie = "remember=true;";
      document.cookie = `login=${form.login.value};`;
      document.cookie = `password=${form.password.value};`;
    }
  });}
  // task 2
  class ColorElement{
    constructor(r,g,b) {
      this.r = r;
      this.g = g;
      this.b = b;
    }
    createElement(){
      let div = document.createElement('div');
      let colorDiv = document.createElement('div');
      let h4 = document.createElement('h4');
      h4.textContent = `RGB (${this.r}, ${this.g}, ${this.b})`;
      colorDiv.style.backgroundColor = `rgb(${this.r}, ${this.g}, ${this.b})`;
      colorDiv.style.width = '50px';
      colorDiv.style.height = '50px';

      div.style.width = '200px';
      div.style.height = '50px';
      div.style.border = '1px solid black';
      div.style.display = 'flex';
      div.style.alignItems = 'center';
      div.style.margin = '10px'

      h4.style.marginLeft = '10px';

      div.appendChild(colorDiv);
      div.appendChild(h4);
      return div;
    }
  }

  function task2(){
    let form = document.getElementById('form2');
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      let r = document.getElementById('r').value;
      let g = document.getElementById('g').value;
      let b = document.getElementById('b').value;
      let color = new ColorElement(r,g,b);
      let div = color.createElement();
      document.getElementById('colors').appendChild(div);
    })
  }
 task2()
 </script>
 </html>
	<!doctype html>
	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="css/style.css">
	<meta name="description" content="">

	<meta property="og:title" content="">
	<meta property="og:type" content="">
	<meta property="og:url" content="">
	<meta property="og:image" content="">
	<meta property="og:image:alt" content="">

	<link rel="icon" href="/favicon.ico" sizes="any">
	<link rel="icon" href="/icon.svg" type="image/svg+xml">
	<link rel="apple-touch-icon" href="icon.png">

	<link rel="manifest" href="site.webmanifest">
	<meta name="theme-color" content="#fafafa">
	</head>

	<style>
	#form1{
	width: 300px;
	display: flex;
	flex-direction: column;
	border: 2px solid rgba(0, 0, 0, 0.65);
	padding: 25px 15px;
	}
	#remember{
	display: inline;
	width: 30px;
	float: left;
	}

	#form2{
	display: flex;
	flex-direction: column;
	width: 300px;
	}
	#colors{


	}
	</style>
	<body>
	<form id="form1" action="/submit" method="POST">
	<label for="login">Your login:</label>
	<input id="login" type="text" name="login" placeholder="login" required/>
	<label for="password">Your password:</label>
	<input id="password" type="password" name="password" placeholder="password" required/>
	<label for="remember">Remember me</label>
	<input type="checkbox" name="remember" id="remember" />
	<input type="submit" name="submit" value="Log in"/>
	</form>

	<div id="colors">
	<form id="form2">
	<div>
	<label for="r">R</label>
	<input id="r" type="number" name="r" min="0" max="255" value="0" />
	<label for="g">G</label>
	<input id="g" type="number" name="g" min="0" max="255" value="0" />
	<label for="b">B</label>
	<input id="b" type="number" name="b" min="0" max="255" value="0" />
	</div>
	<input type="submit" name="addColor" value="Add color"/>

	</form>
	</div>

	</body>
	<script>
	//task 1
	function getCookies() {
	let cookiesArr = document.cookie.split(';');
	let cookies ={};
	for (let i = 0; i < cookiesArr.length; i++) {
	let cookie = cookiesArr[i].trim();
	if (cookie.length > 0) {
	let parts = cookie.split('=');
	cookies[parts[0]] = parts[1];
	}
	}
	return cookies;
	}
	function task1(){
	let form = document.getElementById('form1');

	let cookies = getCookies();
	console.log(cookies);
	if(cookies.remember === 'true') {
	form.login.value = cookies.login;
	form.password.value = cookies.password;
	form.remember.checked = true;
	}

	form.addEventListener('submit', function(e) {
	e.preventDefault();
	let remember = form.remember.checked;
	if (remember) {
	document.cookie = "remember=true;";
	document.cookie = `login=${form.login.value};`;
	document.cookie = `password=${form.password.value};`;
	}
	});}
	// task 2
	class ColorElement{
	constructor(r,g,b) {
	this.r = r;
	this.g = g;
	this.b = b;
	}
	createElement(){
	let div = document.createElement('div');
	let colorDiv = document.createElement('div');
	let h4 = document.createElement('h4');
	h4.textContent = `RGB (${this.r}, ${this.g}, ${this.b})`;
	colorDiv.style.backgroundColor = `rgb(${this.r}, ${this.g}, ${this.b})`;
	colorDiv.style.width = '50px';
	colorDiv.style.height = '50px';

	div.style.width = '200px';
	div.style.height = '50px';
	div.style.border = '1px solid black';
	div.style.display = 'flex';
	div.style.alignItems = 'center';
	div.style.margin = '10px'

	h4.style.marginLeft = '10px';

	div.appendChild(colorDiv);
	div.appendChild(h4);
	return div;
	}
	}

	function task2(){
	let form = document.getElementById('form2');
	form.addEventListener('submit', function(e) {
	e.preventDefault();
	let r = document.getElementById('r').value;
	let g = document.getElementById('g').value;
	let b = document.getElementById('b').value;
	let color = new ColorElement(r,g,b);
	let div = color.createElement();
	document.getElementById('colors').appendChild(div);
	})
	}
	task2()
	</script>
	</html>
No results found