sync

2025-05-01 14:37:08 -06:00
parent b6008d462e
commit 5cd4571a92
91 changed files with 1009 additions and 36 deletions
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Day 21</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js"></script>
+  </head>
+
+  <body>
+    <h2>Hello cruel world!</h2>
+  </body>
+</html>
@@ -0,0 +1,4 @@
+document.addEventListener('DOMContentLoaded', function() {
+  let h2 = document.querySelector('h2');
+  h2.innerText = 'The DOM is Magical';
+});
@@ -0,0 +1,4 @@
+body {
+  background-color: indigo;
+  color: white;
+}
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Day 22</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="script.js"></script>
+</head>
+
+<body>
+  <div class="square"></div>
+</body>
+
+</html>
@@ -0,0 +1,20 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  width: 100%;
+  border: 1px solid red;
+}
+
+.square {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background-color: pink;
+  bottom: 0;
+  left: 0;
+}
@@ -0,0 +1,6 @@
+div {
+  height: 100px;
+  width: 100px;
+  background-color: black;
+  border: 1px solid white;
+}
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Dummy Title</title>
+  <link href="css/styles.css" type="text/css" rel="stylesheet">
+  <script src="js/index.js" defer></script>
+</head>
+
+<body>
+  <?php
+  for ($i = 0; $i < 100; $i++)
+    echo '<div></div>';
+  ?>
+</body>
+
+</html>
@@ -0,0 +1,14 @@
+document.querySelectorAll('div').forEach((d) => {
+  d.style.backgroundColor = 'black';
+  d.addEventListener('click', populate);
+})
+
+function populate() {
+  if (this.style.backgroundColor === 'black') {
+    this.style.backgroundColor = 'red';
+    this.style.borderRadius = '50%';
+  } else {
+    this.style.backgroundColor = 'black';
+    this.style.borderRadius = '0%';
+  }
+}
@@ -0,0 +1,11 @@
+div {
+  position: absolute;
+  top: 0px;
+  height: 100px;
+  width: 100px;
+  background-color: black;
+}
+
+button {
+  float: right;
+}
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <title>Dummy Title</title>
+  <link href="css/styles.css" type="text/css" rel="stylesheet">
+  <script src="js/index.js" defer></script>
+</head>
+
+<body>
+  <button>Button</button>
+  <div></div>
+</body>
+
+</html>
@@ -0,0 +1,9 @@
+const div = document.querySelector('div');
+const button = document.querySelector('button')
+
+let times = 1;
+button.addEventListener('click', (e) => {
+  let px = 300 * times;
+  times++;
+  div.style.top = px + 'px';
+});