How To Get Code Ready For Work
Note: Before starting these steps, make sure that both of your repositories are ‘clean’: in other words, everything is committed and pushed so that both the remote and local versions of your projects are in sync. This will prevent potential problems later.
Decide whose code you will work on first. The owner of that code (who will be the Navigator) provides the link to their GitHub repo to the other member of the pair (who will be the Driver). You can send this link over Slack.
The Driver follows the link to that repo and creates a fork of the repo in GitHub like we did in class.
The Driver then goes to their fork of the repo (the URL should have the Driver’s GitHub name in it) and copies the link to that repo (the link have the Driver’s GitHub name in it and should end in .git).
Inside of the Driver’s main work directory on their laptop, make a directory with your partner’s name and then navigate (cd) into it. From there, enter the command git clone the-link-you-copied. That will create a local version of the forked repo on the Driver’s laptop.
cd into that directory and enter code . in the terminal to open all of the files in VSCode.
Start working on the code!
Extend and Refine
You’ll be making some edits to each other’s sites. After each bit of work is completed (in other words, after each successful modification of a single question), be sure to do an add-commit-push cycle (a-c-p) to place the code on GitHub and preserve a versioned history of your work.
Move the logic for all questions into functions: In this class we learned about functions, and now we’ll move the logic for the individual questions into separate functions, and call those functions to run the game.
In its most basic sense, this is pretty simple and straightforward: ‘wrap’ the logic and variables for a given question with function someFuncNameYouChoose() { at the beginning, and add a closing curly brace } at the end. To make the function execute, just call it afterwards: someFuncNameYouChoose(); After completing this step the game should behave exactly as it did before. a-c-p
Update the README file: In the README file, add in the names of the Driver and Navigator and indicate that the code was worked on together. This is basic record-keeping so that you can keep up with how the code has been edited in a user-friendly format. a-c-p
Push to GitHub; Make a Pull Request
Once everything is finished, and the Driver has done the last edits and pushed them to GitHub, it’s time to send the edited code to the owner (who has been in the Navigator role the whole time, of course). We do this with a GitHub feature called a Pull Request, which we generally refer to as a PR.
From the Driver’s repo that is a fork of the Navigator’s repo, hit the green button that says ‘Create pull request’.
Follow the remaining steps as described onscreen and as shown here: https://help.GitHub.com/articles/using-pull-requests. (These instructions for doing a pull request from a forked repo to its source are deliberately vague, to give you practice in reading through instructions, trying things out, solving problems collaboratively, and getting guidance from documentation).
The owner of the code (the Navigator) then goes to their GitHub repo for the project and accepts the pull request. After that, in terminal on their laptop, while in the same directory, enter the command ‘git pull origin main’ to retrieve the modified code from GitHub.
When everything is finished for one person’s project, submit the links for the last pull request made from the Driver to the Navigator (in both cases) in the Canvas assignment.
Pair Programming Basics
In pair programming, there are two developers working on a single body of code on a single computer.
One member of the pair is the Driver, and this person will be the one doing all of the actual typing work on the laptop. The Driver will be working on the Navigator’s code by way of forking and cloning the Navigator’s repository.
The other member of the pair is the Navigator, and this person will work with only their voice and their thoughts.
The Navigator does not touch the keyboard, nor does the Navigator work on their laptop “on the side”. The Navigator is fully engaged with the work that the pair is doing, typically using a piece of scratch paper to sketch diagrams, take notes, or list ideas. At most the Navigator uses their laptop to perhaps keep a copy of this assignment document open or to look up something needed to write the code, such as a reference page like MDN.
Under no circumstances does the Navigator work on any code on their laptop: for the pair programming process to be effective, both parties must be fully engaged on the code they’re working on together.
The lab time should be divided into two sections of approximately two hours each. At the halfway mark, you should swap roles and work on the other person’s code. Remember to watch the clock and determine the best point to swap roles.
In the case of an odd number of students, one group will have three members and you should rotate through three roles: Driver, Navigator, Observer. Each person should take on each role one time. You will need to be even more mindful about watching the clock to ensure that equal time is devoted to all three projects.
Submission Instructions
Forking - new repo based on another one, under your own account so you can contribute to someone else’s project.
let only works in that function and not anywhere else, best practice put into functionFunction Syntax:
function name (parameters){
command process;
command process;
etc;
}
{curly brackets always contain code blocks}
Remember to call/invoke the function:
greeting()
age ()
guessMyFavoriteColor()
Examples:
// Greet the visitor
function greeting() {
let name = prompt ("What is your name?"){
alert('Welcome back, $(name)!');
}
} <<<<<<<<<<<< input: none, process: prompt, alert, output: none>>>>>>>>>>>
// Checks if their answer was right
function wasAnswerRight (correctAnswer, answerGiven) {
if (answerGiven===correctAnswer) {
return true;
else { return false;}
}
} <<<<<<<<<<<< input: expected, actual (parameters), process: input, conditional, output: return something>>>>>>>>>>>
// Checks age
let age=prompt("How old do you think i am?");
age = Number(age); or let age= Number(prompt("How old do you think i am?"));
let correct = was AnswerRight (55, age)
alert(correct);
No else is required if you put {return true;} return false; after if ()
- Example:
function guessMyFavoriteColor (){
let myFavoriteColors = ['Black', Grey, Bone];
let colorGuess= prompt ("Guess one of my favorite colors);
if (myFavoriteColors.includes(colorGuess)){
alert ("ya")}
else {
alert(nope);
}
}
OR
Will keep asking until correct answer so you need a return
let correctColorGuess=false;
while (!correctColorGuess){
correctColorGuess=guessMyFavoriteColor();
}
function checkMyFavoriteColor() {
let myFavoriteColors = ['black', 'grey', 'bone'];
let colorGuess = prompt("Guess one of my favorite colors");
colorGuess = colorGuess.toLowerCase();
if( myFavoriteColors.includes(colorGuess) ) { return true; }
return false;
}
for (let i=1;i<5;i++){
let correct = guessMyFavoriteColor();
if (correct) {
alert (You did it);
break;
}
}
Parameters Example:
function isSomethingThere (something, where){
if (something is there){
return true;}
return false;
}
let newsPaperWas Delivered = isSomethingThere("newspaper", "driveway");
let paperTowels= isSomethingThere ("paper towels", "garage cabinet")
VS Code Shortcut option + up
A function definition may also be referred to as a function declaration or a function statement.
Function invoke is used to execute the code within the function.
What are some popular values for the position property?
StaticRelativeAbsoluteFixedStickyStatement on why this topic matter as it relates to what I’m studying in this module:
To create a basic link, we wrap text or other content inside what element?
<a> element.<a href="link">Whatever text you want the link to be clickable</a>.The href attribute contains what information?
href links the web address you are connecting to.What are some ways we can ensure links on our pages are accessible to all readers?
Use clear link wording: make sure to create concise but still descriptive link textsKeep link text short: short and to the point words allow visual users to skim the pageAvoid generic phrase: still add description to link text. Avoid things like click-here or linkWhat is meant by “normal flow”?
What are a few differences between block-level and inline elements?
Block-level: these elements can already have existing properties in them like width, height, padding etc. Examples are h1, <p> and they start on new lines and fill up the full width of space available inside the parent element.Inline: these elements do not have existing properties and do not start on new lines and do not take up all the space, but only as much width as necessary. Examples are <a>, <strong>Static positioning is the default for every html element.
Name a few advantages to using absolute positioning on an element.
Overlap: it allows elements to overlap on top of other elementsPrecise Position: using the top, bottom, left, and right properties you can change values around to precisely place the element where you want it.Isolation: it allows the element to be in its own “layer” so it doesn’t mess with the layout of other elements.What is a key difference between fixed positioning and absolute positioning?
Fixed Positioning: the element is positioned relative to the view of the browser window, it doesn’t move and stays fixed where it is when a user scrolls. Fixed is useful for elements like a navigation bar that you want always at the top.Absolute Positioning: the element is positioned to the nearest parent element, it moves with the content when the user scrolls.Describe the difference between a function declaration and a function invocation.
Function: something in JS that allows you to store code that does one task and you can call the code when needed instead of typing out the same code over and over.Declaration: when you define a function in JS. Use function follow by name of function, parameters in parentheses, and your code in curly brackets. For example:
function name (parameters) {
function code
}
Invoking: this is the process of calling or executing the function. You use the function name and the an argument in parenthesis. name (argument);What is the difference between a parameter and an argument?
Parameter: it’s the variable listed in the function declaration, whereas anArgument: is the actual variable the function uses when invoked.Pick 2 benefits to pair programming and reflect on how these benefits could help you on your coding journey.
Write a brief reflection on your learning today, or use the prompt below to get started.
“[Adult learners] demand that their learning is relevant to their real life issues, problems, and tasks, and that their education will boost their performance levels and help them live their lives in a better, and more satisfying way.”
In other words, understanding your motivation for learning contributes to the effectiveness of your learning, and your learning journal is a place to explore those thoughts. What are your motivations for learning?