Git & JavaScript Basics Assignment

This hands‑on assignment is designed to help you practise two essential skills:

• Version control with Git – creating and using branches, staging and committing changes, synchronising with a remote repository, merging changes, and resolving conflicts. Git is widely used because it provides a history of changes, lets you work on parallel features via branches, and supports collaboration.
• JavaScript basics – writing and calling functions, working with variables (let, const, var), using loops and operators, converting strings to numbers using parseInt, converting values to strings with .toString(), and interacting with the Document Object Model (DOM) to update the page.

In addition to Git and JavaScript, you will also practise CSS basics. CSS (Cascading Style Sheets) allows you to control the presentation of HTML documents. You’ll learn how to link an external stylesheet to a page and write simple rules to customise fonts and colours. You will also see how JavaScript can dynamically change the appearance of elements by modifying their style properties.

By working in pairs on a shared repository you will experience a typical workflow for collaborative software development: each partner implements part of the task on a separate branch, commits their work, pushes it to GitHub, then both partners pull the latest changes and merge the branches into the main branch. During the merge you will encounter and resolve a merge conflict, which is an unavoidable part of collaborative work.

Prerequisites

Before starting you should familiarise yourselves with the basic Git commands listed in the course slides:

Concept	Commands / notes	Citation
Initialise repository	git init creates a new repository and a .git directory
Stage changes	git add <file> or git add . stages modifications for the next commit
Create commit	git commit -m "message" records a snapshot of staged changes
Check status	git status shows which files are modified, staged or untracked
View history	git log lists previous commits
Clone repository	git clone <url> copies a remote repository to your machine
Work with remotes	origin is the default remote; use git fetch, git pull and git push to synchronise
Branching	Use git switch <branch> or git branch to create and change branches; branches let you develop features in parallel
Merging	git merge <branch> combines another branch into the current branch; conflicts occur when the same lines have diverged
.gitignore	A .gitignore file lists patterns of files that Git should not track

You should also review the JavaScript basics slides covering variables, type checking (typeof), comparison operators (== vs ===), functions and the arguments array, loops, and execution context.

Files provided

The template repository contains the following files:

• index.html – A minimal web page with two text inputs, two buttons and an empty <p> element for displaying results. This file already links to script.js and to an external stylesheet styles.css.
• script.js – A JavaScript file containing skeletal functions add(a, b), power(base, exponent), updateResult(result) and a section where you will add event listeners. The skeleton uses parseInt to convert the user’s input to numbers and includes TODO comments where you must write code.
• .gitignore – A starter ignore file that exempts common folders such as node_modules/, dist/ and OS‑specific files. You may add to it if needed.
• styles.css – An external stylesheet containing some basic styling for the page and predefined classes .even, .odd and .error. External stylesheets live in files with a .css extension and are linked from the HTML with a <link> element.
• README.md – This document.

In later steps you will also add logo.png, an image used as a logo in the HTML form section. The template repository includes this file so that your page can display an image without needing to fetch one from the web.

What you need to do

This is a pair exercise. One partner will implement the addition feature on a branch called feature/addition and the other will implement the power feature on a branch called feature/power. You will then merge the branches together and resolve a deliberate conflict. Follow the steps below.

1. Clone and configure

1. Accept the GitHub Classroom assignment (provided by your instructor) and create a new repository for your pair. Both partners should have access.

2. On your machine, clone the repository:

   git clone <your‑repo‑URL>
   cd <repo‑folder>

3. Configure your name and email if you have not already:

   git config --global user.name "Your Name"
   git config --global user.email "you@example.com"

4. Run git status to see the tracked and untracked files.

2. Create .gitignore

Open the .gitignore file and read the existing entries. Add any patterns you think should be ignored (for example, temporary files created by your editor). Commit the change:

git add .gitignore
git commit -m "Add ignore patterns"
git push origin main

3. Understand the skeleton

Inspect index.html and script.js. Note the following:

• Input fields with IDs num1 and num2 accept numbers as strings. Use parseInt() to convert them to integers.
• The functions add(a, b) and power(base, exponent) are currently empty – you will implement them.
• The function updateResult(result) currently sets the text of the <p> element with ID result. Each partner will modify this line in different ways, which will cause a merge conflict later.
• You need to add event listeners to the buttons so that when a user clicks “Add Numbers” or “Calculate Base^Exponent”, the corresponding function is invoked and the result is displayed.

4. Implement features on separate branches

Partner A: Addition feature

1. Create and switch to a new branch:

   git switch -c feature/addition

2. Open script.js and implement the add(a, b) function. Use the + operator to compute and return the sum of a and b. Use let to declare variables.

3. Modify updateResult(result) to prefix the result with “Sum: ” so that the result appears as, for example, Sum: 7.

4. Add an event listener to the Add Numbers button. In the handler:

   • Retrieve the values of the two input fields using document.getElementById().
   • Convert them to integers using parseInt().
   • Call your add() function with the parsed values.
   • Pass the result to updateResult() so it appears on the page.

5. Stage and commit your changes:

   git add script.js
   git commit -m "Implement add() and updateResult for addition"
   git push -u origin feature/addition

Partner B: Power feature

1. Create and switch to a new branch:

   git switch -c feature/power

2. Implement the power(base, exponent) function. Write a loop that multiplies base by itself exponent times. Initialise a let variable to hold the result and return it. This is similar to the example in the slides that computes x raised to the y power.

3. Modify updateResult(result) to prefix the result with “Power: ” so that the result appears as, for example, Power: 8.

4. Add an event listener to the Calculate Base^Exponent button. The handler should:

   • Read the values of the two input fields (num1 as the base and num2 as the exponent).
   • Convert them to integers using parseInt().
   • Call your power() function and pass the result to updateResult().

