Computerization · Whfkqreodgh · Apr 8, 2026
diff --git a/01-html_css_basics/README.md b/01-html_css_basics/README.md
@@ -0,0 +1,43 @@
+# 03: Basics of HTML and CSS
+This tutorial introduces the building blocks of the web: HTML for structure and CSS for presentation.
+
+## 🧱 HTML (HyperText Markup Language)
+HTML is the standard markup language used to create the structure of web pages.
+
+### Example of an HTML File
+```
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Page Title</title>
+</head>
+<body>
+
+    <h1>My First Heading</h1>
+    <p>My first paragraph.</p>
+    <pre>
+        Then leaf subsides to leaf.
+        So Eden sank to grief,
+        So dawn goes down to day.
+        Nothing gold can stay.
+    </pre>
+</body>
+</html>
+```
+
+### Essential Tags
+```<!DOCTYPE html>```: The tag that indicates an html file.
+
+```<html>```: The root element that wraps all content on the entire page.
+
+```<head>```: Contains meta-information about the HTML page, such as the title. As the following: 
+<br>
+<img src = "images\youtube_head.png">
+
+```<body>```: Defines the document's body and contains all the visible content (headings, paragraphs, images).
+
+```<h1>``` to ```<h6>```: Defines HTML headings, with ```<h1>``` being the most important.
+
+```<p>```: Defines a paragraph.
+
+```<a>```: Defines a hyperlink, using the href attribute to indicate the destination.
diff --git a/01-html_css_basics/images/youtube_head.png b/01-html_css_basics/images/youtube_head.png
diff --git a/03-number_guessing/README.md b/03-number_guessing/README.md
@@ -0,0 +1,11 @@
+# Demo Mini-Project
+
+## Number Guessing Game
+
+You are required to build a game that generates **a random integer from a random range**.
+
+The user will guess the number. You need to indicate whether the guess is **too small**, **too big**, or **correct**.
+
+Complete the JavaScript part of the ```index.html``` file.
+
+If you ever get stuck, feel free to check the ```hint.md``` for hints and the ```solution.js``` for the solution.
diff --git a/03-number_guessing/hint.md b/03-number_guessing/hint.md
@@ -0,0 +1,88 @@
+# Hints
+
+## Step 1: Create a Random Number
+
+Use JavaScript to generate random numbers:
+
+```
+Math.random() // random number between 0 and 1
+```
+
+To create an interger in the range (min, min + range):
+
+```
+Math.floor(Math.random() * range) + min
+```
+
+## Step 2 (optional): Create a Random Range
+
+Instead of always generating a number from 1 to 100, try:
+
+* Generate a **random minimum**
+* Generate a **random maximum**
+
+Make sure that:
+
+```max > min``` and ```max - min >= range```
+
+# Get User Input
+
+Notice that there's already an ```<input>``` box in HTML
+
+Useful syntax:
+
+```
+document.getElementById("html_id");
+```
+
+To get the value of HTML input:
+
+```variableName.value```
+
+**Tip:** The input from HTML returns a **string**, but you want a **number**
+
+## Step 4: Compare the Guess
+
+Use conditional statements:
+
+```
+if (condition 1)
+{
+    // too small
+}
+else if(condition 2)
+{
+    // too big
+}
+else 
+{
+    // correct
+}
+```
+
+## Step 5: Display Messages
+
+The ```<div id="answer></div>``` in HTML is left empty for you to output a message.
+
+Select the element:
+
+```
+const variableName = document.getElementById("htmlId");
+```
+
+Update the text content of the selected HTML tag:
+
+```
+variableName.textContent = "Displayed Message";
+```
+
+## Listen for Submission
+
+Add an event listener:
+
+```
+form.addEventListener("submit", function(event))
+{
+    // code to execute after event
+}
+```
diff --git a/01-number_guessing/index.html → 03-number_guessing/index.html b/01-number_guessing/index.html → 03-number_guessing/index.html
@@ -15,5 +15,6 @@ <h1>Number guessing game</h1>
 	<script>
 		// TODO: your work here
 	</script>
+	<script src="solution.js" defer></script>
 </body>
 </html>
