ubilabs · ArvedBoetefuer · Nov 15, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/01-html/README.md b/01-html/README.md
@@ -1,4 +1,5 @@
 ### UBILABS TEST 1
+
 # HTML
 
 Let start with an simple HTML test.
@@ -7,9 +8,9 @@ Let start with an simple HTML test.
 
 Create an HTML page that shows a simple login form with a button, an email and a password field. As soon as the user hits "submit", the page should prevent them from submitting the form with a simple message when something is wrong.
 
-* Must work in latest Chrome.
-* No styling needed.
-* Keep it as simple as possible.
+- Must work in latest Chrome.
+- No styling needed.
+- Keep it as simple as possible.
 
 Sounds easy. And it is easy if done right.
 

diff --git a/01-html/index.html b/01-html/index.html
@@ -1 +1,18 @@
-Add your solution here.
+<!DOCTYPE html>
+<html>
+    <body>
+        <form>
+            <label for="email">
+                Email:
+            </label>
+            <br>
+            <input type="email" id="email">
+            <br>
+            <label for="pw"> Password:</label>
+            <br>
+            <input type="password" id="pw">
+            <br>
+            <input type="submit" value="Login">
+        </form>
+    </body>
+</html>
diff --git a/02-js/index.js b/02-js/index.js
@@ -14,11 +14,31 @@ function zeroFill( number, width )
 
 Code review:
 
-- 
-- 
+- line 2, what is number? what is width?
+- line 2, method name does not fully conclude what happends in itself or write a more explaining comment.
+- line 3 would open method after parameters in line 2.
+- line 4-8 styleguide. Move method body to the right.
+- line 7, actually never seen something like that. What is '/\./.test'?
 - 
 
 */
 
 
 // your solution:
