<template>
<form autocomplete="off" @submit.prevent="retirement()">
<h1>Retirement</h1>
<div class="form-field">
<label for="">What is your age?</label>
<input type="number" inputmode="decimal" v-model="age" min="0" />
</div>
<div class="form-field">
<label for="">What age would you like to retire?</label>
<input type="number" inputmode="decimal" v-model="retireAge" min="0" />
</div>
<button class="action-link" type="submit">Calculate</button>
<output>{{ outputR.value }}</output>
</form>
<form autocomplete="off" @submit.prevent="madlib()">
<h1>Madlib</h1>
<div class="form-field">
<label for="">Enter a noun.</label>
<input type="text" required v-model="noun" />
</div>
<div class="form-field">
<label for="">Enter a verb.</label>
<input type="text" required v-model="verb" />
</div>
<div class="form-field">
<label for="">Enter an adverb.</label>
<input type="text" required v-model="adverb" />
</div>
<div class="form-field">
<label for="">Enter an adjective.</label>
<input type="text" required v-model="adjective" />
</div>
<button type="submit">Submit</button>
<output>
<p>{{ output.value }}</p>
</output>
</form>
<form autocomplete="off" @submit.prevent="calcArea()">
<h1>Calculate Area In Feet</h1>
<div class="form-field">
<label for="length">What is the length of the room?</label>
<input type="number" required min="0" v-model.number="length" />
</div>
<div class="form-field">
<label for="width">What is the width of the room?</label>
<input type="number" required min="0" v-model.number="width" />
</div>
<button class="action-link" type="submit">Calculate</button>
<output>{{ outputA }}</output>
</form>
<form autocomplete="off" @submit.prevent="calcPaint()">
<h1>Calculate the Amount of Paint?</h1>
<span>350 sq feet requires 1 gallon of paint.</span>
<button type="submit">Calculate</button>
<output>{{ outputP }}</output>
</form>
</template>
<script setup>
import { ref, reactive, computed, watch } from "vue";
const output = ref("");
const lib = computed(function () {
return `${noun.value} is ${verb.value} ${adverb.value} while maintaining ${adjective.value} poise!`;
});
const noun = ref("");
const verb = ref("");
const adverb = ref("");
const adjective = ref("");
function madlib() {
output.value = lib;
}
/////////////////
const outputR = ref("");
const age = ref(25);
const retireAge = ref(65);
const currentYear = new Date().getFullYear();
const ageDifference = computed(function () {
return retireAge.value - age.value;
});
const retireYear = computed(function () {
return currentYear + ageDifference.value;
});
const results = computed(function () {
return `${ageDifference.value} years left until you can retire. It is ${currentYear}, so you can retire in ${retireYear.value}`;
});
function retirement() {
outputR.value = results;
}
/////////////////////////
const outputA = ref("");
const width = ref();
const length = ref();
const area = computed(function () {
return length.value * width.value;
});
function calcArea() {
outputA.value = area.value + " sq feet";
}
///////////////////////
const outputP = ref("");
const paint = computed(function () {
return Math.ceil(area.value / 350);
});
function calcPaint() {
outputP.value = paint.value + " cans of paint.";
}
const color = "#4fc08d";
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1 {
border-bottom: 1px solid black;
margin: 0 auto;
width: fit-content;
font-size: 2rem;
}
span {
display: block;
padding: 15px 0;
}
output {
margin: 40px auto;
max-width: 85%;
display: flex;
flex-direction: column;
gap: 10px;
font-weight: bold;
}
form {
padding: 10px;
margin: 20px auto;
max-width: 700px;
}
div.form-field {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
margin-bottom: 20px;
justify-content: center;
align-items: center;
label {
font-size: 1.1rem;
}
input {
width: 60%;
padding: 7px 0;
font-size: 1.1rem;
text-align: center;
}
}
a,
button {
color: white;
}
button {
background-color: v-bind(color);
border: solid 2px;
border-radius: 2em;
font: inherit;
font-weight: 700;
letter-spacing: 0.5px;
padding: 0.75em 2em;
&:hover {
background-color: white;
color: v-bind(color);
}
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.