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 @@ + + + + + + +
+
+ Title:
+
+ Author (ID):
+
+ Description:
+ +
+
+ + +
+
+ + + 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%); +}