├── .gitattributes ├── README.md ├── app ├── css │ ├── style.css │ ├── style.css.map │ └── style.scss ├── img │ └── at1.jpg └── js │ ├── dommanipulation.js │ ├── fetchdata.js │ ├── main.js │ ├── morejs.js │ ├── questions.js │ └── recap.js ├── dommanipulation.html ├── fetchdata.html ├── indes.html └── more.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # javascript 2 | class lesson 3 | -------------------------------------------------------------------------------- /app/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Open Sans", sans-serif; 6 | } 7 | 8 | a { 9 | font-size: 16px; 10 | text-decoration: none; 11 | color: white; 12 | cursor: pointer; 13 | } 14 | 15 | .btn { 16 | padding: 10px 20px; 17 | font-size: 16px; 18 | font-weight: 400; 19 | border-radius: 5px; 20 | background-color: aqua; 21 | border: 1px solid transparent; 22 | text-transform: capitalize; 23 | } 24 | 25 | .container { 26 | min-height: 100vh; 27 | width: 100%; 28 | margin: auto; 29 | display: flex; 30 | align-items: center; 31 | justify-content: center; 32 | overflow: hidden; 33 | } 34 | .container .card { 35 | height: 500px; 36 | width: 300px; 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: center; 40 | align-items: center; 41 | box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.1); 42 | border-radius: 6px; 43 | cursor: pointer; 44 | transition: all 0.3s ease; 45 | } 46 | .container .card:hover { 47 | transform: translateY(20px); 48 | } 49 | .container .card #image { 50 | height: 50%; 51 | width: 100%; 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | } 56 | .container .card #image img { 57 | height: 100%; 58 | width: 100%; 59 | -o-object-fit: cover; 60 | object-fit: cover; 61 | border-radius: 6px 6px 0px 0; 62 | } 63 | .container .card .text { 64 | height: 50%; 65 | width: 100%; 66 | padding: 10px; 67 | } 68 | .container .card .text h3 { 69 | font-size: 1.5em; 70 | color: aqua; 71 | margin-bottom: 20px; 72 | margin-top: 10px; 73 | } 74 | .container .card .text p { 75 | font-size: 1.1em; 76 | margin-bottom: 20px; 77 | }/*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /app/css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,SAAA;EACA,UAAA;EACA,sBAAA;EACA,oCAAA;ACCF;;ADEA;EACE,eAAA;EACA,qBAAA;EACA,YAAA;EACA,eAAA;ACCF;;ADEA;EACE,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;EACA,6BAAA;EACA,0BAAA;ACCF;;ADCA;EACE,iBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;ACEF;ADAE;EACE,aAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,4CAAA;EACA,kBAAA;EAEA,eAAA;EACA,yBAAA;ACCJ;ADCI;EACE,2BAAA;ACCN;ADEI;EACE,WAAA;EACA,WAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;ACAN;ADEM;EACE,YAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;EACA,4BAAA;ACAR;ADII;EACE,WAAA;EACA,WAAA;EACA,aAAA;ACFN;ADIM;EACE,gBAAA;EACA,WAAA;EAEA,mBAAA;EACA,gBAAA;ACHR;ADMM;EACE,gBAAA;EACA,mBAAA;ACJR","file":"style.css"} -------------------------------------------------------------------------------- /app/css/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Open Sans", sans-serif; 6 | } 7 | 8 | a { 9 | font-size: 16px; 10 | text-decoration: none; 11 | color: white; 12 | cursor: pointer; 13 | } 14 | 15 | .btn { 16 | padding: 10px 20px; 17 | font-size: 16px; 18 | font-weight: 400; 19 | border-radius: 5px; 20 | background-color: aqua; 21 | border: 1px solid transparent; 22 | text-transform: capitalize; 23 | } 24 | .container { 25 | min-height: 100vh; 26 | width: 100%; 27 | margin: auto; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | overflow: hidden; 32 | 33 | .card { 34 | height: 500px; 35 | width: 300px; 36 | display: flex; 37 | flex-direction: column; 38 | justify-content: center; 39 | align-items: center; 40 | box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.1); 41 | border-radius: 6px; 42 | // position: relative; 43 | cursor: pointer; 44 | transition: all 0.3s ease; 45 | 46 | &:hover { 47 | transform: translateY(20px); 48 | } 49 | 50 | #image { 51 | height: 50%; 52 | width: 100%; 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | 57 | img { 58 | height: 100%; 59 | width: 100%; 60 | object-fit: cover; 61 | border-radius: 6px 6px 0px 0; 62 | } 63 | } 64 | 65 | .text { 66 | height: 50%; 67 | width: 100%; 68 | padding: 10px; 69 | 70 | h3 { 71 | font-size: 1.5em; 72 | color: aqua; 73 | // text-align: center; 74 | margin-bottom: 20px; 75 | margin-top: 10px; 76 | } 77 | 78 | p { 79 | font-size: 1.1em; 80 | margin-bottom: 20px; 81 | } 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /app/img/at1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olingomaxwell1999/javascript/364e1a6844c56d8dc0013b35a9937a1dc68e7fa9/app/img/at1.jpg -------------------------------------------------------------------------------- /app/js/dommanipulation.js: -------------------------------------------------------------------------------- 1 | //What is Dom? 2 | //The Dom Tree 3 | //Selecting elements from the html 4 | //getElementsById() 5 | //getElementsByClassName() 6 | //document.querySelector() 7 | //document.querySelectorAll() 8 | //document.getElementByTagName() 9 | 10 | 11 | //Creating Elements 12 | //document.createElement() 13 | 14 | //Styling elements 15 | //document.style() 16 | 17 | //Selecting the body tag 18 | 19 | const body = document.querySelector('body') 20 | 21 | console.log(body); 22 | 23 | //Selecting the Container 24 | 25 | const container = document.getElementsByClassName('container') 26 | 27 | console.log(container); 28 | 29 | //Selecting the Image container 30 | const imageContainer = document.getElementById('image') 31 | 32 | console.log(imageContainer); 33 | 34 | //selecting the image tag 35 | const img = document.querySelector('img') 36 | 37 | img.src = 'https://cdn.givemesport.com/wp-content/uploads/2022/07/sasha-banks-premiere-apparition-publique.jpg?width=1200&aspect_ratio=16:9' 38 | 39 | // img["src"] = 'https://cdn.givemesport.com/wp-content/uploads/2022/07/sasha-banks-premiere-apparition-publique.jpg?width=1200&aspect_ratio=16:9' 40 | 41 | console.log(img); 42 | 43 | //Selecting the text container 44 | 45 | const textContainer = document.querySelector('.text') 46 | 47 | textContainer.innerHTML = '

