alfianyusufabdullah · September 11, 2024 01:46
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --background-color: #fff;
        --text-color: black;
      }

      [data-theme="dark"] {
        --background-color: rgb(42, 42, 42);
        --text-color: white;
      }

      body {
        background-color: var(--background-color);
      }

      .container {
        width: 40%;
        margin: 50px auto;
      }

      textarea {
        width: 100%;
        height: 100px;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: var(--text-color);
        background-color: var(--background-color);
      }

      button {
        background-color: #04aa6d;
        color: var(--text-color);
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
      }

      #quote-wrapper {
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 25px;
      }

      #quote {
        font-size: 24px;
        font-style: italic;
      }

      p,
      h3 {
        color: var(--text-color);
      }
    </style>
    <script>
      window.onload = () => {
        const btnSave = document.getElementById("btn-save");
        btnSave.addEventListener("click", () => {
          const quote = document.getElementById("quote-value").value;
          const quotePlaceholder = document.getElementById("quote");
          if (quote === "") {
            quotePlaceholder.innerHTML = "kosong bang!";
          } else {
            quotePlaceholder.innerHTML = quote;
          }
        });

        const btnTheme = document.getElementById("btn-theme");
        btnTheme.addEventListener("click", () => {
          const currentTheme = document.body.getAttribute("data-theme");
          if (currentTheme === "dark") {
            document.body.setAttribute("data-theme", "light");
          } else {
            document.body.setAttribute("data-theme", "dark");
          }
        });
      };
    </script>
  </head>
  <body>
    <body data-theme="dark">
      <main>
        <div class="container">
          <div>
            <textarea placeholder="your quote" id="quote-value"></textarea>
            <button id="btn-save">Generate</button>
            <button id="btn-theme">Ganti Tema</button>
          </div>
          <h3>Preview</h3>
          <div id="quote-wrapper">
            <p id="quote">ini quote</p>
          </div>
        </div>
      </main>
    </body>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	:root {
	--background-color: #fff;
	--text-color: black;
	}

	[data-theme="dark"] {
	--background-color: rgb(42, 42, 42);
	--text-color: white;
	}

	body {
	background-color: var(--background-color);
	}

	.container {
	width: 40%;
	margin: 50px auto;
	}

	textarea {
	width: 100%;
	height: 100px;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: var(--text-color);
	background-color: var(--background-color);
	}

	button {
	background-color: #04aa6d;
	color: var(--text-color);
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 10px;
	}

	#quote-wrapper {
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 25px;
	}

	#quote {
	font-size: 24px;
	font-style: italic;
	}

	p,
	h3 {
	color: var(--text-color);
	}
	</style>
	<script>
	window.onload = () => {
	const btnSave = document.getElementById("btn-save");
	btnSave.addEventListener("click", () => {
	const quote = document.getElementById("quote-value").value;
	const quotePlaceholder = document.getElementById("quote");
	if (quote === "") {
	quotePlaceholder.innerHTML = "kosong bang!";
	} else {
	quotePlaceholder.innerHTML = quote;
	}
	});

	const btnTheme = document.getElementById("btn-theme");
	btnTheme.addEventListener("click", () => {
	const currentTheme = document.body.getAttribute("data-theme");
	if (currentTheme === "dark") {
	document.body.setAttribute("data-theme", "light");
	} else {
	document.body.setAttribute("data-theme", "dark");
	}
	});
	};
	</script>
	</head>
	<body>
	<body data-theme="dark">
	<main>
	<div class="container">
	<div>
	<textarea placeholder="your quote" id="quote-value"></textarea>
	<button id="btn-save">Generate</button>
	<button id="btn-theme">Ganti Tema</button>
	</div>
	<h3>Preview</h3>
	<div id="quote-wrapper">
	<p id="quote">ini quote</p>
	</div>
	</div>
	</main>
	</body>
	</body>
	</html>