diff --git a/Week1/homework/jsexercises/AboutMe/about_me.html b/Week1/homework/jsexercises/AboutMe/about_me.html new file mode 100644 index 000000000..83138c8f9 --- /dev/null +++ b/Week1/homework/jsexercises/AboutMe/about_me.html @@ -0,0 +1,22 @@ + + + + + About Me + + + +

About Me

+ + + + + \ No newline at end of file diff --git a/Week1/homework/jsexercises/AboutMe/about_me.js b/Week1/homework/jsexercises/AboutMe/about_me.js new file mode 100644 index 000000000..197eebc8a --- /dev/null +++ b/Week1/homework/jsexercises/AboutMe/about_me.js @@ -0,0 +1,32 @@ + +let changeStyles = function(){ + let bodyEl = document.querySelector("body"); + let firstSpanEl = document.querySelector("#nickname"); + let secondSpanEl = document.querySelector("#fav-food"); + let thirdSpanEl = document.querySelector("#hometown"); + let liEls = document.querySelectorAll("li"); + + // Step 2 + bodyEl.style.fontFamily = "Arial, sans-serif"; + + // Step 3 + firstSpanEl.innerHTML = "El Barto"; + secondSpanEl.innerHTML = "Lasagna"; + thirdSpanEl.innerHTML = "Heraklion"; + + // step 4 + for(let i=0; i + + + + + Credit Card Validator + + + + +
 
+ + +
+

MY FAVORITE BOOKS

+ +
+ + +
 
+ + + diff --git a/Week1/homework/jsexercises/BookLists/img/book1.jpg b/Week1/homework/jsexercises/BookLists/img/book1.jpg new file mode 100644 index 000000000..c7d7d3959 Binary files /dev/null and b/Week1/homework/jsexercises/BookLists/img/book1.jpg differ diff --git a/Week1/homework/jsexercises/BookLists/img/book2.jpg b/Week1/homework/jsexercises/BookLists/img/book2.jpg new file mode 100644 index 000000000..54fbf7994 Binary files /dev/null and b/Week1/homework/jsexercises/BookLists/img/book2.jpg differ diff --git a/Week1/homework/jsexercises/BookLists/img/book3.jpg b/Week1/homework/jsexercises/BookLists/img/book3.jpg new file mode 100644 index 000000000..db044ae13 Binary files /dev/null and b/Week1/homework/jsexercises/BookLists/img/book3.jpg differ diff --git a/Week1/homework/jsexercises/CatWalk/catWalk.css b/Week1/homework/jsexercises/CatWalk/catWalk.css new file mode 100644 index 000000000..67b15f922 --- /dev/null +++ b/Week1/homework/jsexercises/CatWalk/catWalk.css @@ -0,0 +1,38 @@ +* { +padding: 0px; +margin: 0px; +box-sizing: border-box; +} + +body div { + height: 100vh; + float: left; + display: flex; + flex-flow: column wrap; + align-items: center; + color: white; +} + +h1 { + margin-top: 50px; +} + +p { + margin-top: 30px; + font-size: 600%; +} + +.leftSide { + width: 20%; + background: rgb(44, 43, 43); +} + +.centerSide { + width: 60%; + background: rgb(0, 0, 0); +} + +.rightSide { + width: 20%; + background: rgb(44, 43, 43); +} diff --git a/Week1/homework/jsexercises/CatWalk/catWalk.html b/Week1/homework/jsexercises/CatWalk/catWalk.html new file mode 100644 index 000000000..c690ef12f --- /dev/null +++ b/Week1/homework/jsexercises/CatWalk/catWalk.html @@ -0,0 +1,12 @@ + + + + + Cat Walk + + + + + + + \ No newline at end of file diff --git a/Week1/homework/jsexercises/CatWalk/catWalk.js b/Week1/homework/jsexercises/CatWalk/catWalk.js new file mode 100644 index 000000000..766102794 --- /dev/null +++ b/Week1/homework/jsexercises/CatWalk/catWalk.js @@ -0,0 +1,58 @@ +var startTime = new Date().getTime(); +var flag = true; +var cycleCounter = 0; +var cycleTime = 0; +var newPosition = 0; +// STEP 2 +var imgEl = document.querySelector("img"); + +let initialConditions = function(imgEl){ +// STEP 3 +imgEl.style.left = "0px"; +imgEl.style.margin = 0; +imgEl.style.padding = 0; +}; + +// STEP 4 +let catWalk = function(){ + let currTime = new Date().getTime(); + + // STEP 7 + if (newPosition >= (screen.width/2 - imgEl.width/2) && cycleCounter < 5){ + + if(flag === true){ + imgEl.src = "https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424"; + cycleTime = currTime; + flag = false; + } + + cycleCounter = (currTime - cycleTime)/1000; + if(cycleCounter < 5){ + newPosition = screen.width/2 - imgEl.width/2; + } else{ + imgEl.src = "http://www.anniemation.com/clip_art/images/cat-walk.gif"; + startTime += cycleCounter * 1000; + } + + } else { + newPosition = ((currTime - startTime)/50) * 10; + } + + // STEP 5 + if (newPosition > (screen.width - imgEl.width)){ + startTime = currTime; + cycleCounter = 0; + flag = true; + newPosition = 0; + } + + imgEl.style.left = newPosition + "px"; + window.requestAnimationFrame(catWalk); +}; + +function main(){ + initialConditions(imgEl); + catWalk(); +} + +main(); diff --git a/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.html b/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.html new file mode 100644 index 000000000..600b04873 --- /dev/null +++ b/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.html @@ -0,0 +1,15 @@ + + + + + Time + + +

Current Time

+ + + + \ No newline at end of file diff --git a/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.js b/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.js new file mode 100644 index 000000000..af6bdde23 --- /dev/null +++ b/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.js @@ -0,0 +1,18 @@ +// + +// Step 1 +let hijackGoogleLogo = function(){ +//Step 2 +let googleLogoEl = document.querySelector("#hplogo"); + +googleLogoEl.src = "https://www.hackyourfuture.dk/static/logo-dark.svg"; +googleLogoEl.srcset = "https://www.hackyourfuture.dk/static/logo-dark.svg 1x"; +} + +document.addEventListener("click", hijackGoogleLogo); + +function main(){ +// hijackGoogleLogo(); +} + +main(); diff --git a/Week1/homework/jsexercises/Project/img/quotMarkIcon.png b/Week1/homework/jsexercises/Project/img/quotMarkIcon.png new file mode 100644 index 000000000..81b77ac95 Binary files /dev/null and b/Week1/homework/jsexercises/Project/img/quotMarkIcon.png differ diff --git a/Week1/homework/jsexercises/Project/img/tIcon.png b/Week1/homework/jsexercises/Project/img/tIcon.png new file mode 100644 index 000000000..18d1b6a90 Binary files /dev/null and b/Week1/homework/jsexercises/Project/img/tIcon.png differ diff --git a/Week1/homework/jsexercises/Project/img/twitterIcon.png b/Week1/homework/jsexercises/Project/img/twitterIcon.png new file mode 100644 index 000000000..212621075 Binary files /dev/null and b/Week1/homework/jsexercises/Project/img/twitterIcon.png differ diff --git a/Week1/homework/jsexercises/Project/randomQuoteGen.css b/Week1/homework/jsexercises/Project/randomQuoteGen.css new file mode 100644 index 000000000..fd8421e31 --- /dev/null +++ b/Week1/homework/jsexercises/Project/randomQuoteGen.css @@ -0,0 +1,81 @@ +* { +padding: 0px; +margin: 0px; +box-sizing: border-box; +} + +body div { + height: 100vh; + align-items: center; + color: white; +} + +h1 { + margin-top: 50px; +} + +.principal { + width: 100%; + background: rgb(255, 165, 0); + float: center; + display: flex; + flex-flow: column wrap; +} + +.quoteContainer { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + + margin-top: 10vh; + margin-bottom: 2vh;; + height: 50vh; + width: 70vw; + background: white; + padding-top: 5%; + padding-left: 5%; + padding-right: 5%; + padding-bottom: 1%; +} + +.lower { + width: 40vw; + height: 10vh; + background: white; +} + +.quoteIcon { + width: 3vw; + height: 3vw; +} + +.quote { + padding-left: 2%; + padding-top: 0.5vw; + font-size: 2.5vw; + color: rgb(255, 165, 0); +} + +.author { + text-align: right; + font-size: 1.5vw; + width: 100%; + color: rgb(255, 165, 0); +} + +.twitter, .iconT { + padding-left: 0.5vw; + width: 3vw; + height: 3vw; +} + +.boton { + margin-left: auto; + height: 3vw; + padding-left: 1vw; + padding-right: 1vw; + border: none; + color: white; + font-size: 1.3vw; + background-color: rgb(255, 165, 0); +} \ No newline at end of file diff --git a/Week1/homework/jsexercises/Project/randomQuoteGen.html b/Week1/homework/jsexercises/Project/randomQuoteGen.html new file mode 100644 index 000000000..ba20bfa45 --- /dev/null +++ b/Week1/homework/jsexercises/Project/randomQuoteGen.html @@ -0,0 +1,25 @@ + + + + + Quote Gen + + + +
+ +
+ Quotation Marks +

+

+ + + +
+ +
lower
+ +
+ + + \ No newline at end of file diff --git a/Week1/homework/jsexercises/Project/randomQuoteGen.js b/Week1/homework/jsexercises/Project/randomQuoteGen.js new file mode 100644 index 000000000..dcb1467f1 --- /dev/null +++ b/Week1/homework/jsexercises/Project/randomQuoteGen.js @@ -0,0 +1,25 @@ +var generatedNum = 100; + +let quotes = { + quote: ["Alea iacta est", "Vestis virum reddit", "Fortes fortuna adiuvat", "Acta est fabula", + "Militiae species amor est", "Nulla dies sine línea"], + author: ["Ivlivs Caesar", "Qvintilianvs", "Qvintvs Septimivs Florente", "Caesar Avgvstvs", + "Ovidio", "Caivs Plinivs Secvndvs"] +}; + +let generateQuote = function(){ + let randomNum = Math.floor(Math.random() * 5); + + if(randomNum === generatedNum && generatedNum !== quotes.quote.length) + randomNum += 1 + + if(randomNum === generatedNum && generatedNum !== 0) + randomNum -= 1 + + generatedNum = randomNum; + document.querySelector(".quote").innerHTML = quotes.quote[randomNum]; + document.querySelector(".author").innerHTML = "- " + quotes.author[randomNum]; +}; + +document.querySelector(".boton").addEventListener("click", generateQuote); + diff --git a/Week1/homework/jsexercises/Time/showCurrentTime.js b/Week1/homework/jsexercises/Time/showCurrentTime.js new file mode 100644 index 000000000..0d8efcea5 --- /dev/null +++ b/Week1/homework/jsexercises/Time/showCurrentTime.js @@ -0,0 +1,37 @@ + +let showCurrentTime = function(){ +let timePanel = document.querySelector(".showTime"); +let today = new Date(); +let time = fixTimeView(today.getHours(), today.getMinutes(), today.getSeconds()); + +console.log(time); +timePanel.innerHTML = time; +} + +let fixTimeView = function(hours, minutes, seconds){ + let finalTime = ""; + + if(hours == 0) + finalTime += "00:" + else + finalTime += hours + ":" + + if(minutes == 0) + finalTime += "00:" + else + finalTime += minutes + ":" + + if(seconds == 0) + finalTime += "00" + else + finalTime += seconds; + + return finalTime; + +} + +function main(){ + setInterval(showCurrentTime, 1000); +} + +main(); diff --git a/Week1/homework/jsexercises/Time/time.css b/Week1/homework/jsexercises/Time/time.css new file mode 100644 index 000000000..67b15f922 --- /dev/null +++ b/Week1/homework/jsexercises/Time/time.css @@ -0,0 +1,38 @@ +* { +padding: 0px; +margin: 0px; +box-sizing: border-box; +} + +body div { + height: 100vh; + float: left; + display: flex; + flex-flow: column wrap; + align-items: center; + color: white; +} + +h1 { + margin-top: 50px; +} + +p { + margin-top: 30px; + font-size: 600%; +} + +.leftSide { + width: 20%; + background: rgb(44, 43, 43); +} + +.centerSide { + width: 60%; + background: rgb(0, 0, 0); +} + +.rightSide { + width: 20%; + background: rgb(44, 43, 43); +} diff --git a/Week1/homework/jsexercises/Time/time.html b/Week1/homework/jsexercises/Time/time.html new file mode 100644 index 000000000..86a3f32b0 --- /dev/null +++ b/Week1/homework/jsexercises/Time/time.html @@ -0,0 +1,22 @@ + + + + + Time + + + + +
 
+ + +
+

Current Time

+

+
+ + +
 
+ + + \ No newline at end of file diff --git a/Week1/homework/jsexercises/readme.txt b/Week1/homework/jsexercises/readme.txt new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/Week1/homework/jsexercises/readme.txt @@ -0,0 +1 @@ + diff --git a/Week2/homework/jsexercises/collectiveAge.js b/Week2/homework/jsexercises/collectiveAge.js new file mode 100644 index 000000000..f22a2d3c1 --- /dev/null +++ b/Week2/homework/jsexercises/collectiveAge.js @@ -0,0 +1,24 @@ + +// 1) Write a program that calculates the combined age of every member +// 2) Make use of the map function to get the ages +// 3) It should contain a function that takes a callback +// 4) The callback adds all the ages together and returns the number +// 5) The main function should log the string "The collective age of the HYF team is: [number]" +// to the console, and afterwards return the number + +function main(){ + const hackYourFutureMembers = [ + { name: 'Wouter', age: 33 }, + { name: 'Federico', age: 32 }, + { name: 'Noer', age: 27 }, + { name: 'Tjebbe', age: 22 }, + ]; + + const calculateCombinedAges = hackYourFutureMembers + .map(ages => ages.age) + .reduce((firstAge, secondAge) => firstAge + secondAge); + + console.log("The collective age of the HYF team is: " + calculateCombinedAges); +} + +main(); diff --git a/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.css b/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.css new file mode 100644 index 000000000..a0ad923c6 --- /dev/null +++ b/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.css @@ -0,0 +1,35 @@ +* { +padding: 0px; +margin: 0px; +box-sizing: border-box; +} + +body div { + height: 100vh; + align-items: center; + color: white; +} + +h1 { + margin-top: 5vh; + margin-bottom: 5vh; + color: rgb(0, 0, 0); +} + +li{ + font-size: 3vh; + color: rgb(0, 0, 0); +} + +.principal { + width: 100%; + background: rgb(255, 165, 0); + float: center; + display: flex; + flex-flow: column wrap; +} + +.quoteContainer { + +} + diff --git a/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.html b/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.html new file mode 100644 index 000000000..76b6a1e91 --- /dev/null +++ b/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.html @@ -0,0 +1,21 @@ + + + + + Quote Gen + + + +
+ +
+

My favorite Hobbies

+
    +
+
+ + +
+ + + \ No newline at end of file diff --git a/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.js b/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.js new file mode 100644 index 000000000..69f0f6048 --- /dev/null +++ b/Week2/homework/jsexercises/favoriteHobbies/favoriteHobbies.js @@ -0,0 +1,15 @@ +const myHobbies = [ + 'Meditation', + 'Reading', + 'Programming', + 'Hanging out with friends', + 'Going to the gym', + ]; + + myHobbies.forEach(element => { + let listElement = document.createElement("li"); + let text = document.createTextNode(element); + listElement.appendChild(text); + document.querySelector(".listaHobbies").appendChild(listElement); + console.log(text); + }) diff --git a/Week2/homework/jsexercises/lemonAllergy.js b/Week2/homework/jsexercises/lemonAllergy.js new file mode 100644 index 000000000..3d241e348 --- /dev/null +++ b/Week2/homework/jsexercises/lemonAllergy.js @@ -0,0 +1,9 @@ + // Write a function + // Use the filter array function to take out the lemons + // Output a string that says: "My mom bought me a fruit basket, containing [array of fruits] !" + +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; + +const fruitsWithoutLemons = fruitBasket.filter(fruit => fruit.toLowerCase() !== "lemon"); + +console.log("My mom bought me a fruit basket, containing " + fruitsWithoutLemons.join(", ") + "."); \ No newline at end of file diff --git a/Week2/homework/jsexercises/mondayWorth.js b/Week2/homework/jsexercises/mondayWorth.js new file mode 100644 index 000000000..c5fe94667 --- /dev/null +++ b/Week2/homework/jsexercises/mondayWorth.js @@ -0,0 +1,38 @@ +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, + }, + ]; + + +// 1) Write a program that finds out what your hourly rate on a Monday would be +// 2) Use the map array function to take out the duration time for each task. +// 3) Multiply each duration by a per-hour rate for billing and sum it all up. +// 4) Output a formatted Euro amount, rounded to Euro cents, e.g: €11.34. +// 5) Make sure the program can be used on any array of objects that contain a duration property with a +// number value + +// STEP 1 +const hourSalary = 25; + +const mondaySalaryRate = mondayTasks + .map(tasks => isNaN(tasks.duration) === false ? (tasks.duration/60) * hourSalary : + console.log("Wrong duration time...")) // STEP 2 & STEP 3 + .reduce((acc, newVal) => acc + newVal); // STEP 3 + +console.log("€ " + mondaySalaryRate.toFixed(2)); // STEP 4 + + diff --git a/Week2/homework/jsexercises/oddOnesOut.js b/Week2/homework/jsexercises/oddOnesOut.js new file mode 100644 index 000000000..7ebce8806 --- /dev/null +++ b/Week2/homework/jsexercises/oddOnesOut.js @@ -0,0 +1,19 @@ +// function doubleEvenNumbers(numbers) { +// const newNumbers = []; +// for (let i = 0; i < numbers.length; i++) { +// if (numbers[i] % 2 === 0) { +// newNumbers.push(numbers[i] * 2); +// } +// } +// return newNumbers; +// } + +// const myNumbers = [1, 2, 3, 4]; +// console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console + + // Using the map and filter functions, rewrite the doubleEvenNumbers function. + + const myNumbers = [1, 2, 3, 4]; + + const doubleEvenNumbers = myNumbers.filter(number => number % 2 === 0).map(number => number *2); + console.log(doubleEvenNumbers); diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/BelagianaFlowersDEMORegular.ttf b/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/BelagianaFlowersDEMORegular.ttf new file mode 100644 index 000000000..b34b0051f Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/BelagianaFlowersDEMORegular.ttf differ diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/BelagianaFlowersDEMOSans.ttf b/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/BelagianaFlowersDEMOSans.ttf new file mode 100644 index 000000000..d1c98fb2c Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/BelagianaFlowersDEMOSans.ttf differ diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/DEMO - PERSONAL USE ONLY.txt b/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/DEMO - PERSONAL USE ONLY.txt new file mode 100644 index 000000000..531bdec98 --- /dev/null +++ b/Week2/homework/jsexercises/pomodoroClock/fonts/belagiana/DEMO - PERSONAL USE ONLY.txt @@ -0,0 +1,39 @@ +PLEASE READ THIS CAREFULLY : + +By installing or using this font, you are agree to the Product Usage Agreement: + +- This font is a DEMO VERSION and ONLY allowed for PERSONAL USE. NO COMMERCIAL USE ALLOWED! + +- Here is the link to purchase full version and commercial license: +https://edricstudio.com/belagiana-flowers-font/ + +- For Corporate use, you have to purchase Corporate license + +- If you need a custom license please contact us by email : font@edricstudio.com + +Please visit our store for more amazing fonts : https://edricstudio.com + +Follow our instagram for news, product release and updates : https://instagram.com/studioedric + +Thank you. + +------------------- + +INDONESIA: + +Dengan meng-install font ini, anda dianggap mengerti dan menyetujui semua syarat dan ketentuan penggunaan font dibawah ini: + +- Font demo ini hanya dapat digunakan untuk keperluan "Personal Use"/kebutuhan pribadi, atau untuk keperluan yang sifatnya tidak "komersil", alias tidak menghasilkan profit atau keuntungan dari hasil memanfaatkan/menggunakan font kami. Baik itu untuk individu, Agensi Desain Grafis, Percetakan, Distro atau Perusahaan/Korporasi. + +- Silakan gunakan lisensi komersial dengan membeli melalui link ini : +https://edricstudio.com/belagiana-flowers-font/ + +- Dengan hanya lisensi "Personal Use", DILARANG KERAS menggunakan atau memanfaatkan font ini untuk kepeluan Komersial, baik itu untuk Iklan, Promosi, TV, Film, Video, Motion Graphics, Youtube, Desain kaos distro atau untuk Kemasan Produk (baik Fisik ataupun Digital) atau Media apapun dengan tujuan menghasilkan profit/keuntungan. + +- Untuk penggunaan keperluan Perusahaan/Korporasi silakan menggunakan Corporate License. + +- Menggunakan font ini dengan lisensi "Personal Use" untuk kepentingan Komersial apapun bentuknya TANPA IZIN dari kami, akan dikenakan biaya CORPORATE LICENSE. + +Informasi tentang Lisensi apa yang akan anda perlukan, silahkan menghubungi kami di email : font@edricstudio.com + +Terima kasih. \ No newline at end of file diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DIGITAL.TXT b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DIGITAL.TXT new file mode 100644 index 000000000..484dd4775 --- /dev/null +++ b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DIGITAL.TXT @@ -0,0 +1,40 @@ +DS-Font's TrueType Fonts +Font name: DS-Digital (Normal, Bold, Italic, Bold Italic), Version 1.0 +Author: Dusit Supasawat +Web Site: http://ds-font.hypermart.net +Contact me: Dusit Supasawat, 325/38 Suksawat32 Ratburana Bangkok Thailand 10140 +Email address: dusit@mailcity.com + +Thanks for trying! We hope you really enjoy this my typeface. This font is +distributed as shareware. You can use this font for a long time as you want. +After all, when you think this font can be usefulness for you. You can send +me some money, that would be way cool. + +I'm only asking $20 US shareware fee per this typeface for personal use. +And $45 US is the usual amount per this typeface for commercial use. + +Distribution: You are free to distribute this archive so long as this text +file is distributed with the archive, the font file have not been modified, +and it is understood that the font's copyright remains with the original +author (Dusit Supasawat). + +To register send your payment to: + +Dusit Supasawat +325/38 Suksawat32 Ratburana +Bangkok Thailand 10140 + +And fill out something as this order form, and send it in with your payment. + +Font name:_________________________________________ +Your information +Name:______________________________________________ +Address:___________________________________________ +City, State : _____________________________________ +Zip Code:__________________________________________ +Country:___________________________________________ +E-MAIL address:____________________________________ + + +You will receive fonts which you order by Email after registration. These fonts +will be generated for you by specify your name in font information. \ No newline at end of file diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGI.TTF b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGI.TTF new file mode 100644 index 000000000..09258773c Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGI.TTF differ diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGIB.TTF b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGIB.TTF new file mode 100644 index 000000000..064ad478a Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGIB.TTF differ diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGII.TTF b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGII.TTF new file mode 100644 index 000000000..2aae3d8a5 Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGII.TTF differ diff --git a/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGIT.TTF b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGIT.TTF new file mode 100644 index 000000000..65642f982 Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/fonts/digital/DS-DIGIT.TTF differ diff --git a/Week2/homework/jsexercises/pomodoroClock/img/arrowDown.jpg b/Week2/homework/jsexercises/pomodoroClock/img/arrowDown.jpg new file mode 100644 index 000000000..9d700eec4 Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/img/arrowDown.jpg differ diff --git a/Week2/homework/jsexercises/pomodoroClock/img/arrowUp.jpg b/Week2/homework/jsexercises/pomodoroClock/img/arrowUp.jpg new file mode 100644 index 000000000..91bc1056a Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/img/arrowUp.jpg differ diff --git a/Week2/homework/jsexercises/pomodoroClock/img/pause.jpg b/Week2/homework/jsexercises/pomodoroClock/img/pause.jpg new file mode 100644 index 000000000..edbbf3b53 Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/img/pause.jpg differ diff --git a/Week2/homework/jsexercises/pomodoroClock/img/play.jpg b/Week2/homework/jsexercises/pomodoroClock/img/play.jpg new file mode 100644 index 000000000..5bea70c3c Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/img/play.jpg differ diff --git a/Week2/homework/jsexercises/pomodoroClock/img/stop.jpg b/Week2/homework/jsexercises/pomodoroClock/img/stop.jpg new file mode 100644 index 000000000..7e5ecd8a3 Binary files /dev/null and b/Week2/homework/jsexercises/pomodoroClock/img/stop.jpg differ diff --git a/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.css b/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.css new file mode 100644 index 000000000..5408f9616 --- /dev/null +++ b/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.css @@ -0,0 +1,94 @@ +* { +padding: 0px; +margin: 0px; +box-sizing: border-box; +} + +@font-face { + font-family: chronometerFont; + src: url(fonts/digital/DS-DIGIB.TTF); + } + + @font-face { + font-family: belagiana; + src: url(fonts/belagiana/BelagianaFlowersDEMOSans.ttf); + } + +body { + height: 100%; + align-items: center; + background-color: rgb(28, 76, 80); + font-family: belagiana, Times, serif; + color: white; +} + +h1 { + margin-top: 5vh; + margin-bottom: 1vh; + font-size: 12vh; + text-align: center; +} + +img:hover { + border-style: solid; + border-width: 0.2vh; + border-color: rgb(28, 76, 80);; +} + +.principal { + width: 100%; + background: rgb(28, 76, 80); +} + +.sessionLength{ + text-align: center; + font-size: 8vh; +} + +.setterContainer, .controlTools { + float: center; + display: flex; + flex-flow: row wrap; + justify-content: center; + margin-bottom: 4vh; +} + +.setterContainer img, .controlTools img { + height: 10vh; + padding: 2vh; +} + +.controlTools img { + margin-top: 3vh; +} + +.setter { + text-align: center; + font-size: 9vh; + color: white; + width: 12vh; +} + +.chronometer { + text-align: center; + border-style: solid; + margin: 0 auto; + width: 40vw; + height: 35vh; + border-width: 2vh; + border-color: rgb(19,49,54); + border-radius: 8vh; +} + +.sessionText { + font-size: 7vh; + color: white; + padding-top: 5vh; +} + +.activeChronometer { + font-size: 12vh; + font-family: chronometerFont, Times, serif; + color: white; + padding-bottom: 5vh; +} diff --git a/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.html b/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.html new file mode 100644 index 000000000..ab61f09ab --- /dev/null +++ b/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.html @@ -0,0 +1,34 @@ + + + + + Pomodoro Clock + + + +
+ +
+

Pomodoro Clock

+

Session Length

+
+ Less seconds +

10

+ More seconds +
+
+

Session

+

25:00

+
+
+ Play + Pause + Pause +
+
+ + +
+ + + \ No newline at end of file diff --git a/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.js b/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.js new file mode 100644 index 000000000..69a6eb2e0 --- /dev/null +++ b/Week2/homework/jsexercises/pomodoroClock/pomodoroClock.js @@ -0,0 +1,85 @@ +const arrowUp = document.querySelector(".arrowUp"); +const arrowDown = document.querySelector(".arrowDown"); +const play = document.querySelector(".play"); +const pause = document.querySelector(".pause"); +const stop = document.querySelector(".stop"); + +const setterText = document.querySelector(".setter"); +const chronometerText = document.querySelector(".activeChronometer"); + +let minutes = parseInt(setterText.innerHTML); +let seconds = 0; +let stopflag = false; +let running = false; +let startClicked = false; + +const addZero = number => number<10 ? ("0" + number) : number; +const displayTime = (mins, secs) => (mins === 0 && secs === 0) ? + chronometerText.innerHTML = "Time's Up!": + chronometerText.innerHTML = addZero(minutes) + ":" + addZero(seconds); + +arrowUp.addEventListener("click", function(){ + if(minutes < 99 && running === false) { + minutes++; + setterText.innerHTML = minutes; + } +}); + +arrowDown.addEventListener("click", function(){ + if(minutes > 1 && running === false){ + minutes-- + setterText.innerHTML = minutes; + } +}); + +play.addEventListener("click", function(){ + chronometerText.innerHTML = addZero(minutes) + ":" + addZero(seconds); + stopflag = false; + running = true; + if(startClicked === false){ + startClicked = true; + startTimer(); + } +}); + +const startTimer = a => { + const timer = setInterval(function(){ + if(stopflag === true){ + clearInterval(timer); + startClicked = false; + seconds++ + } + + if(seconds === 0){ + if(minutes === 0){ + clearInterval(timer); + startClicked = false; + running = false; + seconds = 0; + } + else { + minutes--; + seconds = 59; + } + } + else + seconds--; + + displayTime(minutes, seconds); + + }, 1000) +}; + +pause.addEventListener("click", function(){ + stopflag = true; +}); + +stop.addEventListener("click", function(){ + running = false; + stopflag = true; + minutes = 25; + seconds = 0; + chronometerText.innerHTML = addZero(minutes) + ":" + addZero(seconds); + setterText.innerHTML = addZero(minutes); +}); + diff --git a/Week2/homework/jsexercises/readme.txt b/Week2/homework/jsexercises/readme.txt new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/Week2/homework/jsexercises/readme.txt @@ -0,0 +1 @@ + diff --git a/Week3/homework/jsexercises/AddSix.js b/Week3/homework/jsexercises/AddSix.js new file mode 100644 index 000000000..029259414 --- /dev/null +++ b/Week3/homework/jsexercises/AddSix.js @@ -0,0 +1,6 @@ + +// Write a function called removeDuplicates, that takes in an array as an argument: +// The function should remove duplicate letters. So the result should be: + +const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; + diff --git a/Week3/homework/jsexercises/Project/tipCalculator.css b/Week3/homework/jsexercises/Project/tipCalculator.css new file mode 100644 index 000000000..87d306c1b --- /dev/null +++ b/Week3/homework/jsexercises/Project/tipCalculator.css @@ -0,0 +1,94 @@ +* { +padding: 0px; +margin: 0px; +box-sizing: border-box; +} + +body { + height: 120vh; + align-items: left; + background-color: rgb(110,21,9); + font-family: belagiana, Times, serif; + color: white; +} + +h1 { + padding-top: 2vh; + padding-bottom: 2vh; + font-size: 4vh; + text-align: center; +} + +form{ + padding: 3vw; + padding-top: 2vw; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + background-color: white; + color: black +} + +form label{ + font-size: 25px; + padding-top: 1vw; + padding-bottom: 1vw; + display: block; +} + +form p{ + padding-top: 1vw; + padding-bottom: 1vw; + display: inline; + font-size: 3vh; +} + +form div p{ + display: block; + padding: 0; +} + +.principal { + width: 40vw; + margin-top: 10vh; + margin-left: 30vw; + margin-right: 30vw; + border-radius: 8px; + background: rgb(31, 2, 11); +} + +.principal div{ + text-align: center; +} + +#billTotal, #peopleNumber{ + height: 5vh; + width: 20vw; + font-size: 3vh; +} + +#service{ + height: 6vh; + width: 20vw; + font-size: 3vh; + font-weight: bold; +} + +.results{ + font-size: 4vh; + font-weight: bold; +} + +.resultButton{ + padding-top: 4vh; + padding-bottom: 4vh; +} + +.buttonSubmit{ + width: 18vw; + height: 8vh; + border-radius: 5px; + border-style: none; + background: rgb(172, 19, 58); + color: white; + font-size: 4vh; +} diff --git a/Week3/homework/jsexercises/Project/tipCalculator.html b/Week3/homework/jsexercises/Project/tipCalculator.html new file mode 100644 index 000000000..412d1bfe2 --- /dev/null +++ b/Week3/homework/jsexercises/Project/tipCalculator.html @@ -0,0 +1,39 @@ + + + + + Tip Calculator + + + +
+

TIP CALCULATOR

+
+ +

$

+ + + + + +

people

+
+
+ +
+

+

+

+
+
+
+ + + \ No newline at end of file diff --git a/Week3/homework/jsexercises/Project/tipCalculator.js b/Week3/homework/jsexercises/Project/tipCalculator.js new file mode 100644 index 000000000..172f9d28d --- /dev/null +++ b/Week3/homework/jsexercises/Project/tipCalculator.js @@ -0,0 +1,68 @@ +const totalBill = document.querySelector("#billTotal"); // First textbox +const service = document.querySelector("#service"); // Selector +const peopleNumber = document.querySelector("#peopleNumber"); // Second textbox +const button = document.querySelector(".buttonSubmit"); // Submit Button +const amountText = document.querySelector(".tipAmountText"); +const tip = document.querySelector(".totalTip"); +const eachText = document.querySelector(".tipEachText"); + +// Checks everytime someone type a value in the textfield +totalBill.addEventListener("input", function() { + + totalBill.value = totalBill.value.trim(); // Eliminate spaces + + if(isNaN(totalBill.value)) + totalBill.value = totalBill.value.slice(0, totalBill.value.length - 1); +}); + +peopleNumber.addEventListener("input", function() { + + peopleNumber.value = peopleNumber.value.trim(); // Eliminate spaces + + if(isNaN(peopleNumber.value) || peopleNumber.value.slice(-1) === ".") + peopleNumber.value = peopleNumber.value.slice(0, peopleNumber.value.length - 1); +}); + +/* +function filterNumbers(element){ + element.value = element.value.trim(); // Eliminate spaces + + if(isNaN(element.value)) + element.value = element.value.slice(0, element.value.length - 1); +} +*/ + +// Checks everytime someone clicked the button +button.addEventListener("click", function() { + //Checks that the two textfields are not empty + if(totalBill.value.length === 0 || peopleNumber.value.length === 0){ + alert("You need to fill in all the fields!"); + amountText.innerHTML = ""; + tip.innerHTML = ""; + eachText.innerHTML= ""; + return; + } + + if(parseInt(peopleNumber.value) === 0){ + alert("At least one person must pay!"); + amountText.innerHTML = ""; + tip.innerHTML = ""; + eachText.innerHTML= ""; + return; + } + + amountText.innerHTML = "TIP AMOUNT"; + tip.value = calculateTip(parseFloat(totalBill.value), // Calculates the tip and assignes it + parseInt(service.value), parseInt(peopleNumber.value)); // to the tip parragraph. + tip.value = parseFloat(tip.value).toFixed(2); + tip.innerHTML = "$" + tip.value; + if(parseInt(peopleNumber.value)>1) + eachText.innerHTML = "each"; + else + eachText.innerHTML = ""; + +}); + +function calculateTip(bill, percentage, numberOfPeople){ + return (bill * percentage/100)/numberOfPeople; +} \ No newline at end of file diff --git a/Week3/homework/jsexercises/guessMore.js b/Week3/homework/jsexercises/guessMore.js new file mode 100644 index 000000000..cb26787bd --- /dev/null +++ b/Week3/homework/jsexercises/guessMore.js @@ -0,0 +1,31 @@ +// 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); + + +/* + After creating the functions (f1 & f2) and the variables (x & y) starts the execution of the program: + 1) Variable x is assigned number 9. + 2) Function f1 is invoked and returns 10, however the returned value is not stored anywhere and it is + lost after the function ends. The global value x is not affected since it is passed by value to the + function. + 3) The variable x is printed (9). + 4) Variable y is assigned an object with a value 9 in its x member. + 5) Function f2 is invoked and returns 10, however the returned value is not stored anywhere and it is + lost after the function ends, however it modifies the global value since objects are passed by + reference to functions. + 6) The variable y is printed (an object with a member called x = 10). +*/ \ No newline at end of file diff --git a/Week3/homework/jsexercises/guessOutput.js b/Week3/homework/jsexercises/guessOutput.js new file mode 100644 index 000000000..76000764f --- /dev/null +++ b/Week3/homework/jsexercises/guessOutput.js @@ -0,0 +1,25 @@ + +// Snippet +let a = 10; +const x = (function() { + a = 12; + return function() { + alert(a); + }; +})(); + +x(); + + +/* + GLOBAL SCOPE + 1) Variable a is created with the value undefined + 2) Variable x is created with the value undefined + + ACTIVE PART + 1) Variable a is assigned value 10 + 2) Variable x is assigned a new function inside another function. + 3) The new function assignes 12 to variable a + 4) The variable x is called (which triggers the function inside the function, which uses the value + of variable a-12- from the closure to send an alert message with the value of variable a). +*/ \ No newline at end of file diff --git a/Week3/homework/jsexercises/lotteryMachine.js b/Week3/homework/jsexercises/lotteryMachine.js new file mode 100644 index 000000000..4fec8004d --- /dev/null +++ b/Week3/homework/jsexercises/lotteryMachine.js @@ -0,0 +1,25 @@ + +function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { + const numbers = []; + // make array with the values from start to end + for(let i=startIndex; i <= stopIndex; i++){ + numbers.push(i); + } + // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next + numbers.forEach(element => { + if(element % 3 === 0) + console.log(threeCallback()); + if(element % 5 === 0) + console.log(fiveCallback()); + }) + } + +threeFive(10, 15, sayThree, sayFive); + +function sayThree(){ + return "divisible by three"; +} + +function sayFive(){ + return "divisible by five"; +} \ No newline at end of file diff --git a/Week3/homework/jsexercises/takeOutDuplicate.js b/Week3/homework/jsexercises/takeOutDuplicate.js new file mode 100644 index 000000000..c8041d939 --- /dev/null +++ b/Week3/homework/jsexercises/takeOutDuplicate.js @@ -0,0 +1,22 @@ + +// Write a function called removeDuplicates, that takes in an array as an argument: +// The function should remove duplicate letters. So the result should be: + +const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; + +function removeDuplicates(letterArray){ + finalArray = []; + letterArray.forEach(element => { + if(!(finalArray.includes(element))){ + finalArray.push(element); + } + }); + return finalArray; +} + +console.log(removeDuplicates(letters)); + +// Create an array called finalArray that will contain the filtered data +// Iterate through the argument Array and check if the element is repeated in finalArray, if +// not add the value to finalArray +// Return finalArray \ No newline at end of file