week 4 assignment

yuk23003 · Feb 10, 2024 · 9753d0a · 9753d0a
1 parent 1cdccf5
commit 9753d0a
Show file tree

Hide file tree

Showing 5 changed files with 408 additions and 0 deletions.
diff --git a/week-04/index.html b/week-04/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Week 04</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+
+</head>
+<body>
+
+
+
+    <div class="container mt-5">
+        <div class="row">
+            <main class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 ">
+                <h1>Perfume Test</h1>
+                <p>You will travel through a serious of scent room, that helps you discover the perfect scent for you.</p>
+            </main>
+        </div>
+
+        <div class="row">
+            <main class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4 ">
+                <!-- Output goes here -->
+            </main>
+        </div>
+    </div>
+
+    <!-- JS Templates -->
+    <template id="confirm">
+        <div class="card mb-4">
+            <h5 class="card-header">Confirm</h5>
+            <div class="card-body">
+                <h5 class="card-title">Question</h5>
+                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+    <template id="prompt">
+        <div class="card mb-4">
+            <h5 class="card-header">Prompt</h5>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label for="exampleFormControlInput1" class="form-label">
+                        <h5 class="card-title">What is Your Name?</h5>
+                    </label>
+                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Type your response...">
+                </div>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+    <template id="prompt2">
+        <div class="card mb-4">
+            <h5 class="card-header">Prompt2</h5>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label for="exampleFormControlInput1" class="form-label">
+                        <h5 class="card-title">Which would you like to add?</h5>
+                    </label>
+                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Type your response...">
+                </div>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+    <template id="prompt3">
+        <div class="card mb-4">
+            <h5 class="card-header">Prompt3</h5>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label for="exampleFormControlInput1" class="form-label">
+                        <h5 class="card-title">Which would you like to add?</h5>
+                    </label>
+                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Type your response...">
+                </div>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+    <template id="prompt4">
+        <div class="card mb-4">
+            <h5 class="card-header">Prompt4</h5>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label for="exampleFormControlInput1" class="form-label">
+                        <h5 class="card-title">Which would you like to add?</h5>
+                    </label>
+                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Type your response...">
+                </div>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+
+    <template id="alert">
+        <div class="card mb-4">
+            <h5 class="card-header">Alert</h5>
+            <div class="card-body">
+                <h5 class="card-title">Title</h5>
+                <p class="card-text">text</p>
+                <button class="btn btn-primary btn-true">OK</button>
+                <button class="btn btn-secondary btn-false">Cancel</button>
+            </div>
+        </div>
+    </template>
+
+
+    <!-- Don't touch! We need this script -->
+    <script type="module" src="../.core/js/main.js"></script>
+
+
+    <!-- Game framework -->
+    <script src="js/game-framework.js" type="module"></script>
+
+
+    <!-- Open the following file in an editor to complete your assignment. -->
+    <script src="js/main.js" type="module"></script>
+
+
+</body>
+</html>
diff --git a/week-04/js/game-framework.js b/week-04/js/game-framework.js
@@ -0,0 +1,195 @@
+/**
+ * Game Framework
+ * It's safe to ignore this file. It's just a helper for the game.
+ * 
+ */
+
+// Get the templates
+let confirmTmpl = document.querySelector('#confirm').content;
+let promptTmpl = document.querySelector('#prompt').content;
+let promptTmp2 = document.querySelector('#prompt2').content;
+let promptTmp3 = document.querySelector('#prompt3').content;
+let promptTmp4 = document.querySelector('#prompt4').content;
+let alertTmpl = document.querySelector('#alert').content;
+
+
+
+function Confirm(question = '', helpText='', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df =  confirmTmpl.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            df.querySelector('.card-text').textContent = helpText;
+
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', true)
+                resolve(true)
+            }, {once: true})
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+
+function Alert(question = '', helpText = '', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df = alertTmpl.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            df.querySelector('.card-text').textContent = helpText;
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', true)
+                resolve(true)
+            }, { once: true })
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+
+function Prompt(question = '', helpText = '', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df = promptTmpl.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            // df.querySelector('.card-text').textContent = helpText;
+            let input = df.querySelector('input');
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', input.value)
+                resolve(input.value)
+            }, { once: true })
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+function Prompt2(question = '', helpText = '', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df = promptTmp2.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            // df.querySelector('.card-text').textContent = helpText;
+            let input = df.querySelector('input');
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', input.value)
+                resolve(input.value)
+            }, { once: true })
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+function Prompt3(question = '', helpText = '', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df = promptTmp3.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            // df.querySelector('.card-text').textContent = helpText;
+            let input = df.querySelector('input');
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', input.value)
+                resolve(input.value)
+            }, { once: true })
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+function Prompt4(question = '', helpText = '', appendTo = 'main') {
+
+    if (typeof question == 'string' && question !== '') {
+
+        return new Promise((resolve, reject) => {
+
+            // documentFragment from string
+            let df = promptTmp4.cloneNode(true);
+
+            df.querySelector('.card-title').textContent = question;
+            // df.querySelector('.card-text').textContent = helpText;
+            let input = df.querySelector('input');
+
+            df.querySelector('.btn-true').addEventListener('click', (event) => {
+                console.log('Promise Resolved', input.value)
+                resolve(input.value)
+            }, { once: true })
+
+            df.querySelector('.btn-false').addEventListener('click', (event) => {
+                console.log('Promise Resolved', false)
+                resolve(false)
+            }, { once: true })
+
+            document.querySelector(appendTo).appendChild(df)
+        });
+    }
+}
+
+
+// Autoscroll to the bottom of the page
+const resizeObserver = new ResizeObserver(entries =>
+    window.scrollTo(0, document.body.scrollHeight)
+)
+
+// start observing a DOM node
+resizeObserver.observe(document.body)
+
+export { Confirm, Alert, Prompt, Prompt2, Prompt3, Prompt4 }
diff --git a/week-04/js/main.js b/week-04/js/main.js
@@ -0,0 +1,44 @@
+import { Alert, Confirm, Prompt, Prompt2, Prompt3, Prompt4 } from "./game-framework.js";
+/**
+ * Week 04 - Control Flow
+ */
+
+// 'Welcome to the perfume room. Explore and select your type.'
+
+
+
+// Modify the text for the introduction
+await Alert('\'Top Note\' is your first room. Top notes, sometimes referred to as headnotes, form the top layer of a fragrance. In other words, top notes are the scents you detect first after spraying a perfume. These play a role in setting first impressions and shaping a fragrance\’s story. Top notes usually evaporate quickly, lingering around for only the first five to fifteen minutes. Their main purpose is to give off an initial scent and then transition smoothly into the next part of the fragrance. As a result, top notes generally consist of lighter and smaller molecules. Some common top notes include citrus scents – like lemon, orange, and bergamot – as well as light floral scents like lavender and rose. Basil and anise are also commonly used as top notes.')
+
+await Alert('\'Heart Note\' is your second room. As the name suggests, heart notes make up the “heart” of the fragrance. Their function is to retain some of the top notes’ aroma while also introducing new scents to deepen the experience. Sometimes referred to as middle notes, the heart notes also serve as a buffer for the base notes, which may not smell as pleasant on their own. Because they make up around 70 percent of the total scent, heart notes usually last longer than top notes. Heart notes appear as the top notes start to fade and remain evident for the full life of the fragrance. Heart notes include full-bodied, aromatic floral oils like jasmine, geranium, neroli and ylang-ylang, as well as cinnamon, pepper, pine, lemongrass, black pepper and cardamom.')
+
+await Alert('\'Base Note\' is your last room. Along with middle notes, base notes in perfume form the foundation of the fragrance. They help boost the lighter notes while adding more depth and resonance. Since they form the perfume’s foundation, base notes are very rich, heavy and long-lasting fragrance notes. They kick in after about 30 minutes and work together with the middle notes to create the fragrance’s scent. Since base notes sink into your skin, their scent lingers the longest and can last for six hours or more. Popular base notes include vanilla, amber, musk, patchouli, moss and woody notes like sandalwood and cedarwood.')
+
+let name = await Prompt("What is your name?")
+
+// Level 1
+if(await Confirm(`Hi ${name}. Do you want to find your scent?`)) {
+    await Alert('Great! Let\'s get started.')
+} else {
+    await Alert('That\'s too bad. Maybe next time.')
+    window.location.reload()    
+}
+
+
+let choice2 = await Prompt2("Fresh Notes: Fresh notes are light and citrusy in nature, making them popular as top notes. Notes like orange and bergamot give a fragrance its freshness and sweetness, while lemon and bergamot have a more bitter sharpness \n \n \n What would you like to add: lemon, orange, bergamot, lavender, rose, basil.")
+
+let choice3 = await Prompt3("Floral Notes: Floral notes add a natural feel to a fragrance. They are often used as top or heart notes and can be mixed with other notes for a more dramatic scent. \n \n \n Jasmine is another popular floral note with its fruity and white floral scent, while ylang ylang adds a more tropical touch. \n \n \n Fruit Notes: Fruity notes are most commonly used as middle notes, as they blend easily with other notes and can add more depth to a fragrance. For example, blackberry adds a rich, musky scent, while notes like apple and strawberry give off a sweet and juicy vibe. \n \n \n What would you like to add: jasmine, geranium, ylang-ylang, cinnamon, pepper, lemon grass, cardamon.")
+
+let choice4 = await Prompt4("Spice Note: Spice notes are used to add warmth and potency to a fragrance, mixing particularly well with floral notes in the heart of a perfume. Notes like cinnamon and nutmeg add spice and sweetness, while others like rosemary and basil possess an herbal quality. \n \n \n Wood Notes: Sandalwood and patchouli are two wood notes that are often used in a fragrance’s base to strengthen the scent’s lifetime. While most wood notes have an earthy quality, some like cedarwood and oud provide a nice sweet scent. \n \n \n Musk Notes: Musky notes are most frequently found in the base notes of fragrances. Their richness helps to fill in the foundation and increase the duration of the scent. The different types of musk, from black musk to cashmere musk, means that these scents can add a unique trait to any fragrance. \n \n \n What would you like to add: vanilla, amber, mush, patchouli, sandalwood, cedarwood.")
+
+if(await Confirm(`You chose ${choice2},  ${choice3},  ${choice4}. Are you happy with your selection? Press \'OK\' to move on.`)) {
+    await Alert('Great! Let\'s get your perfume.')
+} else {
+    await Alert('That\'s too bad. Maybe next time.')
+    window.location.reload()    
+}
+
+
+
+
+// https://www.fragrancex.com/blog/fragrance-notes/
diff --git a/week-04/test/test.example.js b/week-04/test/test.example.js
@@ -0,0 +1,22 @@
+import { assert } from 'https://unpkg.com/chai/chai.js';
+import * as ctx from '../js/week-01.js';
+
+
+describe("Variables:", function () {
+    describe("firstName", function () {
+        it("should be a valid string", function () {
+            assert.typeOf(ctx.firstName, 'string');
+        });
+    });
+    describe("age", function () {
+        it("should be a valid number", function () {
+            assert(Number.isInteger(ctx.age));
+            assert.isNumber(ctx.age);
+        });
+    });
+    describe("whyImTakingThisCourse", function () {
+        it("should be a valid string", function () {
+            assert.typeOf(ctx.whyImTakingThisCourse, 'string');
+        });
+    });
+});