main.js

// const generatedContent = document.getElementById('body')

function mainPageContent() {
    const renderMainPageContent =
        `
            <main id="main">
                <a href="https://github.com/Hacking-NASSA-with-HTML/javascript-notebook" target="_blank"><img width="149"
                        height="149" src="./forkme_left_red.png" style="position: fixed; top:0; left:0" alt="Fork me on GitHub">
                </a>
                <article class="article">
                    <div class="article--header">
                        <h2>How to deploy a piece of code as text on site:</h2>
                    </div>
                    <div class="article--headline">
                        <p>see results in the console also</p>
                        <p>the code is generated by JavaScript</p>
                        <p>HTML code:</p>
                    </div>
                    <div class="highlight--piece--of--code">
                        <pre>
                            <code>
                                &lt;div class="highlight--piece--of--code"&gt;
                                    &lt;pre&gt;
                                        &lt;code&gt;
                                ****************************** Your code here *******************************************************************
                                        &lt;/code&gt;
                                    &lt;/pre&gt;
                                &lt;/div&gt;
                            </code>
                        </pre>
                    </div>
                    <p>CSS code:</p>
                    <div class="highlight--piece--of--code">
                        <pre>
                            <code>
                                .highlight--piece--of--code {
                                background-color: #08090a;
                                color: #f8f8f3;
                                border-radius: 5px;
                                overflow-x: auto;
                                }
                            </code>
                        </pre>
                    </div>
                </article>
                <article class="article">
                    <div class="article--header">
                        <h2>Zhan Zhuridov's Observer. Initial variant:</h2>
                    </div>
                    <div class="article--headline">
                        <p>The second variant is in my GHgists:</p>
                        <p><a href="https://gist.github.com/Hacking-NASSA-with-HTML/60367e3fbeb7140a6983620cffc6a1f2"
                                target="_blank">https://gist.github.com/Hacking-NASSA-with-HTML/60367e3fbeb7140a6983620cffc6a1f2</a>
                        </p>
                    </div>
                    <div class="highlight--piece--of--code">
                        <pre>
                            <code>
                                class Observer{
                                    constructor(){
                                        this.listeners = [];
                                    }
                                    addListener(name, callback){
                                        let id = {};
                                        this.listeners.push({id, name, callback});
                                        return id;
                                    }
                                    addOnceListener(name, callback){
                                        let id = {};
                                        this.listeners.push({id, name, callback:()=>{
                                            callback();
                                            this.removeListener(id);
                                            }
                                        });
                                        return id;
                                    }
                                    removeListener(id){
                                        this.listeners = this.listeners.filter(it=>it.id!=id);
                                    }
                                    dispatch(name){
                                        this.listeners.filter(it=>it.name==name).forEach(it=>it.callback());
                                    }
                                }
                            </code>
                        </pre>
                    </div>
                </article>
                <div class="article--header article--headline">
                    <h2>Did the Promise finish?</h2>
                    <p class="completion">Not yet</p>
                </div>
            </main>
        `
    return renderMainPageContent
}

document.body.insertAdjacentHTML("afterend", mainPageContent())

// .map with arrow function
const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
    name => name.toUpperCase()
)
console.log(upperizedNames)

// .filter with ordinary and arrow functions
const names = ['Afghanistan', 'Aruba', 'Bahamas', 'Chile', 'Fiji', 'Gabon', 'Luxembourg', 'Nepal', 'Singapore', 'Uganda', 'Zimbabwe'];
const longNames = names.filter(function (name) {
    return name.length > 6
})
const longNamesArrow = names.filter(name => name.length > 6)
console.log(longNames)
console.log(longNamesArrow)

// example of arrow .map()
const squares = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(
    square => square * square
)
console.log(...squares) // works without ... too. Why?

// default function parameters:
function hello(name = 'Visitor', greeting = 'Welcome') {
    return `${greeting} ${name}!`
}
console.log(hello()) // Welcome Visitor!
console.log(hello('Nikky')) // Welcome Nikky!
console.log(hello('Jennifer', 'Howdy')) // Howdy Jennifer!

// one more example of default function parameters:
function houseDescriptor([houseColor = 'green', shutterColors = ['red']]) {
    return `I have a ${houseColor} house with ${shutterColors.join(' and ')} shutters`
}
console.log(houseDescriptor(['green']))
console.log(houseDescriptor(['green', ['white', 'gray', 'pink']]))

// one more example of default function parameters:
function buildHouse({ floors = 1, color = 'red', walls = 'brick' } = {}) {
    return `Your house has ${floors} floor(s) with ${color} ${walls} walls.`
}
console.log(buildHouse()) // Your house has 1 floor(s) with red brick walls.
console.log(buildHouse({})) // Your house has 1 floor(s) with red brick walls.
console.log(buildHouse({ floors: 3, color: 'yellow' })) // Your house has 3 floor(s) with yellow brick walls.


