Netguru Frontend recruitement task

Developer
Piotr Kozanecki
Size
8,602 Kb
Views
4,048
  1. Netguru Frontend recruitement task Previews
  2. Netguru Frontend recruitement task HTML Codes
  3. Netguru Frontend recruitement task CSS Codes
  4. Netguru Frontend recruitement task JS Codes

How do I make an netguru frontend recruitement task?

What is a netguru frontend recruitement task? How do you make a netguru frontend recruitement task? This script and codes were developed by Piotr Kozanecki on 15 January 2023, Sunday.

Netguru Frontend recruitement task Previews
IQ Test

Netguru Frontend recruitement task - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Netguru Frontend recruitement task</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html ng-app='app'> <head> <meta charset='utf-8'> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js'></script> <title>Hangman!</title> <link href='css/style.css' rel='stylesheet' type='text/css'> </head> <body ng-controller='MainController as app'> <div class='wrapper'> <div class='folk-wrapper'> <div class='hang-bar'> <div class='horizontal'></div> <div class='vertical'></div> </div> <div class='head hidden'></div> <div class='neck hidden'></div> <div class='body hidden'> <div class='left'></div> <div class='right'></div> <div class='bottom'></div> </div> <div class='arm-right hidden'></div> <div class='arm-left hidden'></div> <div class='hand-right hidden'></div> <div class='hand-left hidden'></div> <div class='leg-right hidden'></div> <div class='leg-left hidden'></div> <div class='foot-right hidden'></div> <div class='foot-left hidden'></div> </div> <div class='letters-missed'> <h5>you missed:</h5> </div> <div class='word-guessed'> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> <div class='inactive'> <div></div> </div> </div> <div class='decoration'></div> <h2 class='error-prompt hidden'>Hello</h2> </div> <div class='menu' id='menu'> <form ng-submit='init()'> <h1>HANGMAN</h1> <label>Difficulty level:</label> <select ng-model='difficulty'> <option value='easy'>EASY</option> <option value='medium'>MEDIUM</option> <option value='hard'>HARD</option> </select> <input type='submit' value='NEW WORD!'> </form> </div> <script src='js-min/controller.min.js'></script> <script src='js-min/services.min.js'></script> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Netguru Frontend recruitement task - Script Codes CSS Codes

