latest

yuk23003 · Jan 15, 2024 · 4a64f70 · 4a64f70
1 parent f626524
commit 4a64f70
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 0 deletions.
diff --git a/.core/css/main.css b/.core/css/main.css
@@ -0,0 +1,18 @@
+.test-btn {
+    display: none;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background-color: rgb(207, 207, 207);
+    color: black;
+    border: 1px solid  rgba(167, 167, 167, 0.75);
+    padding: 5px 10px;
+    box-shadow: 0px 0px 5px rgba(71, 71, 71, 0.75);
+}
+
+.test-btn:active {
+    box-shadow: 0px 0px 0px rgba(71, 71, 71, 0.75);
+}
+body:hover .test-btn {
+    display: initial;
+}
diff --git a/.core/js/main.js b/.core/js/main.js
@@ -0,0 +1,17 @@
+let css = document.createElement('link');
+css.rel = 'stylesheet';
+css.href = '../.core/css/main.css';
+document.body.appendChild(css);
+
+
+
+let button = document.createElement('button');
+
+button.classList.add('test-btn');
+button.innerText = 'Run Tests';
+
+button.addEventListener('click', function() {
+    window.open('./tests.html', '_blank');
+})
+
+document.body.appendChild(button);
diff --git a/.core/js/test.js b/.core/js/test.js
@@ -0,0 +1,78 @@
+
+const body = document.querySelector('body');
+const head = document.querySelector('head');
+
+async function runMochaTests(list=[]) {
+
+    if(list.length > 0) {
+        // Add CSS
+        $el('link', {rel: 'stylesheet', href: 'https://unpkg.com/mocha/mocha.css'}).appendTo(head);
+
+        // Add report canvas
+        $el('div', {id: 'mocha'}).appendTo(body);
+
+        // Add required scripts
+        // $el('script', { src: 'https://unpkg.com/chai/chai.js', type: 'module' }).appendTo(body);
+
+        let loadChai = new Promise((resolve, reject) => {
+            $el('script', { src: 'https://unpkg.com/chai/chai.js', type: 'module' }).addEvent('load', () => {
+                console.log('Chai loaded')
+                resolve()
+            }).appendTo(body);
+        })
+
+        let loadMocha = new Promise((resolve, reject) => {
+            $el('script', { src: 'https://unpkg.com/mocha/mocha.js' }).addEvent('load', () => {
+                mocha.setup({ ui: "bdd" });
+                mocha.checkLeaks();
+                console.log('Mocha loaded')
+                resolve()
+            }).appendTo(body);
+        })
+
+        testsLoaded = [];
+        loadMocha.then(() => {
+            // Add tests
+            list.forEach(test => {
+                testsLoaded.push(
+                    new Promise((resolve, reject) => {
+                        $el('script', { src: `test/test.${test}.js`, type:'module' }).addEvent('load', () => {
+                            console.log(`Test ${test} loaded`);
+                            resolve();
+                        }).appendTo(body);
+                    })
+                );
+                // $el('script', { src:   `test/test.${test}.js` }).appendTo(body);
+            });
+
+            Promise.all(testsLoaded).then(() => {
+                $el('script', { class: 'mocha-exec' }, 'mocha.run();').appendTo(body);
+            });
+
+        });
+
+    }
+
+}
+
+// Quick and Dirty Element maker
+function $el(tag, attributes={}, content='') {
+    const obj = document.createElement(tag);
+    obj.innerHTML = content;
+
+    Object.keys(attributes).forEach(key => {
+        obj.setAttribute(key, attributes[key]);
+    });
+
+    obj.appendTo = function (el) {
+        el.appendChild(this);
+        return obj
+    };
+
+    obj.addEvent = function(evt, fn) {
+        obj.addEventListener(evt, fn);
+        return obj;
+    }
+
+    return obj;
+}
diff --git a/week-01/index.html b/week-01/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Week 01</title>
+
+    <style>
+        body{
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
+</head>
+<body>
+
+    <button class="alert-btn">Learn about me!</button>
+
+
+    <!-- Don't touch! We need this script -->
+    <script type="module" src="../.core/js/main.js"></script>
+
+    <!-- Open the following file in an editor to complete your assignment. -->
+    <script src="js/week-01.js" type="module"></script>
+</body>
+</html>
diff --git a/week-01/js/week-01.js b/week-01/js/week-01.js
@@ -0,0 +1,36 @@
+/**
+ * Week 01
+ */
+
+// 1. Change the value to your first name:
+let firstName = 'Brian';
+
+// 2. Change the value to your age:
+let age = 43;
+
+// 3. Complete the sentence: "I'm taking this course because..."
+let whyImTakingThisCourse = "I want to learn how to code and build interactive websites.";
+
+// 4. You're all done. Take a look at the code below to see how this all works.
+
+// Get a reference to the button in index.html with the class "alert-btn"
+let button = document.querySelector('button.alert-btn');
+
+// Add an event listener for the click event to the button
+if(button !== null){
+    button.addEventListener('click', function() {
+
+        // Create a message to display in the alert
+        let message = 'My name is ' + firstName + 
+                    ' and I am ' + age + ' years old. ' +
+                    'I am taking this course because ' + whyImTakingThisCourse;
+
+        // Display an alert with the message we created
+        alert(message);
+    });
+}
+
+
+
+// Export the variables so we can use them in the tests
+export { firstName, age, whyImTakingThisCourse };
diff --git a/week-01/test/test.example.js b/week-01/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');
+        });
+    });
+});
diff --git a/week-01/tests.html b/week-01/tests.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Results</title>
+</head>
+<body>
+    <script src="../.core/js/test.js"></script>
+    <script>
+        runMochaTests(['example']);
+    </script>
+</body>
+</html>