Brussels/ 25-ITP-Dec|Data-flows/challenges/unit-testing/writing-test

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 **/node_modules
 .DS_Store
-**/.DS_Store
+**/.DS_Store
+package-lock.json

Sprint-1/destructuring/exercise-1/exercise.js

@@ -6,7 +6,7 @@ const personOne = {
 
 // Update the parameter to this function to make it work.
 // Don't change anything else.
-function introduceYourself(___________________________) {
+function introduceYourself({name, age, favouriteFood}) {
   console.log(
     `Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`
   );

Sprint-1/destructuring/exercise-2/exercise.js

@@ -70,3 +70,26 @@ let hogwarts = [
     occupation: "Teacher",
   },
 ];
+
+let gryffindor = "";
+let teatcherDog = "";
+for (let witcher of hogwarts) {
+  const {
+    firstName: name,
+    lastName: surname,
+    house,
+    pet,
+    occupation,
+  } = witcher;
+
+  const text = name + " " + surname + "\n";
+  if (house === "Gryffindor") {
+    gryffindor += text;
+    if (pet && occupation === "Teacher") {
+      teatcherDog += text;
+    }
+  }
+}
+
+console.log(`\nGryffindor Residents:\n${gryffindor}`);
+console.log(`\nGryffindor Teacher who has pet:\n${teatcherDog}`);

Sprint-1/destructuring/exercise-3/exercise.js

@@ -6,3 +6,13 @@ let order = [
   { itemName: "Hot Coffee", quantity: 2, unitPricePence: 100 },
   { itemName: "Hash Brown", quantity: 4, unitPricePence: 40 },
 ];
+const setPrice = (pricePence) => (pricePence / 100).toFixed(2)
+let total = 0;
+console.log(`${("QTY").padEnd(7)}${"ITEM".padEnd( 20)}TOTAL`);
+for (let item of order){
+  const {itemName, quantity, unitPricePence} = item;
+  const sousTotal = (quantity * unitPricePence);
+  total += sousTotal;
+  console.log(`${(quantity+"").padEnd(7)}${itemName.padEnd(20)}${setPrice(sousTotal)}`);
+}
+console.log(`\n${("TOTAL").padEnd(26)}${setPrice(total)}`);

challenges/challenge-cowsay-two/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "challenges",
+  "version": "1.0.0",
+  "description": "Javascript and node.js challenges.",
+  "keywords": [
+    "javascript",
+    "HYF"
+  ],
+  "homepage": "https://github.com/serotonine/HYF-Module-Data-Flows#readme",
+  "bugs": {
+    "url": "https://github.com/serotonine/HYF-Module-Data-Flows/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/serotonine/HYF-Module-Data-Flows.git"
+  },
+  "license": "ISC",
+  "author": "Serotonine",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "readline-sync": "^1.4.10"
+  }
+}

challenges/challenge-cowsay-two/solution1.js

@@ -4,27 +4,43 @@
 // https://nodejs.dev/learn/nodejs-accept-arguments-from-the-command-line
 // =================
 
