Skip to content

Commiting JS-2 Homework for week 1 and 2 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: Manolis-Alexandridis
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions Week1/homework/js-exercises/ex01-book-list/index.html
Original file line number Diff line number Diff line change
@@ -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>

44 changes: 44 additions & 0 deletions Week1/homework/js-exercises/ex01-book-list/main.css
Original file line number Diff line number Diff line change
@@ -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;
}

;

84 changes: 84 additions & 0 deletions Week1/homework/js-exercises/ex01-book-list/main.js
Original file line number Diff line number Diff line change
@@ -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%';
});

};

;

25 changes: 25 additions & 0 deletions Week1/homework/js-exercises/ex02-about-me/about_me.html
Original file line number Diff line number Diff line change
@@ -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>

31 changes: 31 additions & 0 deletions Week1/homework/js-exercises/ex02-about-me/main.css
Original file line number Diff line number Diff line change
@@ -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;
}

;

83 changes: 83 additions & 0 deletions Week1/homework/js-exercises/ex02-about-me/main.js
Original file line number Diff line number Diff line change
@@ -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();
};

;

11 changes: 11 additions & 0 deletions Week1/homework/js-exercises/ex03-logo-hijack/hijackGoogleLogo.js
Original file line number Diff line number Diff line change
@@ -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`);
};

;

27 changes: 27 additions & 0 deletions Week1/homework/js-exercises/ex04-active-clock/main.css
Original file line number Diff line number Diff line change
@@ -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;
}

;

38 changes: 38 additions & 0 deletions Week1/homework/js-exercises/ex04-active-clock/showCurrentTime.js
Original file line number Diff line number Diff line change
@@ -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());
};

;

15 changes: 15 additions & 0 deletions Week1/homework/js-exercises/ex04-active-clock/time.html
Original file line number Diff line number Diff line change
@@ -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>

Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy