T01 html css js by braughtg · Pull Request #55 · FarmData2/Vue3-WebDev-Kit

braughtg · 2026-08-26T00:45:23Z

Type of Work

ⓘ Check the box beside the Type of Work to indicate whether this pull request is for a tutorial or an extension. If editing, place an X in the [ ] (e.g. [X] to check it.

- Tutorial
- Extension

Topic

ⓘ Check the box beside the topic to which course topic this pull request applies. If editing, place an X in the [ ] (e.g. [X] to check it.

Time Estimate

ⓘ Provide an estimate of the number of hours you spent working on the contents of this pull request.

Additional Information

ⓘ Provide any feedback you have that might help improve this assignment for future students.

github-actions · 2026-08-26T00:45:36Z

Thank you for your pull request.

Note that all new pull requests to the Vue3-WebDev-Kit are opened as draft pull requests.

Submitting Your Work

When you believe your work on the assignment is complete mark your pull request as ready for review to turn it in.

Getting Help

If you have questions as you work you can get in touch via:

comments on this pull request.
comments on the associated issue(s).
any other course communication channel(s).

braughtg · 2026-08-26T01:00:01Z

@copilot review this pull request.

braughtg · 2026-08-26T01:02:52Z

@copilot review this pull request.

Copilot · 2026-08-26T01:03:39Z

@copilot review this pull request.

Project Structure

Requirement	Status	Evidence
A `first-website` directory exists within `web-projects`.	✅	`web-projects/first-website/` exists.
`first-website` contains `index.html`.	✅	`web-projects/first-website/index.html` exists.
`first-website/styles/style.css` exists.	✅	`web-projects/first-website/styles/style.css` exists.
`first-website/images` contains at least one image.	✅	`images/fd2-logo.png` and `images/fd2-logo-orange.png` exist.
`first-website/scripts/main.js` exists.	✅	`web-projects/first-website/scripts/main.js` exists.
`index.html` loads `styles/style.css` in a `<link>` tag in the head.	✅	`index.html:6`.
`index.html` loads `scripts/main.js` in a `<script>` tag in the head.	✅	`index.html:13`.

Workflow

Requirement	Status	Evidence
The pull request contains at least three commits.	✅	The PR contains 21 commits.
Commit messages briefly describe the changes made.	✅	Commit messages describe their changes, including “adds the image changer,” “adds the custom greeting,” and “updates header text to match in all cases.”

Basic HTML Structure

Requirement	Status	Evidence
`index.html` has a descriptive title in the head.	✅	`index.html:14`, `The FarmData2 Project`.
An h1 has the same or a very similar title.	✅	`index.html:17`, `The FarmData2 Project`.
`styles/style.css` is linked in the head.	✅	`index.html:6`.
The head links to a Google Font.	✅	`index.html:9-12`, Roboto from Google Fonts.
An image element displays an image and has descriptive alt text.	✅	`index.html:19-22`.
One or more paragraphs appear below the image.	✅	`index.html:24-35`.
An unordered or ordered list has at least three list items.	✅	`index.html:36-42`, five list items.
At least one link element is present.	✅	`index.html:25`, FarmData2 GitHub link.

CSS Styling

Requirement	Status	Evidence
`style.css` contains type selectors for `h1`, `p`, `li`, `body`, and `html`.	✅	`style.css:1`, `9`, `18-19`, and `25`.

JavaScript Functionality

Requirement	Status	Evidence
The image click listener toggles the displayed image between two images.	✅	`main.js:3-10` switches between `fd2-logo.png` and `fd2-logo-orange.png`.
The button click listener calls the username-setting function.	✅	`main.js:32-34` registers the button listener and calls `setUserName`.
Page-load code checks if a username is stored in local storage and displays it in the h1 when it exists.	✅	`main.js:25-29` checks `localStorage` and updates `myHeading` with the stored name.

CI Status

Requirement	Status	Evidence
Relevant CI workflow runs pass.	✅	GitHub Actions reports no workflow runs for this pull request, so there are no failed CI runs or logs to investigate.

braughtg · 2026-08-26T01:17:32Z

Used for testing.

Copilot

🟡 Changes recommended

The current HTML/JS combination can break at runtime due to async script loading order, and the JavaScript function name does not match the tutorial requirement (setUsername).

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds the “Tutorial 01 - HTML/CSS/JS” first-website project content (HTML/CSS/JS + images) under web-projects/first-website/, matching the tutorial’s required structure and basic functionality.

Changes:

Adds index.html with page content, Google Font loading, stylesheet link, and script tag.
Adds styles/style.css with basic type-selector styling for the page.
Adds scripts/main.js for image toggling and a localStorage-backed personalized greeting.

Project Structure

Requirement	Status	Notes
`web-projects/first-website` directory exists	✅	Present
`web-projects/first-website/index.html` exists	✅	Present
`web-projects/first-website/styles/style.css` exists	✅	Present
`web-projects/first-website/images` contains ≥1 image file	✅	`fd2-logo.png`, `fd2-logo-orange.png`
`web-projects/first-website/scripts/main.js` exists	✅	Present
`index.html` links `styles/style.css` in `<head>`	✅	Present
`index.html` loads `scripts/main.js` via `<script>` in `<head>`	✅	Present; avoid `async` here (see inline review comment)

Workflow

Requirement	Status	Notes
PR contains at least three commits	✅	Confirmed via PR commit list
Commit messages briefly describe changes	✅	Messages are generally descriptive

Basic HTML Structure

Requirement	Status	Notes
Descriptive `<title>` in `<head>`	✅	“The FarmData2 Project”
`<h1>` matches or is very similar to title	✅	Matches title
`styles/style.css` linked in `<head>`	✅	Present
Head links to a Google Font	✅	Roboto
`<img>` displays an image with descriptive `alt` text	✅	Present
One or more `<p>` elements below the image	✅	Present
`<ul>` or `<ol>` with ≥3 `<li>` items	✅	5 items
At least one link element	✅	Link to FarmData2 GitHub repo

CSS Styling

Requirement	Status	Notes
Type selectors for `h1`, `p`, `li`, `body`, `img`, `html`	✅	Present (including grouped `p, li`)

JavaScript Functionality

Requirement	Status	Notes
Image click toggles displayed image between two images	✅	Toggles `fd2-logo.png` / `fd2-logo-orange.png`
Button click calls `setUsername` function	❌	Implemented as `setUserName` (see inline review comment)
On page load, uses localStorage name to update `<h1>` if present	✅	Present

File summaries

File	Description
web-projects/first-website/index.html	Adds the tutorial page structure/content, styling link, Google Font, and script inclusion.
web-projects/first-website/styles/style.css	Adds basic CSS type-selector styling for the tutorial page.
web-projects/first-website/scripts/main.js	Adds image toggling and localStorage-backed greeting behavior for the tutorial.

Review details

Files reviewed: 3/5 changed files
Comments generated: 3
Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <script async src="scripts/main.js"></script>


+function setUserName() {
+  const myName = prompt('Please enter your name.')
+  if (!myName) {
+    setUserName()
+  } else {
+    localStorage.setItem('name', myName)
+    myHeading.textContent = `FarmData2 is cool, ${myName}`
+  }
+}
+
+if (!localStorage.getItem('name')) {
+  setUserName()
+} else {
+  const storedName = localStorage.getItem('name')
+  myHeading.textContent = `FarmData2 is cool, ${storedName}`
+}
+
+myButton.addEventListener('click', () => {
+  setUserName()
+})


+html {
+  /* px means "pixels". The base font size is now 10 pixels high */
+  font-size: 10px;
+  /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */


Copilot

🔵 Needs a closer look

The async script load can break DOM-dependent JS initialization and the required setUsername function name does not match the rubric.

Review details

Suppressed comments (2)

web-projects/first-website/index.html:13

Using async for the <script> in the <head> can run main.js before the <img>, <h1>, and <button> elements exist, which will make document.querySelector(...) return null and cause runtime errors when adding event listeners. Use defer (or move the script tag to the end of <body>) so the DOM is parsed before the script executes.

    <script async src="scripts/main.js"></script>

web-projects/first-website/scripts/main.js:18

The tutorial criteria expects the button click listener to call a setUsername function, but this file defines and calls setUserName instead. Rename the function and update call sites so the implementation matches the required API/name.

function setUserName() {
  const myName = prompt('Please enter your name.')
  if (!myName) {
    setUserName()

Files reviewed: 3/5 changed files
Comments generated: 0 new
Review effort level: Lite

braughtg added 21 commits June 29, 2026 18:43

Starting tutorial 01

d62e16f

adds FarmData2 logo

b31b371

adds title and paragraph

85654a8

adds unordered list of features

410970f

adds a link to the FarmData2 repo on GitHub

45582d5

adds missing heading and changes title

48b8928

adds css style sheet to index.html

57e6e67

added a different font to the page

3719341

adds background color and styles body

c54f1fb

styles the heading

8d7bf79

centers the FarmData2 logo

e83b2a5

Merge branch 'main' into tutorial-01-html-css

bc7e506

Merge branch 'main' into tutorial-01-html-css

dbdcba1

adds script/main.js and links in index.html

0008572

adds the image changer

cf30a8e

adds the custom greeting

2cdda2f

fixes null username issue

71bca3e

Merge branch 'main' into t01-html-css-js

226cafa

updates header text to match in all cases

68a3424

Merge branch 'main' into t01-html-css-js

ecd10b0

Merge branch 'main' into t01-html-css-js

7176a47

github-actions Bot marked this pull request as draft August 26, 2026 00:45

Copilot started work on behalf of braughtg August 26, 2026 00:46 View session

Copilot finished work on behalf of braughtg August 26, 2026 00:47

Copilot started work on behalf of braughtg August 26, 2026 00:54 View session

Copilot finished work on behalf of braughtg August 26, 2026 00:55

braughtg force-pushed the t01-html-css-js branch from bfc2aa8 to 7176a47 Compare August 26, 2026 00:56

Copilot started work on behalf of braughtg August 26, 2026 01:00 View session

Copilot finished work on behalf of braughtg August 26, 2026 01:01

Copilot started work on behalf of braughtg August 26, 2026 01:03 View session

Copilot finished work on behalf of braughtg August 26, 2026 01:03

Merge branch 'main' into t01-html-css-js

8de5ad2

Copilot started work on behalf of braughtg August 26, 2026 01:05 View session

Copilot finished work on behalf of braughtg August 26, 2026 01:06

Merge branch 'main' into t01-html-css-js

51ad514

Copilot started work on behalf of braughtg August 26, 2026 01:13 View session

Copilot finished work on behalf of braughtg August 26, 2026 01:14

Merge branch 'main' into t01-html-css-js

4b7d87b

braughtg closed this Aug 26, 2026

braughtg reopened this Aug 26, 2026

braughtg closed this Aug 27, 2026

braughtg reopened this Sep 8, 2026

braughtg requested a lite review from Copilot September 8, 2026 19:05

Copilot started reviewing on behalf of braughtg September 8, 2026 19:05 View session

Copilot AI reviewed Sep 8, 2026

View reviewed changes

braughtg requested a lite review from Copilot September 8, 2026 19:15

Copilot started reviewing on behalf of braughtg September 8, 2026 19:16 View session

Navigation Menu

Uh oh!

T01 html css js - #55

T01 html css js#55
braughtg wants to merge 24 commits into
mainfrom
t01-html-css-js

braughtg commented Aug 26, 2026 •

edited by github-actions Bot

Loading

Uh oh!

github-actions Bot commented Aug 26, 2026

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

Copilot AI commented Aug 26, 2026

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

braughtg commented Aug 26, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Work

Topic

Time Estimate

Additional Information

Uh oh!

github-actions Bot commented Aug 26, 2026

Submitting Your Work

Getting Help

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

Copilot AI commented Aug 26, 2026

Project Structure

Workflow

Basic HTML Structure

CSS Styling

JavaScript Functionality

CI Status

Uh oh!

braughtg commented Aug 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Suppressed comments (2)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

braughtg commented Aug 26, 2026 •

edited by github-actions Bot

Loading