diff --git a/fatemeh/JS/Basic_Syntax.js b/fatemeh/JS/Basic_Syntax.js
new file mode 100644
index 0000000..0bf093f
--- /dev/null
+++ b/fatemeh/JS/Basic_Syntax.js
@@ -0,0 +1,121 @@
+// add number a to b
+function add(a, b) {
+ return a + b;
+}
+
+// flip a coin and log the result (head or tail)
+function flipACoin() {
+ let num = Math.floor(Math.random() * 2);
+
+ switch (num) {
+ case 0:
+ return "head";
+ case 1:
+ return "tail";
+ }
+}
+
+// concat two strings
+function concat(stringA, stringB) {
+ return stringA.concat(stringB);
+}
+
+// 2^x = ?
+function power2(x) {
+ return x * x;
+}
+
+// user object with first name and last name, both capitalized
+// e.g. getUser('hello', 'world') is { firstName: 'Hello', lastName: 'World' }
+function getUser(firstName, lastName) {
+ const newFirstName = firstName
+ .slice(0, 1)
+ .toUpperCase()
+ .concat(firstName.slice(1).toLowerCase());
+ const newLastName = lastName
+ .slice(0, 1)
+ .toUpperCase()
+ .concat(lastName.slice(1).toLowerCase());
+
+ return newFirstName, newLastName;
+}
+
+// greet someone!
+// e.g. greet('ConnecMent') is "Hello, ConnecMent! Hope you the best."
+function greet(name) {
+ return "Hello, ".concat(name, "! Hope you the best.");
+}
+
+// get array of n random numbers
+function getNRandomNumbers(n) {
+ const resultArr = [];
+ for (let i = 0; i < n; i++) {
+ resultArr[i] = Math.floor(Math.random() * 100);
+ }
+
+ return resultArr;
+}
+
+// get sorted array of n random numbers, in range min to max
+function getNRandomNumbers(n, min, max) {
+ const resultArr = [];
+ for (let i = 0; i < n; i++) {
+ resultArr[i] = Math.floor(Math.random() * (max - min) + min);
+ }
+
+ return resultArr;
+}
+
+// log current time with a x seconds interval, for n seconds
+function logCurrentTime(x, n) {
+ let counter = 0;
+ let intervalID = setInterval(() => {
+ if (counter == n) {
+ clearInterval(intervalID);
+ } else {
+ console.log(Date());
+ counter += 1;
+ }
+ }, x * 1000); //this sets the speed of the animation
+}
+
+// higher order function: call the function in the parameters list
+// e.g. callFuncNTimes(flipACoin, 3) calls flipACoin 3 times
+function callFuncNTimes(func, n) {
+ for (let i = 0; i < n; i++) {
+ func(n);
+ }
+}
+
+// return true if parameter is false, false otherwise
+function isNil(param) {
+ if (param == true) {
+ return true;
+ } else {
+ return false;
+ }
+}
+
+// call property in object
+// e.g. in obj = { callableProp: function () { console.log('hello!') } }, callPropInObj(obj, 'callableProp') will log "hello!"
+function callPropInObj(object, propertyName) {
+ object[propertyName]();
+}
+
+// if the email is gmail
+function isGmail(email) {
+ if (email.match(/@gmail.com/i) == null) {
+ return false;
+ } else {
+ return true;
+ }
+}
+
+// duplicate array
+// e.g. duplicateArray([1,2,3]) is [1,2,3,1,2,3]
+function duplicateArray(Arr) {
+ let n = Arr.length;
+ for (let i = 0; i < n; i++) {
+ Arr.push(Arr[i]);
+ }
+}
diff --git a/fatemeh/JS/JS: data fetching + DOM manipulation/addpost.html b/fatemeh/JS/JS: data fetching + DOM manipulation/addpost.html
new file mode 100644
index 0000000..c0b56e1
--- /dev/null
+++ b/fatemeh/JS/JS: data fetching + DOM manipulation/addpost.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/fatemeh/JS/JS: data fetching + DOM manipulation/addpoststyle.css b/fatemeh/JS/JS: data fetching + DOM manipulation/addpoststyle.css
new file mode 100644
index 0000000..82057b4
--- /dev/null
+++ b/fatemeh/JS/JS: data fetching + DOM manipulation/addpoststyle.css
@@ -0,0 +1,97 @@
+.newPost {
+ border-radius: 20px;
+ padding: 20px;
+ background-color: #8bc6ec;
+ background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-direction: column;
+ justify-items: center;
+ align-items: center;
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+* {
+ font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+ align-items: center;
+}
+form {
+ font-weight: bold;
+ font-size: 20px;
+ color: #4158d0;
+}
+
+button:hover {
+ box-shadow: 0 0 10px 5px white;
+}
+button:active {
+ background-color: #4159d08c;
+}
+.Title {
+ font-size: large;
+ padding: 5px;
+ margin-top: 5px;
+ margin-bottom: 1rem;
+ border: none;
+ border-radius: 10px;
+ background-color: rgba(255, 255, 255, 0.6);
+}
+.Author {
+ font-size: large;
+ padding: 5px;
+ margin-top: 5px;
+ margin-bottom: 1rem;
+ border: none;
+ border-radius: 10px;
+ background-color: rgba(255, 255, 255, 0.6);
+}
+.PostBody {
+ font-size: large;
+ padding: 5px;
+ width: 95.5%;
+ margin-top: 5px;
+ margin-bottom: 1rem;
+ height: 5rem;
+ border: none;
+ border-radius: 10px;
+
+ background-color: rgba(255, 255, 255, 0.6);
+}
+.addPost {
+ border: none;
+ padding: 10px 15px;
+ border-radius: 10px;
+ background-color: #4158d0;
+ font-weight: bold;
+ color: white;
+ font-size: 15px;
+ margin: 0.5rem;
+ width: 7rem;
+}
+.CancelB {
+ border: none;
+ margin-left: 10px;
+ padding: 10px 15px;
+ border-radius: 10px;
+ background-color: #b721ff;
+ font-weight: bold;
+ color: white;
+ font-size: 15px;
+ margin: 0.5rem;
+ width: 7rem;
+}
+.addPost:hover {
+ box-shadow: 0 0 10px 5px #aeceff;
+}
+.addPost:active {
+ background-color: #4159d073;
+}
+.CancelB:hover {
+ box-shadow: 0 0 10px 5px #db8fff;
+}
+.CancelB:active {
+ background-color: #b921ff5b;
+}
diff --git a/fatemeh/JS/JS: data fetching + DOM manipulation/index.html b/fatemeh/JS/JS: data fetching + DOM manipulation/index.html
new file mode 100644
index 0000000..ebba94c
--- /dev/null
+++ b/fatemeh/JS/JS: data fetching + DOM manipulation/index.html
@@ -0,0 +1,201 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/fatemeh/JS/JS: data fetching + DOM manipulation/indexstyle.css b/fatemeh/JS/JS: data fetching + DOM manipulation/indexstyle.css
new file mode 100644
index 0000000..f3cfab5
--- /dev/null
+++ b/fatemeh/JS/JS: data fetching + DOM manipulation/indexstyle.css
@@ -0,0 +1,136 @@
+* {
+ font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+}
+.posts {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ column-gap: 30px;
+ row-gap: 30px;
+ margin: 15px;
+}
+.line {
+ border-color: #8bc5ec54;
+}
+#update {
+ border: none;
+ padding: 10px 15px;
+ border-radius: 10px;
+ background-color: #4158d0;
+ font-weight: bold;
+ color: white;
+}
+#delete {
+ border: none;
+ margin-left: 10px;
+ padding: 10px 15px;
+ border-radius: 10px;
+ background-color: #b721ff;
+ font-weight: bold;
+ color: white;
+}
+#update:hover {
+ box-shadow: 0 0 10px 5px #aeceff;
+}
+#update:active {
+ background-color: #4159d073;
+}
+#delete:hover {
+ box-shadow: 0 0 10px 5px #db8fff;
+}
+#delete:active {
+ background-color: #b921ff5b;
+}
+#child {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ border-radius: 20px;
+ padding: 20px;
+ background-color: #8bc6ec;
+ background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+#child h3 {
+ color: #384fc2c0;
+}
+#child h1 {
+ color: #384fc2;
+}
+.addPost {
+ color: #8bc5ec;
+ padding: 15px;
+ font-weight: bolder;
+ width: 100%;
+ height: 100%;
+ border-style: dashed;
+ border-width: 8px;
+ border-color: #8bc5ec;
+ font-size: xxx-large;
+ border-radius: 20px;
+}
+.addPost:hover {
+ color: white;
+ border: none;
+ background-color: #8bc6ec;
+ background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
+ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+.addPost:active {
+ background-color: #8bc5ec6e;
+ background-image: linear-gradient(135deg, #8bc5ec79 0%, #9599e275 100%);
+}
+#child p {
+ color: #384fc2;
+ border-radius: 20px;
+ padding: 15px;
+ background-color: rgba(255, 255, 255, 0.4);
+}
+.Search {
+ margin: 15px;
+}
+.SearchBox {
+ font-size: 15px;
+ padding: 6px;
+ border: none;
+ border-radius: 25px;
+ background-color: #8bc6ec;
+ background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
+}
+.SearchBox::placeholder {
+ color: white;
+}
+.SearchBox:focus {
+ background-color: #8bc5ec6e;
+ background-image: linear-gradient(135deg, #8bc5ec75 0%, #9599e277 100%);
+}
+.SearchButton {
+ color: white;
+ font-weight: bold;
+ padding: 8px;
+ border: none;
+ border-radius: 25px;
+ background-color: #9599e2;
+ margin-left: 10px;
+ height: 30px;
+}
+.SearchButton:active {
+ background-color: #8bc5ec6e;
+ background-image: linear-gradient(135deg, #8bc5ec79 0%, #9599e275 100%);
+}
+.cancelButton {
+ /* visibility: hidden; */
+ /* display: none; */
+ color: white;
+ font-weight: bold;
+ padding: 8px;
+ border: none;
+ border-radius: 25px;
+ background-color: #9599e2;
+ margin-left: 10px;
+ height: 30px;
+}
+.cancelButton:active {
+ background-color: #8bc5ec6e;
+ background-image: linear-gradient(135deg, #8bc5ec79 0%, #9599e275 100%);
+}