David-Else/vuejs-natural-expression-calculator-app.html

## vuejs-natural-expression-calculator-app.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./src/main.css">
  <script type="module" src="./src/main.js"></script>
  <title>9-Energy Natural Expression Generator</title>
</head>

<body>
  <article>
    <div id="app"></div>
  </article>
</body>

<template id="interface">
  <div class="container leading-normal max-w-xs relative flex flex-col items-center mx-auto bg-custom-gradient p-2 text-white text-center">
    <div v-if="goesLeft < 1" class="block absolute z-50 pin bg-black opacity-75">
      <div class="absolute text-4xl select-none">
        <p>You have reached your maximum number of free tries. Please get in contact
          for your free consultation!</p>
      </div>
    </div>

    <h1 class="m-0 p-0">Tell me my 9-Energy Natural Expression!</h1>
    <p>You have {{ goesLeft }} attempts left</p>
    <h2>1. Please select gender</h2>
    <button type="button" @click="toggleGender" class="p-4 my-2 text-white" v-bind:class="{ 'bg-blue-light': gender == 'Male', 'bg-pink-light': gender == 'Female' }">{{gender}}</button>
    <h2>2. Please select date of birth</h2>
    <input type="date" class="m-2 p-2" v-model="dateOfBirth" />
    <button v-if="dateOfBirth" type="button" @click="calculate" class="p-4 my-2 bg-green-dark text-white">Calculate </button>

    <results v-if="results.thirdNumber" :result="results"></results>
  </div>
</template>

<template id="results">
  <div>
    <p>Your Expression is
      <strong>{{result.typeOfExpression}}</strong>
    </p>
    <p>You are
      <strong>{{result.duality}}</strong>
    </p>
    <p>You are a
      <strong>{{result.complexity}}</strong> Expression</p>
    <p>Your primary number is
      <strong>{{result.primaryNumber}}</strong>
    </p>
    <p>Your second number is
      <strong>{{result.secondNumber}}</strong>
    </p>
    <p>Your third number is
      <strong>{{result.thirdNumber}}</strong>
    </p>
    <h2>Your 9-Energy Natural Expression is:</h2>
    <h2>
      <strong>{{result.primaryNumber}}-{{result.secondNumber}}-{{result.thirdNumber}}</strong>
    </h2>
    <p>
      <strong>"{{result.text}}"</strong>
    </p>
  </div>
</template>

<script src="./vendor/vue.js"></script>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./src/main.css">
	<script type="module" src="./src/main.js"></script>
	<title>9-Energy Natural Expression Generator</title>
	</head>

	<body>
	<article>
	<div id="app"></div>
	</article>
	</body>

	<template id="interface">
	<div class="container leading-normal max-w-xs relative flex flex-col items-center mx-auto bg-custom-gradient p-2 text-white text-center">
	<div v-if="goesLeft < 1" class="block absolute z-50 pin bg-black opacity-75">
	<div class="absolute text-4xl select-none">
	<p>You have reached your maximum number of free tries. Please get in contact
	for your free consultation!</p>
	</div>
	</div>

	<h1 class="m-0 p-0">Tell me my 9-Energy Natural Expression!</h1>
	<p>You have {{ goesLeft }} attempts left</p>
	<h2>1. Please select gender</h2>
	<button type="button" @click="toggleGender" class="p-4 my-2 text-white" v-bind:class="{ 'bg-blue-light': gender == 'Male', 'bg-pink-light': gender == 'Female' }">{{gender}}</button>
	<h2>2. Please select date of birth</h2>
	<input type="date" class="m-2 p-2" v-model="dateOfBirth" />
	<button v-if="dateOfBirth" type="button" @click="calculate" class="p-4 my-2 bg-green-dark text-white">Calculate </button>

	<results v-if="results.thirdNumber" :result="results"></results>
	</div>
	</template>

	<template id="results">
	<div>
	<p>Your Expression is
	<strong>{{result.typeOfExpression}}</strong>
	</p>
	<p>You are
	<strong>{{result.duality}}</strong>
	</p>
	<p>You are a
	<strong>{{result.complexity}}</strong> Expression</p>
	<p>Your primary number is
	<strong>{{result.primaryNumber}}</strong>
	</p>
	<p>Your second number is
	<strong>{{result.secondNumber}}</strong>
	</p>
	<p>Your third number is
	<strong>{{result.thirdNumber}}</strong>
	</p>
	<h2>Your 9-Energy Natural Expression is:</h2>
	<h2>
	<strong>{{result.primaryNumber}}-{{result.secondNumber}}-{{result.thirdNumber}}</strong>
	</h2>
	<p>
	<strong>"{{result.text}}"</strong>
	</p>
	</div>
	</template>

	<script src="./vendor/vue.js"></script>

	</html>