From 4a64f702be6cbf1daaacca9d24e53a3f62ab0494 Mon Sep 17 00:00:00 2001 From: Brian Daley Date: Mon, 15 Jan 2024 16:22:39 -0500 Subject: [PATCH] latest --- .core/css/main.css | 18 +++++++++ .core/js/main.js | 17 ++++++++ .core/js/test.js | 78 ++++++++++++++++++++++++++++++++++++ week-01/index.html | 28 +++++++++++++ week-01/js/week-01.js | 36 +++++++++++++++++ week-01/test/test.example.js | 22 ++++++++++ week-01/tests.html | 14 +++++++ 7 files changed, 213 insertions(+) create mode 100644 .core/css/main.css create mode 100644 .core/js/main.js create mode 100644 .core/js/test.js create mode 100644 week-01/index.html create mode 100644 week-01/js/week-01.js create mode 100644 week-01/test/test.example.js create mode 100644 week-01/tests.html diff --git a/.core/css/main.css b/.core/css/main.css new file mode 100644 index 0000000..6f9a3c2 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/.core/js/main.js b/.core/js/main.js new file mode 100644 index 0000000..8af04b3 --- /dev/null +++ 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); \ No newline at end of file diff --git a/.core/js/test.js b/.core/js/test.js new file mode 100644 index 0000000..6f59b9e --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/week-01/index.html b/week-01/index.html new file mode 100644 index 0000000..2439827 --- /dev/null +++ b/week-01/index.html @@ -0,0 +1,28 @@ + + + + + + Week 01 + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/week-01/js/week-01.js b/week-01/js/week-01.js new file mode 100644 index 0000000..5175b30 --- /dev/null +++ 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 }; \ No newline at end of file diff --git a/week-01/test/test.example.js b/week-01/test/test.example.js new file mode 100644 index 0000000..d206d7e --- /dev/null +++ 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 new file mode 100644 index 0000000..ff4d720 --- /dev/null +++ b/week-01/tests.html @@ -0,0 +1,14 @@ + + + + + + Test Results + + + + + + \ No newline at end of file