Week 2 - JS & Node JS

src/week2/day1/bonus.html

@@ -0,0 +1,61 @@
+<!-- Now it's your turn to make some changes
+ - Refactor the previous code to use getters and settters
+ - Add at least 2 more properties
+ - Add at least 2 more methods
+ - Create a new class that inherits from Animal
+ - Override one of the methods you previously defined
+
+ ****************************************************
+ **** BONUS POINTS ****
+ **** MAKE A 2nd VERSION USING ES6 CLASSES ****
+ **** ****
+ ****************************************************
+-->
+
+<script>
+ class Animal {
+ constructor(type, name, age) {
+ this.type = type;
+ this.name = name;
+ this.age = age;
+ }
+
+ get getType() {
+ return this.type;
+ }
+
+ set setType(newType) {
+ this.type = newType;
+ }
+
+ talk() {
+ console.log(`Hi, I'm an Animal, but also a ${this.type}`);
+ }
+
+ eat() {
+ console.log(`Hi! I'm ${this.name} the ${this.type}, and I'm getting fat.`);
+ }
+
+ sleep() {
+ console.log(`Don't disturb ${this.name}, it's sleeping...`);
+ }
+ }
+
+ class Giraffe extends Animal {
+ constructor(name, age) {
+ super("Giraffe", name, age);
+ }
+
+ talk() {
+ console.log("Uhm... I think giraffes don't talk :/");
+ }
+ }
+
+ let donald = new Animal("Duck", "Donald", "84");
+ donald.talk();
+ donald.eat();
+ donald.sleep();
+
+ let melman = new Giraffe("Melman", "15");
+ melman.talk();
+</script>

src/week2/day1/index.html

@@ -1,28 +1,60 @@
 <!-- Take this file and open it on a browser, then open the console
  inside developer tools -->
 <script>