Sasha Banks

' 48 | 49 | console.log(textContainer); 50 | 51 | //Selecting the h3 52 | // const heading = document.querySelector('h3') 53 | 54 | // heading.textContent('Sasha Banks') 55 | 56 | console.log(heading); 57 | 58 | //Selecting the paragraph 59 | const paragraph = document.querySelector('p') 60 | 61 | console.log(paragraph); 62 | 63 | //Selecting the button 64 | const button = document.querySelector('button') 65 | 66 | console.log(button); 67 | 68 | //selecting all the Divs 69 | const divs = document.querySelectorAll('div') 70 | 71 | console.log(divs); 72 | 73 | let a = 6 74 | let b = 4 75 | let x = (a > 8) ? a : b 76 | 77 | console.log(x); -------------------------------------------------------------------------------- /app/js/fetchdata.js: -------------------------------------------------------------------------------- 1 | // alert('Tuko Site!!!!') 2 | 3 | 4 | const form = document.querySelector('form') 5 | 6 | console.log(form); 7 | 8 | form.addEventListener('submit', (e) => { 9 | e.preventDefault() 10 | 11 | 12 | 13 | const input = document.querySelector('input').value 14 | 15 | console.log(input); 16 | 17 | const userName = input.split(' ').join('') 18 | 19 | // axios.get() 20 | 21 | console.log(userName); 22 | 23 | form.reset() 24 | 25 | 26 | const options = { 27 | method: 'GET', 28 | headers: { 29 | 'X-RapidAPI-Key': '438cc17e36msh78447bf90d85a2ap14a1a1jsnab9c4e0738b5', 30 | 'X-RapidAPI-Host': 'edamam-recipe-search.p.rapidapi.com' 31 | } 32 | }; 33 | 34 | fetch('https://edamam-recipe-search.p.rapidapi.com/search?q=' + userName, options) 35 | .then(response => response.json()) 36 | .then(response => console.log(response)) 37 | .catch(err => console.error(err)); 38 | 39 | // fetch('https://api.github.com/users/' + userName).then((response) => { 40 | // return response.json() 41 | // }).then((user) => { 42 | // const img = document.querySelector('img') 43 | 44 | // img.src = `${user.avatar_url}` 45 | 46 | // const githubName = document.createElement('h1') 47 | 48 | // githubName.innerText = `${user.name}` 49 | 50 | // const displayArea = document.querySelector('.displayArea') 51 | 52 | // displayArea.appendChild(githubName) 53 | // }) 54 | } 55 | ) -------------------------------------------------------------------------------- /app/js/main.js: -------------------------------------------------------------------------------- 1 | // selecting the element 2 | const root = document.querySelector('.root') 3 | const h1 = document.querySelector('h1') 4 | 5 | const heading = document.createElement('h1') 6 | 7 | const subheading = document.createElement('h2') 8 | 9 | subheading.innerText = 'Arrays and Array Methods' 10 | 11 | heading.innerText = 'Javascript Training' 12 | 13 | root.appendChild(subheading) 14 | 15 | h1.appendChild(heading) 16 | 17 | //Map method 18 | 19 | let devClass = ['jahfar', 'bill', 'Robert', 'Brian', 'Ismael', 'Lenox', 'Doreen', 'Johner', 'Yasir', 'Fauzia', 'Shamrock'] 20 | 21 | const dev = devClass.map(showDev) 22 | 23 | function showDev(dev) { 24 | return dev 25 | } 26 | 27 | let nums = [1, 2, 3, 4, 5] 28 | 29 | // const multiply = nums.map((num, i, arr) => { 30 | // return num *3 + i 31 | // }) 32 | 33 | // console.log(multiply) 34 | 35 | console.log(showDev) 36 | //Filter 37 | let num2 = [1, 2, 3, 4, 5, 6, 7, 8] 38 | 39 | const lessThanFive = num2.filter((num) => { 40 | return num > 5 41 | }) 42 | 43 | console.log(lessThanFive); 44 | 45 | //Reduce method 46 | 47 | let num3 = [1, 2, 3, 4, 5, 6, 7, 8] 48 | 49 | // const strat = 0 50 | 51 | const reducedArray = num3.reduce((curr, prev, i, arr) => { 52 | return prev +curr 53 | }) 54 | 55 | console.log(reducedArray); 56 | 57 | //Objects 58 | 59 | let property = 'speed' 60 | let speed = '330km/hr' 61 | 62 | let car = { 63 | color: 'red', 64 | model: 'BMW', 65 | wheels: 'four wheel', 66 | seats: '5', 67 | [property]: speed, 68 | 69 | 'engine power': '4000cc' 70 | 71 | //4000cc 72 | } 73 | 74 | //Destructuring in es6 75 | 76 | let { color, model, wheels, seats, } = car 77 | 78 | delete car.seats 79 | 80 | // console.log(engine power); 81 | 82 | //Destructuring in es5 83 | 84 | const power = car["engine power"] 85 | 86 | console.log(power); 87 | 88 | // const color = car.model 89 | 90 | console.log(car); 91 | 92 | //red 93 | //BMW 94 | //Four wheel 95 | 96 | const func = (function (a) { 97 | delete a 98 | return a 99 | }, (5)) 100 | 101 | console.log(func); 102 | 103 | 104 | //Loops 105 | //for loop 106 | //do while loop 107 | //for of loop 108 | //for in loop 109 | //while loop 110 | //for next 111 | 112 | //For loop 113 | // let x 114 | 115 | // for (x = 0; x <= 10; x++) { 116 | // console.log(x); 117 | // } 118 | 119 | //While loop 120 | 121 | // let y = 1 122 | 123 | // while (y <= 10) { 124 | // console.log(y); 125 | // y++ 126 | // } 127 | 128 | //Do While Loop 129 | 130 | // let z = 0 131 | 132 | // do { 133 | // console.log(z); 134 | // z++ 135 | // } while(z <= 10) 136 | 137 | let cars = ['Nissan', 'BMW', 'Subaru', 'Audi', 'Jeep'] 138 | 139 | let planes = ['helicopter', 'jet', 'aeroplane', 'drone'] 140 | 141 | let nissan = cars[0] 142 | 143 | const clone = [...cars] 144 | 145 | const combined = [cars, ...planes] 146 | 147 | console.log(clone); 148 | 149 | console.log(cars); 150 | 151 | console.log(combined); 152 | 153 | // console.log(nissan); 154 | 155 | // for (car of cars) { 156 | // console.log(car); 157 | // } 158 | 159 | 160 | //Classes 161 | 162 | class Person { 163 | constructor(name, age, ethnicity, gender) { 164 | this.name = name 165 | this.age = age 166 | this.ethnicity = ethnicity 167 | this.gender = gender 168 | } 169 | 170 | walk() { 171 | console.log('We are Walking towards Tesla'); 172 | } 173 | } 174 | 175 | const Olingo = new Person('Olingo Maxwell', 24, 'african', 'male') 176 | 177 | const Yasir = new Person("Yasir Ahmed", 50, 'african', 'hermaphrodite') 178 | 179 | console.log(Olingo); 180 | console.log(Yasir); 181 | 182 | // import { } from '' 183 | // import Button from 'bootstrap' 184 | 185 | // let x = 1 186 | 187 | // const show = () => { 188 | // return x 189 | // } 190 | 191 | // show() 192 | 193 | 194 | // { 195 | // var a = 'block scope' 196 | // let b = 'block scope' 197 | // const c = 'block scope' 198 | // } 199 | 200 | // function scope() { 201 | // var a = 'functional scope' 202 | // var b = 'functional scope' 203 | // var c = 'functional scope' 204 | // } 205 | 206 | // const a = 10 207 | 208 | // const trial = function () { 209 | // const a = 10 210 | // console.log(a); 211 | // } 212 | 213 | // console.log(a); 214 | 215 | // { 216 | // const a = 10 217 | // console.log(a); 218 | // } 219 | 220 | //Interview Questions 221 | 222 | // let students = [ 223 | // { 224 | // name: 'Fauzia Omala', 225 | // admission: 1, 226 | // marks:70 227 | // }, 228 | // { 229 | // name: 'Allen Shamrock', 230 | // admission: 2, 231 | // marks:65 232 | // }, 233 | // { 234 | // name: 'Bill Odongo', 235 | // admission: 3, 236 | // marks:62 237 | // }, 238 | // { 239 | // name: 'Jahfar ', 240 | // admission: 4, 241 | // marks:59 242 | // }, 243 | // { 244 | // name: 'Ismael ', 245 | // admission: 5, 246 | // marks:75 247 | // }, 248 | // { 249 | // name: 'Brian Okoth', 250 | // admission: 6, 251 | // marks:50 252 | // }, 253 | // { 254 | // name: 'Yasir Ahmed', 255 | // admission: 7, 256 | // marks:77 257 | // }, 258 | // { 259 | // name: 'Lenox Okoth', 260 | // admission: 8, 261 | // marks:55 262 | // }, 263 | // { 264 | // name: 'Johner ', 265 | // admission: 9, 266 | // marks:72 267 | // }, 268 | // { 269 | // name: 'Robert Okello', 270 | // admission: 10, 271 | // marks:79 272 | // }, 273 | // { 274 | // name: 'Doreen Nafula ', 275 | // admission: 11, 276 | // marks:80 277 | // }, 278 | // ] 279 | 280 | // //Return the name of the students in capital letters 281 | 282 | // // let names = [] 283 | 284 | // // for (i = 0; i < students.length; i++) { 285 | // // names.push(students[i].name.toUpperCase()) 286 | // // } 287 | 288 | // let names = students.map((stu) => { 289 | // return stu.name.toUpperCase() 290 | // }) 291 | 292 | // console.log(names); 293 | 294 | // //return students who scored more than 60 marks 295 | 296 | // const details = students.filter((student) => { 297 | // return student.marks < 60 298 | // }) 299 | 300 | // console.log(details); 301 | 302 | // //Return the name of the students who scored more than 60 marks and their admission number is more than 5 303 | 304 | // const detail = students.filter((student) => { 305 | // return student.marks < 60 && student.admission > 5 306 | // }) 307 | 308 | // console.log(detail); 309 | 310 | // //Return the sum of the marks of the students 311 | 312 | // const sum = students.reduce((acc, curr) => { 313 | // return acc + curr.marks 314 | // }, 0) 315 | 316 | // console.log(sum) 317 | 318 | // //Return names of students who scored marks more than 60 319 | 320 | // const twomethods = students.filter((stu) => { 321 | // return stu.marks > 60 322 | // }).map((stu) => { 323 | // return stu.name 324 | // }) 325 | 326 | // console.log(twomethods); 327 | 328 | let students = [ 329 | { 330 | name: 'Jahfar Ahmed', 331 | admission: 1, 332 | marks: 50 333 | }, 334 | { 335 | name: 'Bill Odongo', 336 | admission: 2, 337 | marks: 55 338 | }, 339 | { 340 | name: 'Fauzia Omala', 341 | admission: 3, 342 | marks: 59 343 | }, 344 | { 345 | name: 'Allen Shamrock', 346 | admission: 4, 347 | marks: 65 348 | }, 349 | { 350 | name: 'Brian Okoth', 351 | admission: 5, 352 | marks: 70 353 | }, 354 | { 355 | name: 'Ismael Hussein', 356 | admission: 6, 357 | marks: 75 358 | }, 359 | { 360 | name: 'Lenox Okoth', 361 | admission: 7, 362 | marks: 60 363 | }, 364 | { 365 | name: 'Robert Okello', 366 | admission: 8, 367 | marks: 76 368 | }, 369 | { 370 | name: 'Doreen Nafula', 371 | admission: 9, 372 | marks: 77 373 | }, 374 | { 375 | name: 'Johner Maina', 376 | admission: 10, 377 | marks: 74 378 | }, 379 | { 380 | name: 'Yasir Ahmed', 381 | admission: 11, 382 | marks: 78 383 | } 384 | ] 385 | 386 | let names = students.map((student) => { 387 | return student.name.toLocaleUpperCase() 388 | }) 389 | 390 | console.log(names); 391 | 392 | let aboveSixty = students.filter((student) => { 393 | return student.marks > 60 394 | }).map((student) => { 395 | return student.name 396 | }) 397 | 398 | console.log(aboveSixty); 399 | 400 | let sum = students.reduce((acc, curr) => { 401 | return acc + curr.marks 402 | }, 0) 403 | 404 | console.log(sum); 405 | 406 | 407 | //students above 60% and admission numbers 408 | 409 | let studetsAvoveSixty = students.filter((student) => { 410 | return student.marks > 60 411 | }).map((student) => { 412 | return student.name + " " + student.admission 413 | }) 414 | 415 | console.log(studetsAvoveSixty); -------------------------------------------------------------------------------- /app/js/morejs.js: -------------------------------------------------------------------------------- 1 | // function add(a, b) { 2 | // console.log(a + b); 3 | // } 4 | 5 | // add(5, 10) 6 | 7 | // const add = a => console.log(a + 5); 8 | 9 | 10 | // add(5) 11 | 12 | //Spread Operator 13 | 14 | //clone array 15 | 16 | let devClassOne = ['jahfar', 'bill', 'robert', 'Allen', 'ismael', 'doreen'] 17 | 18 | console.log(devClassOne); 19 | 20 | let devClassClone = [...devClassOne] 21 | 22 | console.log(devClassClone); 23 | 24 | //Combining Arrays 25 | 26 | let devClassTwo = ['brian', 'senior engineer Lenox', 'joner', 'yasir', 'fauzia'] 27 | 28 | console.log(devClassTwo); 29 | 30 | let devClassi = [...devClassOne, ...devClassTwo] 31 | 32 | console.log(devClassi); 33 | 34 | //Classes 35 | 36 | let developers = [] 37 | 38 | class Person{ 39 | constructor(name, age, height, beard, gender) { 40 | this.name = name 41 | this.age = age 42 | this.height = height 43 | this.beard = beard 44 | this.gender = gender 45 | } 46 | 47 | walk() { 48 | // const area = document.querySelector('.trial') 49 | 50 | // area.innerText = 'We are learning js' 51 | 52 | console.log("the function is working"); 53 | } 54 | } 55 | 56 | const ismael = new Person('Ismael', 60, 4.5, false, 'gay') 57 | 58 | const fauzia = new Person('Fauzia', 61, 5, false, 'lesbian') 59 | 60 | const bill = new Person('Bill', 10, 2.3, true, 'haemaphrodite') 61 | 62 | console.log(ismael.age); 63 | console.log(ismael); 64 | console.log(fauzia); 65 | console.log(bill); 66 | 67 | developers.push(ismael) 68 | developers.push(fauzia) 69 | developers.push(bill) 70 | 71 | console.log(developers); 72 | 73 | //Inheritance in class 74 | 75 | // class Teacher extends Person { 76 | 77 | // constructor(name, age, gender, degree, experience, status) { 78 | // super(name) 79 | // super(age) 80 | // super(gender) 81 | 82 | // this.degree = degree 83 | // this.experience = experience 84 | // this.status = status 85 | // } 86 | 87 | // teach() { 88 | // console.log('we are Learning!!!'); 89 | 90 | // } 91 | // } 92 | 93 | // let martins = new Teacher('martin', 40, 'them', 'Bs Comp Science', "20 years") 94 | 95 | // console.log(martins); 96 | 97 | // console.log('20'+20); 98 | 99 | 100 | const fetchNews = async () => { 101 | const respo = await fetch('https://newsapi.org/v2/everything?q=tesla&from=2022-09-19&sortBy=publishedAt&apiKey=ad634df909ad48c3be0b287a41d6be27') 102 | 103 | const data = await respo.json().then((article) => { 104 | console.log(article); 105 | }) 106 | 107 | // console.log(data) 108 | } 109 | 110 | fetchNews() -------------------------------------------------------------------------------- /app/js/questions.js: -------------------------------------------------------------------------------- 1 | console.log('Hello world'); 2 | 3 | //why do we get 1 after running this code 4 | // let x = 8 5 | // x-- 6 | 7 | // console.log(x); 8 | 9 | // let y = 2 10 | 11 | // y++ 12 | 13 | // console.log(y); 14 | 15 | // console.log(x % y); 16 | 17 | //filter method 18 | // let sampleNumber = [2, 3, 4, 5, 6, 7, 8] 19 | 20 | // let moreThanFour = sampleNumber.filter((samp) => { 21 | // return samp >= 4 22 | // }) 23 | 24 | // console.log(moreThanFour); 25 | 26 | 27 | //Scope 28 | //Global Scope 29 | // var globalVar = 7 30 | //Block scope 31 | // { 32 | // let blockVar = 7 33 | 34 | // console.log(blockVar); 35 | // } 36 | 37 | // console.log(blockVar); 38 | 39 | //functional 40 | 41 | // let functionalScope = () => { 42 | // let numss = 9 43 | 44 | // console.log(numss); 45 | // } 46 | 47 | // console.log(numss); 48 | 49 | // functionalScope() 50 | 51 | //loops 52 | //for loop 53 | // let gender = ['m', 'f', 'f', 'f', 'm', 'f', 'f', 'm', 'm', 'm', 'f'] 54 | // for (let x = 0; x <= 10; x++) { 55 | 56 | // if (x == 8) { 57 | 58 | // continue 59 | // console.log(x + '' + "x is less than 4") 60 | // } 61 | // else if (x < 6) { 62 | // console.log(x + '' + "x is less than 6") 63 | // continue 64 | // } 65 | // else { 66 | // console.log(x) 67 | // break 68 | // } 69 | // } 70 | //while loop 71 | 72 | // let xy = 0; 73 | 74 | // while (xy <= 10) { 75 | // console.log(xy); 76 | 77 | // xy++ 78 | // } 79 | //do while 80 | 81 | // let xy = 0; 82 | 83 | // do { 84 | // console.log(xy); 85 | 86 | // xy++ 87 | // } while(xy <= 10) 88 | //for in 89 | 90 | // let house = { 91 | // roof: "Iron Sheets", 92 | // floor: "tiles", 93 | // type: "bungalow", 94 | // ceiling: "gypsum", 95 | // rooms: 5, 96 | // pool: true, 97 | // } 98 | 99 | // console.log(house); 100 | 101 | // for (let property in house) { 102 | // if (typeof property[house] == 'number') { 103 | // console.log(house[property]) 104 | // } 105 | // } 106 | 107 | // let x = 0 108 | 109 | // switch(x > 11) { 110 | // case x < 4: 111 | // console.log(x + " " + 'x is less than 4'); 112 | // break; 113 | // case x > 12: 114 | // console.log(x + " " + 'x is less than 6'); 115 | // break; 116 | // default: 117 | // console.log(x); 118 | // } -------------------------------------------------------------------------------- /app/js/recap.js: -------------------------------------------------------------------------------- 1 | //Data types 2 | 3 | //undefined 4 | //anything that has not been defined 5 | 6 | //Boolean 7 | //True or False 8 | 9 | //String 10 | //Anything inside quotation marks 11 | const string = 'class' 12 | 13 | //Number 14 | //A value(Integer/ =Float) 15 | const num = 20 16 | 17 | //Null 18 | //values defined but haven't been assigned 19 | 20 | //Symbol 21 | 22 | //Object 23 | //collection of key value pairs 24 | const person = { 25 | name: 'Olingo Maxwell', 26 | age: 24, 27 | married: true, 28 | occupation: 'Web Developer' 29 | } 30 | 31 | //arrays 32 | //collection of other datatypes 33 | 34 | const devClass = ['jahfar ahmed', 'bill odongo', 'fauzia omala', 'allen shamrock', 'brian okoth', 'Ismael Hussein', 'Lenox Okoth', 'Doreen Nafula', 'Robert Okello', 'jpnah Maina', 'Yasir Ahmed'] 35 | 36 | //String 37 | const stringOne = 'We are learning JavaScript' 38 | 39 | //String Methods 40 | //.includes() - Checks for the character passed if present in the string. Returns True or false 41 | 42 | const includeI = stringOne.includes('z') 43 | 44 | console.log(includeI); 45 | 46 | //.toUpperCase() - Converts the string to Uppercase 47 | //.toLowerCase() - Converts the string to Lowercase 48 | 49 | const upper = stringOne.toUpperCase() 50 | const lower = stringOne.toLowerCase() 51 | 52 | console.log(upper); 53 | console.log(lower); 54 | console.log(stringOne); 55 | 56 | //.length - Returns the length of the string 57 | 58 | const len = stringOne.length 59 | 60 | console.log(len); 61 | 62 | //.charAt[] - Returns the character at a specific index 63 | 64 | const charAtOne = stringOne.charAt([1]) 65 | 66 | console.log(charAtOne); 67 | 68 | //.concat() - Joins two or more Strings 69 | 70 | const sentence = stringOne.concat(" and we are going to Understand") 71 | 72 | console.log(sentence) 73 | 74 | //.trim() - removes white spaces at the beginning of a string 75 | 76 | let trial = ' Lesson Done' 77 | 78 | let trimmed = trial.trim() 79 | 80 | console.log(trial); 81 | console.log(trimmed); 82 | 83 | //.slice() - extracts a part of a string and returns the extracted part in a new string. Has a starting point and an ending point. If a parameter is negative, the position is counted from the end of the string. 84 | 85 | let sliceOne = 'Learning more about Strings' 86 | 87 | let slicedOne = sliceOne.slice(2, 13) 88 | 89 | console.log(slicedOne); 90 | 91 | //.substring() - similar to slice but The difference is that start and end values less than 0 are treated as 0 92 | 93 | let part = sliceOne.substring(2, 13) 94 | 95 | console.log(part); 96 | 97 | //.substr() - similar to the slice method but the second parameter specifies the length of the extracted part If the first parameter is negative, the position counts from the end of the string 98 | 99 | let partB = sliceOne.substr(7, 6); 100 | 101 | console.log(partB); 102 | 103 | //.replace() - replaces the string with a new string. This method is case sensitive 104 | 105 | let newString = sliceOne.replace('I wanna work at Tesla') 106 | 107 | console.log(newString); 108 | 109 | //For more on string methods please visit https://www.w3schools.com/js/js_string_methods.asp or https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String 110 | 111 | //Numbers when working with numbers, undefined turns to NAN(Not a Number), null Turns to a 0, true turns to a 1 and false turns to a 0 112 | 113 | //initializing variables with numbers 114 | 115 | //Integer 116 | let nums = 200 117 | 118 | //Floats 119 | let decimal = 200.45 120 | 121 | //Performing mathematical operations with numbers 122 | 123 | //Addition 124 | let addition = 3 + 4 125 | 126 | console.log(addition); 127 | 128 | //Subtraction 129 | let subtraction = 3 - 4 130 | 131 | console.log(subtraction); 132 | 133 | //Division 134 | let division = 3 / 4 135 | 136 | console.log(division); 137 | 138 | //Multiplication 139 | let multiply = 3 * 4 140 | 141 | console.log(multiply); 142 | 143 | //Modulus 144 | let Modulus = 9 % 4 145 | 146 | console.log(Modulus); 147 | 148 | //Look at more on Numbers from the following links https://www.w3schools.com/js/js_numbers.asp and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number 149 | 150 | //Arrays 151 | //An array is a special variable, which can hold more than one value 152 | //JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.) 153 | 154 | //How to create an array 155 | let newArr = ['maxwell'] 156 | 157 | console.log(newArr); 158 | 159 | //ARRAY METHODS 160 | //.push() -Adding elements to the array at the end 161 | 162 | newArr.push('olingo') 163 | 164 | console.log(newArr); 165 | 166 | //.pop() -Removing elements at the end of an array 167 | 168 | newArr.pop('olingo') 169 | 170 | console.log(newArr); 171 | 172 | //.toString() - Converts an array to a string 173 | 174 | let stringi = newArr.toString() 175 | 176 | console.log(stringi); 177 | 178 | //.unshift() -Adding elements to the array at the start 179 | 180 | newArr.unshift('olingo') 181 | 182 | console.log(newArr); 183 | 184 | //.shift() -remove elements to the array at the start 185 | 186 | newArr.shift('olingo') 187 | 188 | console.log(newArr); 189 | 190 | //.concat() - used to join two or more arrays 191 | let arr1 = ['maxwell', 'sailas', 'gathu', 'john'] 192 | 193 | let arr2 = ['alex', 'natasha', 'nyamwange'] 194 | 195 | let arr3 = ['hope', 'magdalene', 'isika'] 196 | 197 | let combined = newArr.concat(arr1,arr2,arr3) 198 | 199 | console.log(combined); 200 | 201 | //.sort() - Arrange an array in an ascending order 202 | 203 | let sorted = combined.sort() 204 | 205 | console.log(sorted); 206 | 207 | //.reverse() - Arrange an array in an opposite order 208 | 209 | let reversed = combined.reverse() 210 | 211 | console.log(reversed); 212 | 213 | //.copyWithin() - Copies array elements within the array, to and from specified positions. This method overwrites the existing values. 214 | 215 | const fruits = ["Banana", "Orange", "Apple", "Mango"]; 216 | fruits.copyWithin(2, 0); //Copy the first two array elements to the last two array elements 217 | 218 | console.log(fruits); 219 | 220 | //.every() - Checks if every element in an array pass a test 221 | 222 | const ages = [32, 33, 16, 40]; 223 | 224 | ages.every((age) => { 225 | return age > 18; 226 | }) 227 | 228 | console.log(ages); 229 | 230 | //.map() - Creates a new array with the result of calling a function for each array element 231 | 232 | //get the squareroot of the values in the array before 233 | 234 | const numbers = [4, 9, 16, 25] 235 | 236 | const neArr = numbers.map(Math.sqrt) 237 | 238 | console.log(neArr); 239 | 240 | //or multiply the above array with two 241 | const product = numbers.map((num) => { 242 | return num * 2 243 | }) 244 | 245 | console.log(product); 246 | 247 | //.filter() - Creates a new array with every element in an array that pass a test 248 | 249 | //Return an array of all values in ages[] that are 18 or over 250 | const result = ages.filter((age) => { 251 | return age >= 18 252 | }); 253 | 254 | console.log(result); 255 | 256 | //.reduce() - Reduce the values of an array to a single value (going left-to-right) 257 | const reduced = ages.reduce((acc, curr) => { 258 | return acc + curr 259 | }, 0) 260 | 261 | console.log(reduced); 262 | 263 | //LOOPS 264 | //For loop 265 | //do while loop 266 | //while loop 267 | //for of loop 268 | 269 | //Objects 270 | 271 | let devClass1 = { 272 | name: 'dev class', 273 | total: 11, 274 | present: true 275 | } 276 | 277 | for (stupid in devClass1) { 278 | // console.log(key); 279 | console.log(devClass1[stupid]); 280 | // console.log(Object.values(devClass1)); 281 | } 282 | 283 | console.log(devClass1); 284 | console.log(Object.values(devClass1)) -------------------------------------------------------------------------------- /dommanipulation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dom Manipulation 8 | 9 | 10 | 11 |
12 |
13 |
14 | atlassian one 15 |
16 |
17 |

18 |

19 | 20 | 23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /fetchdata.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Github api 8 | 9 | 10 | 44 | 45 | 46 | 47 |
48 |

Github Users

49 | 50 |
51 | 52 | 53 | 54 |
55 | 56 |
57 | github user 58 |
59 |
60 | 61 | -------------------------------------------------------------------------------- /indes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Javascript Training 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 |
18 |

19 | 26 |
27 | 28 | 36 | 37 | -------------------------------------------------------------------------------- /more.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | More Js 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | --------------------------------------------------------------------------------