Created
June 25, 2018 11:21
-
-
Save David-Else/953838b68763161f41fc1e08d7c1b161 to your computer and use it in GitHub Desktop.
vuejs-natural-expression-calculator-app-html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment