| Title | +Genre | +Author | +Date | +Read | +Last Read | +
|---|
Books marked as read: 0
+Books marked not read yet: 0
+Player: 0
+Computer: 0
+Computer Chose ${computerChoice}
+ `; + }else + if(winner === 'computer'){ + // increment computer score + scoreboard.computer++; + // show modal result + result.innerHTML = ` +Computer Chose ${computerChoice}
+ `; + }else{ + result.innerHTML = ` +Computer Chose ${computerChoice}
+ `; + } + // show score + score.innerHTML = ` +Player: ${scoreboard.player}
+Computer: ${scoreboard.computer}
+ `; + + //show modal + modal.style.display = 'block'; +} + +// Restart Game +function restartGame(){ + scoreboard.player = 0; + scoreboard.computer = 0 + score.innerHTML = ` +Player: 0
+Computer: 0
+ `; +} + +// Clear modal +function clearModal(e){ + if(e.target == modal){ + modal.style.display ='none' + } +} +// Event Listeners + +choices.forEach(function(choice){ + choice.addEventListener('click',play) +}); +window.addEventListener('click',clearModal); +restart.addEventListener('click', restartGame); + diff --git a/week 5/The Game(Roshambo)/modal.css b/week 5/The Game(Roshambo)/modal.css new file mode 100644 index 0000000..8d1b9ae --- /dev/null +++ b/week 5/The Game(Roshambo)/modal.css @@ -0,0 +1,31 @@ +.modal{ + display: none; + position: fixed; + margin-top: 170px; + z-index: 1; + left: 0; + top: 0; + height: 100%; + width: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.5); + } + + .modal-content{ + background-color: #fff; + text-align: center; + margin: 10px auto; + width: 350px; + border-radius: 10px; + padding: 3rem; + box-shadow: 0 5px 8px o rgba(0, 0, 0, 0.2), 0 7px 10px 0 rgba(0, 0, 0, 0.17); + animation-name: modalopen; + animation-duration: 1s; + } + .modal-content h1{ + margin-bottom: 1rem; + } + .modal-content p{ + font-size: 1.2rem; + margin-top: 1rem; + } \ No newline at end of file diff --git a/week 5/The Game(Roshambo)/style.css b/week 5/The Game(Roshambo)/style.css new file mode 100644 index 0000000..f2bcce0 --- /dev/null +++ b/week 5/The Game(Roshambo)/style.css @@ -0,0 +1,85 @@ + +*{ + box-sizing: border-box; + padding: 0; + margin: 0; +} +body{ + font-family: 'Roboto', 'sans-serif'; + line-height: 1.6; + background: #fff; + color: #333; +} +.container{ + width: 1100px; + margin: auto; + overflow: hidden; + padding: 0.2rem; + text-align: center; +} +.restart-btn{ + display: none; + background-color: #f4f4f4; + color: #333; + padding: 10px; + font-size: 1rem; + outline: none; + border: none; + cursor: pointer; + margin-bottom: 1rem; +} +.restart-btn:hover{ + background-color: #003699; + color: #fff; +} +.header{ + text-align: center; + margin: 1rem 0; + +} +.header h1{ + margin-bottom: 1rem; +} +.score{ + display: grid; + grid-template-columns: auto auto; + font-size: 1.2rem; + color: #fff; +} +.score p:first-child{ + background: #003699; + +} +.score p:last-child{ + background: #333333; + +} +.choices{ + display: grid; + grid-template-columns: auto auto auto; + grid-gap: 2rem; + margin-top: 3rem; + text-align: center; +} +.choice{ + cursor: pointer; +} +.choice:hover{ + color: #003699; +} +.text-win{ + color: #28a745; +} +.text-lose{ + color: #dc3545; +} +@media(max-width: 700px){ + .choice{ + font-size: 110px; + } +} +@media(max-width: 500px){ + .choice{ + font-size: 80px; + } +} \ No newline at end of file diff --git a/week 6/app.js b/week 6/app.js new file mode 100644 index 0000000..a7c9cad --- /dev/null +++ b/week 6/app.js @@ -0,0 +1,40 @@ +/* Closure in Javascript +Closure is created when an inner function has access to its outer function variables and arguments. + In JavaScript, closures are created every time a function is created. + The inner function has access to – +1. Its own variables. +2. Outer function's variables and arguments. +3. Global variables. + +*/ + + +var a = 1; + +function someFunction(number) { + function otherFunction(input) { + return a; + } + + a = 5; + + return otherFunction; +} + +var firstResult = someFunction(9); +var result = firstResult(2); + /*The Result is "there's a type error" because firstResult + is not a function, making it undefined. */ + + +var a = 1; +function b() { + a = 10; + return; + function a() {} +} +b(); +console.log(a); +/* Answer on console is 1 because it is declared and initialized as 1 in the global scope even though + it is re-assigned in the function b() which does not return any value. +*/ diff --git a/week 7/promises.js b/week 7/promises.js new file mode 100644 index 0000000..cf0166e --- /dev/null +++ b/week 7/promises.js @@ -0,0 +1,36 @@ +/* +Syncronous & Asyncronous Javascript (MVP) + +1. A promise is an object that may produce a single value some time in the future: + either a resolved value, or a reason that it’s not resolved + A promise may be in one of 3 possible states: fulfilled, rejected, or pending. + Promise users can attach callbacks to handle the fulfilled value or the reason for rejection. + + 2. Synchronous operations block instructions until the task is completed, while + Asynchronous operations can execute without blocking other operations. + Asynchronous operations are generally completed by firing an event or by calling a + provided callback function. + + 3. Synchronous sample code + console.log('First'); + console.log('Second'); + console.log('Third'); + Output to the console will be + First + Second + Third + + Asynchronous sample code + let promise = new Promise(function(resolve, reject) { + setTimeout(() => resolve("done!"), 1000); + }); + promise.then( + result => alert(result), // shows "done!" after 1 second + error => alert(error) // doesn't run + ); + + 4. Different ways to deal with Asynchronous Code + 1) Callbacks + 2) Promises + 3) Async or Await +*/ \ No newline at end of file diff --git a/week3-4/MVP/index.html b/week3-4/MVP/index.html new file mode 100644 index 0000000..877a5fe --- /dev/null +++ b/week3-4/MVP/index.html @@ -0,0 +1,25 @@ + + + + + +