update

fatkhurrhn · Dec 1, 2024 · d448fa2 · d448fa2
1 parent 6524553
commit d448fa2
Show file tree

Hide file tree

Showing 134 changed files with 34,355 additions and 0 deletions.
diff --git a/htmlku/SansSnack-app/img/1.png b/htmlku/SansSnack-app/img/1.png
diff --git a/htmlku/SansSnack-app/img/2.png b/htmlku/SansSnack-app/img/2.png
diff --git a/htmlku/SansSnack-app/img/3.png b/htmlku/SansSnack-app/img/3.png
diff --git a/htmlku/SansSnack-app/img/4.png b/htmlku/SansSnack-app/img/4.png
diff --git a/htmlku/SansSnack-app/img/5.png b/htmlku/SansSnack-app/img/5.png
diff --git a/htmlku/SansSnack-app/img/baner2.png b/htmlku/SansSnack-app/img/baner2.png
diff --git a/htmlku/SansSnack-app/index.html b/htmlku/SansSnack-app/index.html
diff --git a/htmlku/SansSnack-app/style.css b/htmlku/SansSnack-app/style.css
diff --git a/htmlku/bouncy-password/index.html b/htmlku/bouncy-password/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Bouncy Password Error</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;display=swap'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<form action="">
+	<div class="field">
+		<label for="pass" class="field__label">Enter new password</label>
+		<input id="pass" class="field__input" type="password" name="pass" autocomplete="off" placeholder=" " aria-describedby="pass-error pass-note" aria-required="true" required>
+		<strong id="pass-error" class="field__error" data-error></strong>
+	</div>
+	<p id="pass-note" class="note"><small>Must contain at least <span data-req></span> characters.</small></p>
+	<button type="submit">Reset Password</button>
+</form>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/htmlku/bouncy-password/script.js b/htmlku/bouncy-password/script.js
@@ -0,0 +1,64 @@
+"use strict";
+window.addEventListener("DOMContentLoaded", () => {
+    const pass = new PasswordForm("form");
+});
+class PasswordForm {
+    /**
+     * @param el CSS selector of the form
+     */
+    constructor(el) {
+        var _a;
+        /** Minimum password length */
+        this.minLength = 6;
+        this._invalid = false;
+        this._message = "";
+        this.el = document.querySelector(el);
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", this.validate.bind(this));
+        this.minLengthDisplay();
+    }
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(value) {
+        this._invalid = value;
+    }
+    get message() {
+        return this._message;
+    }
+    set message(value) {
+        this._message = value;
+    }
+    /** Display the minimum characters required. */
+    minLengthDisplay() {
+        var _a;
+        const reqEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector("[data-req]");
+        if (reqEl) {
+            reqEl.textContent = `${this.minLength}`;
+        }
+    }
+    /**
+     * Check the input.
+     * @param e Submit event
+     */
+    validate(e) {
+        var _a, _b, _c, _d;
+        e.preventDefault();
+        this.invalid = ((_a = this.el) === null || _a === void 0 ? void 0 : _a.pass.value.length) < this.minLength;
+        (_b = this.el) === null || _b === void 0 ? void 0 : _b.pass.setAttribute("aria-invalid", this.invalid);
+        if (this.invalid) {
+            this.message = Message.TooShort;
+        }
+        else {
+            this.message = "";
+            (_c = this.el) === null || _c === void 0 ? void 0 : _c.pass.blur();
+        }
+        const errorEl = (_d = this.el) === null || _d === void 0 ? void 0 : _d.querySelector("[data-error]");
+        if (errorEl) {
+            errorEl.textContent = this.message;
+        }
+    }
+}
+var Message;
+(function (Message) {
+    Message["TooShort"] = "Too short!";
+})(Message || (Message = {}));
diff --git a/htmlku/bouncy-password/style.css b/htmlku/bouncy-password/style.css
@@ -0,0 +1,218 @@
+* {
+  border: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --hue: 223;
+  --bg: hsl(var(--hue),10%,90%);
+  --fg: hsl(var(--hue),10%,10%);
+  --focus: hsl(var(--hue),90%,50%);
+  --error: hsl(3,90%,40%);
+  --trans-dur: 0.3s;
+  --trans-timing1: cubic-bezier(0.65,0,0.35,1);
+  --trans-timing2: cubic-bezier(0.65,0,0.35,1.5);
+  font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));
+}
+
+body,
+button,
+input {
+  color: var(--fg);
+  font: 1em/1.5 "DM Sans", sans-serif;
+}
+
+body {
+  background-color: var(--bg);
+  display: flex;
+  height: 100vh;
+  transition: background-color var(--trans-dur), color var(--trans-dur);
+}
+
+button {
+  background-color: var(--fg);
+  border-radius: 0.5em;
+  color: var(--bg);
+  cursor: pointer;
+  display: block;
+  padding: 0.75em 1em;
+  width: 100%;
+  transition: background-color var(--trans-dur), color var(--trans-dur);
+  -webkit-appearance: none;
+  appearance: none;
+}
+button:hover {
+  background-color: var(--focus);
+}
+
+form {
+  margin: auto;
+  padding: 3em 0;
+}
+
+p {
+  margin-bottom: 1.5em;
+}
+
+small {
+  font-size: 0.75em;
+  line-height: 2;
+}
+
+.field {
+  margin-bottom: 1.5em;
+  padding-bottom: 0.375em;
+  position: relative;
+}
+.field__error, .field__label {
+  position: absolute;
+}
+.field__error {
+  color: var(--error);
+  top: 100%;
+  left: 0;
+  transition: color var(--trans-dur);
+}
+.field__input, .field__label {
+  -webkit-tap-highlight-color: transparent;
+}
+.field__input {
+  background-color: white;
+  border-radius: 0.5em;
+  box-shadow: 0 0 0 0.125em white inset, 0 0.25em 0 hsl(var(--hue), 10%, 70%);
+  outline: transparent;
+  padding: 0.75em 1em;
+  min-width: 15em;
+  -webkit-appearance: none;
+  appearance: none;
+  transition: background-color var(--trans-dur), box-shadow var(--trans-dur) var(--trans-timing1), color var(--trans-dur), transform var(--trans-dur) var(--trans-timing1);
+}
+.field__input:hover {
+  box-shadow: 0 0 0 0.125em hsl(var(--hue), 10%, 70%) inset, 0 0.25em 0 hsl(var(--hue), 10%, 70%);
+  transform: scale(1.08, 1.08);
+}
+.field__input:focus-visible {
+  box-shadow: 0 0 0 0.125em var(--focus) inset, 0 0.25em 0 var(--focus);
+  transform: scale(1, 1);
+}
+.field__input:active {
+  box-shadow: 0 0 0 0.25em hsl(var(--hue), 10%, 70%) inset, 0 0 0 hsl(var(--hue), 10%, 70%);
+  transform: translateY(0.375em);
+}
+.field__input[aria-invalid=true] {
+  animation: wobble calc(var(--trans-dur) * 3) var(--trans-timing1);
+  box-shadow: 0 0 0 0.125em var(--error) inset, 0 0.25em 0 var(--error);
+}
+.field__input[aria-invalid=true] + .field__error {
+  animation: fly-in calc(var(--trans-dur) * 3) var(--trans-timing1);
+}
+.field__label {
+  pointer-events: none;
+  top: 0.75em;
+  left: 1em;
+  transition: transform var(--trans-dur) var(--trans-timing2);
+  z-index: 1;
+}
+.field:has(.field__input[aria-invalid=true]) .field__label {
+  animation: bounce calc(var(--trans-dur) * 3) var(--trans-timing1);
+}
+.field:has(.field__input:focus-visible) .field__label, .field:has(.field__input:not(:placeholder-shown)) .field__label {
+  pointer-events: auto;
+  transform: translate(-1em, -2.5em);
+}
+.field:has(.field__input:placeholder-shown:active) .field__label {
+  transform: translate(0.2em, 0.375em);
+  transition-timing-function: var(--trans-timing1);
+}
+
+.note {
+  color: hsl(var(--hue), 10%, 30%);
+  transition: color var(--trans-dur);
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: hsl(var(--hue),10%,10%);
+    --fg: hsl(var(--hue),10%,90%);
+    --focus: hsl(var(--hue),90%,70%);
+    --error: hsl(3,90%,60%);
+  }
+
+  .field__input {
+    background-color: hsl(var(--hue), 10%, 30%);
+    box-shadow: 0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0 0.25em 0 black;
+  }
+  .field__input:hover {
+    box-shadow: 0 0 0 0.125em black inset, 0 0.25em 0 black;
+  }
+  .field__input:focus-visible {
+    box-shadow: 0 0 0 0.125em var(--focus) inset, 0 0.25em 0 var(--focus);
+  }
+  .field__input:active {
+    box-shadow: 0 0 0 0.25em black inset, 0 0 0 black;
+  }
+  .field__input[aria-invalid=true] {
+    box-shadow: 0 0 0 0.125em var(--error) inset, 0 0.25em 0 var(--error);
+  }
+
+  .note {
+    color: hsl(var(--hue), 10%, 70%);
+    transition: color var(--trans-dur);
+  }
+}
+/* Animations */
+@keyframes bounce {
+  from, to {
+    transform: translate(-1em, -2.5em);
+  }
+  16.67% {
+    transform: translate(-1em, -1.75em) rotate(-15deg) translateX(-0.75em);
+  }
+  33.33% {
+    transform: translate(-1em, -5em) rotate(15deg);
+  }
+  50% {
+    transform: translate(-1em, -5em);
+  }
+  66.67% {
+    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
+    transform: translate(-1em, -2em);
+  }
+  83.33% {
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+    transform: translate(-1em, -2.75em);
+  }
+}
+@keyframes fly-in {
+  from, 66.67% {
+    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
+    opacity: 0;
+    transform: translateY(50%);
+  }
+  83.33% {
+    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+    opacity: 1;
+    transform: translateY(-25%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes wobble {
+  from, 50%, to {
+    box-shadow: 0 0 0 0.125em var(--error) inset, 0 0.25em 0 var(--error);
+    transform: rotate(0);
+  }
+  16.67% {
+    box-shadow: 0 0 0 0.125em var(--error) inset, -0.25em 0.25em 0 var(--error);
+    transform: rotate(-15deg);
+  }
+  33.33% {
+    box-shadow: 0 0 0 0.125em var(--error) inset, 0.25em -0.25em 0 var(--error);
+    transform: rotate(15deg);
+  }
+}
diff --git a/htmlku/figma-project-api/script.js b/htmlku/figma-project-api/script.js
@@ -0,0 +1,45 @@
+const accessToken = '';
+// const accessToken = '';
+
+const fileKey = ''; 
+
+// Mendapatkan detail proyek dari Figma API
+async function getFigmaProjects() {
+  try {
+    const response = await fetch(`https://api.figma.com/v1/files/${fileKey}`, {
+      headers: {
+        'Authorization': `Bearer ${accessToken}`
+      }
+    });
+
+    if (!response.ok) {
+      throw new Error('Gagal mendapatkan data dari API');
+    }
+
+    const data = await response.json();
+    displayProjects(data);
+  } catch (error) {
+    console.error('Error:', error);
+    document.getElementById('projects').innerText = 'Gagal memuat project Figma';
+  }
+}
+
+// Menampilkan data project
+function displayProjects(data) {
+  const projectsDiv = document.getElementById('projects');
+  const projectTitle = data.name || 'Unnamed Project';
+
+  // Menampilkan nama project
+  const projectElement = document.createElement('div');
+  projectElement.className = 'project';
+  projectElement.innerHTML = `
+    <h2>${projectTitle}</h2>
+    <p>ID Project: ${data.document.id}</p>
+    <p>Last Modified: ${data.lastModified}</p>
+  `;
+
+  projectsDiv.appendChild(projectElement);
+}
+
+// Memanggil fungsi untuk menampilkan project
+getFigmaProjects();
diff --git a/htmlku/github-profile-searcher/index.html b/htmlku/github-profile-searcher/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GitHub Profile Searcher</title>
+
+    <!-- Style CSS -->
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <form class="user-form" id="form">
+        <input type="text" id="search" placeholder="Search a Github User">
+    </form>
+
+    <main id="main"></main>
+
+    <!-- Ajax Lib -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
+    <!-- Script JS -->
+    <script src="./script.js"></script>
+</body>
+</html>