diff --git a/03-number_guessing/solution.js b/03-number_guessing/solution.js
@@ -0,0 +1,39 @@
+// Generate a random range
+const min = Math.floor(Math.random() * 50) + 1;       // 1–50
+const max = min + Math.floor(Math.random() * 50) + 25; // ensure range width
+
+// Generate the target number within the range
+const target = Math.floor(Math.random() * (max - min + 1)) + min;
+
+// console.log(`Debug: number is ${target} (range ${min}-${max})`);
+
+const form = document.querySelector("form");
+const input = document.getElementById("userinput");
+const answerDiv = document.getElementById("answer");
+
+// Show initial instruction
+answerDiv.textContent = `Guess a number between ${min} and ${max}`;
+
+form.addEventListener("submit", function(event) {
+	event.preventDefault(); // stop page reload
+
+	const guess = Number(input.value);
+
+	// Validate input
+	if (isNaN(guess)) {
+		answerDiv.textContent = "Please enter a valid number.";
+		return;
+	}
+
+	// Compare guess
+	if (guess < target) {
+		answerDiv.textContent = "Too small! Try again.";
+	} else if (guess > target) {
+		answerDiv.textContent = "Too big! Try again.";
+	} else {
+		answerDiv.textContent = `🎉 Correct! The number was ${target}.`;
+	}
+
+	// Clear input
+	input.value = "";
+});
diff --git a/03-movie_website/README.md → 04-movie_website/README.md b/03-movie_website/README.md → 04-movie_website/README.md
diff --git a/03-movie_website/img/avengers_3.jpg → 04-movie_website/img/avengers_3.jpg b/03-movie_website/img/avengers_3.jpg → 04-movie_website/img/avengers_3.jpg
diff --git a/03-movie_website/index.html → 04-movie_website/index.html b/03-movie_website/index.html → 04-movie_website/index.html
diff --git a/03-movie_website/script.js → 04-movie_website/script.js b/03-movie_website/script.js → 04-movie_website/script.js
diff --git a/03-movie_website/style.css → 04-movie_website/style.css b/03-movie_website/style.css → 04-movie_website/style.css
diff --git a/04-quick-access-tab/LICENSE → 06-quick-access-tab/LICENSE b/04-quick-access-tab/LICENSE → 06-quick-access-tab/LICENSE
@@ -1,7 +1,7 @@
-Copyright 2025 yszdlzn3195918
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Copyright 2025 yszdlzn3195918
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/04-quick-access-tab/README.md → 06-quick-access-tab/README.md b/04-quick-access-tab/README.md → 06-quick-access-tab/README.md
diff --git a/04-quick-access-tab/img/carin.jpg → 06-quick-access-tab/img/carin.jpg b/04-quick-access-tab/img/carin.jpg → 06-quick-access-tab/img/carin.jpg
diff --git a/04-quick-access-tab/img/gmail.jpg → 06-quick-access-tab/img/gmail.jpg b/04-quick-access-tab/img/gmail.jpg → 06-quick-access-tab/img/gmail.jpg
diff --git a/04-quick-access-tab/img/lynn.jpg → 06-quick-access-tab/img/lynn.jpg b/04-quick-access-tab/img/lynn.jpg → 06-quick-access-tab/img/lynn.jpg
diff --git a/04-quick-access-tab/img/yui.jpg → 06-quick-access-tab/img/yui.jpg b/04-quick-access-tab/img/yui.jpg → 06-quick-access-tab/img/yui.jpg
diff --git a/04-quick-access-tab/img/yuki.jpg → 06-quick-access-tab/img/yuki.jpg b/04-quick-access-tab/img/yuki.jpg → 06-quick-access-tab/img/yuki.jpg
diff --git a/04-quick-access-tab/img/yuno.jpg → 06-quick-access-tab/img/yuno.jpg b/04-quick-access-tab/img/yuno.jpg → 06-quick-access-tab/img/yuno.jpg
diff --git a/04-quick-access-tab/manifest.json → 06-quick-access-tab/manifest.json b/04-quick-access-tab/manifest.json → 06-quick-access-tab/manifest.json
@@ -1,9 +1,9 @@
-{
-  "manifest_version": 3,
-  "name": "Quick Access Tab",
-  "version": "1.2.5",
-  "description": "Custom new tab with Google search + quick links",
-  "chrome_url_overrides": {
-    "newtab": "newtab_modern.html"
-  }
+{
+  "manifest_version": 3,
+  "name": "Quick Access Tab",
+  "version": "1.2.5",
+  "description": "Custom new tab with Google search + quick links",
+  "chrome_url_overrides": {
+    "newtab": "newtab_modern.html"
+  }
 }
diff --git a/04-quick-access-tab/newtab_modern.html → 06-quick-access-tab/newtab_modern.html b/04-quick-access-tab/newtab_modern.html → 06-quick-access-tab/newtab_modern.html
diff --git a/04-quick-access-tab/script.js → 06-quick-access-tab/script.js b/04-quick-access-tab/script.js → 06-quick-access-tab/script.js
diff --git a/04-quick-access-tab/styles.css → 06-quick-access-tab/styles.css b/04-quick-access-tab/styles.css → 06-quick-access-tab/styles.css
diff --git a/package-lock.json b/package-lock.json