ChenKaiLiuG/life_generators
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Style: Apply deno lint and deno fmt across codebase

Browse Source
This commit is contained in:
lifeadventurer
2024-10-31 19:56:47 +08:00
parent df772b0bde
commit 778cb316c0
20 changed files with 882 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
quote_generator/css/styles.css
View File

@@ -1,5 +1,5 @@
:root {
--button-color: #9DC4FF;
--button-color: #9dc4ff;
--button-hover-color: #5ca8f3;
--bg-color: #ffffffd7;
--text-color: #000000;
@@ -18,7 +18,7 @@ html {
height: 100%;
text-align: center;
overflow: hidden;
font-family: Georgia, 'Times New Roman', Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
}
@@ -66,7 +66,7 @@ button {
padding: 17px 20px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
button:hover {
@@ -79,4 +79,4 @@ button:hover {
color: var(--dark-mode-icon-color);
cursor: pointer;
opacity: 85%;
}
}

74
quote_generator/index.html
View File

@@ -1,33 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Quote Generator </title>
<link rel="icon" href="../images/lifeadventurer_rounded_logo.png">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- box icons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container" id="imageContainer">
<h1>Today's quote</h1>
<div class="quote-container">
<p id="quote"></p>
<p id="author"></p>
</div>
<div class="row">
<button class="col-4 offset-4" onclick="getQuote()">Generate </button>
<div class="col-2 offset-2 bx bx-moon" id="dark-mode-icon"></div>
</div>
</div>
<canvas id="Matrix"></canvas>
<script src="./js/scripts.js"></script>
<script src="./js/matrix.js"></script>
<script src="./js/quote.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quote Generator</title>
<link rel="icon" href="../images/lifeadventurer_rounded_logo.png" />
<!-- bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<!-- box icons -->
<link
href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<div class="container" id="imageContainer">
<h1>Today's quote</h1>
<div class="quote-container">
<p id="quote"></p>
<p id="author"></p>
</div>
<div class="row">
<button class="col-4 offset-4" onclick="getQuote()">Generate</button>
<div class="col-2 offset-2 bx bx-moon" id="dark-mode-icon"></div>
</div>
</div>
<canvas id="Matrix"></canvas>
<script src="./js/scripts.js"></script>
<script src="./js/matrix.js"></script>
<script src="./js/quote.js"></script>
</body>
</html>

15
quote_generator/js/matrix.js
View File

@@ -1,13 +1,14 @@
const canvas = document.getElementById("Matrix")
const context = canvas.getContext("2d")
const canvas = document.getElementById("Matrix");
const context = canvas.getContext("2d");
canvas.height = window.innerHeight + 100;
canvas.width = window.innerWidth + 5;
canvas.height = globalThis.innerHeight + 100;
canvas.width = globalThis.innerWidth + 5;
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè";
const chars =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè";
const fontSize = 16;
const columns = canvas.width / fontSize;
const columns = canvas.width / fontSize;
const charArr = [];
for (let i = 0; i < columns; i++) {
@@ -30,7 +31,7 @@ function Update() {
}
context.fillStyle = str;
context.font = fontSize + "px monospace";
for (let i = 0; i < columns; i++) {
const text = chars[Math.floor(Math.random() * chars.length)];
context.fillText(text, i * fontSize, charArr[i] * fontSize);

12
quote_generator/js/quote.js
View File

@@ -5,11 +5,10 @@ const buttonElement = document.querySelector("button");
let quotes = [];
fetch("./json/quotes.json")
.then(response => response.json())
.then(data => {
quotes = data.quotes;
});
.then((response) => response.json())
.then((data) => {
quotes = data.quotes;
});
function Appear() {
const index = Math.floor(Math.random() * quotes.length);
@@ -24,7 +23,6 @@ function Appear() {
const numDarkImages = 0;
const numLightImages = 0;
if (numDarkImages && numLightImages) {
const isDark = Math.random() < 0.5;
let randomIndex, randomImage;
@@ -33,7 +31,7 @@ function Appear() {
if (isDark) {
randomIndex = Math.floor(Math.random() * numDarkImages) + 1;
randomImage = folderPath + "dark/" + randomIndex + ".jpg";
darkModeIcon.onclick()
darkModeIcon.onclick();
} else {
randomIndex = Math.floor(Math.random() * numLightImages) + 1;
randomImage = folderPath + "light/" + randomIndex + ".jpg";

7
quote_generator/js/scripts.js
View File

@@ -1,7 +1,6 @@
const darkModeIcon = document.querySelector('#dark-mode-icon');
const darkModeIcon = document.querySelector("#dark-mode-icon");
darkModeIcon.onclick = () => {
darkModeIcon.classList.toggle('bx-sun');
document.body.classList.toggle('dark-mode');
darkModeIcon.classList.toggle("bx-sun");
document.body.classList.toggle("dark-mode");
};