SocialHackersClass10 · student0b4dc0d3 · Feb 10, 2020 · Feb 20, 2020 · Mar 26, 2020
diff --git a/Week1/homework/js-exercises/ex01-book-list/index.html b/Week1/homework/js-exercises/ex01-book-list/index.html
@@ -0,0 +1,15 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title id="id_page_title"></title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="./main.css" />
+    </head>
+    <body>
+        <div id="id_page_header" class="cls_text_align_right cls_background_color_gold"></div>
+        <script src="./main.js"></script>
+    </body>
+</html>
+
diff --git a/Week1/homework/js-exercises/ex01-book-list/main.css b/Week1/homework/js-exercises/ex01-book-list/main.css
@@ -0,0 +1,44 @@
+
+body {
+        margin: 0px;
+        padding: 0px;
+        font-size: 150%;
+        font-family: sans-serif;
+    }
+
+.cls_text_align_left {
+        text-align: left;
+    }
+
+.cls_text_align_right {
+        text-align: right;
+    }
+
+.cls_text_align_center {
+        text-align: center;
+    }
+
+.cls_background_color_gold {
+        background-color: gold;
+    }
+
+div {
+        padding:12px 16px;
+        margin: 20px 20px;
+    }
+
+th, td {
+        padding: 7px 10px 0px 9px;
+        border-radius: 4px;
+    }
+
+table tr:nth-child(odd) td {
+        background-color: gold;
+    }
+
+table tr:nth-child(even) td {
+        background-color: silver;
+    }
+
+;
+
diff --git a/Week1/homework/js-exercises/ex01-book-list/main.js b/Week1/homework/js-exercises/ex01-book-list/main.js
@@ -0,0 +1,84 @@
+
+{
+    'use strict';
+
+    document.getElementById("id_page_title").innerHTML=
+        document.getElementById("id_page_header").innerHTML=
+            '(Homework: Javascript 2 - week 1) - (Exercise 01: The book list)';
+    document.body.style.backgroundColor='#25003e';
+
+    myBookList=[
+        {   book_title  : 'Nineteen Eighty-Four',
+            book_link   : 'http://en.wikipedia.org/wiki/Nineteen_Eighty-Four',
+            book_author : 'George Orwell',
+            author_link : 'http://en.wikipedia.org/wiki/George_Orwell',
+            cover_image : 'http://upload.wikimedia.org/wikipedia/en/c/c3/1984first.jpg',
+            read_pending: false
+        },
+        {   book_title  : 'Das Parfum',
+            book_link   : 'http://en.wikipedia.org/wiki/Perfume_(novel)',
+            book_author : 'Patrick Süskind',
+            author_link : 'http://en.wikipedia.org/wiki/Patrick_Süskind',
+            cover_image : 'http://upload.wikimedia.org/wikipedia/en/f/f5/PerfumeSuskind.jpg',
+            read_pending: true
+        },
+        {   book_title  : 'The Name of the Rose',
+            book_link   : 'http://en.wikipedia.org/wiki/The_Name_of_the_Rose',
+            book_author : 'Umberto Eco',
+            author_link : 'http://en.wikipedia.org/wiki/Umberto_Eco',
+            cover_image : 'http://upload.wikimedia.org/wikipedia/en/e/eb/The_Name_of_the_Rose.jpg',
+            read_pending: false
+        }
+    ];
+
+    function addChild(prntRef,chldTag,chldClss,chldText){
+        let newLMNT=document.createElement(chldTag);
+        if (chldClss) {newLMNT.className=chldClss}
+        if (chldText) {newLMNT.innerHTML=chldText}
+        prntRef.appendChild(newLMNT);
+        return newLMNT
+    };
+
+    let divRef=addChild(document.body,'DIV','','');
+    divRef.style.backgroundColor='orange';
+    let tableRef=addChild(divRef,'TABLE','','');
+    tableRef.width='100%';
+    let rowRef=addChild(tableRef,'TR','','');
+    addChild(rowRef,'TH','cls_text_align_left','Book Title');
+    addChild(rowRef,'TH','cls_text_align_center','Author');
+    addChild(rowRef,'TH','cls_text_align_center','Book Cover');
+    addChild(rowRef,'TH','cls_text_align_center','Read Pending?');
+
+    let lmntRef;
+    myBookList.forEach((bookRef)=>{
+        rowRef=addChild(tableRef,'TR','','');
+        lmntRef=addChild(rowRef,'TD','',);
+            lmntRef=addChild(lmntRef,'A','',bookRef.book_title);
+            lmntRef.title='Click for transition to related wiki page.';
+            lmntRef.target='_blank';
+            lmntRef.href=bookRef.book_link;
+        lmntRef=addChild(rowRef,'TD','cls_text_align_center','');
+            lmntRef=addChild(lmntRef,'A','',bookRef.book_author);
+            lmntRef.title='Click for transition to related wiki page.';
+            lmntRef.target='_blank';
+            lmntRef.href=bookRef.author_link;
+        lmntRef=addChild(rowRef,'TD','cls_text_align_center','');
+            lmntRef=addChild(lmntRef,'IMG','','');
+            lmntRef.setAttribute('alt','Book cover: '+bookRef.book_title);
+            lmntRef.setAttribute('title','Book cover: '+bookRef.book_title);
+            lmntRef.setAttribute('width','128');
+            lmntRef.setAttribute('src',bookRef.cover_image);
+        lmntRef=addChild(rowRef,'TD','cls_text_align_center','');
+        lmntRef.style.padding='1em';
+            lmntRef=addChild(lmntRef,'SPAN',''
+                                ,`I have ${bookRef.read_pending?"not":"already"
+                                  } read this book${bookRef.read_pending?" yet.":"."}`);
+            lmntRef.style.backgroundColor=(bookRef.read_pending?'pink':'lime');
+            lmntRef.style.padding='1em';
+            lmntRef.style.borderRadius='45%';
+    });
+
+};
+
+;
+
diff --git a/Week1/homework/js-exercises/ex02-about-me/about_me.html b/Week1/homework/js-exercises/ex02-about-me/about_me.html
@@ -0,0 +1,25 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title id="id_page_title"></title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="./main.css" />
+    </head>
+    <body>
+        <div id="id_page_header" class="cls_text_align_right"></div>
+
+        <div id="id_exercise_container">
+            <h1>About Me</h1>
+            <ul>
+                <li>Nickname: <span id="nickname"></span></li>
+                <li>Favorite food: <span id="fav_food"></span></li>
+                <li>Hometown: <span id="hometown"></span></li>
+            </ul>
+        </div>
+
+        <script src="./main.js"></script>
+    </body>
+</html>
+
diff --git a/Week1/homework/js-exercises/ex02-about-me/main.css b/Week1/homework/js-exercises/ex02-about-me/main.css
@@ -0,0 +1,31 @@
+
+body {
+        margin: 0px;
+        padding: 0px;
+        font-size: 150%;
+        font-family: sans-serif;
+    }
+
+.cls_text_align_left {
+        text-align: left;
+    }
+
+.cls_text_align_right {
+        text-align: right;
+    }
+
+.cls_text_align_center {
+        text-align: center;
+    }
+
+div {
+        padding: 12px 16px 8px 16px;
+        margin: 20px 18px;
+    }
+
+.cls_list_item {
+        color: maroon;
+    }
+
+;
+
diff --git a/Week1/homework/js-exercises/ex02-about-me/main.js b/Week1/homework/js-exercises/ex02-about-me/main.js
@@ -0,0 +1,83 @@
+
+{
+    'use strict';
+
+    let lmntRef=document.getElementById('id_page_header');
+    lmntRef.style.backgroundColor='gold';
+    document.getElementById('id_page_title').innerHTML=
+        lmntRef.innerHTML='(Homework: Javascript 2 - week 1) - (Exercise 02: About me)';
+    document.body.style.backgroundColor='#25003e';
+    const imgTagUniqueID='apicture';
+    let lastRandomIndex=-1;
+
+    function randomData(){
+        const funnyData=[
+            {   nickname : 'Professional Sleeper Pilot',
+                fav_food : 'Potato Flambe',
+                hometown : 'Cockaigne',
+                apicture : 'http://2.bp.blogspot.com/_A3GOyr0yK3Y/TNBaWhox5CI/AAAAAAAA71w/uFDigoTW004/s1600/earsbig.jpg',
+            },
+            {   nickname : 'Shadow Accounting Dancer',
+                fav_food : 'Fish ratatouille',
+                hometown : 'Shangri-La',
+                apicture : 'http://3.bp.blogspot.com/-NJEdS0XD93o/TV6BdBhquJI/AAAAAAAAfFw/il2wlrrd-vY/s400/Weird_Faces_A_Guy_Can_Make_12.jpg',
+            },
+            {   nickname : 'Electrician-Gynecologist',
+                fav_food : 'Green fried tomatoes',
+                hometown : 'El Dorado',
+                apicture : 'https://i.ytimg.com/vi/2FgJOB0DGg4/hqdefault.jpg',
+            },
+            {   nickname : 'Occupational Hazard Engineer',
+                fav_food : 'Leftover morning pizza',
+                hometown : 'Atlantis',
+                apicture : 'https://cdn.quotesgram.com/img/61/15/1620699906-a_aaa-funny-face-.jpg',
+            }
+        ];
+        let rngIdx=-1;
+        do {rngIdx=Math.floor(Math.random()*funnyData.length)} while (rngIdx==lastRandomIndex);
+        lastRandomIndex=rngIdx;
+        const valueList=Object.values(funnyData[rngIdx]);
+        const keyList=Object.keys(funnyData[0]);
+        for (let i=0; i<keyList.length; i++) {
+            const lmnt=document.getElementById(keyList[i]);
+            if (keyList[i]===imgTagUniqueID) {lmnt.setAttribute('src',valueList[i])}
+            else {lmnt.innerHTML=valueList[i]}
+        };
+    };
+
+    lmntRef=document.getElementById('id_exercise_container');
+    lmntRef.style.backgroundColor='orange';
+    lmntRef.style.fontFamily='Arial, sans-serif';
+    let imgRef=document.createElement('IMG');
+    lmntRef.appendChild(imgRef);
+    imgRef.id=imgTagUniqueID;
+    imgRef.alt='[ My picture ]';
+    imgRef.title='My picture';
+
+    lmntRef=document.createElement('DIV');
+    document.body.appendChild(lmntRef);
+    lmntRef.style.backgroundColor='gold';
+    lmntRef.style.position='absolute';
+    lmntRef.style.bottom='0';
+    lmntRef.style.right='0';
+    lmntRef.className='cls_text_align_right';
+
+    imgRef=document.createElement('SPAN');
+    imgRef.innerHTML='Would you like to know more? . . . . ';
+    lmntRef.appendChild(imgRef);
+    imgRef=document.createElement('BUTTON');
+    imgRef.innerHTML='Know More';
+    lmntRef.addEventListener("click",randomData);
+    lmntRef.appendChild(imgRef);
+
+    lmntRef=document.getElementsByTagName('li');
+    for (let i=0; i<lmntRef.length; i++) {
+        lmntRef[i].innerHTML=lmntRef[i].innerHTML.replace('Nickname:','Vocation:');
+        lmntRef[i].className='cls_list_item';
+    };
+
+    randomData();
+};
+
+;
+
diff --git a/Week1/homework/js-exercises/ex03-logo-hijack/hijackGoogleLogo.js b/Week1/homework/js-exercises/ex03-logo-hijack/hijackGoogleLogo.js
@@ -0,0 +1,11 @@
+
+function hijackGoogleLogo(){
+    'use strict';
+    const hackImg='https://www.hackyourfuture.dk/static/logo-dark.svg';
+    let trgt=document.getElementById('hplogo');
+    trgt.setAttribute('src',hackImg);
+    trgt.setAttribute('srcset',hackImg+` 1x, ${hackImg} 2x`);
+};
+
+;
+
diff --git a/Week1/homework/js-exercises/ex04-active-clock/main.css b/Week1/homework/js-exercises/ex04-active-clock/main.css
@@ -0,0 +1,27 @@
+
+body {
+        margin: 0px;
+        padding: 0px;
+        font-size: 150%;
+        font-family: sans-serif;
+    }
+
+.cls_text_align_left {
+        text-align: left;
+    }
+
+.cls_text_align_right {
+        text-align: right;
+    }
+
+.cls_text_align_center {
+        text-align: center;
+    }
+
+div {
+        padding: 12px 16px 8px 16px;
+        margin: 20px 18px;
+    }
+
+;
+
diff --git a/Week1/homework/js-exercises/ex04-active-clock/showCurrentTime.js b/Week1/homework/js-exercises/ex04-active-clock/showCurrentTime.js
@@ -0,0 +1,38 @@
+
+{
+    'use strict';
+
+    let lmntRef=document.getElementById('id_page_header');
+    lmntRef.style.backgroundColor='gold';
+    document.getElementById('id_page_title').innerHTML=
+        lmntRef.innerHTML=`(Homework: Javascript 2 - week 1) - (Exercise 04: What's the time?)`;
+    lmntRef.style.borderRadius='12px';
+    document.body.style.backgroundColor='#25003e';
+
+    let clockRef=document.createElement('H2');
+    clockRef.id='id_clock_text';
+    clockRef.className='cls_text_align_center';
+    clockRef.style.padding='1em';
+    //  `${number}%` produces an oval - `${decimanNumber}em` produces rounded-corner rectangle
+    clockRef.style.borderRadius='50%';
+    clockRef.style.backgroundColor='orange';
+    clockRef.style.position='absolute';
+    clockRef.style.top='2em';
+    clockRef.style.right='2em';
+    clockRef.innerHTML='00 : 00 : 00';
+    document.body.appendChild(clockRef);
+
+    function timer_callback(){
+        let time_stamp=new Date();
+        let tsHH=('0'+time_stamp.getHours()).substr(-2,2);
+        let tsMM=('0'+time_stamp.getMinutes()).substr(-2,2);
+        let tsSS=('0'+time_stamp.getSeconds()).substr(-2,2);
+        clockRef.innerHTML=`${tsHH} : ${tsMM} : ${tsSS}`;
+        setTimeout(timer_callback,333);
+    }
+
+    document.addEventListener('load',timer_callback());
+};
+
+;
+
diff --git a/Week1/homework/js-exercises/ex04-active-clock/time.html b/Week1/homework/js-exercises/ex04-active-clock/time.html
@@ -0,0 +1,15 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title id="id_page_title"></title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="./main.css" />
+    </head>
+    <body>
+        <div id="id_page_header" class="cls_text_align_right"></div>
+        <script src="./showCurrentTime.js"></script>
+    </body>
+</html>
+