- var Animal = (function(type) {
+
+ // Add at least 2 more properties
+ var Animal = (function (type, name, age) {
  this.type = type;
+ this.name = name;
+ this.age = age;
+ });
+
+ // Refactor the previous code to use getters and settters
+ Object.defineProperty(Animal.prototype, 'myName', {
+ get: function () {
+ return this.name;
+ },
+ set: function (value) {
+ this.name = value;
+ }
  });
 
- Animal.prototype.talk = function() {
+ Animal.prototype.talk = function () {
  console.log(`Hi, I'm an Animal, but also a ${this.type}`);
  };
 
+ // Add at least 2 more methods
+ Animal.prototype.eat = function () {
+ console.log(`Hi! I'm ${this.name} the ${this.type}, and I'm getting fat.`);
+ }
+
+ Animal.prototype.sleep = function () {
+ console.log(`Don't disturb ${this.name}, it's sleeping...`);
+ }
+
  let rabbit = new Animal("Rabbit");
  rabbit.talk();
-</script>
-
-<!-- Now it's your turn to make some changes
- - Refactor the previous code to use getters and settters
- - Add at least 2 more properties
- - Add at least 2 more methods
- - Create a new class that inherits from Animal
- - Override one of the methods you previously defined
-
- ****************************************************
- **** BONUS POINTS ****
- **** MAKE A 2nd VERSION USING ES6 CLASSES ****
- **** ****
- ****************************************************
--->
+
+ let rogerRabbit = new Animal("Rabbit", "Roger", "5");
+ rogerRabbit.talk();
+ rogerRabbit.eat();
+ rogerRabbit.sleep();
+
+ // Create a new class that inherits from Animal
+ function Cat(name, age) {
+ this.name = name;
+ this.age = age;
+ }
+
+ Cat.prototype = Object.create(new Animal("Cat"));
+
+ // Override one of the methods you previously defined
+ Cat.prototype.talk = function () {
+ console.log(`Meow! I'm ${this.name}, the cat!`);
+ }
+
+ let garfield = new Cat("Garfield", "4");
+ garfield.talk();
+
+
+</script>

src/week2/day2/indexErrors.html

@@ -1,22 +1,38 @@
 <!-- Take this file and open it on a browser, then open the console
  inside developer tools -->
 <script>
- (function(){
+ (function () {
  "use strict";
- var willPass = "Hi there";
- wontPass = "nope";
+ let willPass = "Hi there";
+ let wontPass = "nope";
+ let counter = 0;
 
  console.log(`willPass = ${willPass}`);
  console.log(`wontPass = ${wontPass}`);
 
  let someArr = [1, 2, 3, 4];
 
  function giveMe(inx) {
- return someArr[counter];
+ if (inx < 0 || inx >= someArr.length)
+ throw new Error('Index is out of bounds');
+ else if (typeof inx == "undefined")
+ throw new Error('Index is undefined');
+ return someArr[inx];
  }
 
- for (let counter= 0; counter <= someArr.length; counter++) {
- console.log(`Index = ${counter}, value = ${giveMe(counter)}`);
+ function isValid(arr) {
+ if (typeof (arr) == "undefined")
+ throw new Error('Array is empty or undefined');
+ if (arr.length <= 0)
+ throw new Error('Array is empty');
+ return true;
+ }
+
+
+ if (isValid(someArr)) {
+ for (let counter = 0; counter < someArr.length; counter++) {
+ console.log(`Index = ${counter}, value = ${giveMe(counter)}`);
+ }
  }
 
  console.log("The code continues");
@@ -33,4 +49,4 @@
  **** Investigate about other console methods ****
  **** and give me some kind of demo ****
  ****************************************************
--->
+-->

src/week2/day2/indexRegex.html

@@ -1,10 +1,11 @@
 <!-- Take this file and open it on a browser, then open the console
 inside developer tools -->
 <script>
- (function(){
+ (function () {
  "use strict";
  // This will always pass
- var emailRegex = new RegExp(),
+ let exp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+ var emailRegex = new RegExp(exp),
  result = prompt("Enter Your email", ""),
  valid = result.match(emailRegex);
 
@@ -15,6 +16,18 @@
  alert("Email not valid");
  console.warn(`You entered: ${result} which is not an email`);
  }
+
+ // BONUS
+ let bonusExp = /^><\({4,}°>|<°\){4,}><$/;
+ var bonusRegex = new RegExp(bonusExp),
+ bonus = prompt("Draw a fish bigger than this: ><(((°>", ""),
+ validBonus = bonus.match(bonusRegex);
+
+ if (validBonus) {
+ alert("Good job!");
+ } else {
+ alert("That's not a bigger fish.");
+ }
  })()
 </script>
 
@@ -26,4 +39,4 @@
  **** Show me something funny with a regex ****
  **** use your imagination ****
  ****************************************************
--->
+-->

src/week2/day3/indexDOM.html

@@ -1,10 +1,69 @@
 <!-- Take this file and open it on a browser, then open the console
  inside developer tools -->
-<script>
- (function(){
- "use strict";
- })()
-</script>
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Document</title>
+</head>
+
+<body>
+
+
+ <!-- Body will be added via JS -->
+
+ <script>
+ (function () {
+ "use strict";
+ var siteTitle = document.createElement("h1");
+ var siteTitleText = document.createTextNode("This is a JS added title");
+ var siteSubtitle = document.createElement("h5");
+ var siteSubtitleText = document.createTextNode("...and it works!")
+
+ //Add at least 2 DOM elements, via code, DOH
+ siteTitle.appendChild(siteTitleText);
+ document.body.appendChild(siteTitle);
+ siteSubtitle.appendChild(siteSubtitleText);
+ siteSubtitle.style.fontStyle = "italic";
+ document.body.appendChild(siteSubtitle)
+
+ // Make a button
+ var myButton = document.createElement("button");
+ myButton.appendChild(document.createTextNode("Press Me"));
+ document.body.appendChild(myButton);
+
+
+ var myList = document.createElement("ul");
+ document.body.appendChild(myList);
+ var listElement;
+
+ var quantity = prompt("How many elements do you want in the list?", "");
+ var i = parseInt(quantity);
+ if (!i) {
+ alert("That's not a number.")
+ } else {
+ if (i < 1) {
+ alert("I need a number greater than zero! :'(")
+ } else {
+ for (let index = 0; index < i; index++) {
+ listElement = document.createElement("ul");
+ listElement.appendChild(document.createTextNode(`Element ${index + 1}`));
+ myList.appendChild(listElement)
+ }
+ }
+ }
+
+
+ })()
+ </script>
+</body>
+
+</html>
+
 
 <!-- Now it's your turn to make some changes
  - Add at least 2 DOM elements, via code, DOH
@@ -15,4 +74,4 @@
  **** Keep it funny, make a list, do a drawing ****
  **** show me you can dominate the DOM ****
  ****************************************************
--->
+-->

src/week2/day4-5/expressDemo.js

@@ -1,15 +1,34 @@
-const express = ;
+const express = require("express");
+const fs = require("fs");
 const app = express();
 const port = 3000;
 
 app.get('/', (req, res) => {
  res.send('Hello There!');
-})
+});
+
+app.get('/random', (req, res) => {
+ res.send(`Random number: ${parseInt(Math.random() * 100)}`);
+});
+
+// Bonus
+
+app.get('/bonus', (req, res) => {
+ res.send("Welcome to the bonus route!");
+});
+
+app.get('/json', (req, res) => {
+
+ fs.readFile(__dirname + '/package.json', function (err, data) {
+ if (err) throw err;
+ res.send(data.toString());
+ });
+});
 
 app.listen(port, () => {
  console.log('Example server listening on port ' + port);
  console.log('Enter http://localhost:' + port + ' on your browser')
-})
+});
 
 // First things first, this won't work. It's your job to fix it
 // Just a clue, that variable called express is a module, so you need to bring it in.

src/week2/day4-5/fsDemo.js

@@ -1,14 +1,21 @@
 const fs = require('fs');
 var fileName = "test.txt",
  content = "Hey There!";
+exists = false;
 
-fs.writeFile(__dirname + "/" + fileName, content, function(err) {
- if(err) {
- return console.log(err)
+fs.stat(__dirname + "/" + fileName, (err) => {
+ if (err) {
+ fs.writeFile(__dirname + "/" + fileName, content, function (err) {
+ if (err) {
+ return console.log(err)
+ }
+ });
+ console.log("The file was saved!");
+ } else {
+ console.log("The file already exists!")
  }
+})
 
- console.log("The file was saved!");
-});
 
 // This is a node app, this code saves a file on the current path with
 // the content on the variable with that name.