-// 1. Accept arguments
+function drawBubble(str, lg){
+  if(!str){return}
+  let bubble = "";
+  bubble += ` ${"–".repeat(lg + 2)} \n`;
+  bubble += `< ${str} >\n`;
+  bubble += ` ${"-".repeat(lg + 2)}`;
+  console.log(bubble);
 
-// how will you accept arguments?
-
-// 2. Make supplies for our speech bubble
-
-let topLine = '_';
-let bottomLine = '-';
-let saying = '';
-
-// 3. Make a cow that takes a string
-
-function cowsay(saying) {
-// how will you make the speech bubble contain the text?
-
-// where will the cow picture go?
+}
 
-// how will you account for the parameter being empty?
+function drawCow(talk, lg){
+  const prefix = (" ").repeat(lg + 2 - Math.round(lg / 2));
+  const stucks = [
+    `${talk?"\\  ^——^":"   ^——^"}\n`,
+    `${talk?" \\ (oo)\________":"   (oo)\________"}\n`,
+    `   (__)\\       )\\/\\\n`,
+    `       ||----w |\n`,
+    `       ||     ||`
+  ].map((row)=> prefix + row);
+console.log(stucks.join(""));
 
 }
 
-//4. Pipe argument into cowsay function and return a cow
+function cowsay() {
+  // Get console argument.
+  const talk = process.argv.at(2);
+  // If no argument.
+  if(!talk){
+    console.log("No talk");
+    return;
+  }
+  const lg = talk.length;
+  drawCow(false, lg);
+  setTimeout(()=>{
+    drawBubble(talk,lg);
+    drawCow(true, lg);
+  }, 1000);
+}
 
-// how will you log this to the console?
+cowsay();

challenges/challenge-cowsay-two/solution2.js

@@ -1,18 +1,48 @@
+import readlineSync from 'readline-sync';
 // =================
 // Stripped down cowsayer CLI, 
-// no libraries or arguments
-// https://nodejs.dev/learn/accept-input-from-the-command-line-in-nodejs
+// no libraries
+// https://nodejs.dev/learn/nodejs-accept-arguments-from-the-command-line
 // =================
 
-// 1. Make  a command line interface.
+function drawBubble(str, lg){
+  if(!str){return}
+  let bubble = "";
+  bubble += ` ${"–".repeat(lg + 2)} \n`;
+  bubble += `< ${str} >\n`;
+  bubble += ` ${"-".repeat(lg + 2)}`;
+  console.log(bubble);
 
-// 2. Make supplies for our speech bubble
+}
+
+function drawCow(talk, lg=0){
+  const prefix = (" ").repeat(lg + 2 - Math.round(lg / 2));
+  const stucks = [
+    `${talk?"\\  ^——^":"   ^——^"}\n`,
+    `${talk?" \\ (oo)\________":"   (oo)\________"}\n`,
+    `   (__)\\       )\\/\\\n`,
+    `       ||----w |\n`,
+    `       ||     ||`
+  ].map((row)=> prefix + row);
+console.log(stucks.join(""));
 
-// 3. Make a cow that takes a string
+}
 
-const cow = (saying) => {
-    // how did you make the cow before?
+function cowsay() {
+    drawCow(false);
+  // Get console argument.
+  const talk = readlineSync.question('Wazz up Miss Cow? ');
+  // If no argument.
+  if(!talk){
+    console.log("Miss Cow is not very talkative...");
+    return;
+  }
+  const lg = talk.length;
+
+  setTimeout(()=>{
+    drawBubble(talk,lg);
+    drawCow(true, lg);
+  }, 1000);
 }
 
-// 4. Use readline to get a string from the terminal 
-// (with a prompt so it's clearer what we want)
+cowsay();

challenges/challenge-weather-app/assets/globals.css

@@ -12,10 +12,11 @@
 
 :root {
   --thumb-w: 80px;
-  --thumb-h: 45px;
+  --thumb-h: 80px;
   --thumbs-px: 10px;
   --thumbs-py: 10px;
   --thumbs-h: calc(var(--thumb-h) + (var(--thumbs-py) * 2));
+  --color-main:oklab(30.993% -0.01087 -0.01628);
 }
 
 html,

challenges/challenge-weather-app/assets/styles.css

@@ -1,7 +1,7 @@
 .content {
+  background-color: var(--color-main);
   display: grid;
   grid-template-rows: auto 1fr auto auto auto;
-
   height: 100vh;
   overflow: hidden;
 }
@@ -35,15 +35,14 @@
   display: grid;
   justify-content: center;
   align-content: center;
-
   overflow: hidden;
   position: relative;
   margin: 20px 0;
 }
 
 .photo::before {
-  content: "loading";
-
+  content: "loading...";
+  color:white;
   display: grid;
   justify-content: center;
   align-content: center;
@@ -58,6 +57,9 @@
   text-transform: uppercase;
   letter-spacing: 3px;
 }
+.photo.init::before{
+  content: "Please search a location";
+}
 
 .photo__dummy,
 .photo > img {
@@ -220,11 +222,11 @@
 /*----------------------------------------------------------------------------*/
 @media (min-width: 768px) {
   .title {
-    font-weight: 100;
+    font-weight: 400;
   }
 
   .thumbs {
-    justify-content: center;
+    /* justify-content: center; */
   }
 
   .controls {

challenges/challenge-weather-app/index.html

@@ -21,7 +21,9 @@ <h1 class="title">
       </h1>
     </header>
 
-    <figure class="photo" id="photo"></figure>
+    <figure class="photo init" id="photo">
+
+    </figure>
 
     <div class="info">
       <p class="info__item info__item--conditions" id="conditions"></p>
@@ -32,7 +34,8 @@ <h1 class="title">
       </p>
     </div>
 
-    <div class="thumbs" id="thumbs"></div>
+    <div class="thumbs" id="thumbs">
+    </div>
 
     <div class="controls">
       <form class="search" id="search">
@@ -44,6 +47,7 @@ <h1 class="title">
   </main>
 
   <!-- JS goes here -->
+   <script src="./js/index.js" type="module"></script>
 </body>
 
 </html>

challenges/challenge-weather-app/js/includes/dom.js

@@ -0,0 +1,43 @@
+export const dom = {
+  getDom: function () {
+    return {
+      conditions: document.getElementById("conditions"),
+      credit: document.getElementById("credit-user"),
+      searchForm: document.getElementById("search"),
+      searchLocation: document.getElementById("search-tf"),
+      thumbnails: document.getElementById("thumbs"),
+      photo: document.getElementById("photo"),
+    };
+  },
+  emptyDom: function () {
+    const elements = Object.entries(this.getDom()).filter(
+      (el) => !el.at(0).includes("search")
+    ).map((el)=> el[1]);
+    elements.forEach((el) => (el.innerHTML = ""));
+  },
+  createThumbnail: function (id, alt, src) {
+    const imgLink = document.createElement("figure");
+    imgLink.classList.add("thumbs__link");
+    const img = new Image();
+    img.classList.add("thumb");
+    img.id = id;
+    img.alt = alt;
+    img.src = src;
+    imgLink.appendChild(img);
+    return imgLink;
+  },
+  resetThumbnails: function (target) {
+    const thumbnails = this.getDom().thumbnails;
+    Array.from(thumbnails.children).forEach((el) => {
+      el.firstChild.classList.remove("active");
+    });
+    target.classList.add("active");
+  },
+  setCredit: function (credit) {
+    if(!credit){return;}
+    const { name, linkTo } = credit;
+    const cl = this.getDom().credit;
+    cl.innerHTML = name;
+    cl.href = linkTo;
+  },
+};

challenges/challenge-weather-app/js/includes/httpRequest.js

@@ -0,0 +1,42 @@
+const api_key = "05d35f8ddeb44a6e36ac85ecb2ff0e19"
+const base_url= "http://api.openweathermap.org/";
+const unsplash_api_key ="b-lWu6upAVsOuNv4vQ0l3hl52LryC0uUsXdPAsurrHQ";
+
+function fetchDatas(URL){
+  return fetch(URL)
+  .then( (response) => {
+    if(!response.ok){
+      console.dir(response);
+      throw new Error(response);
+    }
+    return response.json();
+
+  })
+    .catch((error)=> {
+      console.error(error);
+      throw error;
+    });
+  }
+
+export async function getDatas(URL){
+  try{
+  const images = await fetchDatas(URL);
+  return images;
+
+  }
+  catch(e){ 
+    console.log(e.message);
+    return null;
+
+  }
+}
+export function getGeoLocationUrl(location){
+  return `${base_url}geo/1.0/direct?q=${location}&limit=5&appid=${api_key}`;
+
+}
+export function getWeatherUrl(lat,lon){
+  return `${base_url}data/2.5/weather?lat=${lat}&lon=${lon}&appid=${api_key}`;;
+}
+export function getImagesUrl(keyword){
+  return `https://api.unsplash.com/search/photos?query=${keyword}&orientation=squarish&page=1&per_page=30&client_id=${unsplash_api_key}`
+}