first commit

issam-seghir · Jul 19, 2023 · 6cc6ddd · 6cc6ddd
commit 6cc6ddd
Show file tree

Hide file tree

Showing 372 changed files with 7,465 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,22 @@
+{
+    "extends": "eslint:recommended",
+    // fix parser error when using new ecma keyword keywords add ecmaVersion
+    // fix module import export parser error : add sourceType /plugins
+    // "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "import"
+    ],
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true
+    },
+    "rules": {
+        "no-console": 0,
+        "indent": 2
+    }
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,10 @@
+{
+    "recommendations": [
+        "yzhang.markdown-all-in-one",
+        "shd101wyy.markdown-preview-enhanced",
+        "davidanson.vscode-markdownlint",
+        "wallabyjs.quokka-vscode",
+        "ritwickdey.liveserver",
+        "tabnine.tabnine-vscode"
+    ]
+}
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 1/index.html b/1. Introduction [ 001 - 009 ]/Assignment 1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<title>Assign 1</title>
+	<script>
+		/*
+		This is will not work because it is trying to access the element with the id "el" before it is rendered in the HTML.
+		At the time the code is executed, the element has not yet been parsed by the browser
+		 */
+		// Code One ✖
+		document.getElementById("el").style.color = "red";
+	</script>
+	<script>
+		// Code Two ✔
+		window.onload = function () {
+			document.getElementById("el").style.color = "red";
+		};
+	</script>
+</head>
+
+<body>
+	<h1 id="el">Page Title</h1>
+	<script>
+		// Code Three ✔
+		document.getElementById("el").style.color = "red";
+	</script>
+</body>
+
+</html>
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 1/tasks.md b/1. Introduction [ 001 - 009 ]/Assignment 1/tasks.md
@@ -0,0 +1,35 @@
+## Tasks 🎯
+
+You have multiple lines of code, all of which do the same job.
+Type **multiple lines of comments** in which you explain in English why certain code will not work, along with the reason.
+
+## Code 💻
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Learn JavaScript</title>
+    <script>
+      // Code One
+      document.getElementById("el").style.color = "red";
+    </script>
+    <script>
+      // Code Two
+      window.onload = function () {
+        document.getElementById("el").style.color = "red";
+      };
+    </script>
+  </head>
+  <body>
+    <h1 id="el">Page Title</h1>
+    <script>
+      // Code Three
+      document.getElementById("el").style.color = "red";
+    </script>
+  </body>
+</html>
+
+```
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 2/index.html b/1. Introduction [ 001 - 009 ]/Assignment 2/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Assign 2</title>
+</head>
+
+<body></body>
+<script src="main.js"></script>
+
+</html>
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 2/main.js b/1. Introduction [ 001 - 009 ]/Assignment 2/main.js
@@ -0,0 +1,20 @@
+
+// create a new header element
+let element = document.createElement("h1");
+element.textContent = "Assignment Two Completed 🏆";
+
+// add css style to the header element
+element.style.maxWidth = "500px";
+element.style.margin = "auto";
+element.style.padding = "12px";
+element.style.border = "solid 8px ";
+element.style.borderRadius = "12px";
+element.style.backgroundColor = "pink";
+element.style.color = "deeppink";
+element.style.fontSize = "80px";
+element.style.fontWeight = "bold";
+element.style.fontFamily =   "Arial";
+element.style.textAlign = "center";
+
+// append the header element to the document
+document.body.append(element);
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 2/tasks.md b/1. Introduction [ 001 - 009 ]/Assignment 2/tasks.md
@@ -0,0 +1,22 @@
+## Tasks 🎯
+
+- Create the element on the **image** inside the page using **JavaScript**
+- The element type is `h1`.
+- The **CSS** properties are as follows and should be added using JavaScript.
+- Add the **style** in a different way than adding the style as an **inline** **style** while creating the element.
+
+> You can add **more than one style** formatting in a **separate** **line**.
+
+![enter image description here](https://i.imgur.com/TcMUBb1.png)
+
+## Code 💻
+
+```css
+.class{
+  color: blue;
+  font-size: 80px;
+  font-weight: bold;
+  text-align: center;
+  font-family: Arial
+}
+```
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 3/index.html b/1. Introduction [ 001 - 009 ]/Assignment 3/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Assign 3</title>
+</head>
+
+<body></body>
+<script src="main.js"></script>
+
+</html>
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 3/main.js b/1. Introduction [ 001 - 009 ]/Assignment 3/main.js
@@ -0,0 +1,4 @@
+console.log("%c--------------", "background-color: blue;font-weight: bold; font-size:40px;");
+console.log("%c Assign 3", "color: red; font-weight: bold; font-size:40px;");
+console.log("%c completed 🏆", "color: green; font-weight: bold; font-size:40px;");
+console.log("%c--------------", "background-color: blue;font-weight: bold; font-size:40px;");
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 3/tasks.md b/1. Introduction [ 001 - 009 ]/Assignment 3/tasks.md
@@ -0,0 +1,9 @@
+## Tasks 🎯
+
+- Print a message in the **console** as shown in the picture:
+
+![enter image description here](https://i.imgur.com/hBbo4A8.png)
+
+- Colors are `Red`, `Green`, `Blue`.
+- Font size is ``40px``.
+- Write **'Web'** in a **bold** line."
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 4/index.html b/1. Introduction [ 001 - 009 ]/Assignment 4/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Assign 4</title>
+</head>
+
+<body></body>
+<script src="main.js"></script>
+
+</html>
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 4/main.js b/1. Introduction [ 001 - 009 ]/Assignment 4/main.js
@@ -0,0 +1,26 @@
+// start group 1
+console.group("Fruits");
+console.log("banana 🍌");
+console.log("orange 🍊");
+    //  start nested group I
+    console.group("apple 🍎");
+    console.log("%cred apple","color:red");
+    console.log ("%cyellow apple", "color:yellow");
+    //  start nested group II
+    console.group("%cgreen apple", "color:green");
+        console.log("%c one piece", "background-color:#008B8B;color:#7FFFD4;padding:0.25rem");
+        console.log("%c three pieces", "background-color:#008B8B;color:#7FFFD4;padding:0.25rem");
+        console.log("%c five pieces", "background-color:#008B8B;color:#7FFFD4;padding:0.25rem");
+        console.groupEnd();
+        // End the nested group II
+    console.groupEnd();
+    // End the nested group I
+console.groupEnd();
+// end group 1
+
+// start group 2
+console.group("Vegetables");
+console.log("carrot 🥕");
+console.log("potato 🥔");
+console.groupEnd();
+// end group 2
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 4/tasks.md b/1. Introduction [ 001 - 009 ]/Assignment 4/tasks.md
@@ -0,0 +1,8 @@
+## Tasks 🎯
+
+- Print a message in the **console** as shown in the picture:
+- The existing messages don't matter, what's **important** is that they are in **groups** with the **same** **order** and the **same** **group** **names**.
+
+> **NOTE** : Search for **Console Group**
+
+![enter image description here](https://i.imgur.com/rj9S6lg.png)
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 5/index.html b/1. Introduction [ 001 - 009 ]/Assignment 5/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Assign 5</title>
+</head>
+
+<body></body>
+<script src="main.js"></script>
+
+</html>
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 5/main.js b/1. Introduction [ 001 - 009 ]/Assignment 5/main.js
@@ -0,0 +1,6 @@
+
+console.table([
+	{ name: "Issam", age: 23, profession: "Developer" },
+	{ name: "Aymen", age: 32, profession: "Designer" },
+	{ name: "Houssam", age: 27, profession: "Manager" },
+]);
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 5/tasks.md b/1. Introduction [ 001 - 009 ]/Assignment 5/tasks.md
@@ -0,0 +1,6 @@
+## Tasks 🎯
+
+- Print a message in the **console** as shown in the picture:
+- **Data** doesn't matter, but the **most** **important** thing is to present them in the **same** **way**.
+
+![enter image description here](https://i.imgur.com/OYRinjo.png)
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 6/index.html b/1. Introduction [ 001 - 009 ]/Assignment 6/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Assign 6</title>
+</head>
+
+<body></body>
+<script src="main.js"></script>
+
+</html>
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 6/main.js b/1. Introduction [ 001 - 009 ]/Assignment 6/main.js
@@ -0,0 +1,12 @@
+// method on
+if (false) {
+	// Code to be stopped
+	console.log("Iam In Console");
+	document.write("Iam In Page");
+}
+
+// method two
+	// Code to be stopped
+	console.log("Iam In Console");
+	document.write("Iam In Page");
+	document.body.innerHTML="";
diff --git a/1. Introduction [ 001 - 009 ]/Assignment 6/tasks.md b/1. Introduction [ 001 - 009 ]/Assignment 6/tasks.md
@@ -0,0 +1,13 @@
+## Tasks 🎯
+
+- You have the following Code in the **JS file**, and you are required to **disable the execution** using what you have learned.
+  - The task should be done in **two** **ways**
+  - You cannot **delete** or **modify** the code in the file
+  - You can write before or after it without any problem
+
+## Code 💻
+
+```js
+console.log("Iam In Console");
+document.write("Iam In Page");
+```
diff --git a/10. Loop - For [ 48 - 53 ]/Assignment 1/index.html b/10. Loop - For [ 48 - 53 ]/Assignment 1/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Assign 1</title>
+</head>
+
+<body>
+</body>
+<script src="main.js"></script>
+
+</html>
diff --git a/10. Loop - For [ 48 - 53 ]/Assignment 1/main.js b/10. Loop - For [ 48 - 53 ]/Assignment 1/main.js
@@ -0,0 +1,9 @@
+let start = 10;
+let end = 100;
+let exclude = 40;
+
+
+for (;start <= end; start+=10) {
+    if (start === 40) continue;
+    console.log(start);
+}
diff --git a/10. Loop - For [ 48 - 53 ]/Assignment 1/tasks.md b/10. Loop - For [ 48 - 53 ]/Assignment 1/tasks.md
@@ -0,0 +1,24 @@
+## Tasks 🎯
+
+- **Numbers** are **not** **allowed** at all, and you can use variable values along with what you have learned to accomplish the task.
+- The **numbers** must be printed, **except** for the **number** `40` as shown in the example.
+- `for` loop  should be used to do what is required
+
+## Code 💻
+
+```js
+let start = 10;
+let end = 100;
+let exclude = 40;
+
+// Output
+10
+20
+30
+50
+60
+70
+80
+90
+100
+```
diff --git a/10. Loop - For [ 48 - 53 ]/Assignment 2/index.html b/10. Loop - For [ 48 - 53 ]/Assignment 2/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Assign 2</title>
+</head>
+
+<body>
+</body>
+<script src="main.js"></script>
+
+</html>
diff --git a/10. Loop - For [ 48 - 53 ]/Assignment 2/main.js b/10. Loop - For [ 48 - 53 ]/Assignment 2/main.js
@@ -0,0 +1,8 @@
+let start = 10;
+let end = 0;
+let stop = 3;
+
+for (; start >= end; start -= 1) {
+    console.log(start.toString().padStart(2, '0'));
+	if (start === 3) break;
+}