JorgeMadson/TEST.md

## component.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>CrossKnowledge - Code challenge</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <article class="article">
    <header class="header">
      <div class="header__list">
        <div class="header__list--item-bold">
          Avengers: Infinity War
        </div>
        <div>
          156 minutes
        </div>
      </div>
      <div class="rating">
        85% <img class="image remove__margin"
          src="https://www.rottentomatoes.com/assets/pizza-pie/images/icons/global/cf-lg.3c29eff04f2.png" alt="">
      </div>
    </header>

    <div>
      <img class="image" src="https://i.ibb.co/9tLcR7s/avengers.jpg">
      <a class="link__button" href="https://www.rottentomatoes.com/m/avengers_infinity_war" target="_blank">
        Check review
      </a>
    </div>

    <footer>
      <p class="footer--margin_1em">
        An unprecedented cinematic journey ten years in the making and spanning the entire Marvel Cinematic Universe,
        Marvel Studios' "Avengers: Infinity War" brings to the screen the ultimate, deadliest showdown of all time.
        The Avengers and their Super Hero allies must be willing to sacrifice all in an attempt to defeat the powerful
        Thanos before his blitz of devastation and ruin puts an end to the universe.
      </p>
    </footer>
  </article>
</body>

</html>

## date-format.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>CrossKnowledge - Code challenge</title>
</head>

<body>
  <script>
    // This will create elements for testing, don't change this code
    (() => {
      const MS_PER_MINUTE = 60000
      const NOW = new Date()
      let minutes = [0, 1, 30, 60, 6 * 60, 23 * 60, 24 * 60]
      let dates = []

      minutes.forEach((i) => dates.push(new Date(NOW - i * MS_PER_MINUTE)))

      dates.forEach((item) => {
        let el = document.createElement("div")
        el.innerHTML = "Started "

        let dt = document.createElement('span')
        dt.className = 'js-date-format'
        dt.innerHTML = item.toISOString()
        el.appendChild(dt)
        document.body.appendChild(el)
      })
    })();

    (() => {
      let allSpans = document.getElementsByClassName('js-date-format');
      Array.prototype.forEach.call(allSpans, saveDateValues);

      function saveDateValues(element) {
        element.dataset.startDate = element.innerHTML;
      }

      function updateAllValues(element) {
        for (let index = 0; index < allSpans.length; index++) {
          const element = allSpans[index];
          element.innerHTML = timeAgoFormat(element.dataset.startDate);
        }
      }

      function timeDiff(startDate) {
        const parsedStartDate = new Date(startDate)
        return Math.round((new Date().valueOf() - parsedStartDate.valueOf()) / 1000)
      }

      function timeAgoFormat(time) {
        let parsedTime = timeDiff(time);
        console.log(parsedTime);
        if (parsedTime < 2) {
          return `${parsedTime} second ago`;
        }
        if (parsedTime > 3599) {
          let hours = Math.trunc(parsedTime / 3600);
          //const minutes = Math.round((parsedTime % 3600) / 60);
          return `${hours} ${hours < 2 ? 'hour' : 'hours'} ago`; //and ${minutes} ${minutes < 2 ? 'minute' : 'minutes'}`;
        }
        if (parsedTime > 59) {
          const minutes = Math.trunc(parsedTime / 60);
          //const seconds = parsedTime % 60;
          return `${minutes} ${minutes < 2 ? 'minute' : 'minutes'} ago`; //and ${seconds} ${seconds < 2 ? 'second' : 'seconds'} ago`;
        }
        return `${parsedTime} seconds ago`;
      }
      setInterval(updateAllValues, 1000);
    })();
  </script>
</body>

</html>

## request.py
import requests
import redis
import json

redis_db = redis.StrictRedis(host="localhost", port=6379, db=0)
# print(redis_db.keys())

""" Save the response of GET on redis for 15 minutes for caching """
def setAndGetFromRedis(url, json):
    redis_db.set(url, json)
    redis_db.expire(url, 15 * 60)
    return redis_db.get(url)


def get(url, parameters=None):
    have_cache = redis_db.get(url)

    if have_cache is not None:
        print('from cache')
        return redis_db.get(url)
    else:
        print('included in cache')
        response = requests.get(url, params=parameters).json()
        setAndGetFromRedis(url, json.dumps(response))

