diff --git a/01-html_css_basics/README.md b/01-html_css_basics/README.md new file mode 100644 index 0000000..df9341c --- /dev/null +++ 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 +``` + + + + Page Title + + + +

My First Heading

+

My first paragraph.

+ 
+        Then leaf subsides to leaf.
+        So Eden sank to grief,
+        So dawn goes down to day.
+        Nothing gold can stay.
+
+ + +``` + +### Essential Tags +``````: The tag that indicates an html file. + +``````: The root element that wraps all content on the entire page. + +``````: Contains meta-information about the HTML page, such as the title. As the following: +
+ + +``````: Defines the document's body and contains all the visible content (headings, paragraphs, images). + +```

``` to ```

```: Defines HTML headings, with ```

``` being the most important. + +```

```: Defines a paragraph. + +``````: Defines a hyperlink, using the href attribute to indicate the destination. \ No newline at end of file diff --git a/01-html_css_basics/images/youtube_head.png b/01-html_css_basics/images/youtube_head.png new file mode 100644 index 0000000..e9c0e2d Binary files /dev/null and b/01-html_css_basics/images/youtube_head.png differ diff --git a/03-number_guessing/README.md b/03-number_guessing/README.md new file mode 100644 index 0000000..d670469 --- /dev/null +++ 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. \ No newline at end of file diff --git a/03-number_guessing/hint.md b/03-number_guessing/hint.md new file mode 100644 index 0000000..902fa58 --- /dev/null +++ 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 `````` 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 ```

Number guessing game

+ \ No newline at end of file diff --git a/03-number_guessing/solution.js b/03-number_guessing/solution.js new file mode 100644 index 0000000..d2400ad --- /dev/null +++ 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 = ""; +}); \ No newline at end of file diff --git a/03-movie_website/README.md b/04-movie_website/README.md similarity index 100% rename from 03-movie_website/README.md rename to 04-movie_website/README.md diff --git a/03-movie_website/img/avengers_3.jpg b/04-movie_website/img/avengers_3.jpg similarity index 100% rename from 03-movie_website/img/avengers_3.jpg rename to 04-movie_website/img/avengers_3.jpg diff --git a/03-movie_website/index.html b/04-movie_website/index.html similarity index 100% rename from 03-movie_website/index.html rename to 04-movie_website/index.html diff --git a/03-movie_website/script.js b/04-movie_website/script.js similarity index 100% rename from 03-movie_website/script.js rename to 04-movie_website/script.js diff --git a/03-movie_website/style.css b/04-movie_website/style.css similarity index 100% rename from 03-movie_website/style.css rename to 04-movie_website/style.css diff --git a/04-quick-access-tab/LICENSE b/06-quick-access-tab/LICENSE similarity index 99% rename from 04-quick-access-tab/LICENSE rename to 06-quick-access-tab/LICENSE index 70342c9..e2186a5 100644 --- a/04-quick-access-tab/LICENSE +++ b/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 b/06-quick-access-tab/README.md similarity index 100% rename from 04-quick-access-tab/README.md rename to 06-quick-access-tab/README.md diff --git a/04-quick-access-tab/img/carin.jpg b/06-quick-access-tab/img/carin.jpg similarity index 100% rename from 04-quick-access-tab/img/carin.jpg rename to 06-quick-access-tab/img/carin.jpg diff --git a/04-quick-access-tab/img/gmail.jpg b/06-quick-access-tab/img/gmail.jpg similarity index 100% rename from 04-quick-access-tab/img/gmail.jpg rename to 06-quick-access-tab/img/gmail.jpg diff --git a/04-quick-access-tab/img/lynn.jpg b/06-quick-access-tab/img/lynn.jpg similarity index 100% rename from 04-quick-access-tab/img/lynn.jpg rename to 06-quick-access-tab/img/lynn.jpg diff --git a/04-quick-access-tab/img/yui.jpg b/06-quick-access-tab/img/yui.jpg similarity index 100% rename from 04-quick-access-tab/img/yui.jpg rename to 06-quick-access-tab/img/yui.jpg diff --git a/04-quick-access-tab/img/yuki.jpg b/06-quick-access-tab/img/yuki.jpg similarity index 100% rename from 04-quick-access-tab/img/yuki.jpg rename to 06-quick-access-tab/img/yuki.jpg diff --git a/04-quick-access-tab/img/yuno.jpg b/06-quick-access-tab/img/yuno.jpg similarity index 100% rename from 04-quick-access-tab/img/yuno.jpg rename to 06-quick-access-tab/img/yuno.jpg diff --git a/04-quick-access-tab/manifest.json b/06-quick-access-tab/manifest.json similarity index 96% rename from 04-quick-access-tab/manifest.json rename to 06-quick-access-tab/manifest.json index 5ce0ec9..2f51350 100644 --- a/04-quick-access-tab/manifest.json +++ b/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" + } } \ No newline at end of file diff --git a/04-quick-access-tab/newtab_modern.html b/06-quick-access-tab/newtab_modern.html similarity index 100% rename from 04-quick-access-tab/newtab_modern.html rename to 06-quick-access-tab/newtab_modern.html diff --git a/04-quick-access-tab/script.js b/06-quick-access-tab/script.js similarity index 100% rename from 04-quick-access-tab/script.js rename to 06-quick-access-tab/script.js diff --git a/04-quick-access-tab/styles.css b/06-quick-access-tab/styles.css similarity index 100% rename from 04-quick-access-tab/styles.css rename to 06-quick-access-tab/styles.css diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e878890 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "web-tutorial", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}