diff --git a/calculator app/index.html b/calculator app/index.html new file mode 100644 index 0000000..19c734f --- /dev/null +++ b/calculator app/index.html @@ -0,0 +1,38 @@ + + + + + + + Calculator App + + +
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + \ No newline at end of file diff --git a/calculator app/script.js b/calculator app/script.js new file mode 100644 index 0000000..f71f7fb --- /dev/null +++ b/calculator app/script.js @@ -0,0 +1,9 @@ +const input = document.getElementById('input'); +const total = document.getElementById('total') +const figure = document.querySelector('.item') +const btn =document.querySelector('button') + + +btn.addEventListener('click',()=>{ + console.log('working') +}) \ No newline at end of file diff --git a/calculator app/style.css b/calculator app/style.css new file mode 100644 index 0000000..dd53e60 --- /dev/null +++ b/calculator app/style.css @@ -0,0 +1,35 @@ +body{ + background: darksalmon; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ; + font-size: 20px; +} +.main{ + display: flex; + flex-direction: column; +} +.first-div{ + display: flex; + justify-content: center; +} +.second-div{ + display: flex; + justify-content: center; +} +.third-div{ + display: flex; + justify-content: center; +} +.last-div{ + display: flex; + justify-content: center; +} +.item{ + background: #fff; + border: 1px solid red; + padding: 3rem; +} +#input{ + padding: 3rem; + width: 21%; + margin:0rem auto; +} \ No newline at end of file diff --git a/week 3-4/todo-app/css/style.css b/week 3-4/todo-app/css/style.css new file mode 100644 index 0000000..b29304a --- /dev/null +++ b/week 3-4/todo-app/css/style.css @@ -0,0 +1,268 @@ +*, *::before, *::after { + box-sizing: border-box; + } + +body{ + margin: 0px; + background:linear-gradient(to right, #232526, #414345); + font-family: 'Open Sans', sans-serif; + box-sizing: inherit; +} +.footer{ + text-align: center; + font-size: 20px; + position: relative; + bottom: 0px; + background: rgb(255, 255, 255); + padding: 0.3rem; + +} +.inner-div{ + margin: 8rem auto; + width: 50%; + padding: 4rem 1rem; + background-color:#000; + border-radius: 10px; +} +.header{ + font-family: 'Courgette', cursive; + font-size: 50px; + text-align: center; + margin-top: -2rem; + color: #FFF; + -webkit-animation: glow 1s ease-in-out infinite alternate; + -moz-animation: glow 1s ease-in-out infinite alternate; + animation: glow 1s ease-in-out infinite alternate; +} + +@keyframes glow { + from { + text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; + } + to { + text-shadow: 0 0 10px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; + } + } +#input{ + padding: .5rem; + width: 70%; + font-family: 'Open Sans', sans-serif; + font: 20px bold; + border-radius: 5px; + outline-color:#e4c2c2 ; + border: 1px solid #fff; + background-color: #fff; +} +#enterBtn{ + width: 20%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font: 20px bold; + margin-left: 1rem; + color: #000; + outline-color:#e4c2c2; + background-color: #fff; +} +#clearTodo{ + width: 25%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font: 20px bold; + margin-left: 0rem; + outline-color:#e4c2c2; + color: #000; + background-color: rgb(46, 38, 38) +} + +li{ + display: flex; + justify-content: space-between; + background-color: #f3f3f3; + list-style-type: none; + margin-left: -2.3rem; + padding: .5rem; + border:1px dashed #e4c2c2; + border-radius: 5px; +} +.cancel{ + text-decoration: line-through; + color : red; +} +/* .cancelTodo{ + background-color: red; +} */ +@media screen and (max-width:1024px){ + #input{ + padding: .5rem; + width: 60%; + font-family: 'Open Sans', sans-serif; + font: 20px bold; + border-radius: 5px; + outline-color:#e4c2c2 ; + border: 1px solid #fff; + } + #enterBtn{ + width: 20%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + margin-left: 1rem; + outline-color:#e4c2c2; + background-color: #fff; + } + #clearTodo{ + width: 30%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + margin-left: 0rem; + outline-color:#e4c2c2; + background-color: rgba(84, 82, 85, 0.5); + } + .inner-div{ + background-color:#000; + margin: 10rem auto; + width: 60%; + padding: 5rem 1rem; + border-radius: 10px; + } + .header{ + font-size: 40px; + } + +} +@media screen and (max-width:768px){ + #input{ + padding: .5rem; + width: 60%; + font-family: 'Open Sans', sans-serif; + font: 20px bold; + border-radius: 5px; + outline-color:#e4c2c2 ; + border: 1px solid #fff; + } + #enterBtn{ + width: 30%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + outline-color:#e4c2c2; + background-color: #fff + } + #clearTodo{ + width: 40%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + margin-left: 0rem; + outline-color:#e4c2c2; + background-color: rgba(84, 82, 85, 0.5); + } + .inner-div{ + margin: 5rem auto; + width: 60%; + padding: 5rem 1rem; + background-color:#000; + border-radius: 10px; + } + .header{ + font-size: 30px; + } +} +@media screen and (max-width:576px){ + #input{ + padding: .5rem; + width: 70%; + font-family: 'Open Sans', sans-serif; + font: 20px bold; + border-radius: 5px; + outline-color:#e4c2c2 ; + border: 1px solid #fff; + } + #enterBtn{ + width: 20%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + outline-color:#e4c2c2; + background-color: #fff + } + #clearTodo{ + width: 40%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + margin-left: 0rem; + outline-color:#e4c2c2; + background-color: rgba(84, 82, 85, 0.5); + } + .inner-div{ + margin: 5rem auto; + width: 80%; + padding: 5rem 1rem; + background-color:#000; + border-radius: 10px; + } + .header{ + font-size: 30px; + } +} +@media screen and (max-width:360px){ + #input{ + padding: .5rem; + width: 60%; + font-family: 'Open Sans', sans-serif; + font: 20px bold; + border-radius: 5px; + outline-color:#e4c2c2 ; + border: 1px solid #fff; + } + #enterBtn{ + width: 25%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + outline-color:#e4c2c2; + background-color: #fff + } + #clearTodo{ + width: 40%; + padding: .5rem; + border-radius: 5px; + border: 1px solid #fff; + font-family: 'Open Sans', sans-serif; + font-size: 15px; + margin-left: 0rem; + outline-color:#e4c2c2; + background-color: rgba(84, 82, 85, 0.5); + } + .inner-div{ + margin: 5rem auto; + width: 80%; + padding: 5rem 1rem; + background-color:#000; + border-radius: 10px; + } + .header{ + font-size: 30px; + } +} + diff --git a/week 3-4/todo-app/img/images-2.png b/week 3-4/todo-app/img/images-2.png new file mode 100644 index 0000000..ac9fb6a Binary files /dev/null and b/week 3-4/todo-app/img/images-2.png differ diff --git a/week 3-4/todo-app/img/images-3.jpg b/week 3-4/todo-app/img/images-3.jpg new file mode 100644 index 0000000..b8b6ab5 Binary files /dev/null and b/week 3-4/todo-app/img/images-3.jpg differ diff --git a/week 3-4/todo-app/img/images.jpg b/week 3-4/todo-app/img/images.jpg new file mode 100644 index 0000000..74f0d8d Binary files /dev/null and b/week 3-4/todo-app/img/images.jpg differ diff --git a/week 3-4/todo-app/index.html b/week 3-4/todo-app/index.html new file mode 100644 index 0000000..75a62f8 --- /dev/null +++ b/week 3-4/todo-app/index.html @@ -0,0 +1,30 @@ + + + + + + + + + Todo app + + +
+

Things to do

+ + +
+ + +
+ + + + \ No newline at end of file diff --git a/week 3-4/todo-app/script/script.js b/week 3-4/todo-app/script/script.js new file mode 100644 index 0000000..9a6069b --- /dev/null +++ b/week 3-4/todo-app/script/script.js @@ -0,0 +1,85 @@ +const input = document.getElementById('input'); +const enterBtn = document.getElementById('enterBtn') +const ul = document.querySelector('ul') +let todo = []; +const clearTodo = document.getElementById('clearTodo') + +// creating todo items +const createTodo = ()=>{ + todo.push(input.value); + ul.innerHTML = ""; + for(let i= 0; i{ + li.classList.toggle('cancel') + }) + li.appendChild(cancelTodo); + input.value ="" + } + save() + +} + +// adding task using in using the enter button +const addTask = ()=>{ + if(input.value.length >0){ + createTodo() + } +} + +// adding task using enter key from the keyboard(keypress) +const inputEvent =()=>{ + if(input.value.length > 0 && event.which===13){ + createTodo() + } +} + + +enterBtn.addEventListener('click',addTask); +input.addEventListener('keypress',inputEvent) + + +// save to local storage +function save(){ + localStorage.setItem('todo',JSON.stringify(todo)); + console.log('working') +} + + +// get items from local Storage + function preLoadTodo(){ + try{ + let todo = JSON.parse(localStorage.getItem('todo')) + for(let i= 0; i{ + li.classList.toggle('cancel') + }) + li.appendChild(cancelTodo); + input.value =""; + } + } + catch(e){ + console.log('could not get todos') + } +} +window.addEventListener('load',preLoadTodo); + + + +// clear todo -item from local storage and screen +clearTodo.addEventListener('click',()=>{ + let clear = confirm('Do you want to clear todo list?') + if (clear){ + localStorage.clear('todo', todo); + ul.innerHTML="" + } + }) diff --git a/week 5/README.md b/week 5/README.md new file mode 100644 index 0000000..96f0dd7 --- /dev/null +++ b/week 5/README.md @@ -0,0 +1,72 @@ + # JS-Intro-OOP-Exercises + +# Exercises + +## Objectives: + +* Get comfortable creating a class with properties and methods +* Practice creating objects and methods that interact with one another +* Instance several objects that are contained within a special container object +* Encapsulate functionality within the proper class + +## Exercises: - MVP + +### The Cat + +_Write yourself a virtual cat - animals with a CLI are so much nicer than ones with fur._ + +* Create an object that represents a cat. It should have properties for `tiredness`, `hunger`, `lonliness` and `happiness` +* Next, write methods that increase and decrease those properties. Call them something that actually represents what would increase or decrease these things, like "feed", "sleep", or "pet". +* Last, write a method that prints out the cat's status in each area. (Be creative e.g. Paws is really hungry, Paws is VERY happy.) +* Bonus: Make the functions take arguments that increase or decrease arbitrary amounts +* Bonus: Make the functions as arbitrary as cats are - sometimes make it so the cat doesn't _want_ to be petted. + + +### The Reading List + +_An object-oriented book-list!_ + +* Create a class `BookList` +* Create another class called `Book` + +* **BookLists** should have the following properties: + * Number of books marked as read + * Number of books marked not read yet + * A reference to the next book to read (book object) + * A reference to the current book being read (book object) + * A reference to the last book read (book object) + * An array of all the Books +* Each **Book** should have several properties: + * Title + * Genre + * Author + * Read (true or false) + * Read date, can be blank, otherwise needs to be a [JS Date() object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) +* Every **Booklist** should have a few methods: + * .add(book) + * should add a **book** to the books list. + * .finishCurrentBook() + * should mark the **book** that is currently being read as "read" + * Give it a read date of new Date(Date.now()) + * Change the last **book** read to be the book that just got finished + * Change the current **book** to be the next book to be read + * Change the next **book** to be read property to be the first unread book you find in the list of books + +* **Booklists** and **Books** might need more methods than that. Try to think of more that might be useful. + + + +### The Game (advanced) - STRETCH (Start this when you're done with MVP) +Pick one of three games: Chess, Poker, or Roshambo (rock, paper, scissors). Roshambo is the easiest, followed by Poker, then Chess. + +* Your game should have a **Game** object shat should be responsible for keeping track of it's state + * State depends on the game, all games have players, but not all games have pieces, cards, or moves. try to plan out what your state will be first + * Your game should keep a reference to **players**, and it should tell them whether or not they have won or lost + * Your game should be able to look at the state of the players and execute a **turn**- this is where you put code that looks at the state of each player and evaluates the results of what happens when that player changes it's state + * Some games will have multiple turns that will change the state of the game, while others (like roshambo) only have one turn that determines a win or a loss. +* You should have **Players** for your game, which should be a class + * Each player should keep track of how many wins and losses it has + * Players should keep track of their pieces, cards, or hands +* You should have a class for each **Piece**, **Card** or **Move** + +It's up to you to do the rest of the design for this program! Ensure two players can be created in the console as classes, join a game, execute methods with moves, and one player can win each game. diff --git a/week 5/book-list.js b/week 5/book-list.js new file mode 100644 index 0000000..c09fcfe --- /dev/null +++ b/week 5/book-list.js @@ -0,0 +1,19 @@ + +class Book{ + constructor(title,genre,author,read,date){ + this.title = title; + this.genre = genre; + this.author = author; + this.read = read; + this.date = date + } +} + +class BookList extends Book{ + constructor(title,genre,author,read,date){ + super(title,genre,author,read,date) + } + finishCurrentBook(){ + console.log() + } +} diff --git a/week 5/virtual-cat.js b/week 5/virtual-cat.js new file mode 100644 index 0000000..54e1d94 --- /dev/null +++ b/week 5/virtual-cat.js @@ -0,0 +1,19 @@ +const kitty = { + tiredness (){ + console.log('kitty wants to sleep') + }, + hunger (){ + console.log('kitty needs to be fed') + console.log('kitty does not want to eat') + }, + lonliness(){ + console.log('kitty wants to be petted') + }, + happiness(){ + console.log('kitty is very happy') + } +} +kitty.tiredness() +kitty.hunger() +kitty.lonliness() +kitty.happiness() \ No newline at end of file diff --git a/week 6/README.md b/week 6/README.md new file mode 100644 index 0000000..66f298b --- /dev/null +++ b/week 6/README.md @@ -0,0 +1,35 @@ +# JS Closures exercises (MVP) + +1. In your own terms, define what a Closure is in Javascript + +2. What is result? + +``` +var a = 1; + +function someFunction(number) { + function otherFunction(input) { + return a; + } + + a = 5; + + return otherFunction; +} + +var firstResult = someFunction(9); +var result = firstResult(2); +``` + +3. What will you see in the console for the following example? Explain Why + +``` +var a = 1; +function b() { + a = 10; + return; + function a() {} +} +b(); +console.log(a); +``` diff --git a/week 6/closures.js b/week 6/closures.js new file mode 100644 index 0000000..37d7f6c --- /dev/null +++ b/week 6/closures.js @@ -0,0 +1,34 @@ +// 1. In your own terms, define what a Closure is in Javascript + + +// Closure is a combination of nested function with it's surrounding states(the scopes). Closures allows functions access varibles that are declared globally. + + +// 2. What is result? +var a = 1; + +function someFunction(number) { + function otherFunction(input) { + return a; + } + + a = 5; + + return otherFunction; +} + +var firstResult = someFunction(9); +var result = firstResult(2); + +// answer: 2 + +// 3. What will you see in the console for the following example? Explain Why +var a = 1; +function b() { + a = 10; + return; + function a() {} +} +b(); +console.log(a); +// Answer: 10 should be logged to the console because variable was reassigned within the function(although my console is giving another answer) \ No newline at end of file diff --git a/week 7/README.md b/week 7/README.md new file mode 100644 index 0000000..900804c --- /dev/null +++ b/week 7/README.md @@ -0,0 +1,9 @@ +# Syncronous & Asyncronous Javascript (MVP) + +1. What are promises and how they are useful? + +2. What is the difference between synchronous and asynchronous code in JavaScript? + +3. Write out any sample syncronous and asyncronous javascript code + +4. List the different ways to deal with Asynchronous Code? \ No newline at end of file diff --git a/week 7/task-7.md b/week 7/task-7.md new file mode 100644 index 0000000..e4e5a5d --- /dev/null +++ b/week 7/task-7.md @@ -0,0 +1,20 @@ +A promise represents the completion or failure of an operation. + +Differnce between synchronous and asynchronous code + synchronous code is executed in sequence – each statement waits for the previous statement to finish before executing. + Asynchronous code doesn’t have to wait – your program can continue to run. + +Write out any sample syncronous and asyncronous javascript code + +Asynchronous code: + console.log("use the bathroom); + setTimeout(function() { + console.log("Dress up"); + }, 2000); + console.log("Eat breakfast"); +Synchronous code: + console.log("use the bathroom); + console.log("Dress up"); + console.log("Eat breakfast"); + + List the different ways to deal with Asynchronous Code? \ No newline at end of file