diff --git a/Module_5/Challenge1.js b/Module_5/Challenge1.js index d65e3a7..3ec0439 100644 --- a/Module_5/Challenge1.js +++ b/Module_5/Challenge1.js @@ -1,16 +1,16 @@ - -let names = ['Westly Snipes', 'Nicholas Cage', 'Nasir Jones', 'Sean Carter', 'Sean Combs', 'Michael Jordan', 'Patrick Ewing']; +let names = [['Westly'], ['Snipes'], ['Nicholas'],['Cage'], ['Nasir'], ['Jones'], ['Sean'], ['Carter'], ['Sean'], ['Combs'], ['Michael'],['Jordan'], ['Patrick'], ['Ewing']]; let firstName = []; let lastName = []; -let i; - -for (i=0; i <= names.length; i++) { - +for (let i=0; i <= names.length; i++) { + if (names[i] % 2 == 0) { + firstName.push(names[i]); + }else{ + lastName.push(names[i]); + } } +console.log(firstName) -console.log("firstName:"); - -console.log("lastName:"); \ No newline at end of file +console.log(lastName) \ No newline at end of file diff --git a/Module_5/Challenge3.js b/Module_5/Challenge3.js index f9fc53c..7d0d14a 100644 --- a/Module_5/Challenge3.js +++ b/Module_5/Challenge3.js @@ -1,9 +1,13 @@ -const lyrics = [`I messed up tonight, I lost another fight, I messed up but I'll just start again, I keep falling down I keep on hitting the ground, I always get up now to see what's next. Birds don't just fly, they fall down and get up. Nobody learns without getting it wrong! I won't give up, no I won't give in, till I reach the end and then I'll start again. No I won't leave, I wanna try everything, I wanna try even though I could fail!`]; +let lyrics = [`I messed up tonight, I lost anothEr fight, I messed up but I'll just start again, I keep falling down I keep on hitting the ground, I always get up now to see what's next. Birds don't just fly, thEy fall down and get up. Nobody learns without getting it wrong! I won't give up, no I won't give in, till I reach the end and then I'll start again. No I won't leave, I wanna try everything, I wanna try even though I could fail!`]; +let words = lyrics.split(" ") +for (let i=0; i < lyrics.length; i++) { + if (words[i] == "e" && words[i] == 'E') { + let newLyrics = words[i].replace(/e/ig, "$"); + } +} +let newLyrics = newString.join(" "); -const words = lyrics.split(" ").join(); +console.log(newLyrics); -array.splice("s", '$'); - -console.log(lyrics); diff --git a/Module_6/Object_Animal.js b/Module_6/Object_Animal.js new file mode 100644 index 0000000..190d88c --- /dev/null +++ b/Module_6/Object_Animal.js @@ -0,0 +1,23 @@ +/*Create an Animal*/ + +let animal = { + name: "furballs", + color: "white", + breed: "bear", + softness: "sinkably soft", + makes_noise: function(){ + console.log ("meow"); + return true + }, + + get name( ) { + return this.animalName; + }, + set breed(breed) { + this.breed = animalBreed; + } +}; + +animal.name +animal.breed +animal.makes_noise diff --git a/Module_6/Object_Sports.js b/Module_6/Object_Sports.js new file mode 100644 index 0000000..40a3e1c --- /dev/null +++ b/Module_6/Object_Sports.js @@ -0,0 +1,23 @@ +/*Creat a sports team*/ + +let sport = { + name: "Bangles", + color: "Fuchsia", + country: "USA", + game: "panty brigade", + ball_hitting: function(){ + console.log ("crack"); + return true + }, + + get color( ) { + return this.sportColor; + }, + set country(country) { + this.country = sportCountry; + } +}; + +sport.color() +sport.country +sport.ball_hitting diff --git a/Module_6/Objects_Cars.js b/Module_6/Objects_Cars.js new file mode 100644 index 0000000..f32af6b --- /dev/null +++ b/Module_6/Objects_Cars.js @@ -0,0 +1,22 @@ +/* Create a car */ +let car = { + name: "Lamborghini", + color: "red", + country: "Italy", + Speed: "220 mph", + makes_noise: function(){ + console.log ("vroom vroom"); + return true + }, + + get color( ) { + return this.carColor; + }, + set speed(speed) { + this.speed = carSpeed; + } +}; + +car.color +car.speed +car.makes_noise diff --git a/Module_6/Projects/Tip Calculator/index.html b/Module_6/Projects/Tip Calculator/index.html new file mode 100644 index 0000000..c8a5cc1 --- /dev/null +++ b/Module_6/Projects/Tip Calculator/index.html @@ -0,0 +1,43 @@ + + + + + + + Tip Calculator + + + + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + +
+ + + + + + + diff --git a/Module_6/Projects/Tip Calculator/script.js b/Module_6/Projects/Tip Calculator/script.js new file mode 100644 index 0000000..f258168 --- /dev/null +++ b/Module_6/Projects/Tip Calculator/script.js @@ -0,0 +1,132 @@ +class Calculator { + constructor (previousOperandTextElement, currentOperandandTextElement) { + this.previousOperandTextElement = previousOperandTextElement + this.currentOperandandTextElement = currentOperandandTextElement + this.clear() + } + clear() { + this.currentOperand = '' + this.previousOperand = '' + this.operation = undefined + } + + delete() { + this.currentOperand = this.currentOperand.toString().slice(0, -1) + } + + appendNumber(number) { + if (number === '.' && this.currentOperand.includes ('.')) return + this.currentOperand = this.currentOperand.toString() + number.toString() + } + + chooseOperation(operation) { + if (this.currentOperand === '') return + if (this.previousOperand !== '') { + this.compute() + } + this.operation = operation + this.previousOperand = this.currentOperand + this.currentOperand = '' + } + + compute() { + let computation + const prev = parseFloat(this.previousOperand) + const current = parseFloat(this.currentOperand) + if (isNaN(prev) || isNaN(current)) return + switch (this.operation) { + case '+': + computation = prev + current + break + + case '+': + computation = prev + current + break + + case '-': + computation = prev - current + break + + case '*': + computation = prev * current + break + + case '/': + computation = prev / current + break + default: + return + } + this.currentOperand = computation + this.operation = undefined + this.previousOperand = '' + } + + getDisplayNumber(number) { + const stringNumber = number.toString() + const integerDigits = parseFloat(stringNumber.split('.')[0]) + const decimalDigits = stringNumber.split('.')[1] + let integerDisplay + if (isNaN(integerDigits)) { + integerDisplay = '' + }else { + integerDisplay = integerDigits.toLocaleString('en', {maximumFractionDigits: 0}) + } + if (decimalDigits != null) { + return `${integerDisplay}.${decimalDigits}` + }else { + return integerDisplay + } + } + + updateDisplay() { + this.currentOperandandTextElement.innerText = this.getDisplayNumber(this.currentOperand) + if (this.operation != null) { + this.previousOperandTextElement.innerText = + `${this.getDisplayNumber (this.previousOperand)} ${this.operation}` + }else { + this.previousOperandTextElement.innerText = '' + } + } +} + + + +const numberButtons = document.querySelectorAll('[data-number]') +const operationButtons = document.querySelectorAll('[data-operation]') +const equalsButton = document.querySelector('button[data-equals]') +const deleteButton =document.querySelector('[data-delete]') +const allClearButton = document.querySelector('[data-all-clear]') +const previousOperandTextElement = document.querySelector('[data-previous-operand]') +const currentOperandandTextElement = document.querySelector('[data-current-operand]') + +const calculator = new Calculator(previousOperandTextElement, currentOperandandTextElement) + +numberButtons.forEach(button => { + button.addEventListener('click', () => { + calculator.appendNumber(button.innerText) + calculator.updateDisplay() + }) +}) + +operationButtons.forEach(button => { + button.addEventListener('click', () => { + calculator.chooseOperation(button.innerText) + calculator.updateDisplay() + }) +}) + +equalsButton.addEventListener('click', button => { + calculator.compute() + calculator.updateDisplay() +}) + +allClearButton.addEventListener('click', button => { + calculator.clear() + calculator.updateDisplay() +}) + +deleteButton.addEventListener('click', button => { + calculator.delete() + calculator.updateDisplay() +}) \ No newline at end of file diff --git a/Module_6/Projects/Tip Calculator/styles.css b/Module_6/Projects/Tip Calculator/styles.css new file mode 100644 index 0000000..2637cae --- /dev/null +++ b/Module_6/Projects/Tip Calculator/styles.css @@ -0,0 +1,58 @@ +*, *::before, *::after { + box-sizing: border-box; + font-family: Arial, sans-serif; + font-weight: normal; +} + +body { + padding: 0; + margin: 0; + background: linear-gradient(to right, #00AAFF, #00FF6C); +} + +.calculator-grid { + display: grid; + justify-content: center; + align-content: center; + min-height: 100vh; + grid-template-columns: repeat(4, 100px); + grid-template-rows: minmax(120px, auto) repeat(5, 100px); +} + +.calculator-grid > button { + cursor: pointer; + font-size: 2rem; + border: 1px solid white; + outline: none; + background-color: rgba(255, 255, 255, .75); +} + +.calculator-grid > button:hover { + background-color: rgba(255, 255, 255, .9); +} + +.span-two { + grid-column: span 2; +} + +.output { + grid-column: 1 / -1; + background-color: rgba(0, 0, 0, .75); + display: flex; + align-items: flex-end; + justify-content: space-around; + flex-direction: column; + padding: 10px; + word-wrap: break-word; + word-break: break-all; +} + +.output .previous-operand { + color: rgba(255, 255, 255, .75); + font-size: 1.5rem; +} + +.output .current-operand { + color: white; + font-size: 2.5rem; +} \ No newline at end of file diff --git a/Module_6/Projects/To do list/index.html b/Module_6/Projects/To do list/index.html new file mode 100644 index 0000000..7fcb14b --- /dev/null +++ b/Module_6/Projects/To do list/index.html @@ -0,0 +1,26 @@ + + + + + + Vacation To Do List + + + + + +

Vacation To Do List

+
+ + +
+
+
+ + + +
+
+ + + diff --git a/Module_6/Projects/To do list/main.css b/Module_6/Projects/To do list/main.css new file mode 100644 index 0000000..0dff132 --- /dev/null +++ b/Module_6/Projects/To do list/main.css @@ -0,0 +1,70 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + height: 100% + background-color: #111; +} + +h1 { + font-size: 3rem; + font-weight: 50; + margin: 1rem 0 3rem; + text-align: center; + color: #fff; + font-family: 'Hind', sans-serif; +} + +.styling { + font-weight: 800; + color: lime; +} + +.input_div { + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.input_div .input { + padding: 0.5rem 1rem; + height: 50px; + outline: none; + border: none; + background-color: #fff; + width: 450px; + font-size: 1.15rem; + margin: 0.25rem; + border-radius: 25px; +} + +.addButton { + height: 50px; + width: 50px; + border-radius: 25rem; + outline: none; + border: none; + background-color: #fff; + color: #fff; + margin: 0.25rem; + background-color: lime:; + cursor: pointer; +} + +.addButton:hover { + opacity: 0.7; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + margin-top: 2rem; +} + diff --git a/Module_6/Projects/To do list/main.js b/Module_6/Projects/To do list/main.js new file mode 100644 index 0000000..b3068b9 --- /dev/null +++ b/Module_6/Projects/To do list/main.js @@ -0,0 +1,66 @@ +const addButton = document.querySelector('.addButton'); +var input = document.querySelector('.input'); +const container = document.querySelector('.container'); + +class item { + constructor(itemName){ + //Create the item div + this.createDiv(itemName); +} + + createDiv(itemName) { + let input = document.createElement('input'); + input.value = itemName; + input.disabled = true; + input.classList.add('item_input'); + input.type = "text"; + + let itemBox = document.createElement('div'); + itemBox.classList.add('item'); + + let editButton = document.createElement('button'); + editButton.innerHTML = "EDIT"; + editButton.class.List.add('editButton'); + + let removeButton = document.createElement('button'); + editButton.innerHTML = "REMOVE"; + removeButton.classList.add('removeButton'); + + container.appendChild(itemBox); + + itemBox.appendChild(input); + itemBox.appendChild(editButton); + itemBox.appendChild(removeButton); + + editButton.addEventListener('click', () => this.edit(input)); + + removeButton.addEventListener('click', () => this.remove(itemBox)); + + + } + + edit(input) { + input.disabled = !input.disabled; + } + + remove(item){ + container.removeChild(item); + } + } + + function check () { + if(input.value != "") { + new item(input.value); + input.value = ""; + } + } + + + + addButton.addEventListener('click', check); + window.addEventListener('keydown', (e) => { + if(e.which == 13) { + check(); + } + }) + \ No newline at end of file diff --git a/Module_6/Projects/Weather/Kuwait_City.jpg b/Module_6/Projects/Weather/Kuwait_City.jpg new file mode 100644 index 0000000..1a36daa Binary files /dev/null and b/Module_6/Projects/Weather/Kuwait_City.jpg differ diff --git a/Module_6/Projects/Weather/index.html b/Module_6/Projects/Weather/index.html new file mode 100644 index 0000000..67b4f5e --- /dev/null +++ b/Module_6/Projects/Weather/index.html @@ -0,0 +1,34 @@ + + + + + + + Weather App for Kuwait City + + + + + +
+
+ +
+
+
+
Kuwait City, KW
+
Friday, August 14, 2020
+
+
+
101°F
+
Sunny
+
89°F / 111°F
+ + +
+ + + + + + diff --git a/Module_6/Projects/Weather/main.js b/Module_6/Projects/Weather/main.js new file mode 100644 index 0000000..8fc57a0 --- /dev/null +++ b/Module_6/Projects/Weather/main.js @@ -0,0 +1,51 @@ +const api = { + key: "cb5cdea4921d9300bb50d5f51945ce96", + baseurl: "https://api.openweathermap.org/data/2.5/" +} + +const searchbox = document.querySelector('.search-box'); +searchbox.addEventListener('keypress', setQuery); + +function setQuery(evt) { + if (evt.keyCode == 13) { + getResults(searchbox.value); + } +} + +function getResults (query) { + fetch(`${api.baseurl}weather?q=${query}&units=imperial&APPID=${api.key}`) + .then(weather => { + return weather.json (); + }).then(displayResults); +} + +function displayResults (weather) { + console.log(weather); + let city = document.querySelector('.location .city'); + city.innerText = `${weather.name}, ${weather.sys.country}`; + + let now = new Date(); + let date = document.querySelector('.location .date'); + date.innerText = dateBuilder(now); + + let temp = document.querySelector('.current .temp'); + temp.innerHTML = `${Math.round(weather.main.temp)}°F`; + + let weather_el = document.querySelector('.current .weather'); + weather_el.innerText - weather.weather[0].main; + + let hilow = document.querySelector('.hi-low'); + hilow.innerText = `${Math.round(weather.main.temp_min)} °F / ${Math.round(weather.main.temp_max)} °F`; +} + +function dateBuilder (d) { + let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + + let day = days[d.getDay()]; + let date = d.getDate(); + let month = months[d.getMonth()]; + let year = d.getFullYear(); + + return `${day} ${date} ${month} ${year}`; +} \ No newline at end of file diff --git a/Module_6/Projects/Weather/stylesheet.css b/Module_6/Projects/Weather/stylesheet.css new file mode 100644 index 0000000..beb44c2 --- /dev/null +++ b/Module_6/Projects/Weather/stylesheet.css @@ -0,0 +1,103 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, san-serif; + background-image: url(Kuwait_City.jpg); + background-size: cover; + background-position: top-center; +} + +.app-wrap { + display: flex; + flex-direction: column; + min-height: 100vh; + background-image: linear gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)); +} + +header { + display: flex; + justify-content: center; + align-items: center; + padding: 50px 15px 15px; +} + +header input { + width: 100% + max-width: 280px; + padding: 10px, 15px; + border: none; + outline: none; + background-color: rgba(255, 255, 255, 0.3); + border-radius: 16px 0px 16px 0px; + border-bottom: 3px solid #DF8E00; + + color: #313131; + font-weight: 20px; + font-weight: 300; + transition: 0.2s ease-out; +} + +header input:focus { + background-color: rgba(255, 255, 255, 0.6); +} + + +main { + flex: 1 1 100%; + padding: 25px 25px 50px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.search-box { + justify-content: center; + align-items: center; + padding: 10px; + font-size: 20px; +} + +.location .city { + color: #FFF; + font-size: 32px; + font-weight: 500; + margin-bottom: 5px; +} + +.location .date { + color: #FFF; + font-size: 16px; +} + +.current .temp { + color: #FFF; + font-size: 102px; + font-weight: 900; + margin: 30px 0px; + text-shadow: 2px 10px rgba(0, 0, 0, 0.6); +} + +.current .temp span { + font-weight: 500; +} + +.current .weather { + color: #FFF; + font-size: 32px; + font-weight: 700; + font-style: italic; + margin-bottom: 15px; + text-shadow: 0px 3px rgba(0, 0, 0, 0.4); +} + +.current .hi-low { + color: #FFF; + font-size: 24px; + font-weight: 500; + text-shadow: 0px 4px rgba(0, 0, 0, 0.4); +} \ No newline at end of file