Finished Forms lessons

Author: gabcdev

index.html

@@ -37,8 +37,69 @@ <h1>Build a List with Vue.js</h1>
     <ol>
         <li v-for="game in games">{{ game.title }}</li>
     </ol>
+
+    <h1>Data Properties</h1>
+    <p>{{ initial }}</p>
+
+    <h1>Methods</h1>
+    <p>{{ startString }}</p>
+    <button class="button" @click="addToStart">Add to String</button>
+
+    <h1>Loop Through a Range</h1>
+    <span v-for="number in 20">{{ number }} &nbsp;</span>
+
+    <h1>Loop Through an Array</h1>
+    <ul>
+        <li v-for="item in items">{{ item }}</li>
+    </ul>
+
+    <h1>Looping with an Index</h1>
+    <ul>
+       <li v-for="(framework, key) in frameworks">{{ key }} - {{ framework.content }}</li> 
+    </ul>
+
+    <h1>Looping through Objects</h1>
+    <ol>
+        <li v-for="music in musics">{{ music }}</li>
+    </ol>
+
+    <h1>Looping through Objects and Keys</h1>
+    <ol>
+        <li v-for="(music, property) in musics"><span class="capitalize">{{ property }}</span> - {{ music }}</li>
+    </ol>
+
+    <h1>Looping through Objects, Keys, and Indexes</h1>
+    <ul>
+        <li v-for="(baby, property, index) in babies">{{ index }} - <span class="capitalize">{{ property }}</span> - {{ baby }}</li>
+    </ul>
+
+    <h1>Build an Input Field</h1>
+    <label for="fullName">Full Name</label>
+    <input id="fullName" v-model="fullName" class="margin-left-15" placeholder="Makima San" />
+    <p>Your Full Name is {{ fullName }}.</p>
+
+    <h1>Dropdown Menus</h1>
+    <select v-model="selected" v-bind:selected="selected">
+        <option v-for="rate in rating" v-bind:value="rate.value">{{ rate.title }}</option>
+    </select>
+    <p>{{ selected }}</p>
+
+    <h1>Checkbox</h1>
+    <label for="friends" class="block"><input type="checkbox" id="friends" value="Friends" v-model="recommended"> Friends</label>
+    <label for="acquaintance" class="block"><input type="checkbox" id="acquaintance" value="Acquaintances" v-model="recommended"> Acquaintances</label>
+
+    <p>Recommended for {{ recommended }}</p>
+
+    <h1>Radio</h1>
+    <p>Would you recommend this tutorial?</p>
+    <label for="yes"><input type="radio" id="yes" value="Yes" v-model="tutorial_review"/>Yes</label>
+    <label for="no"><input type="radio" id="no" value="No" v-model="tutorial_review"/>No</label>
+    <br /><br />
+    Recommendable: {{ tutorial_review }}
+
     </div>
 
     <script src="main.js"></script>
+
 </body>
 </html>

main.js

@@ -6,25 +6,57 @@ const app = Vue.createApp({
 			white: "white",
 			text: "League of Legends",
 			inputText: "",
-			timer: 100,
+			tutorial_review: "",
+			startString: "Hello world",
+			timer: 5,
+			initial: 0,
 			visible: true,
+			fullName: "Makima San",
+			selected: 3,
+			recommended: [],
+			rating: [
+				{ title: "Best", value: 5 },
+				{ title: "Good", value: 4 },
+				{ title: "Okay", value: 3 },
+				{ title: "Okay", value: 2 },
+				{ title: "Bad", value: 1 }
+			],
 			games: [
 				{ title: "League of Legends", id: 6329 },
 				{ title: "Valorant", id: 6330 },
 				{ title: "Sims", id: 6331 }
-			]
+			],
+			frameworks: [
+				{ content: "Vue JS" },
+				{ content: "React" },
+				{ content: "Angular" }
+			],
+			items: ["Kare-kare", "Adobong Atay"],
+			musics: {
+				title: "Nobody Gets Me",
+				author: "SZA"
+			},
+			babies: {
+				name: "Ace",
+				role: "Dad"
+			}
 		}
 	},
 	mounted() {
 		setInterval(() => {
 			if (this.timer > 0) {
 				this.timer--
+			} else {
+				this.initial = 500
 			}
 		}, 1000)
 	},
 	methods: {
 		checkPalindrome() {
 			this.text = this.text.split("").reverse().join("")
+		},
+		addToStart() {
+			this.startString += " " + this.text
 		}
 	}
 }).mount("#app")

style.css

@@ -13,18 +13,40 @@ body
 	padding: 3rem;
 }
 
+textarea,
+input:not(type="checkbox") {
+	padding: 1rem 2rem;
+	min-width: 50vh;
+}
+
+select  {
+	padding: .5rem 1rem;
+	min-width: 15vh;
+}
+
+p {
+	white-space: pre-line;
+}
+
 .white {
 	color: var(--white);
 }
 
+.capitalize {
+	text-transform: capitalize;
+}
+
 .button {
 	background: var(--accent);
 	padding: 1rem 2rem;
 	border: none;
 	font-size: var(--fontSize);
 }
 
-textarea {
-	padding: 1rem 2rem;
-	min-width: 50vh;
+.block {
+	display: block;
+}
+
+.margin-left-15 {
+	margin-left: 15px;
 }