HTML Profile Test

by dpnminh

HTML

<div class="photo-containers-test">
  <div class="parent-photo-container">
    <a class="linkme" href="http://www.mayashavin.com" target="_blank"><img src="http://cdn.boilerroom.tv/wp-content/uploads/2014/08/cute.jpg?7c4b8e" class="child-photo" /></a>
  </div>
  <div class="parent-photo-container">
    <a class="linkme" href="http://www.mayashavin.com" target="_blank"><img src="http://cdn.boilerroom.tv/wp-content/uploads/2014/08/cute.jpg?7c4b8e" class="child-photo top-right" /></a>
  </div>
</div>
<button class="click-me-btn" id="click-me-pls" onclick="checkMyFlatten()">
  Flatten array!
</button>
<div id="result">
</div>

CSS

.photo-containers-test {
  display: grid;
  grid-template-columns: 210px 210px;
}

.parent-photo-container {
  background: url("https://media1.popsugar-assets.com/files/thumbor/mycOrIvY8rgt24INHoUOskGXIpk/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/19/978/n/1922507/3a1a55fda9cc796d_thumb_temp_image13465311411161397/i/Funny-Cat-Costumes.jpg") no-repeat;
  background-size: 200px 200px;
  height: 200px;
  position: relative;
}

.child-photo {
  width: inherit;
  height: 50%;
  position: absolute;
  bottom: 0;
  opacity: 0;
}

.child-photo.top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 25%;
}

.parent-photo-container:hover .child-photo {
  opacity: 0.8;
  transition: opacity ease-in 0.5s;
}

a.linkme {
  text-decoration: none !important;
  width: inherit;
}

.click-me-btn {
  border-radius: 0;
  background: pink;
  color: white;
  padding: 0.5rem;
  border: none;
  box-shadow: none;
  cursor: pointer;
  margin: 1rem 0;
}

.click-me-btn:hover {
  background: #e099a6;
}

#result {
  display: flex;
  flex-direction: column;
}

JavaScript

function FlattenArray(arr) {
  var flattened = [];

  while (arr.length) {
    var element = arr.pop();

    if (Array.isArray(element)) {
      arr = arr.concat(element);
    } else {
      flattened.push(element);
    }
  }

  return flattened.reverse();
}

function checkMyFlatten() {
  var arr = [1, 2, [1, 2, [3, [4, [5]], 6], 7, [8], 9], 10, [11]];

  document.getElementById('result').innerHTML = "<span class='input-label'>Input array: [1,2,[1,2,[3,[4,[5]],6],7,[8],9],10, [11]]" + "</span>" + "<span class='result-label'>Flattened array: " + FlattenArray(arr).toString() + "</span>";
}

//If you have 500 revisions of a program, write a program that will find and return the FIRST bad revision given a isBad(revision i) function.  

function getFirstBad(revisions){
	var start = 0, end = revisions.length - 1;
  var found = undefined;
  
  while (start <= end && found === undefined){
  	var mid = Math.floor((start + end)/2);
    if (isBad(revisions[mid])){
    	if (revisions[mid - 1] && !isBad(revisions[mid - 1])){
      	found = mid;
      }
      else {
      	end = mid - 1;
      }
    }
    else{
    	start = mid + 1;
    }
  }
 
	return found;
}

function isBad(revision){
return revision === 'B';
}

(function(){
	var bad = getFirstBad(["G","G","G","G","G","G","B","B","B","B","B"]);
  console.log("It is: ", bad);
})();

function decodeMessage(message){
	var linesArr = message.split('\n').filter((val) => val);
  
  var numberOfLines = linesArr.length;
  
  var firstHalfDecoded = "", secondHalfDecoded = "";
  
  for (var i = 0; i < linesArr.length; i++){
  	var line = linesArr[i];
    
    if (line){
      firstHalfDecoded += line[i];

      if (i !== numberOfLines - 1){
        var nextIndex = numberOfLines * 2 - (i + 1);

        if (nextIndex < line.length){
          secondHalfDecoded = line[nextIndex] + secondHalfDecoded;
        }

      }
    }
  }
  
  return firstHalfDecoded + secondHalfDecoded;
  
}