5. Stage, commit and push your changes:

   git add script.js
   git commit -m "Implement power() and updateResult for exponent"
   git push -u origin feature/power

5. Add CSS and style the result

Once the JavaScript features have been merged, spend a few minutes improving the look of the page and practising CSS and DOM styling.

1. External stylesheet: Notice the <link rel="stylesheet" href="styles.css"> element in the <head> of index.html. This links the external CSS file to your page. External stylesheets are the preferred way to apply styles across multiple pages.

2. Open styles.css. It contains some default rules for the page and classes .even, .odd and .error. Modify these rules or add new ones. For example, you might change the page’s background colour, adjust the font size, or style the buttons. Save your changes.

3. Dynamic styling: In your JavaScript event handlers, after computing the result, determine whether the result is even or odd. Use the % operator: result % 2 === 0. Then assign the appropriate class to the result element:

   const resultElem = document.getElementById('result');
   if (isNaN(result)) {
     resultElem.className = 'error';
   } else if (result % 2 === 0) {
     resultElem.className = 'even';
   } else {
     resultElem.className = 'odd';
   }
   updateResult(result);

   Alternatively, you can set the colour directly using the DOM style API: document.getElementById('result').style.color = 'blue'. Both approaches allow your script to adjust the appearance of an element based on its value.

4. Stage, commit and push your changes:

   git add styles.css index.html script.js
   git commit -m "Add CSS styling and dynamic result colours"
   git push origin main

This styling step should be quick and should not affect the overall 45‑minute scope of the exercise.

6. Build a form, table and image (HTML and DOM practice)

Now that you have experience with variables, functions, event handling and styling, you will add a small HTML form to collect user details and display them in a table. This step reinforces basic HTML elements (forms, tables, images) and DOM manipulation. It should add only a few minutes to the assignment.

1. Insert an image and form into index.html. Open index.html and locate the section marked for the form (already included in the template). It contains a placeholder <img> element with src="logo.png" and a <form> with three inputs (name, email and message) followed by a <table>. Ensure these elements are present. The file logo.png is provided in the repository – it will display a small logo on your page.

2. Add styles for the form and table. Open styles.css and notice the additional rules defined for #contact-section, the form controls and the table. Feel free to customise these rules: adjust margins, padding, colours or fonts. Remember that external stylesheets are linked to the HTML via a <link> tag.

3. Handle form submission in JavaScript. In script.js, you will see a new TODO comment describing how to handle the form’s submit event. Write code that adds an event listener to the form with ID contactForm. In the handler:

   • Call event.preventDefault() to stop the browser from reloading the page when the form is submitted.
   • Retrieve the values of the inputs with IDs name, email and message using document.getElementById().
   • Create a new table row (<tr>) and three table cells (<td>) containing the user’s input. Append the row to the table body with ID submissionsBody using appendChild().
   • Clear the form fields so the user can enter another submission.

   This exercise gives you practice manipulating the DOM, working with forms and dynamically generating HTML elements. Remember that JavaScript runs in the browser and can be included either inline or via an external script file – in this assignment we use an external file (script.js) that is linked from the HTML.

4. Commit and push your changes. After implementing the form functionality and verifying that it works, stage and commit your edits to index.html, styles.css and script.js:

   git add index.html styles.css script.js
   git commit -m "Add HTML form, table and image with JS handler"
   git push origin main

This step focuses on basic HTML elements and DOM manipulation. It does not involve branching or conflict resolution, so you can perform it on your main branch after merging the feature branches.

7. Merge and resolve conflicts

1. After both partners have pushed their branches, switch back to main:

   git switch main

2. Update your local main branch to the latest commit on the remote repository:

   git pull origin main
   git fetch origin

3. Merge the first feature branch (e.g., feature/addition) into main:

   git merge feature/addition

4. Now merge the second feature branch (e.g., feature/power) into main. Git will detect that both branches changed the same line in updateResult() and will report a merge conflict:

   git merge feature/power

5. Open script.js. Git will have inserted conflict markers (<<<<<<<, =======, >>>>>>>) around the conflicting changes. Resolve the conflict by combining the functionality of both branches. A simple solution is to change updateResult() so that it simply uses the result argument without any prefix. For example:

   function updateResult(result) {
     document.getElementById('result').innerText = result.toString();
   }

   Alternatively, you can include a prefix argument in the function signature and pass different prefixes depending on the operation.

6. After resolving the conflict, stage and commit the merged file:

   git add script.js
   git commit -m "Resolve merge conflict and unify updateResult()"

7. Push your merged main branch:

   git push origin main

8. Verify that the webpage works by opening index.html in a browser and testing both buttons. You can run the page locally by opening it directly in your browser; no server is required because there is only client‑side code. Use the browser’s console (press F12) to check for errors.

8. Optional enhancements (if you have time)

If you complete the above steps early, consider adding some of these enhancements:

• Display an error message if the inputs are not numbers (isNaN() may be useful).
• Use const for variables that never change.
• Use the typeof operator to display the type of the result in the console.
• Experiment with comparison operators == and === to see how they behave with strings and numbers.
• Add a third operation of your choice (for example, multiplication or subtraction) on a new branch, merge it, and resolve any additional conflicts.

Submitting the assignment

1. Ensure that your main branch contains the combined features from both partners and that the web page functions correctly.
2. Push all branches (main, feature/addition, feature/power) to the remote repository for grading.
3. Your instructor will assess your Git history (branches, commits and merge), the correctness of your JavaScript code, and how you resolved the conflict.

Good luck and have fun!