Initial commit

.github/workflows/autograding.yml

@@ -0,0 +1,23 @@
+name: autograding
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js 
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20'
+        cache: 'npm'
+
+    - name: Install package dependencies
+      run: npm install
+
+    - name: Execute test cases
+      run: npm test

.gitignore

@@ -0,0 +1 @@
+/node_modules

README.md

@@ -0,0 +1,69 @@
+# HTML Me Something
+
+## Assignment Requirements
+
+For this assignment, you are asked to create a web page about yourself
+with the following criteria:
+
+   1. Use Git to initialize and track a new project
+   1. Create content in HTML
+   1. Style the page separately from the HTML with CSS
+   1. Use Github to push the project remotely
+   1. Bonus: Use Github Pages to host the page
+
+This is a highly personalized and variable assignment. The final product
+will look different for every student.
+
+## How Your Assignment is Graded
+
+### Grading Tests
+
+Despite it's subjective nature, this assignment contains a few tests. These tests are looking to be sure a you have submitted a repository that includes a number of HTML elements and CSS rules defined in the instructions.
+
+To run the tests, open up the directory for your assignment in your terminal and run the following command: `npm test`.
+
+A passing assignment will have an output of: `7 passed, 7 total`.
+
+If you believe that you have done everything correctly and you are still not getting 7 passing specs, please reach out to your TA for assistance.
+
+Remember that these grading tests are just a starting point for your TA to start grading your work.
+
+### Beyond the Tests
+
+After your TA runs the tests, they will be doing a code check to make sure that your project meets the following requirements:
+
+1. You should have at *least* 2 commits. One for HTML and one for CSS.
+1. Project content should be pushed to Github and you should have submitted the link to the remote repository on Canvas.
+1. If you complete the bonus mission, then the project is hosted on Github pages.
+1. In your HTML, you should have approximately 3 - 10 paragraphs and sections.
+1. You should also have at least one of each of the following:
+
+   - `<p>`
+   - `<header>`
+   - `<footer>`
+   - `<main>`
+   - `<article>`
+   - `<img>` - with images located in an `images` folder
+   - [HTML entity](http://www.w3schools.com/html/html_entities.asp)
+
+1. In your HTML file, you should have no elements dictating style. Style rules should be applied with CSS selectors.
+1. In your CSS, they will check that you have appropriate use of both margin and padding.
+1. They will also check that you have style rules for at least one, hopefully more, of each selector type:
+
+   a. element
+   b. class
+   c. id
+
+1. Minimal, if any, document-level or inline style rules.
+
+When you are done with the assignment, submit the link to your Github repo on Canvas!
+
+
+
+
+//////////////////////////////////////////////////////////////////////////////////////////
+Grading Tests:
+    √ HTML has correct number of sections (3 - 10 child elements of body)
+    √ CSS body sets margin & display
+    √ CSS funParagraph class is green
+    √ CSS mainHeading id is red

__tests__/grading.test.js

@@ -0,0 +1,65 @@
+/**
+ * @jest-environment node
+ */
+
+const fs = require('fs');
+const path = require("path");
+const { JSDOM } = require("jsdom");
+const { window } = new JSDOM(fs.readFileSync(path.resolve(__dirname, "../index.html"), 'utf8'));
+const { document } = window;
+const { screen } = require('@testing-library/jest-dom');
+
+let html = fs.readFileSync(path.resolve(__dirname, "../index.html"), 'utf8');
+let css = fs.readFileSync(path.resolve(__dirname, "../styles.css"), 'utf8')
+
+describe ("Grading Tests: ", function () {
+
+   it("HTML includes the correct number of certain elements", function() {
+         let pElements = document.getElementsByTagName("P").length;
+         let headerElements = document.getElementsByTagName("Header").length;
+         let footerElements = document.getElementsByTagName("Footer").length;
+         let mainElements = document.getElementsByTagName("Main").length;
+         let articleElements = document.getElementsByTagName("Article").length;
+         let imageElements = document.getElementsByTagName("img").length;
+
+         expect(pElements).toBeGreaterThanOrEqual(1);
+         expect(headerElements).toBeGreaterThanOrEqual(1);
+         expect(footerElements).toBeGreaterThanOrEqual(1);
+         expect(mainElements).toBeGreaterThanOrEqual(1);
+         expect(articleElements).toBeGreaterThanOrEqual(1);
+         expect(imageElements).toBeGreaterThanOrEqual(1);
+   })
+
+   it("HTML contains correct number of sections", function() {
+      let childrenElements = document.body.children;
+
+      expect(childrenElements.length).toBeGreaterThanOrEqual(3);
+      expect(childrenElements.length).toBeLessThanOrEqual(10);
+   })
+
+   it("HTML includes external CSS script", function() {
+      let linkElement = document.getElementsByTagName("Link");
+      expect(linkElement.item(0).href.includes('styles.css')).toBe(true);
+   })
+
+   it("CSS body sets margin and display", function() {
+      expect(window.getComputedStyle(document.body).display).toBe("block");
+      expect(window.getComputedStyle(document.body).margin).toBe("8px");
+   })
+
+   it("CSS funParagraph class is green", function() {
+      expect(css.includes(".funParagraph")).toBe(true);
+      expect(css.includes("color: green;")).toBe(true);
+   })
+
+   it("CSS mainHeading id is red", function() {
+      expect(css.includes("#mainHeading")).toBe(true);
+      expect(css.includes("color: red;")).toBe(true);
+   })
+
+   it("HTML includes HTML entities", function() {
+      // Regex pattern: /(&.+;)/ig
+      const regex = /(&.+;)/ig;
+      expect(html.search(regex)).not.toEqual(-1);
+   })
+});

app.js

@@ -0,0 +1,14 @@
+const btnTab1 = document.getElementById('btn-tab1');
+const btnTab2 = document.getElementById('btn-tab2');
+const img1 = document.getElementById('gif1');
+const img2 = document.getElementById('gif2');
+
+btnTab1.addEventListener('click', function() {
+	img1.classList.remove('hidden');
+	img2.classList.add('hidden');
+});
+
+btnTab2.addEventListener('click', function() {
+	img1.classList.add('hidden');
+	img2.classList.remove('hidden');
+});