diff --git a/01-html/README.md b/01-html/README.md index b4a256a..7e66bb5 100644 --- 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 index cf02e85..5113380 100644 --- a/01-html/index.html +++ b/01-html/index.html @@ -1 +1,18 @@ -Add your solution here. \ No newline at end of file + + + +
+ +
+ +
+ +
+ +
+ +
+ + \ No newline at end of file diff --git a/02-js/index.js b/02-js/index.js index 0ba6359..e5e27f7 100644 --- 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; +} \ No newline at end of file diff --git a/03-css/index.css b/03-css/index.css new file mode 100644 index 0000000..82ae5f5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/03-css/index.html b/03-css/index.html index cf02e85..fe3071c 100644 --- a/03-css/index.html +++ b/03-css/index.html @@ -1 +1,13 @@ -Add your solution here. \ No newline at end of file + + + + + + +
+
+
+
+
+ + \ No newline at end of file diff --git a/04-map/README.md b/04-map/README.md index e62d83d..79cb045 100644 --- 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 index 6ee9f57..dbb8b56 100644 --- a/04-map/index.html +++ b/04-map/index.html @@ -1,14 +1,43 @@ -Add your solution here.
-Hint: Ask Ubilabs for the temporary API key. + + + Simple Map + + + + + + + +
+ + + + + + + -
- - \ No newline at end of file diff --git a/04-map/style.css b/04-map/style.css new file mode 100644 index 0000000..17be80c --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/package.json b/package.json index 1460812..2208897 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "author": "kleppe@ubilabs.com", "license": "ISC", "dependencies": { + "@googlemaps/js-api-loader": "^1.16.2", "http-server": "^14.1.1" } }