From d85f015e33a510eed3398fe992f9e1b646c0daed Mon Sep 17 00:00:00 2001 From: ligopsychakis-michalis Date: Thu, 30 Jan 2020 18:57:48 +0200 Subject: [PATCH 1/3] js2 --- .DS_Store | Bin 6148 -> 8196 bytes Week1/.DS_Store | Bin 0 -> 6148 bytes Week1/homework/.DS_Store | Bin 0 -> 8196 bytes Week1/homework/issue-tracker/index.html | 47 ++++++ Week1/homework/issue-tracker/issue-tracker.js | 49 ++++++ Week1/homework/js-exercises/.DS_Store | Bin 0 -> 6148 bytes Week1/homework/js-exercises/about-me.js | 24 +++ Week1/homework/js-exercises/about_me.html | 21 +++ Week1/homework/js-exercises/books.js | 55 +++++++ Week1/homework/js-exercises/cat-walk.html | 44 +++++ .../homework/js-exercises/hijackGoogleLogo.js | 5 + .../homework/js-exercises/showCurrentTime.js | 23 +++ Week1/homework/js-exercises/time.html | 9 ++ Week1/homework/random-quote/index.html | 27 ++++ Week1/homework/random-quote/quote.css | 87 ++++++++++ Week1/homework/random-quote/random-quote.js | 32 ++++ Week2/.DS_Store | Bin 0 -> 6148 bytes Week2/homework/.DS_Store | Bin 0 -> 8196 bytes Week2/homework/js-exercises/.DS_Store | Bin 0 -> 6148 bytes Week2/homework/js-exercises/collectiveAge.js | 18 +++ .../homework/js-exercises/favoriteHobbies.js | 23 +++ Week2/homework/js-exercises/index.html | 9 ++ Week2/homework/js-exercises/lemonAlergy.js | 10 ++ Week2/homework/js-exercises/mondayWorth.js | 34 ++++ Week2/homework/js-exercises/oddOnesOut.js | 10 ++ Week2/homework/paper-rock-game/index.html | 39 +++++ Week2/homework/paper-rock-game/paper-rock.css | 113 +++++++++++++ Week2/homework/paper-rock-game/paper-rock.js | 153 ++++++++++++++++++ Week2/homework/pomodoro-clock/index.html | 30 ++++ Week2/homework/pomodoro-clock/pomodoro.css | 100 ++++++++++++ Week2/homework/pomodoro-clock/pomodoro.js | 96 +++++++++++ Week3/.DS_Store | Bin 0 -> 6148 bytes Week3/homework/.DS_Store | Bin 0 -> 8196 bytes Week3/homework/booklist-app/booklist.js | 130 +++++++++++++++ Week3/homework/booklist-app/index.html | 54 +++++++ Week3/homework/js-exercises/add-six.js | 13 ++ Week3/homework/js-exercises/duplicates-out.js | 18 +++ Week3/homework/js-exercises/guess-more.js | 21 +++ .../homework/js-exercises/guess-the-output.js | 17 ++ .../homework/js-exercises/lottary-machine.js | 32 ++++ Week3/homework/tip-calculator/index.html | 44 +++++ Week3/homework/tip-calculator/tip.css | 92 +++++++++++ Week3/homework/tip-calculator/tip.js | 74 +++++++++ 43 files changed, 1553 insertions(+) create mode 100644 Week1/.DS_Store create mode 100644 Week1/homework/.DS_Store create mode 100644 Week1/homework/issue-tracker/index.html create mode 100644 Week1/homework/issue-tracker/issue-tracker.js create mode 100644 Week1/homework/js-exercises/.DS_Store create mode 100644 Week1/homework/js-exercises/about-me.js create mode 100644 Week1/homework/js-exercises/about_me.html create mode 100644 Week1/homework/js-exercises/books.js create mode 100644 Week1/homework/js-exercises/cat-walk.html create mode 100644 Week1/homework/js-exercises/hijackGoogleLogo.js create mode 100644 Week1/homework/js-exercises/showCurrentTime.js create mode 100644 Week1/homework/js-exercises/time.html create mode 100644 Week1/homework/random-quote/index.html create mode 100644 Week1/homework/random-quote/quote.css create mode 100644 Week1/homework/random-quote/random-quote.js create mode 100644 Week2/.DS_Store create mode 100644 Week2/homework/.DS_Store create mode 100644 Week2/homework/js-exercises/.DS_Store create mode 100644 Week2/homework/js-exercises/collectiveAge.js create mode 100644 Week2/homework/js-exercises/favoriteHobbies.js create mode 100644 Week2/homework/js-exercises/index.html create mode 100644 Week2/homework/js-exercises/lemonAlergy.js create mode 100644 Week2/homework/js-exercises/mondayWorth.js create mode 100644 Week2/homework/js-exercises/oddOnesOut.js create mode 100644 Week2/homework/paper-rock-game/index.html create mode 100644 Week2/homework/paper-rock-game/paper-rock.css create mode 100644 Week2/homework/paper-rock-game/paper-rock.js create mode 100644 Week2/homework/pomodoro-clock/index.html create mode 100644 Week2/homework/pomodoro-clock/pomodoro.css create mode 100644 Week2/homework/pomodoro-clock/pomodoro.js create mode 100644 Week3/.DS_Store create mode 100644 Week3/homework/.DS_Store create mode 100644 Week3/homework/booklist-app/booklist.js create mode 100644 Week3/homework/booklist-app/index.html create mode 100644 Week3/homework/js-exercises/add-six.js create mode 100644 Week3/homework/js-exercises/duplicates-out.js create mode 100644 Week3/homework/js-exercises/guess-more.js create mode 100644 Week3/homework/js-exercises/guess-the-output.js create mode 100644 Week3/homework/js-exercises/lottary-machine.js create mode 100644 Week3/homework/tip-calculator/index.html create mode 100644 Week3/homework/tip-calculator/tip.css create mode 100644 Week3/homework/tip-calculator/tip.js diff --git a/.DS_Store b/.DS_Store index 19f35c2d407a08177dbf67c9e46b596ee6108156..5b2a16721da2a4d57d353a21da5a8c8f2cb962ca 100644 GIT binary patch literal 8196 zcmeHM-EI;=6h1>~yP!sDOp14VW8wuR{G_SIm>`7<5;ev(_Cig&bhofdcL^*KMGQB- zgZc(OidSCxAU=S8^CN))5)%_+>zroho1gQY!+Z-YXG=t^I`E1_St7E~IA$)OTVi~l zw*^b6l`S9xpD3n&qZ1uBJ5h7N+bkFbi~>dhqkvJsDDW>RfO|GKYsGzE?wZ~xU=;W- z72w|wHX6r@!ihxj)qzfw0Kg=cg<*_3KyYk@6@?Rtf{K{3dSHsmREfbP9s4$S2UZkL zBuY9lNhhWkMJ>WA-gk|61-zcnD8}i0jPuBgd~||&OXi=? zop7}nDSCu+-lZDd2QE=3@l|6aaZP-jE1r)muFHp+>#|M<@bjTVQS;<_ukdUR`(5>{ z=1a5N3HouN@Qo$blIt6rmX)^Bm(tIjb~JQiHy-q>Ztp3dJ#^!CQ;i=-QD-`Kn@<9N zc$m4mABC|Sgnmzu1J8%cvx6Y?qG2@}gkE37apZ<&rL5FpCOaCHc6W33&B8cmkBWs- zIcMM6+Z&Hl*7o({oyO7W>o=pf<98o%92isg0lF;b)BY1iGh)1QdSNFDTbwetQ<|4a zywR4+R674Ml~&4B)@0(JrsXn~&%aD%O(tkz%qVbH67aEOV*rP6^_4tQ|TODYuji?XxzBpM53Ue6XiHil;gnZKMXOp;mSD`g%gQbf&KLd S0e|po(%k>WB{SVQP~ayVEqL+( delta 176 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50$j<_j2a6dcl@}LmOjygz$TC?` zc&><{sgaI?k(ouUjzYD$xq*&?iLu$_)k5}@1x2JMhl%v#RIu4Xl#gjKI|qj#Gth7# j5a0$9t{_V{7Jg@*%rD~!asmSr#5o`rGHj0LnZpbKMZ6#B diff --git a/Week1/.DS_Store b/Week1/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..439e20440afb113856eac316393fd1d83f8deafe GIT binary patch literal 6148 zcmeHK&2G~`5S~p#SqD|*fYcuMg2W+0Nl{f0LUKcTsA!?W2o8W+8%M;d>#Y(83qp`D zeTeoAcod$1$ANEus8Z}+5rUm)_M4rZZ>|08c)di#`qQ{a)FvVhSJ?2-)R-DqUa^MF zECZRIqaaCRI@(F)yGpf7{EZ5zd&g;n`*uu2TDX5vDkF@k2je09&JS&fYU-n6a$@Vh zMJH)8$-CX}tg+O*wtSuQ7H_Sz-UcIC1bLWGC;f2zTJ`qBd=%OEg_P+<97ZpbVR6vD z^;l+km}JATCMWR_C2w9OSuBgboM!Pv&l8vd&OPoOwAW^{^^J{=xZj<3#H`m{zt<5D zHaF*UkFVbDJ=!@u{`hJ3dH&^0FNGK$Tx~Zk{(^G^6=6OE<1CfgdyFaG3hmN11^7Lq zr?ijW7Vs{ljMZOYLBg-7UX;+IJ=8t{dk PJ_NK3u5k+dQ3ZYi4C;q6 literal 0 HcmV?d00001 diff --git a/Week1/homework/.DS_Store b/Week1/homework/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..f2f321350f4edc68b35b76faad84fc159fbd1c55 GIT binary patch literal 8196 zcmeI1L2lDP6o%iVp*W!xSs*n_Z;)7|RZ>*72q8tGEV@Gqf(4+~ZY*MO?O;2E5`wbf z5O4#I!U;GC2Y~<03{jI{#HN7C8*Ant+w+f|&o6eKLqw`G?6rvMMC72d)~=xWN#Xrm zmrBWQS%WJ0iJnt-5GBWcl=w@dWrGk90zyCt2mvARFA%^pn~PKM+&6or6#_!wza+r- z2N#vKZFOo?-#XCf6aZSrW?j%n9-uw0)wb2CQEkPXCVNoUs%(m(j2-)39u93=ofv-v7Uc2w*ec$#UBuO;ud;Y^P7#-HG-A&@$3*#Ww z=CBuF$dgB5+)GBCWEl4{Jx|x{aGZ)$Ijq&k-$eZ|ra27v)moA + + + + + + + + + + Issue Tracker + + +
+

JS Issue Tracker by SocialHackersAcademy

+
+

Add New Issue:

+
+ + +
+
+ + +
+
+ + +
+ +
+
+

© Michalis Ligopsychakis

+
+ + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/issue-tracker/issue-tracker.js b/Week1/homework/issue-tracker/issue-tracker.js new file mode 100644 index 000000000..137b160ae --- /dev/null +++ b/Week1/homework/issue-tracker/issue-tracker.js @@ -0,0 +1,49 @@ +let description = document.getElementById("description"); +let severity = document.getElementById("severity"); +let assignedTo = document.getElementById("assigned"); +let add = document.getElementById("add"); +let num = 0; //use num to give different ids on every different issue card + + +//function that shows the issue via a card +function assignmentCard(desc , sev , assign , num){ + let cardsPlace = document.getElementById("assignment-cards"); + let addCard = document.createElement("div"); + addCard.className = "jumbotron" + addCard.id = "card" + num //change the id in order to every issue card has a different id + + //HTML code for every new issue card + addCard.innerHTML = "

Open

" + + "

" + desc.value + "

" + + "

" + " " + sev.value + "" + + " " + assign.value + "

" + + "" + + ""; + cardsPlace.appendChild(addCard); + + //clear the inputs when click add button + desc.value = ""; + sev.value = "Low"; + assign.value = ""; + + //change open to close when close buttton onclick + let close = document.getElementById("close"); + close.id = "close" + num; //change the id in order to every close button has a different id + let status = document.getElementById("status"); + status.id = "status" + num; //change the id in order to every status has a different id + + function closeFunc(statusId){ + let status = document.getElementById(statusId); + status.innerText = "Closed"; + } + close.addEventListener("click",function(){closeFunc(status.id)}); + + //delete the issue card when delete button onclick + let del = document.getElementById("del"); + del.id = "del" + num; //change the id in order to every delete button has a different id + del.addEventListener("click",function(){ + addCard.remove(); + }) +} + +add.addEventListener("click" , function(){assignmentCard(description , severity , assignedTo, num++)}); diff --git a/Week1/homework/js-exercises/.DS_Store b/Week1/homework/js-exercises/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..79845d99a026c638328ab35d885c630c9c4ac799 GIT binary patch literal 6148 zcmeHK!A=4(5Pe-qgb)&<2R-i5izJ@CY!G8iyy;y*i71Pkh=l82{20H+kMRTa&9o3G z>rrFO3~67tJ8!0aZMGDE>(1_ufHr_Si(t}VRbld8%7!JOXPf9W#tRNH!4MrhZg^YA zUsOQWu8BSdC@{n7`c2RC;&zZ11A1_KxL4xArHf97p~w+%lJpZBER|>!30d-Xi8M{T{d%`;0Kg8RuBwo)Lz)&{k2E-+e?;b~w%v z{pUELM$h~W@x<|5G4^7&M{`K}QH%!t7v7a)Pu?R2AI(ewQ@|AXAq9A5i`APRtu_Tr z0aIY9fP5cP7QrlF=}|u&tn>;%tg%~-ZMjPbCk>bdEIslK&3P)(Q(d@XI8SGP8vL?= zrAJSP3zrWUGP`g?ahjd+Q+0>SJX&oEm;&nxZ28Bwod2ia-~ZQ1_GAi}0{=<@SLrXKl)I!y+brrN + + + + About Me + + + +

About Me

+
    +
  • Nickname:
    • +
  • Favorite food:
    • +
  • Hometown:
    • +
+ + + \ No newline at end of file diff --git a/Week1/homework/js-exercises/books.js b/Week1/homework/js-exercises/books.js new file mode 100644 index 000000000..be38f1a31 --- /dev/null +++ b/Week1/homework/js-exercises/books.js @@ -0,0 +1,55 @@ +const books = [ + { + title: 'The Design of Everyday Things', + author: 'Don Norman', + alreadyRead: false, + }, + { + title: 'The Most Human Human', + author: 'Brian Christian', + alreadyRead: true, + }, +]; + +const body = document.querySelector("body"); + +//create the ul and append it to the site +const ul = document.createElement("ul"); +body.appendChild(ul); + +for (let i = 0; i < 2; i++){ + const li = document.createElement("li"); + ul.appendChild(li); +} + +let lis = document.getElementsByTagName("li"); + +//append to li book infos +let x = 0; +for (book of books){ + const newPar = document.createElement("p") + newPar.innerText = book.title + " by " + book.author; + lis[x].appendChild(newPar); + x++; +} + +//append to li book imgs +imgs = ["https://images-na.ssl-images-amazon.com/images/I/410RTQezHYL._SX326_BO1,204,203,200_.jpg","https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1295465264l/8884400.jpg"]; + +for (let i = 0; i < 2; i++){ + let img = document.createElement("img"); + img.setAttribute("src",imgs[i]); + lis[i].appendChild(img); + img.style.height = "200px"; +} + +//add color depends of alreadyRead +let y = 0; +for (book of books){ + if (book.alreadyRead == false){ + lis[y].style.backgroundColor = "red"; + y++; + }else{ + lis[y].style.backgroundColor = "green"; + } +} diff --git a/Week1/homework/js-exercises/cat-walk.html b/Week1/homework/js-exercises/cat-walk.html new file mode 100644 index 000000000..ed6ba9528 --- /dev/null +++ b/Week1/homework/js-exercises/cat-walk.html @@ -0,0 +1,44 @@ + + + + + Cat Walk + + + + + + + \ No newline at end of file diff --git a/Week1/homework/js-exercises/hijackGoogleLogo.js b/Week1/homework/js-exercises/hijackGoogleLogo.js new file mode 100644 index 000000000..ba906d8c7 --- /dev/null +++ b/Week1/homework/js-exercises/hijackGoogleLogo.js @@ -0,0 +1,5 @@ +//replace the Google Logo +function hijackGoogleLogo(){ + const google = document.getElementById("hplogo"); + google.src = "https://www.hackyourfuture.dk/static/logo-dark.svg"; +} \ No newline at end of file diff --git a/Week1/homework/js-exercises/showCurrentTime.js b/Week1/homework/js-exercises/showCurrentTime.js new file mode 100644 index 000000000..77f2ada51 --- /dev/null +++ b/Week1/homework/js-exercises/showCurrentTime.js @@ -0,0 +1,23 @@ +//append a paragraph element +const body = document.querySelector("body"); +let para = document.createElement("p"); +body.appendChild(para); + +//change the style +para.style.marginLeft = "auto"; +para.style.marginRight = "auto"; +para.style.marginTop = "15%"; +para.style.textAlign = "center"; +para.style.fontSize = "8em"; +para.style.fontFamily = "sans-serif"; +para.style.color = "white"; +body.style.backgroundColor = "#60646e"; + +//run the time +function timeTeller(){ + today = new Date(); + let time = today.getHours() + " : " + today.getMinutes() + " : " + today.getSeconds(); + para.innerText = time; +} + +let changeTime = setInterval(timeTeller,1000); diff --git a/Week1/homework/js-exercises/time.html b/Week1/homework/js-exercises/time.html new file mode 100644 index 000000000..808afda64 --- /dev/null +++ b/Week1/homework/js-exercises/time.html @@ -0,0 +1,9 @@ + + + + Time + + + + + diff --git a/Week1/homework/random-quote/index.html b/Week1/homework/random-quote/index.html new file mode 100644 index 000000000..109328dd6 --- /dev/null +++ b/Week1/homework/random-quote/index.html @@ -0,0 +1,27 @@ + + + + + + + Random Quote!!! + + + + +
+
+

Random quote... Click the button to get wiser!

+

- Michalis Ligopsychakis

+
+ + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/Week1/homework/random-quote/quote.css b/Week1/homework/random-quote/quote.css new file mode 100644 index 000000000..6064c7ef3 --- /dev/null +++ b/Week1/homework/random-quote/quote.css @@ -0,0 +1,87 @@ +body{ + background-color: #ffa500; + color: #ffa500; + font-size: 2em; +} + +.all{ + /* background-color: white; */ + width: 60%; + margin-left: auto; + margin-right: auto; + margin-top: 10%; +} + +.block{ + width: 80%; + margin-left: auto; + margin-right: auto; + background-color: white; +} + +.main-block{ + padding: 5%; +} + +.block p:first-child{ + text-align: center; + margin-bottom: 35px; +} + +.small{ + text-align: right; + font-size: 0.5em; + margin-bottom: 40px; +} + +.info-block{ + width: 100%; + margin-left: 0; + margin-right: 0; + display: flex; +} + +.info-block i:nth-child(2){ + flex: 1; + margin-left: 3px; +} + +#btn{ + background-color: #ffa500; + color: white; + padding: 5px; + font-size: 0.5em; +} + +.down-block{ + height: 20px; + width: 20%; + margin-top: 4px; +} + +@media all and (max-width:400px){ + .block p:first-child{ + font-size: 0.6em; + } + .small{ + font-size: 0.4em; + } + .info-block i{ + font-size: 25px; + } + #btn{ + font-size: 0.4em; + } + .all{ + width: 95%; + } +} + +@media all and (max-width:180px){ + #btn{ + font-size: 0.3em; + } + .info-block i{ + font-size: 15px; + } +} \ No newline at end of file diff --git a/Week1/homework/random-quote/random-quote.js b/Week1/homework/random-quote/random-quote.js new file mode 100644 index 000000000..b4f6f4e6d --- /dev/null +++ b/Week1/homework/random-quote/random-quote.js @@ -0,0 +1,32 @@ +let quote = document.querySelector("p"); +let name = document.querySelector("p:nth-child(2)"); +let btn = document.getElementById("btn"); +let num; //use to avoid to repeat the same quote two times in a row + +//array of six quotes +let quoteList = ["Two things are infinite: the universe and human stupidity; and I'm not sure about the universe..", + "So many books, so little time..", + "A room without books is like a body without a soul..", + "Be the change that you wish to see in the world..", + "You only live once, but if you do it right, once is enough..", + "Without music, life would be a mistake.." +]; + +//array of names in the same index of quote that each own +let nameList = ["- Albert Einstein", "- Frank Zappa", "- Marcus Tullius Cicero", "- Mahatma Gandhi", "- Mae West", "- Friedrich Nietzsche"]; + +//when button onclick change the quote and the name and keep in "num" the value just to remember the last quote and not repeat it after +btn.addEventListener("click", function(){ + refreshQuote(quote,name,quoteList,nameList,num); + num = refreshQuote(quote,name,quoteList,nameList,num); +}); + + +function refreshQuote(quo, nam, quoList, namList, n){ + do{ + var i = Math.floor(Math.random() * 6); + }while(n === i || i === 6) + quo.innerHTML = " " + quoList[i]; + nam.innerText = namList[i]; + return n = i; +} diff --git a/Week2/.DS_Store b/Week2/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..e1ff11aaf9f2b5bdf36b56be82a46bc00bd9b3e3 GIT binary patch literal 6148 zcmeHK-EPw`6h7VpbBiW=fwW!v28oLbwL{ZD2q`Pw#RP+iAh-auC8VMeSv)l<(N>Cb z!$ZIu@F+Y155fb$=O0kJbX+3De5&K`*gl_Af35A9h*)nNcZpg=#Ni6PCW-~7`jyvg z$+oNjnI5AgNh5l@o66Uiu3aGWqX^3@uL<5>xzfme9^r?;EF8sz1ZHN}+ zM`eC&^S?&NX_6P6&NsHS>|MIN!g-T7SDUYbp)7+UEXH{+9KBGr{jeBDHhwB)`a2Gz zXUU*EXkEK6vm#8g!AO&ncz~3b&yy^cWlxT?IM?F@ri1eaZydDNCzFlM&9=DRnYP8G z+u69)7I(I`rqc#ryWYLGdw6tmI(a|+@JUaF7&b0#S1ta6&j@P5ybDHIDzi7}Q@mAr zNIMkZ^OzpdK5E;*n~*YATi}d@Uywa3VT1ON`vB}c_yPu7t1+G+bDR3-GCrPRcvRpg z&8e9GF6{f6JXD=sLO7?86O-`M)0)7Zrrt&I-nu5X}$2w3) d@j6@^`h*IAzQxKQT43%)K+E6?r@&uT;3x6%lSlvn literal 0 HcmV?d00001 diff --git a/Week2/homework/.DS_Store b/Week2/homework/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..d10f900842ebe8d0255c7b4b7d2dadaf3fe836f5 GIT binary patch literal 8196 zcmeI1Pj1sd6vp4Q0h~Z-7D&y~8zdGfN{Xt25KYo2J492_l8xLiidtn@;+8ho7bb0YCj0bYum7{o&>2Z2yhvQV8>TbO;nQUxs zHr>0eY15swTN`(p?!B$8>9p#s-E2SD*&DulKlw2I_*tJ43HyAZRkJ-Szo548gx~bi zIFj)``Y3;$hUDRsQVz5L3AkgD*gmA&3iffZbRV9hU{|z1f$J5PQX-6^mQ_x2el0my zDZz0Q-G3b(iN%;hjI)o{AqB^eD?a_5`=VafKR_#8-0Q$A0aMaIUs4IYeOx4sx&-(~ z3Gk`ji;DNulPakifDTyP@6z9%0tvb$~O3%|kPRb4ox|wtL%M ze7WE6zUA+!Vr>_B4_PJEuP~}DD0Dau)!{gF_J<+rF1jjD$7*2|El9i&pfPa41pX<3 EU+CvJ)Bpeg literal 0 HcmV?d00001 diff --git a/Week2/homework/js-exercises/.DS_Store b/Week2/homework/js-exercises/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..fd85119231cddda9fbb18ed0cdc4d688af9bccb2 GIT binary patch literal 6148 zcmeHKJx{|h5PdEcDj-nB0%JxdBxaVhDiTZ`7+Bjh1&Y!}>Ib4*7JdxBj~@W<&Q?W} zu%ZgxMfS5V_k8xV6vqHuca>fNZ2&D6!Nvir8k6@@D%J>|eWKGb#u#CV30^U-M4Mw5 z6_CAabJucYe17g<2T$x@;suMlEFUFVo@gv^O}zM0(_pZO=L9bzMI9Ug3IP%9*e6pmSd` zZ_Rq$XNh~v=#)>Nd1ZZltT^8qW@A`lvTJ4vm;$E24k*AgTdZ~D(P~q`6fgxg3dr{% zViAl379RD}!Ah?H#3tQpY|C9jI8nejVBwK(XwFlKp6bFC!+ARWQHYBJ79KqvE?hob z$n3%m#c6hqA89yT?9pmdz!cb4V9$5ka{k}^e*fPlS info.age) //map to keep the ages from the object + .reduce((total,age) => total + age , 0); //reduce to add the ages + console.log("The collective age of HYF is " + sumOfAges); + return sumOfAges; +} + +collectiveAge(hackYourFutureMembers); \ No newline at end of file diff --git a/Week2/homework/js-exercises/favoriteHobbies.js b/Week2/homework/js-exercises/favoriteHobbies.js new file mode 100644 index 000000000..0411892d8 --- /dev/null +++ b/Week2/homework/js-exercises/favoriteHobbies.js @@ -0,0 +1,23 @@ +const myHobbies = [ + 'Meditation', + 'Reading', + 'Programming', + 'Hanging out with friends', + 'Going to the gym', +]; + +function createListItems(hobbies){ + //append to body the ul element + const body = document.getElementById("all") + let unList = document.createElement("ul"); + body.appendChild(unList); + + //append to ul the list items + hobbies.forEach((hobbie) => { + let listItem = document.createElement("li"); + unList.appendChild(listItem); + document.querySelector("ul li:last-child").innerText = hobbie; + }); +} + +createListItems(myHobbies); \ No newline at end of file diff --git a/Week2/homework/js-exercises/index.html b/Week2/homework/js-exercises/index.html new file mode 100644 index 000000000..de84cc4e2 --- /dev/null +++ b/Week2/homework/js-exercises/index.html @@ -0,0 +1,9 @@ + + + + Favorite Hobbies + + + + + \ No newline at end of file diff --git a/Week2/homework/js-exercises/lemonAlergy.js b/Week2/homework/js-exercises/lemonAlergy.js new file mode 100644 index 000000000..5046adf5d --- /dev/null +++ b/Week2/homework/js-exercises/lemonAlergy.js @@ -0,0 +1,10 @@ +"use strict" + +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; + +function theLemonsOut(fruits){ + let basket = fruits.filter(fruit => fruit !== "Lemon"); //filter to put out the lemons + return basket; +} + +console.log("My mom bought me a fruit basket, containing " + theLemonsOut(fruitBasket)); \ No newline at end of file diff --git a/Week2/homework/js-exercises/mondayWorth.js b/Week2/homework/js-exercises/mondayWorth.js new file mode 100644 index 000000000..ffe89f846 --- /dev/null +++ b/Week2/homework/js-exercises/mondayWorth.js @@ -0,0 +1,34 @@ +"use strict"; + +const mondayTasks = [ + { + name: 'Daily standup', + duration: 30, // specified in minutes + }, + { + name: 'Feature discussion', + duration: 120, + }, + { + name: 'Development time', + duration: 240, + }, + { + name: 'Talk to different members from the product team', + duration: 60, + }, +]; + +function mondayWorth (tasks){ + let hours = tasks + .map(task => task.duration / 60) //map to get an array of tasks duration in hours + .reduce((total,dur) => total + dur , 0); //reduce to sum the working hours + let salary = hours * 25; + return salary; +} + +console.log(mondayWorth(mondayTasks) + " Euros"); + + + + diff --git a/Week2/homework/js-exercises/oddOnesOut.js b/Week2/homework/js-exercises/oddOnesOut.js new file mode 100644 index 000000000..392099f46 --- /dev/null +++ b/Week2/homework/js-exercises/oddOnesOut.js @@ -0,0 +1,10 @@ +"use strict"; +function doubleEvenNumbers(number){ + const newNumbers = number + .filter(num => num % 2 === 0) //use filter to keep only even numbers + .map(num => num * 2); //use map to multiply the evenNumbers + return newNumbers; +} + +const myNumbers = [1, 2, 3, 4]; +console.log(doubleEvenNumbers(myNumbers)); \ No newline at end of file diff --git a/Week2/homework/paper-rock-game/index.html b/Week2/homework/paper-rock-game/index.html new file mode 100644 index 000000000..92d1e80c7 --- /dev/null +++ b/Week2/homework/paper-rock-game/index.html @@ -0,0 +1,39 @@ + + + + + + + Paper Rock Scissors Game + + + + + +
+

Paper - Rock - Scissors Game

+ +
+
Player: 0
+
Computer: 0
+
+
+
Make your selection
+
+
+
+
+
+
+

+ +

+
+
+
+ + + + + + \ No newline at end of file diff --git a/Week2/homework/paper-rock-game/paper-rock.css b/Week2/homework/paper-rock-game/paper-rock.css new file mode 100644 index 000000000..7bba8e3ec --- /dev/null +++ b/Week2/homework/paper-rock-game/paper-rock.css @@ -0,0 +1,113 @@ + .container{ + text-align: center; + font-size: 1.4em; + font-family: sans-serif; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ +} + +i { + font-size: 13em; +} + +button{ + font-size: 0.7em; + margin-bottom: 10px; + background-color: #f2f3f5; + transition: all ease 0.35s; +} + +button:focus{ + outline: none; +} + +#selection{ + margin-bottom: 30px; + margin-top: 35px; +} + +#score div:first-child{ + background-color:#0a38ab; + color: white; +} + +#score div:last-child{ + background-color: black; + color: white; +} + + +/* hovers */ +button:hover{ + color: white; + background-color: #0a38ab; +} + + +/* responsive */ +@media all and (max-width:990px){ + i{ + font-size: 10em; + } +} + +@media all and (max-width:770px){ + i{ + font-size: 6em; + } +} + +@media all and (max-width:420px){ + .container{ + font-size: 0.8em; + } + + button{ + font-size: 0.7em; + } +} + +@media all and (max-width:230px){ + i{ + font-size: 4em; + } +} + + +/* style for result page */ +.result-page{ + background-color: #a8aaad; + opacity: 1; +} + +#result{ + display: none; + position: absolute; + left: 33%; + background-color: white; + padding: 20px; + padding-bottom: 10px; + border-radius: 20px; + box-shadow: 10px 15px 20px; +} + +#result p{ + margin-top: 15px; + font-size: 0.8em; +} + +#result h3{ + color: #09ad35; +} + +@media all and (max-width:574px){ + #result{ + display: none; + position: absolute; + left:0; + } +} diff --git a/Week2/homework/paper-rock-game/paper-rock.js b/Week2/homework/paper-rock-game/paper-rock.js new file mode 100644 index 000000000..6b77ab250 --- /dev/null +++ b/Week2/homework/paper-rock-game/paper-rock.js @@ -0,0 +1,153 @@ +//for main page +let body = document.body; +const rock = document.getElementById("rock-choise"); +const paper = document.getElementById("paper-choise"); +const scissors = document.getElementById("scissors-choise"); +const choises = document.getElementsByClassName("choise"); +const btn = document.querySelector("button"); + +//for result page +let result = document.getElementById("result"); +let playerScore = document.querySelector("#score div:first-child"); +let computerScore = document.querySelector("#score div:last-child"); +let computerChoseIcon = document.querySelector("#result i"); +let resultState = document.querySelector("#result h3"); +let computerChose = document.querySelector("#result p"); + + +//when user click a choise the game begin +for (let i = 0; i < choises.length; i++){ + choises[i].addEventListener("click",() => play(i)); +} + + +//function of the main game +function play(i){ + if (result.style.display !== "block"){ //an if to make sure that user cannot play when result page is on + let userChoise; //keep the choise of the user + if (choises[i] === rock){ + userChoise = "Rock"; + }else if(choises[i] === paper){ + userChoise = "Paper"; + }else{ + userChoise = "Scissors"; + } + let computerChoise = pcChoise(); //keeps the choise of computer + let winner = theWinnerIs(userChoise,computerChoise); //keeps the winner + resultPage(winner,computerChoise); //call the function that shows the result + } +} + + +//makes a random choise for computer +function pcChoise(){ + let rand = Math.random(); + if (rand <= 0.33){ + return "Paper" + }else if (rand <= 0.66){ + return "Rock" + }else{ + return "Scissors" + } +} + + +//find out who the winner is +let scoreForPl = 0; //use to keep and show the score of player +let scoreForPc = 0; //use to keep and show the score of computers + +function theWinnerIs(player,computer){ + let phrase; + if (player === computer){ + phrase = "It's a Draw"; + }else if(player === "Paper"){ + if (computer === "Rock"){ + scoreForPl += 1; + phrase = "You Win"; + }else{ + scoreForPc += 1; + phrase = "You Lose"; + } + }else if (player === "Rock"){ + if (computer === "Paper"){ + scoreForPc += 1; + phrase = "You Lose"; + }else{ + scoreForPl += 1; + phrase = "You Win"; + } + }else{ + if (computer === "Rock"){ + scoreForPc += 1; + phrase = "You Lose"; + }else{ + scoreForPl += 1; + phrase = "You Win"; + } + } + playerScore.innerText ="Player: " + scoreForPl; + computerScore.innerText ="Computer: " + scoreForPc; + return phrase +} + + +//shows the result of the game on a card +function resultPage(winner,computer){ + computerChoseIcon.className = "fas fa-hand-" + computer.toLowerCase(); + computerChose.innerText = "Computer chose " + computer + "..."; + if (winner === "You Win"){ + resultState.style.color = "#09ad35"; + }else if (winner === "You Lose"){ + resultState.style.color = "#d42222"; + }else{ + resultState.style.color = "black"; + } + resultState.innerText = winner; + body.className = "result-page"; + result.style.display = "block"; +} + + +//restart the game when click the button +btn.addEventListener("click",function(){ + scoreForPc = 0; + scoreForPl = 0; + playerScore.innerText = "Player: " + scoreForPl; + computerScore.innerText = "Computer: " + scoreForPc; +}) + + +//if result page is on, after click anywhere, result page disappear +let secondClick = 0; //use for help, cause with first click i want to show result page and with the second disappear it +window.addEventListener("click",function(){ + if (result.style.display === "block" && secondClick === 1){ + result.style.display = "none"; + body.className = ""; + secondClick = 0; + }else if (result.style.display === "block" && secondClick === 0){ + secondClick = 1; + } +}) + +//hover to blue choises, if result page is off +for (let i = 0; i < choises.length; i++){ + choises[i].addEventListener("mouseover",function(){ + if (result.style.display !== "block"){ + choises[i].style.color = "#0a38ab"; + choises[i].style.cursor = "pointer"; + }else{ + choises[i].style.color = "black"; + choises[i].style.cursor = "unset"; + } + }) +} +//turn choises to black when mouseout +for (let i = 0; i < choises.length; i++){ + choises[i].addEventListener("mouseout",function(){ + choises[i].style.color = "black"; + }) +} + + + + diff --git a/Week2/homework/pomodoro-clock/index.html b/Week2/homework/pomodoro-clock/index.html new file mode 100644 index 000000000..af909b696 --- /dev/null +++ b/Week2/homework/pomodoro-clock/index.html @@ -0,0 +1,30 @@ + + + + + + + Pomodoro Clock + + + + + + +
+

Pomodoro Clock

+

Session Length

+ 0 +
+

Session

+

00 : 00

+
+ + +
+ + + + + + \ No newline at end of file diff --git a/Week2/homework/pomodoro-clock/pomodoro.css b/Week2/homework/pomodoro-clock/pomodoro.css new file mode 100644 index 000000000..4ba86ed9b --- /dev/null +++ b/Week2/homework/pomodoro-clock/pomodoro.css @@ -0,0 +1,100 @@ +/* font-family import */ +@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap'); + +body{ + font-family: 'Ubuntu', sans-serif; + background-color: #1f555c; + color: white; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ +} + +.container{ + text-align: center; + font-size: 4em; + margin-top: 6%; + font-weight: bold; +} + +h1{ + font-size: 1em; + font-weight: 800; + margin-bottom: 4%; +} + +h2{ + font-size: 0.7em; + margin-bottom: -25px; +} + + +i{ + font-size: 0.55em; +} + +.container div{ + border: solid #13363a 8px; + border-radius: 60px; + width: fit-content; + padding: 10px 50px; + margin-left: auto; + margin-right: auto; + margin-top: 20px; +} + +span{ + margin-left: 10px; + margin-right: 10px; + font-size: 0.7em; +} + +p{ + margin-bottom: 0; + font-weight: 400; + font-size: 1.4em; +} + + +/* responsive */ +@media all and (max-width:423px){ + .container{ + font-size: 3em; + margin-top: 15%; + } +} + +@media all and (max-width:355px){ + .container{ + font-size: 2.5em; + margin-top: 15%; + } + + p{ + font-size: 1em; + margin-top: 15px; + } +} + +@media all and (max-width:273px){ + p{ + font-size: 0.6em; + } + + .container div{ + padding: 10px 30px; + } + + h2{ + margin-bottom: -15px; + } +} + +@media all and (max-width:220px){ + h1{ + font-size: 0.8em; + } +} \ No newline at end of file diff --git a/Week2/homework/pomodoro-clock/pomodoro.js b/Week2/homework/pomodoro-clock/pomodoro.js new file mode 100644 index 000000000..ec880455f --- /dev/null +++ b/Week2/homework/pomodoro-clock/pomodoro.js @@ -0,0 +1,96 @@ +//initialize the basic variables +const arrowUp = document.getElementById("arrow-up"); +const arrowDown = document.getElementById("arrow-down"); +const play = document.getElementById("play"); +const pause = document.getElementById("pause"); +const timer = document.getElementById("timer"); +const sessionLength = document.getElementById("length"); + + +//when click to arrow up or arrow down, I want to increase or decrease the session length and timer +chooseTime = 0; + +arrowUp.addEventListener("click",function(){ + if (timerIsOn === false){ + chooseTime += 1; + sessionLength.innerText = chooseTime; + timer.innerText = chooseTime + " : " + "00"; + } +}) + +arrowDown.addEventListener("click",function(){ + if (timerIsOn === false){ + chooseTime -= 1; + if (chooseTime < 0){ + chooseTime = 0; + } + sessionLength.innerText = chooseTime; + timer.innerText = chooseTime + " : " + "00"; + } +}) + + +/* if mousedown to arrows I want to increase or decrease the session lenght and timer constantly +and stop when the mouseup */ +let increaseConst; +let decreaseConst; + +arrowUp.addEventListener("mousedown",function(){ + if (timerIsOn === false){ + increaseConst = setInterval(function(){ + chooseTime += 1; + sessionLength.innerText = chooseTime; + },300); + } +}) + +arrowUp.addEventListener("mouseup",function(){ + clearInterval(increaseConst); +}) + +arrowDown.addEventListener("mousedown",function(){ + if (timerIsOn === false){ + decreaseConst = setInterval(function(){ + chooseTime -= 1; + if (chooseTime < 0){ + chooseTime = 0; + } + sessionLength.innerText = chooseTime; + },300); + } +}) + +arrowDown.addEventListener("mouseup",function(){ + clearInterval(decreaseConst); +}) + + +// when click play button I want to begin the reverse counting +let reverseCount; +let timeOnSec = 0; +let timerIsOn = false; //use to know if timer counts cause if it's true I want to disable the arrows + +play.addEventListener("click",function(){ + timerIsOn = true; + if((chooseTime + " : " + "00") == timer.innerText){ //I want to continue the reverse count if it's not finished yet + timeOnSec = chooseTime * 60; + } + timer.innerText = Math.floor(timeOnSec / 60) + " : " + timeOnSec % 60; + + reverseCount = setInterval(function(){ + timeOnSec -= 1; + timer.innerText = Math.floor(timeOnSec / 60) + " : " + timeOnSec % 60; + if (timeOnSec === -1){ + timer.innerText = "Time's up!"; + clearInterval(reverseCount); + timerIsOn = false; + } + },1000); +}) + + +//when click pause button I want to stop the reverse counting +pause.addEventListener("click",function(){ + clearInterval(reverseCount); + timerIsOn = false; +}) \ No newline at end of file diff --git a/Week3/.DS_Store b/Week3/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..e1ff11aaf9f2b5bdf36b56be82a46bc00bd9b3e3 GIT binary patch literal 6148 zcmeHK-EPw`6h7VpbBiW=fwW!v28oLbwL{ZD2q`Pw#RP+iAh-auC8VMeSv)l<(N>Cb z!$ZIu@F+Y155fb$=O0kJbX+3De5&K`*gl_Af35A9h*)nNcZpg=#Ni6PCW-~7`jyvg z$+oNjnI5AgNh5l@o66Uiu3aGWqX^3@uL<5>xzfme9^r?;EF8sz1ZHN}+ zM`eC&^S?&NX_6P6&NsHS>|MIN!g-T7SDUYbp)7+UEXH{+9KBGr{jeBDHhwB)`a2Gz zXUU*EXkEK6vm#8g!AO&ncz~3b&yy^cWlxT?IM?F@ri1eaZydDNCzFlM&9=DRnYP8G z+u69)7I(I`rqc#ryWYLGdw6tmI(a|+@JUaF7&b0#S1ta6&j@P5ybDHIDzi7}Q@mAr zNIMkZ^OzpdK5E;*n~*YATi}d@Uywa3VT1ON`vB}c_yPu7t1+G+bDR3-GCrPRcvRpg z&8e9GF6{f6JXD=sLO7?86O-`M)0)7Zrrt&I-nu5X}$2w3) d@j6@^`h*IAzQxKQT43%)K+E6?r@&uT;3x6%lSlvn literal 0 HcmV?d00001 diff --git a/Week3/homework/.DS_Store b/Week3/homework/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..8fddea93faa395d7388beec162a985a6dd081e14 GIT binary patch literal 8196 zcmeI1&5qJg7>2(ygIaJLS(psVZcJQ&;YUPcObCvP*_mK;p=PFq#;H?VLW`(~VdFih zci^SCa_NP50s5XFk)M{$Bxa)DA?Lh@)9>w}Pif0{AR^Hj^=m{WBC=4W7B8YnDRR54 zYh}xf6rlosqJVsgDWM8EYtcNw1egF5U;<2l37iE2cxKCDWjy!wR&JR96ZkI)$oqqh zDz$BNrd8cK(5Msun!~Uv=*x6KdTgU@qcg48f+DmPs;$DL7(&}IZkxEa(V13lCt;Eg zVP+O4LlJ6r?B7=5B-&cJWdclKoq)VtcF3g&ual+xeL#bQAnLh6t?k^o^A{|uU==PEo^_9-aW`?2QQUEcPvpA?PIBy;{=+B= z=6%O~BxD$=SeysM>)f+4;Z{-h*rOBk;Y?kd? z)oIzD)T;GH*}mOsO{aNl?`rMt!O_b%Zzu1j??0(SB4O??bXmWjx1Z6=Jm6Q|VHiZ= zbHqsh4!yuKNQFFljXI>BS{CsrUIF?6vCBX+eE%-cj00W)T2QM>9u24ttTnnW0WZU( zJAip@;oG_Fsi%6rZ1gnJJnAaQp65oYN1o_xPczl?W25J0nrF+|=xL>TzO8t6=d2rG zE$<8=jWCwQeDMoxEqK%7CGW-fU91)QII9(0A`b38J$hetSWkI9T iai~hiq4Pfs(YFyQJ#C{itr$V!g#d+t8z%5q3H$ UI.addBookToList(book)) + } , + + addBookToList : function(book) { + const list = document.getElementById("book-list"); + const row = document.createElement("tr"); + list.appendChild(row); + row.innerHTML = + "" + book.title + "" + + "" + book.author + "" + + "" + book.isbn + "" + + "" + ; + }, + + clearFields : function() { + document.getElementById("title").value = ""; + document.getElementById("author").value = ""; + document.getElementById("isbn").value = ""; + }, + + deleteBook : function(target) { + if (target.classList.contains("delete")) { + target.parentElement.parentElement.remove(); + } + }, + + showAlert : function(message , className) { + const div = document.createElement("div"); + div.className = "alert alert-" + className + " mt-1"; + + const firstForm = document.querySelector(".container div"); + const container = document.querySelector(".container"); + container.insertBefore(div , firstForm); + div.innerText = message; + + //disappear after 2.5sec + setTimeout(() => div.remove(),2500); + } +}; + + +//Store object: Handle storage +const store = { + getBooks : function() { + let books; + if (localStorage.getItem("books") === null){ + books = []; + }else{ + books = JSON.parse(localStorage.getItem("books")); + } + return books + }, + + addBook : function(book) { + const books = store.getBooks(); + books.push(book); + localStorage.setItem("books" , JSON.stringify(books)); + }, + + removeBook : function(isbn) { + const books = store.getBooks(); + + books.forEach((book , index) => { + if (book.isbn === isbn){ + books.splice(index , 1); + } + }) + + localStorage.setItem("books" , JSON.stringify(books)); + } + +} + + +//Event: Display books that are storage +document.addEventListener("DOMContentLoaded",UI.displayBooks); + + +//Event: Add book + //catch the values when submit clicked +document.querySelector("button").addEventListener("click",() => { + const title = document.getElementById("title").value; + const author = document.getElementById("author").value; + const isbn = document.getElementById("isbn").value; + + //validate + if (title === "" || author === "" || isbn === ""){ + UI.showAlert("Please fill the fields..." , "danger"); + }else{ + //create a new book using the Book constructor + const book = new Book(title,author,isbn); + + //Add book to UI + UI.addBookToList(book); + + //Add book to Store + store.addBook(book); + + //show alert that book added successfully + UI.showAlert("The book is added..." , "success"); + + //Clear Fields + UI.clearFields(); + } +}) + +//Event: Remove a book +document.getElementById("book-list").addEventListener("click",(e) => { + //remove from UI + UI.deleteBook(e.target); + + //remove book from store + store.removeBook(e.target.parentElement.previousSibling.innerText); + + //show alert that book removed + UI.showAlert("Book removed..." , "success"); +}); \ No newline at end of file diff --git a/Week3/homework/booklist-app/index.html b/Week3/homework/booklist-app/index.html new file mode 100644 index 000000000..62c529150 --- /dev/null +++ b/Week3/homework/booklist-app/index.html @@ -0,0 +1,54 @@ + + + + + + + Booklist App + + + + + + + +
+
+ +

MyBookList

+
+
+ + +
+
+ + +
+
+ + +
+ + + + + + + + + +
TitleAuthorISBN
+
+ + + + + + \ No newline at end of file diff --git a/Week3/homework/js-exercises/add-six.js b/Week3/homework/js-exercises/add-six.js new file mode 100644 index 000000000..113d1a001 --- /dev/null +++ b/Week3/homework/js-exercises/add-six.js @@ -0,0 +1,13 @@ +"use strict"; + +function createBase(base){ + return function(num){ + console.log(base + num); + } +} +//store the closure in a variable +const addSix = createBase(6); +//call function three times +addSix(9); +addSix(18); +addSix(30); diff --git a/Week3/homework/js-exercises/duplicates-out.js b/Week3/homework/js-exercises/duplicates-out.js new file mode 100644 index 000000000..b59d9d93d --- /dev/null +++ b/Week3/homework/js-exercises/duplicates-out.js @@ -0,0 +1,18 @@ +"use strict"; + +function removeDuplicates(arr){ + for (let i = 0; i < arr.length - 1; i++){ + for (let x = i + 1; x < arr.length; x++){ + if (arr[i] === arr[x]){ + arr[x] = null; + } + } + } + return arr + .filter(letter => letter !== null) + .sort(); +} + +const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; + +console.log(removeDuplicates(letters)); \ No newline at end of file diff --git a/Week3/homework/js-exercises/guess-more.js b/Week3/homework/js-exercises/guess-more.js new file mode 100644 index 000000000..dea5d92b2 --- /dev/null +++ b/Week3/homework/js-exercises/guess-more.js @@ -0,0 +1,21 @@ +// Snippet +const x = 9; +function f1(val) { + val = val + 1; + return val; +} +f1(x); +console.log(x); + +const y = { x: 9 }; +function f2(val) { + val.x = val.x + 1; + return val; +} +f2(y); +console.log(y); + +/* At first it will console.log the value of '9'. Thats because the function 'f1' +will return the value of '10' but that is not affect the variable 'x'. +After that it will console.log the object 'y' as 'x : 10' because 'y' is an object +and the value of the key 'x' will change to '10'. */ \ No newline at end of file diff --git a/Week3/homework/js-exercises/guess-the-output.js b/Week3/homework/js-exercises/guess-the-output.js new file mode 100644 index 000000000..477eb4774 --- /dev/null +++ b/Week3/homework/js-exercises/guess-the-output.js @@ -0,0 +1,17 @@ +// Snippet +let a = 10; +const x = (function() { + a = 12; + return function() { + alert(a); + }; +})(); + +x(); + + +/* The 'a' at the begining initialize with '10'. +Inside the function 'x', the 'a' changes to '12' and function 'x' +returns an another function that makes an alert with the value of 'a' and function 'x' +calls this returning function. +So the call of function 'x' will show an alert with the value '12' */ \ No newline at end of file diff --git a/Week3/homework/js-exercises/lottary-machine.js b/Week3/homework/js-exercises/lottary-machine.js new file mode 100644 index 000000000..c4e847d7e --- /dev/null +++ b/Week3/homework/js-exercises/lottary-machine.js @@ -0,0 +1,32 @@ +"use strict"; + +function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { + const numbers = []; + + // make array + for (let num = startIndex; num <= stopIndex; num++){ + numbers.push(num); + } + + // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next + numbers.forEach(num => { + if (num % 3 === 0) threeCallback(); + if (num % 5 === 0) fiveCallback(); + }) +} + +//If num divided by 3 +function sayThree(){ + console.log("Three"); +} + +//If num divided by 5 +function sayFive(){ + console.log("Five"); +} + + +threeFive(10, 15, sayThree, sayFive); + +// Should create an array [10,11,12,13,14,15] +// and call sayFive, sayThree, sayThree, sayFive \ No newline at end of file diff --git a/Week3/homework/tip-calculator/index.html b/Week3/homework/tip-calculator/index.html new file mode 100644 index 000000000..f5770c21f --- /dev/null +++ b/Week3/homework/tip-calculator/index.html @@ -0,0 +1,44 @@ + + + + + + + Tip Calculator + + + +
+

TIP CALCULATOR

+
+

How much was your bill?

+ $ + +
+
+

How was your service?

+ +
+
+

How many people are sharing the bill?

+ + people +
+
+ +
+
+

TIP AMOUNT

+

$ 0.00

+

each

+
+
+ + + + \ No newline at end of file diff --git a/Week3/homework/tip-calculator/tip.css b/Week3/homework/tip-calculator/tip.css new file mode 100644 index 000000000..16c6403ef --- /dev/null +++ b/Week3/homework/tip-calculator/tip.css @@ -0,0 +1,92 @@ +body{ + background-image: linear-gradient(to right, #3f1a13 , #6e1409); + font-family: serif; + font-size: 1.5em; + user-select: none; /* supported by Chrome and Opera */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ +} + +.calculator{ + margin: 10vh auto 0 auto; + width: fit-content; + padding: 0px 25px 25px 25px; + border: 1px solid black ; + border-radius: 25px; + background-color: white; +} + +h2{ + margin-top: 0; + background-color: black; + color: white; + text-align: center; + margin: 0 -25px; + border-radius: 23px 23px 0 0; + font-weight: 100; + font-size: 1em; + padding: 17px; +} + +input{ + width: 60%; + font-size: 0.7em; + padding: 5px; + outline: none; +} + +select{ + width: 80%; + font-size: 1.2em; + text-align: center; + outline: none; +} + +form:nth-of-type(2){ + text-align: center; +} + +form:nth-of-type(2) p{ + text-align: left; +} + +button{ + background-color: #a75323; + color: white; + font-size: 1.3em; + text-align: center; + margin-top: 35px; + padding: 13px; + outline: none; +} + +.btn{ + text-align: center; +} + +.tip-amount{ + text-align: center; + line-height: 2.5px; +} + + +@media all and (max-width:439px){ + body{ + font-size: 1.2em; + } + + form:nth-of-type(2){ + text-align: left; + } + + select{ + width: 100%; + font-size: 1em; + } + + .calculator{ + margin: 1vh auto 0 auto; + } +} \ No newline at end of file diff --git a/Week3/homework/tip-calculator/tip.js b/Week3/homework/tip-calculator/tip.js new file mode 100644 index 000000000..df4e6e344 --- /dev/null +++ b/Week3/homework/tip-calculator/tip.js @@ -0,0 +1,74 @@ +//constractor function with the three key-value pairs +function Inputs(bill , service , people){ + this.bill = bill; + this.service = service; + this.people = people; +} + + +//UI object with methods that handles the UI tasks +const UI = { + dissapearTipAmount : function(){ + document.querySelector(".tip-amount").style.display = "none"; + }, + + calculate : function(inputs){ + const result = ((inputs.bill * inputs.service) / inputs.people).toFixed(2); + UI.showTipAmount(result , inputs.people); + }, + + showTipAmount : function(result , people){ + document.getElementById("result").innerText = "$ " + result; + document.querySelector(".tip-amount").style.display = "block"; + //if there is only one person dissapear the word "each" from UI + if (people === "1"){ + document.getElementById("each").style.display = "none"; + } + }, + + showAlert : function(){ + alert("Please fill all the fields.."); + }, + + clearFields : function(){ + document.getElementById("bill").value = ""; + document.getElementById("service").value = "0.3"; + document.getElementById("people").value = ""; + } +} + + +//at the begining dissapear the tip-amount +UI.dissapearTipAmount(); + + +//Event: click button 'CALCULATE!' +const btn = document.querySelector("button"); +btn.addEventListener("click" , function(){ + //create an Inputs object + const bill = document.getElementById("bill").value; + const service = document.getElementById("service").value; + const people = document.getElementById("people").value; + + const inputs = new Inputs(bill , service, people); + + //if click button without fill all fields, show an alert that 'must fill all' + if (inputs.bill === "" || inputs.people === ""){ + UI.showAlert(); + }else { + //calculate tip amount-per person and show it + UI.calculate(inputs); + + } +}) + + +//Event: input to fields + const calculator = document.querySelector(".calculator"); + calculator.addEventListener("click" , function(e){ + if(e.target.className === "input" && document.querySelector(".tip-amount").style.display === "block") { + UI.dissapearTipAmount(); + UI.clearFields(); + } + }) + //dissapear the result of tip-amount \ No newline at end of file From 6324d6fe872a2dcb5ca0ecfc8c25aae92b1b916d Mon Sep 17 00:00:00 2001 From: ligopsychakis-michalis Date: Fri, 31 Jan 2020 08:44:11 +0200 Subject: [PATCH 2/3] dissapear 'eash' when person=1 --- Week3/homework/.DS_Store | Bin 8196 -> 8196 bytes Week3/homework/tip-calculator/tip.js | 6 +++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Week3/homework/.DS_Store b/Week3/homework/.DS_Store index 8fddea93faa395d7388beec162a985a6dd081e14..b718413fdc40cb39857bef3929996777b90d7559 100644 GIT binary patch delta 32 ocmZp1XmOa}&&a Date: Tue, 4 Feb 2020 09:05:41 +0200 Subject: [PATCH 3/3] id to every issue-card --- Week1/homework/issue-tracker/issue-tracker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Week1/homework/issue-tracker/issue-tracker.js b/Week1/homework/issue-tracker/issue-tracker.js index 137b160ae..3df5867e6 100644 --- a/Week1/homework/issue-tracker/issue-tracker.js +++ b/Week1/homework/issue-tracker/issue-tracker.js @@ -13,7 +13,8 @@ function assignmentCard(desc , sev , assign , num){ addCard.id = "card" + num //change the id in order to every issue card has a different id //HTML code for every new issue card - addCard.innerHTML = "

Open

" + + addCard.innerHTML = "

ID: " + (new Date()).getTime() + "

" + + "

Open

" + "

" + desc.value + "

" + "

" + " " + sev.value + "" + " " + assign.value + "

" +