+
+/*
+@Method zeroFillIntergerAsString
+This method aims to return a String, wich is constructed by to intergers. 
+first one beeing 'numberstoZeroFill' and lenghOfZeroFilling.
+@param 'numberToZeroFill' the number we want to turn into a string with X leading Zeros
+@param 'lenghOfZeroFilling' the total lengh of the string we want to return.
+@return String 'zeroFilledNumber'
+*/
+function zeroFillIntergerAsString(numberToZeroFill, lenghOfZeroFilling){
+
+    //.padStart() method is used to pad a number with leading zeros. It takes two parameters,
+    // the first one is the total length of the string, and the other one is the string or character the user wants to use for padding.
+    let zeroFilledNumber = numberToZeroFill.toString().padStart(lenghOfZeroFilling,'0');
+
+    return zeroFilledNumber;  
+}
diff --git a/03-css/index.css b/03-css/index.css
@@ -0,0 +1,80 @@
+.timer{
+    background: -webkit-linear-gradient(left, rgb(92, 0, 69) 50%, #eee 50%);
+    /* Foreground color, Background colour */
+    border-radius: 100%;
+    height: 200px;
+    /* Height and width */
+    position: relative;
+    width: 200px;
+    /* Height and width */
+    -webkit-animation: time 10s steps(10, start) infinite;
+    /* Animation time and number of steps */
+}
+.outerCircle {
+    border-radius: 100% 0 0 100% / 50% 0 0 50%;
+    height: 100%;
+    left: 0;
+    position: relative;
+    top: 0;
+    width: 50%;
+    z-index:0;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-animation: mask 10s steps(5, start) infinite;
+    /* Animation time and number of steps (halved) */
+    -webkit-transform-origin: 100% 50%;
+}
+.innerCircle{
+    position: relative;
+    width:70%;
+    z-index:1;
+    background: linear-gradient(grey, grey) content-box no-repeat, conic-gradient(blue 25%, 0, green ) border-box;
+    display:flex;
+    justify-content: center;
+}
+
+@-webkit-keyframes time {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+@-webkit-keyframes mask {
+    0% {
+        background: #eee;
+        /* Background colour */
+        -webkit-transform: rotate(0deg);
+    }
+    50% {
+        background: #eee;
+        /* Background colour */
+        -webkit-transform: rotate(-180deg);
+    }
+    50.01% {
+        background: rgb(92, 0, 69);
+        /* Foreground colour */
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        background: rgb(92, 0, 69);
+        /* Foreground colour */
+        -webkit-transform: rotate(-180deg);
+    }
+}
+.outer-circle{
+    position: relative;
+    width:90%;
+    background: linear-gradient(grey, grey) content-box no-repeat, conic-gradient(yellow 70%, 0, green ) border-box;
+    z-index:0;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+}
+.inner-circle{
+    position: relative;
+    width:70%;
+    z-index:1;
+    background: linear-gradient(grey, grey) content-box no-repeat, conic-gradient(blue 25%, 0, green ) border-box;
+    display:flex;
+    justify-content: center;
+}
diff --git a/03-css/index.html b/03-css/index.html
@@ -1 +1,13 @@
-Add your solution here.
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="index.css">
+        </head>
+    <body>
+        <div class="timer">
+            <div class="outerCircle">
+                <div class="innerCircle"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/04-map/README.md b/04-map/README.md
@@ -1,23 +1,24 @@
-### UBILABS TEST 4 
+### UBILABS TEST 4
+
 # Google Maps
 
 The last test focusses on basic map with markers.
 
 ### Your task
 
-* Create a full-screen Google Map.
-* Use V3 of the JavaScript API.
-* Place 200 random markers.
-* Add a click handler to the markers.
-* On click, highlight the closest 10 markers.
-* Bonus: use React to create the demo
+- Create a full-screen Google Map.
+- Use V3 of the JavaScript API.
+- Place 200 random markers.
+- Add a click handler to the markers.
+- On click, highlight the closest 10 markers.
+- Bonus: use React to create the demo
 
 This might take you some time to solve. But do not spend more than an hour and send me the last working version, even if it is not perfect.
 
 Two links to get you started:
 
-* https://developers.google.com/maps/documentation/javascript/reference
-* https://developers.google.com/maps/documentation/javascript/examples/
+- https://developers.google.com/maps/documentation/javascript/reference
+- https://developers.google.com/maps/documentation/javascript/examples/
 
 Note: We will sent you a API key that should work on Stackblitz and localhost:1337.
 

diff --git a/04-map/index.html b/04-map/index.html
@@ -1,14 +1,43 @@
-Add your solution here. <br>
-Hint: Ask Ubilabs for the temporary API key.
+<html>
+  <head>
+    <title>Simple Map</title>
+
+    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",
+      c="google",
+      l="importLibrary",
+      q="__ib__",m=document,
+      b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),
+      r=new Set,
+      e=new URLSearchParams,
+      u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
+        ({key: "AIzaSyBE3_KcCXDP6Jlsh3m0375akqXfEZmCIwc", v: "weekly"});</script>
+    <link rel="stylesheet" href="style.css">
+
+  </head>
+  <body>
+
+    <div id="map"></div>
+
+    <script>
+      let map;
+
+      async function initMap() {
+        const { Map } = await google.maps.importLibrary("maps");
+
+        map = new Map(document.getElementById("map"), {
+         center: { lat: -34.397, lng: 150.644 },
+         zoom: 8,
+        });
+      }
+
+      initMap();
+    </script>
+
+  </body>
+</html>
+
+
 
 
-<div id="map" style="height: 800px;"></div>
 
-<script src="https://maps.googleapis.com/maps/api/js?key=ASK_UBILABS_FOR_KEY"></script>
 
-<script>
-  new google.maps.Map(document.getElementById('map'), {
-    center: {lat: -34.397, lng: 150.644},
-    zoom: 8
-  });
-</script>
diff --git a/04-map/style.css b/04-map/style.css
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* 
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+ #map {
+    height: 100%;
+  }
+
+  /* 
+   * Optional: Makes the sample page fill the window. 
+   */
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "author": "[email protected]",
   "license": "ISC",
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.2",
     "http-server": "^14.1.1"
   }
 }