// example of es6 classes and subclasses syntax
class Vehicle {
    constructor(color = 'blue', wheels = 4, horn = 'beep beep') {
        this.color = color
        this.wheels = wheels
        this.horn = horn
    }
    honkHorn() {
        console.log(this.horn)
    }
}
class Bicycle extends Vehicle {
    constructor(color = 'blue', wheels = 4, horn = 'beep beep') {
        super(color, wheels, horn)
        this.wheels = 2
        this.horn = 'honk honk'
    }
    honkHorn() {
        console.log(this.horn)
    }
}

const myVehicle = new Vehicle()
myVehicle.honkHorn() // beep beep

const myBike = new Bicycle()
myBike.honkHorn() // honk honk


// For...of loop!!!!!!  MOST COOL for Loop  !!!!!
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
    console.log(digit);
}  // prints 0 1 2 3 4 5 6 7 8 9


// How to Create a Set:
const myFavoriteFlavors = new Set()

myFavoriteFlavors.add("chocolate chip")
myFavoriteFlavors.add("cookies and cream")
myFavoriteFlavors.add("strawberry")
myFavoriteFlavors.add("vanilla")

myFavoriteFlavors.delete("strawberry")

console.log(myFavoriteFlavors)


// How to Create a WeakSet:
const uniqueFlavors = new WeakSet()

const flavor1 = { flavor: 'chocolate' }
const flavor2 = { flavor: 'orange' }

uniqueFlavors.add(flavor1)
uniqueFlavors.add(flavor2)

console.log(uniqueFlavors)


// How to Create a Promise:
new Promise(function (resolve) {
    console.log('first')
    resolve()
    console.log('second')
}).then(function () {
    console.log('third')
})  // prints first second third


// Promise Example in HTML rendering:
let milliseconds = 3000
wait(milliseconds).then(finish)

function wait(ms) {
    return new Promise(function (resolve) {
        console.log(this)
        window.setTimeout(function () {
            resolve()
        }, ms)
    })
}

function finish() {
    let completion = document.querySelector('.completion')
    completion.innerText = "Completed after " + milliseconds
        + " ms."
}  // prints 'Completed after 3000 ms.' in HTML rendering
// instead of 'Not yet' in <p class="completion">Not yet</p>
// after 3 seconds


// Proxies syntax:
const proxyObj = new Proxy({ age: 5, height: 4 }, {
    get(targetObj, property) {
        console.log(`getting the ${property} property`);
        console.log(targetObj[property]);
    }
});

proxyObj.age; // logs 'getting the age property' & 5
proxyObj.height; // logs 'getting the height property' & 4
proxyObj.weight = 120; // set a new property on the object
proxyObj.weight; // logs 'getting the weight property' & 120


// Destructuring of the array syntax:
const things = ['red', 'basketball', 'paperclip', 'green', 'computer', 'earth', 'blue', 'dogs']
const [one, , , two, , , , three] = things
console.log(one, two, three)  // prints red green dogs


// How to use the Spread operator syntax:
const fruits = ["apples", "bananas", "pears"]
const vegetables = ["corn", "potatoes", "carrots"]

const produce = [...fruits, ...vegetables]
// prints ['apples', 'bananas', 'pears', 'corn', 'potatoes', 'carrots']
console.log(produce)


// How to use the Rest operator syntax:
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"]
const [total, subtotal, tax, ...items] = order
// prints 20.17 18.67 1.5 ['cheese', 'eggs', 'milk', 'bread']
console.log(total, subtotal, tax, items)


// How to use different special characters inside String:
console.log("Up up\n\tdown down")  // \n newline \t	tab \"	'' (double quote)
// prints: Up up
// prints:   down down       // \\	\ (backslash)


// How to write Ternary Operator syntax:
// conditional ? (if condition is true) : (if condition is false)
let isWinter = true
let bgColor = isWinter ? 'white' : 'grey'
console.log(bgColor)  // prints white

// Complex Ternary Operator syntax:
let eatsPlants = false
let eatsAnimals = true
let kind = eatsPlants
    ? (eatsAnimals ? "omnivore" : "herbivore")
    : (eatsAnimals ? "carnivore" : "undefined")
console.log(kind)  // prints carnivore


// How to write a Break Statement syntax:
let yourChoice = 2

switch (yourChoice) {
    case 1:
        console.log("You choose 1.")
        break
    case 2:
        console.log("You choose 2.")
        break
    case 3:
        console.log("You choose 3.")
        break
    default:
        console.log("something went wrong")
}   //  prints You choose 2.
// prints something went wrong if yourChoice = 4