""" We have to refresh the cache for post, put, patch or delete, because they change the request response """

def post(url, parameters=None, data=None):
    """ Post data to an URL and returns the response """
    response = requests.post(url, params=parameters, data=data).json()
    setAndGetFromRedis(url, json.dumps(response))

def put(url, parameters=None, data=None):
    """ Put data to an resource and returns the response """
    response = requests.put(url, params=parameters, data=data).json()
    setAndGetFromRedis(url, json.dumps(response))

def patch(url, parameters=None, data=None):
    """ Patches an resource and returns the response """
    response = requests.patch(url, params=parameters, data=data).json()
    setAndGetFromRedis(url, json.dumps(response))

def delete(url, parameters=None, data=None):
    """ Requests the deletion of an resource and returns the response """
    response = requests.delete(url, params=parameters, data=data).json()
    setAndGetFromRedis(url, json.dumps(response))

r = get('https://jsonplaceholder.typicode.com/posts/1')

print(r)

## style.css
.article {
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	background-color: #f7f7f7;
	border-color: #e9e9e9;
	max-width: 20.5rem;
}

.header {
	display: flex;
	justify-content: space-between;
	height: 3rem;
	padding: 1em;
}

.header__list {
	display: flex;
	flex-direction: column;
    justify-content: inherit;
	width: 25rem;
}

.header__list--item-bold {
	font-weight: bold;
}

