thibmeu/1on1questionsgenerator.js

## 1on1questionsgenerator.js
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

const getList = () =>
  fetch(
    'https://raw.githubusercontent.com/VGraupera/1on1-questions/master/questions.json'
    )
    .then(r => r.json())

const htmlTemplate = (question) => `
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Getone.one</title>
</head>
<body>
  <main class="main">
    <nav class="navigation">
      <section class="container white">
        <a class="bold navigation-title">Getone.one</a>

        <ul class="navigation-list">
          <li class="navigation-list">
            <a href="https://gist.github.com/thibmeu/2564a9ec697d503282cac65b9381032e" class="link bold white">GitHub</a>
          </li>
        </ul>
      </section>
    </nav>
    <div class="content">
      <section class="container centered">
        <div class="question">
          <h1 class="white">${question}</h1>
          <button onClick="window.location.reload();">Get a new one</button>
        </div>
      </section>
    </div>
    <footer class="footer">
      <section class="container white">
        Made with ❤️ by
        <a href="https://thibault.uk/" class="link bold white">thibault</a>
        -
        Powered by
        <a href="https://github.com/VGraupera/1on1-questions" class="link bold white">VGraupera list</a>
      </section>
    </footer>
  </main>
</body>
<style>
body {
  margin: 0;
}

.navigation {
  height: 6rem;
  width: 100%;
}

.navigation-title {
  letter-spacing: .1rem;
}

.navigation .navigation-list {
    float: right;
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
}

.navigation .navigation-list .navigation-item {
    float: left;
    margin: 0;
    position: relative;
    font-weight: 600;
}

.main {
  background: radial-gradient(ellipse at center,#ff8db5 0,#fd79a8 42%,#e84393 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
line-height: 1.8em;
}

.content {
  flex: 1;
  display: flex;
  margin-top: 1.6rem;
  margin-bottom: 3.2rem;
}

.centered {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.container {
  margin: 0 auto;
  max-width: 90rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.white {
  color: #fff;
}

.footer {
  width: 100%;
  text-align: center;
  line-height: 2rem;
  margin-bottom: 1rem;
}

.link {
  text-decoration: none;
}

.bold {
  font-weight: 600;
}

</style>
`

const  handleRequest = async (request) => {
  const list = await getList()
  const question = list[Math.floor(Math.random() * list.length)]
  return new Response(
    htmlTemplate(question.question),
    {
      status: 200,
      headers: {
        'Content-type': 'text/html',
      }
    },
  )
}
	addEventListener('fetch', event => {
	event.respondWith(handleRequest(event.request))
	})

	const getList = () =>
	fetch(
	'https://raw.githubusercontent.com/VGraupera/1on1-questions/master/questions.json'
	)
	.then(r => r.json())

	const htmlTemplate = (question) => `
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Getone.one</title>
	</head>
	<body>
	<main class="main">
	<nav class="navigation">
	<section class="container white">
	<a class="bold navigation-title">Getone.one</a>

	<ul class="navigation-list">
	<li class="navigation-list">
	<a href="https://gist.github.com/thibmeu/2564a9ec697d503282cac65b9381032e" class="link bold white">GitHub</a>
	</li>
	</ul>
	</section>
	</nav>
	<div class="content">
	<section class="container centered">
	<div class="question">
	<h1 class="white">${question}</h1>
	<button onClick="window.location.reload();">Get a new one</button>
	</div>
	</section>
	</div>
	<footer class="footer">
	<section class="container white">
	Made with ❤️ by
	<a href="https://thibault.uk/" class="link bold white">thibault</a>
	-
	Powered by
	<a href="https://github.com/VGraupera/1on1-questions" class="link bold white">VGraupera list</a>
	</section>
	</footer>
	</main>
	</body>
	<style>
	body {
	margin: 0;
	}

	.navigation {
	height: 6rem;
	width: 100%;
	}

	.navigation-title {
	letter-spacing: .1rem;
	}

	.navigation .navigation-list {
	float: right;
	list-style: none;
	margin-bottom: 0;
	margin-top: 0;
	}

	.navigation .navigation-list .navigation-item {
	float: left;
	margin: 0;
	position: relative;
	font-weight: 600;
	}

	.main {
	background: radial-gradient(ellipse at center,#ff8db5 0,#fd79a8 42%,#e84393 100%);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	width: 100%;
	line-height: 1.8em;
	}

	.content {
	flex: 1;
	display: flex;
	margin-top: 1.6rem;
	margin-bottom: 3.2rem;
	}

	.centered {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	}

	.container {
	margin: 0 auto;
	max-width: 90rem;
	padding-left: 2rem;
	padding-right: 2rem;
	}

	.white {
	color: #fff;
	}

	.footer {
	width: 100%;
	text-align: center;
	line-height: 2rem;
	margin-bottom: 1rem;
	}

	.link {
	text-decoration: none;
	}

	.bold {
	font-weight: 600;
	}

	</style>
	`

	const handleRequest = async (request) => {
	const list = await getList()
	const question = list[Math.floor(Math.random() * list.length)]
	return new Response(
	htmlTemplate(question.question),
	{
	status: 200,
	headers: {
	'Content-type': 'text/html',
	}
	},
	)
	}