@font-face { font-family: AllerDisplay; src: url("https://github.com/kozanecki-p/frontend-recruitment-task/blob/master/app/src/aller-display.ttf?raw=true"), local("AllerDisplay");
}
.hidden { opacity: 0; -webkit-transition: 0.5s ease-in; transition: 0.5s ease-in;
}
.removed { display: none;
}
body { background-color: #3b4163; font-family: AllerDisplay, Helvetica, sans-serif; font-size: 10px;
}
/* ---------- folk rules ------ */
.folk-wrapper { height: 63em; overflow: hidden; position: relative; width: 35em;
}
@media screen and (min-aspect-ratio: 1 / 1) { .folk-wrapper { font-size: 0.9vh; top: 5vh; }
}
@media screen and (max-aspect-ratio: 1 / 1) { .folk-wrapper { font-size: 0.9vw; top: 10vh; }
}
.folk-wrapper .hang-bar { position: relative;
}
.folk-wrapper .hang-bar .horizontal { background-color: #53555d; border-radius: 1.2em; height: 3em; left: -3em; position: relative; width: 25em;
}
.folk-wrapper .hang-bar .vertical { background-color: #53555d; height: 4em; margin: auto; position: relative; width: 3em;
}
.folk-wrapper .head { background-image: url("https://github.com/kozanecki-p/frontend-recruitment-task/blob/master/app/imgs/head.png?raw=true"); background-position: top center; background-repeat: no-repeat; background-size: contain; height: 21em; position: relative; top: -1em; z-index: 10;
}
.folk-wrapper .neck { background-color: #fece8a; height: 6.7em; margin: auto; position: relative; top: -2em; width: 4.6em; z-index: 1;
}
.folk-wrapper .body { border-radius: 1.5em; height: 16.4em; margin: auto; overflow: hidden; position: relative; top: -6em; width: 10.5em; z-index: 10;
}
.folk-wrapper .body .left { background-color: #8ac657; float: left; height: 75%; width: 50%;
}
.folk-wrapper .body .right { background-color: #4ea06a; float: right; height: 75%; width: 50%;
}
.folk-wrapper .body .bottom { background-color: #3c5a92; clear: both; height: 100%;
}
.folk-wrapper .arm-right { border-radius: 1em; height: 14em; margin: 0 auto; position: absolute; top: 28em; width: 4.5em; z-index: 9; background-color: #4ea06a; left: 15em; right: 0; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg);
}
.folk-wrapper .arm-left { border-radius: 1em; height: 14em; margin: 0 auto; position: absolute; top: 28em; width: 4.5em; z-index: 9; background-color: #8ac657; left: 0; right: 15em; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);
}
.folk-wrapper .hand-right { background-color: #fece8a; border-radius: 50%; height: 3em; margin: 0 auto; position: absolute; top: 39em; width: 3em; left: 26em; right: 0;
}
.folk-wrapper .hand-left { background-color: #fece8a; border-radius: 50%; height: 3em; margin: 0 auto; position: absolute; top: 39em; width: 3em; left: 0; right: 26em;
}
.folk-wrapper .leg-right { background-color: #3c5a92; border-radius: 1em; height: 17.5em; margin: 0 auto; position: absolute; top: 43em; width: 5em; z-index: 9; left: 8.5em; right: 0; -webkit-transform: rotateZ(-10deg); transform: rotateZ(-10deg);
}
.folk-wrapper .leg-left { background-color: #3c5a92; border-radius: 1em; height: 17.5em; margin: 0 auto; position: absolute; top: 43em; width: 5em; z-index: 9; left: 0; right: 8.5em; -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg);
}
.folk-wrapper .foot-right { background-color: #fece8a; border-radius: 1em; height: 3em; margin: 0 auto; position: absolute; top: 59em; width: 8em; left: 15em; right: 0; -webkit-transform: rotateZ(-7.5deg); transform: rotateZ(-7.5deg);
}
.folk-wrapper .foot-left { background-color: #fece8a; border-radius: 1em; height: 3em; margin: 0 auto; position: absolute; top: 59em; width: 8em; left: 0; right: 15em; -webkit-transform: rotateZ(7.5deg); transform: rotateZ(7.5deg);
}
/* ------- display rules ------- */
.wrapper { background-color: #f5f5f5; height: 80vh; margin: 10vh auto; position: relative; width: 80vw;
}
.wrapper .letters-missed { position: absolute; right: 3em; text-transform: uppercase; top: 3em; width: 50%;
}
.wrapper .letters-missed h5 { color: #53555d; font-size: 3vh; margin: 0;
}
.wrapper .letters-missed span { color: #4d69fa; font-size: 4vw; font-weight: bold;
}
.wrapper .letters-missed span::after { content: " ";
}
.wrapper .word-guessed { bottom: 3em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; left: 3em; position: absolute; right: 3em; text-transform: uppercase; z-index: 10;
}
@media screen and (min-aspect-ratio: 3 / 1) { .wrapper .word-guessed { left: auto; width: 85%; }
}
.wrapper .word-guessed .active { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-radius: 0.2em; color: #fff; display: inline-block; font-size: 4vw; font-weight: bold; height: 6vw; margin: auto; position: relative; text-align: center; width: 6vw; background-color: #53555d;
}
@media screen and (min-aspect-ratio: 3 / 1) { .wrapper .word-guessed .active { font-size: 3vw; height: 5vw; width: 5vw; }
}
.wrapper .word-guessed .active:not(.guessed) div { display: none;
}
.wrapper .word-guessed .active div { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.wrapper .word-guessed .inactive { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-radius: 0.2em; color: #fff; display: inline-block; font-size: 4vw; font-weight: bold; height: 6vw; margin: auto; position: relative; text-align: center; width: 6vw; background-color: #e6e6e7;
}
@media screen and (min-aspect-ratio: 3 / 1) { .wrapper .word-guessed .inactive { font-size: 3vw; height: 5vw; width: 5vw; }
}
.wrapper .word-guessed .inactive:not(.guessed) div { display: none;
}
.wrapper .decoration { border-bottom: 20vh solid #4d69fa; border-left: 20vw solid transparent; border-right: 20vw solid #4d69fa; border-top: 20vh solid transparent; bottom: 0; position: absolute; right: 0;
}
.wrapper .error-prompt { color: #d10f0f; font-size: 5vh; left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 30;
}
/*----------------- menu rules ------- */
.menu { background-color: rgba(59, 65, 99, 0.5); height: 100vh; left: 0; position: fixed; text-transform: uppercase; top: 0; width: 100vw; z-index: 20;
}
.menu form { margin: auto; position: relative; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.menu select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0.15em dashed #ffba00; border-radius: 0.6em; color: #ffba00; font-size: 3vh; padding: 0.3em; background: url("https://github.com/kozanecki-p/frontend-recruitment-task/blob/master/app/imgs/arrow.png?raw=true") no-repeat right; background-size: 1em 1em;
}
.menu input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0.15em dashed #ffba00; border-radius: 0.6em; color: #ffba00; font-size: 5vh; padding: 0.3em; background: none; display: block; height: 2em; margin: 0.5em auto; width: 8em;
}
.menu label { color: #fff; font-size: 3vh; font-weight: bold;
}
h1 { color: #fff; font-size: 8vh; font-weight: bolder;
}