.rating {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.rating__tomato {
	max-width: 1em;
	max-height: 1em;
}

.footer--margin_1em {
	margin: 1em;
}

.image {
	display: flex;
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	margin: 0 auto;
}

.remove__margin {
	margin: 0;
}

.link__button {
	text-decoration: none;
	position: absolute;
	left: calc(50% - 5.5rem);
	margin-top: -5rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0.60em 3em;
	background: #a5a5a4;
	color: black;
	border: 0.125em solid white;
	border-radius: 1em;
}

/* Responsive Design */

@media only screen and (max-device-width: 480px) {
	.article {
		max-width: 100%;
	}
	.header {
		height: 5rem;
		font-size: 2.5rem;
	}
	.link__button {
		left: calc(50% - 17rem);
		margin-top: -13rem;
		font-size: 3rem;
	}
	.image {
		width: 100%;
	}
	.image__responsive {
		height: 100%;
		width: auto;
	}
}

## TEST.md

      
    Raw
  

              TEST.md
            
          
    Technical challenge

Here is the description of what you'll need to implement on this technical challenge.
Challenges

1. Cache function

Implement a function, class or module (it can be on the same file - request.py) to cache requests made with the existing code, preventing unecessary calls. You MUST use this Redis module as a cache service. Feel free to change the code within the existing functions, but do not alter their behaviour.
Context: Caching requests can be useful to avoid unecessary HTTP calls for the same resources, however, the resources can change during time, so it is important to keep in mind that cache needs to be invalidated at some point.
Note: You may use any Python version and import other modules, unless they implement cache services for the requests.
2. Date formatting

Implement a JavaScript code that replaces the value (innerHTML value) from elements with the class js-date-format with the formatted value of the time passed since the element initial time. The value within the elements will be a ISO date format (2019-04-05T12:00:00.000Z for example). It will be tested on Google Chrome.
Use the following format:

1 second ago OR X seconds ago
1 minute ago OR X minutes ago
1 hour ago OR X hours ago
Date in ISO format (original format)

Working example:

Note: You may use ecmascript 6 features but must not use any framework or add any dependency.
3. Apply style

Implement the CSS code to make the component on component.html look like the desired mockup below. Add attributes as you may need, but do not use HTML tags as CSS selectors to implement the styles. It will be tested on Google Chrome.
Mockup:

Note #1: You should use new CSS features and add classes as you need, but try not to change the HTML structure.
Note #2: We recommend you try using BEM.
Evaluation

This is a list of what will be evaluated in your code:

Code is working as expected
DRY
Separation of concers
Coding conventions applied and code consistency
Code readability and how you name things
Overengineering
Usage of BEM, if used
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>CrossKnowledge - Code challenge</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	<article class="article">
	<header class="header">
	<div class="header__list">
	<div class="header__list--item-bold">
	Avengers: Infinity War
	</div>
	<div>
	156 minutes
	</div>
	</div>
	<div class="rating">
	85% <img class="image remove__margin"
	src="https://www.rottentomatoes.com/assets/pizza-pie/images/icons/global/cf-lg.3c29eff04f2.png" alt="">
	</div>
	</header>

	<div>
	<img class="image" src="https://i.ibb.co/9tLcR7s/avengers.jpg">
	<a class="link__button" href="https://www.rottentomatoes.com/m/avengers_infinity_war" target="_blank">
	Check review
	</a>
	</div>

	<footer>
	<p class="footer--margin_1em">
	An unprecedented cinematic journey ten years in the making and spanning the entire Marvel Cinematic Universe,
	Marvel Studios' "Avengers: Infinity War" brings to the screen the ultimate, deadliest showdown of all time.
	The Avengers and their Super Hero allies must be willing to sacrifice all in an attempt to defeat the powerful
	Thanos before his blitz of devastation and ruin puts an end to the universe.
	</p>
	</footer>
	</article>
	</body>

	</html>
	import requests
	import redis
	import json

	redis_db = redis.StrictRedis(host="localhost", port=6379, db=0)
	# print(redis_db.keys())

	""" Save the response of GET on redis for 15 minutes for caching """
	def setAndGetFromRedis(url, json):
	redis_db.set(url, json)
	redis_db.expire(url, 15 * 60)
	return redis_db.get(url)


	def get(url, parameters=None):
	have_cache = redis_db.get(url)

	if have_cache is not None:
	print('from cache')
	return redis_db.get(url)
	else:
	print('included in cache')
	response = requests.get(url, params=parameters).json()
	setAndGetFromRedis(url, json.dumps(response))

	""" We have to refresh the cache for post, put, patch or delete, because they change the request response """

	def post(url, parameters=None, data=None):
	""" Post data to an URL and returns the response """
	response = requests.post(url, params=parameters, data=data).json()
	setAndGetFromRedis(url, json.dumps(response))

	def put(url, parameters=None, data=None):
	""" Put data to an resource and returns the response """
	response = requests.put(url, params=parameters, data=data).json()
	setAndGetFromRedis(url, json.dumps(response))

	def patch(url, parameters=None, data=None):
	""" Patches an resource and returns the response """
	response = requests.patch(url, params=parameters, data=data).json()
	setAndGetFromRedis(url, json.dumps(response))

	def delete(url, parameters=None, data=None):
	""" Requests the deletion of an resource and returns the response """
	response = requests.delete(url, params=parameters, data=data).json()
	setAndGetFromRedis(url, json.dumps(response))

	r = get('https://jsonplaceholder.typicode.com/posts/1')

	print(r)
	.article {
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	background-color: #f7f7f7;
	border-color: #e9e9e9;
	max-width: 20.5rem;
	}

	.header {
	display: flex;
	justify-content: space-between;
	height: 3rem;
	padding: 1em;
	}

	.header__list {
	display: flex;
	flex-direction: column;
	justify-content: inherit;
	width: 25rem;
	}

	.header__list--item-bold {
	font-weight: bold;
	}

	.rating {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

	.rating__tomato {
	max-width: 1em;
	max-height: 1em;
	}

	.footer--margin_1em {
	margin: 1em;
	}

	.image {
	display: flex;
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	margin: 0 auto;
	}

	.remove__margin {
	margin: 0;
	}

	.link__button {
	text-decoration: none;
	position: absolute;
	left: calc(50% - 5.5rem);
	margin-top: -5rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0.60em 3em;
	background: #a5a5a4;
	color: black;
	border: 0.125em solid white;
	border-radius: 1em;
	}

	/* Responsive Design */

	@media only screen and (max-device-width: 480px) {
	.article {
	max-width: 100%;
	}
	.header {
	height: 5rem;
	font-size: 2.5rem;
	}
	.link__button {
	left: calc(50% - 17rem);
	margin-top: -13rem;
	font-size: 3rem;
	}
	.image {
	width: 100%;
	}
	.image__responsive {
	height: 100%;
	width: auto;
	}
	}