Netguru Frontend recruitement task - Script Codes JS Codes

var mainController = angular.module('app', ['hangman'])
.controller('MainController', ['$scope', 'wordGet', 'game', 'errorDisplay', 'menu', function($scope, wordGet, game, errorDisplay, menu) { $scope.word = ''; $scope.difficulty = 'easy'; var defaultMin = 3; var defaultMax = 6; $scope.$watch('difficulty', function(){ switch ($scope.difficulty) { case 'medium': defaultMin = 5; defaultMax = 9; break; case 'hard': defaultMin = 8; defaultMax = 11; break; default: defaultMin = 3; defaultMax = 6; break; } }); $scope.init = function(min = defaultMin, max = defaultMax) { wordGet(min, max).then(function(data) { if(data.success){ $scope.word = data.text; } else { errorDisplay.message('Unable to connect to the server: ' + data.text); } }); }; $scope.$watch('word', function() { if ($scope.word !== '') { game.setWord($scope.word); game.activateLetters(); game.reset(); menu.hide(); } }); window.onkeypress = game.evaluate;
}]);
var hangman = angular.module('hangman', []);
hangman.factory('wordGet', ['$http', function($http) { var get = function(min = 5, max = 11) { var promise = $http({ method: 'GET', url: 'http://api.wordnik.com:80/v4/words.json/randomWord?' +'hasDictionaryDef=truesdpoiuywqertyuiopasdfghjkl' +'&includePartOfSpeech=noun' +'&excludePartOfSpeech=given-name, noun-plural' +'&minCorpusCount=0' +'&maxCorpusCount=-1' +'&minDictionaryCount=1' +'&maxDictionaryCount=-1' +'&minLength=' + min +'&maxLength=' + max +'&api_key=a2a73e7b926c924fad7001ca3111acd55af2ffabf50eb4ae5' }) .then( function(response) { return { success: true, text: response.data.word }; }, function(response) { return { success: false, text: response.statusText }; } ); return promise; }; return get;
}]);
hangman.factory('game', ['errorDisplay', 'menu', function(errorDisplay, menu) { var word = ''; var misses = []; var numGuesses = 0; var guesses = ''; var MAX_NUM_MISSES = 11; var MAX_WORD_LEN = 11; var folkElements = document.querySelectorAll('.folk-wrapper > div:not(.hang-bar)'); folkElements = angular.element(folkElements); folkElements.addClass('hidden'); var letters = document.getElementsByClassName('word-guessed')[0] .children; var folkChange = function(stage = -1) { // changes appropriate elements to visible if (stage === -1) { folkElements.addClass('hidden'); } else { folkElements.eq(stage).removeClass('hidden'); } }; var letterCheck = function(letter) { // finds all instances of a given letter // returns: an array containing indexes of those instances var temp = word; var result = []; var i = temp.search(letter[0]); while(i > -1) { result.push(i); temp = temp.slice(0, i) + '*' + temp.slice(i+1); i = temp.search(letter[0]); } return result; }; var showLetters = function(indexArray) { // inserts appropriate value into apropriate display boxes // accepts: an array of indexes pointing to letters // that are to be revealed // returns: bool - whether all letters are currently being displayed var activeLetters = document.querySelectorAll('.word-guessed > .active'); for (var i of indexArray) { angular.element(activeLetters[i].children[0]) .text(word[i]) .parent() .addClass('guessed'); } numGuesses += indexArray.length; return numGuesses >= word.length; }; var appendMistake = function(value) { // appends an element containing an incorrect guess // to a DOM mistake container // returns: bool - whether number of mistakes exceeded // the allowed amount angular.element(document.querySelectorAll('.letters-missed > span')) .remove(); misses.sort(); var mistakeContainer = angular.element(document.querySelectorAll('.letters-missed')); for (var i of misses) { var mistake = angular.element(document.createElement('span')) .text(i); mistakeContainer.append(mistake); } return misses.length >= MAX_NUM_MISSES; }; return { reset: function() { folkChange(); misses = []; guesses = ''; numGuesses = 0; angular.element(document.querySelectorAll('.letters-missed > span')) .remove(); }, setWord: function(value) { word = value.toLowerCase(); }, activateLetters: function() { var i = 0; while (i < MAX_WORD_LEN - word.length) { letters[i].className = 'inactive'; i++; } while (i < MAX_WORD_LEN) { letters[i].className = 'active'; i++; } }, evaluate: function(event) { var code = event.witch || event.keyCode || event.charCode; if (!menu.active) { if ( (code > 64 && code < 91) || (code > 96 && code < 123) ) { var letter = String.fromCharCode(code).toLowerCase(); if (guesses.search(letter) >= 0) { errorDisplay.message("You have already used that letter!"); } else { guesses += letter; var ind = letterCheck(letter); if (ind.length > 0) { var win = showLetters(ind); } else { folkChange(misses.length); misses.push(letter); var lose = appendMistake(letter); } if (win) { menu.show('YOU WON!') } if (lose) { menu.show('GAME OVER!'); } } } } } };
}]);
hangman.factory('errorDisplay', ['$timeout', function($timeout) { var errorPrompt = angular.element(document.querySelectorAll('.error-prompt')[0]); return { message: function(value) { errorPrompt .text(value) .toggleClass('hidden'); $timeout(function(){ errorPrompt.toggleClass('hidden'); }, 2000); } }
}]);
hangman.factory('menu', ['$timeout', function($timeout) { var menu = angular.element(document.getElementById('menu')); return { show: function(msg = 'HANGMAN') { // displays game menu // optionally switches main header for provided message menu.children().eq(0) .children().eq(0) .text(msg); this.active = true; menu.removeClass('hidden') .removeClass('removed'); }, hide: function() { this.active = false; menu.addClass('hidden'); $timeout(function() { menu.addClass('removed'); }, 1000); }, active: true }
}]);
Netguru Frontend recruitement task - Script Codes
Netguru Frontend recruitement task - Script Codes
Home Page Home
Developer Piotr Kozanecki
Username kozanecki_p
Uploaded January 15, 2023
Rating 3
Size 8,602 Kb
Views 4,048
Do you need developer help for Netguru Frontend recruitement task?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Piotr Kozanecki (kozanecki_p) Script Codes
Name
-2 base
A Pen by Piotr Kozanecki
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!