diff --git a/.forestry/settings.yml b/.forestry/settings.yml new file mode 100644 index 00000000..f3c325e2 --- /dev/null +++ b/.forestry/settings.yml @@ -0,0 +1,17 @@ +--- +new_page_extension: md +auto_deploy: false +admin_path: +webhook_url: +sections: +upload_dir: uploads +public_path: "/uploads" +front_matter_path: '' +use_front_matter_path: false +file_template: ":filename:" +build: + install_dependencies_command: npm install + preview_docker_image: forestryio/node:12 + mount_path: "/srv" + working_dir: "/srv" + instant_preview_command: npm run develop diff --git a/.github/workflows/learninglabauto.yml b/.github/workflows/learninglabauto.yml index 59cf1fb3..76e2b37d 100644 --- a/.github/workflows/learninglabauto.yml +++ b/.github/workflows/learninglabauto.yml @@ -19,9 +19,6 @@ jobs: with: python-version: 3.7 - - name: Install Requirements - run: pip install -r requirements.txt - - name: Execute Python script run: | python scripts/learninglabauto.py diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 00000000..26a736b7 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,14 @@ +name: Publish Slack Repo +on: push +jobs: + master: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: publish:slack + uses: bitprj/push-subdir@1.4 + env: + API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + args: Slack-Apps/homework bitprj slackapps-course main diff --git a/BitCampIllustration.jpeg b/BitCampIllustration.jpeg new file mode 100644 index 00000000..25a9ca96 Binary files /dev/null and b/BitCampIllustration.jpeg differ diff --git a/GameDev/README.md b/GameDev/README.md new file mode 100644 index 00000000..b43e1037 --- /dev/null +++ b/GameDev/README.md @@ -0,0 +1,123 @@ +# GameDev 🎮 + +Who doesn’t love video games? From Pac-Man to Mario, video games have ingrained themselves as a staple in day to day live - but how are they made? In the 80s, developers would simply have to code their games from scratch, but nowadays, there are a variety of game-development engines to automate the process. Unity is one of these engines; an industry standard used by multimillion dollar companies and small-time hobbyists alike. Beginner friendly and incredibly versatile, Unity is the gold standard for a reason, and learning it is a surefire way to turn yourself into a bona-fide game developer! + +After learning the fundamentals of how to implement various features and tools in Unity, students will spend a few weeks coding their own games/tech demos to demonstrate what they’ve learned. + +### Prerequisites + +Basic programming knowledge (C# is used by Unity, but knowing it isn’t necessary) + +### Agenda + +Introduction: Week 0 will be an introduction to GameDev, and a broad overview of what exactly makes a game fun! +The meat and potatoes: Weeks 1 through 3 will cover the barebone essentials of Unity, while weeks 4 through 7 will delve into more advanced usages. +Finale: From week 8 to the end of the program, students will be working with their mentors to focus on their games and make sure they’re as good as can be for the final presentation! + + +### Tools + +- Unity Personal Edition +- Unity Asset Store + +## Curriculum Outline +### Week 1 + +This week, you’ll be learning the basics of the interface. We cover the different windows of the unity interface, manipulating assets, and a basic introduction to scripting. + +Learning Objectives + +* Project Setup, Basics of the interface +* Importing Assets (bringing car asset into the environment) +* Controls of the viewport +* Changing the position of gameobjects +* Working with the camera +* Running the game +* Creating and saving layouts for the interface +* Basics of scripts, how do we control our game objects? +* Creating and attaching C# scripts +* Editing scripts using visual studio +* Basics of Update() and Start() +* Moving the vehicle forward using transform.Translate(), no keyboard input yet + +### Week 2 + +In week 2, we dive a little deeper into manipulating game objects and scripting. You’ll learn some C# code, components, and how to control game objects. + +Learning Objectives + +* Basics of Vector3 class, using Vector3.forward. +* Using Time.deltaTime to implement velocity +* Basics of rigidbody, how to use physics in unity +* Changing mass of rigidbodies +* Duplicating objects +* Basics of public variables, add a speed variable in the script, make it public, change it from the editor +* Creating a new script to make the camera follow the player without using child/parent objects (transform.position = player.transform.position on Update()) +* Try this out, see that it doesn’t work, add an offset to the camera position to make it 3rd person view +* Add a Playmode Tint colour to the game in Edit > preferences >colors > playmode tint + + +### Week 3 + +In week 3, we’ll be learning how to get input from the player using the Unity Input System and applying that to gameplay, techniques on cleaning up the code and object hierarchy, and how to start creating our own games using project design documents and importing assets into Unity projects from the Unity Asset Store and the internet. + +Learning Objectives + +* How to get Horizontal and Vertical input from the player using Input Manager axes. +* How to rotate a game object using input. +* How to make your code and object hierarchy cleaner and more readable. +* How to use project design documents to make your own games +* How to import assets from your computer or the Unity Asset Store + +### Week 4 + +This week we will be providing an introduction to user interface, or UI, using a practical example. We will learn how to create basic UI elements such as text and buttons. This includes text that changes throughout the course of our running game and a working restart button. We will also give an example of working with multiple scenes by making a game over screen. + + + +Learning Objectives + +* Three types of canvas +* UI text elements +* How to change UI text with code +* UI buttons and how to connect them to a function +* Creating new scenes and switching from one scene to another with code +* Creating and using tags + +### Week 5 + +This week we will finish the game we started last week by adding a main menu with buttons that control the difficulty. This main menu will be our third and final scene, and we will change some of last week’s code to allow all three scenes to work together. By the end of this portion of today's lesson, we will have a main menu with buttons that control the spawn rate of crates, the game itself with dynamic score text, and a game over screen with a button that restarts the game at the previously selected difficulty. +Once we finish our Crates game, we will move on to another example to showcase more UI elements. More specifically, we will show an inventory system that uses grids, panels, and images. This section will also go into how to enable and disable game objects as a quick and easy way hiding items without completely removing them. Starter code is given in the same folder as this file. Please note that the Inventory system is currently in Unity version 2020.1. Playing the starter code you are able to move around a field with wasd, and there are some items in the field. By the end of today's session, you will be able to press i to pull up your inventory menu that shows all the items you've picked up. + + +Learning Objectives + +* More on buttons including how to give them functionality with code +* How to transfer information between different scenes +* Pausing a game +* Creating a grid with panels +* Creating images + +### Week 6 + +This week we’ll learn to find and integrate sound effects into a prototype game, and by the end of lecture you’ll be able to integrate sound effects and background music into any scene. We’ll have a list of tools and code snippets to make these sounds behave the way we want, and we’ll have the licensing knowledge to find sound files legally to integrate them into individual projects, + +Learning Objectives + +* Audio Sources +* Audio Clips +* How to play sounds (looping and oneshot) +* Where to find free sounds +* Open source licensing + +### Week 7 + +This week we’ll investigate particle effects and learn to put them into last week’s prototype game, and by the end of lecture you’ll be able to understand and manipulate these unique effects. We’ll come away from the lesson with the ability to edit particle systems to their desired effect and play them at will. + +Learning Objectives + +* Particle Systems +* Editing particle modules +* How to play particle effects +* Reverse-engineering systems + diff --git a/GameDev/ReadMe.md b/GameDev/ReadMe.md deleted file mode 100644 index 3c7d6aca..00000000 --- a/GameDev/ReadMe.md +++ /dev/null @@ -1,6 +0,0 @@ -## Directions: -1. In the folders for each week, update the ReadMe.md to contain a broad overview of the week's content. -2. In the "livestream" folder (within each week's folder), paste in your completed script for that week's livestream. -3. In that week's "homework" folder, put the solutions in the "solution" folder, and the starter code in the "starter" section of the "issues" folder. You should also include a .md file in the "issues" folder with directions for the homework. - -Due by the end of Sunday, January 3rd. diff --git a/Javascript/README.md b/Javascript/README.md new file mode 100644 index 00000000..69736cb1 --- /dev/null +++ b/Javascript/README.md @@ -0,0 +1,83 @@ +# JavaScript :rocket: + +What is JavaScript? JavaScript (JS) is an extremely useful tool for user interface (UI) design that allows the programmer to build interactive webpages. Some of the most essential items for a website's success are ease of navigation and an appealing design, thus making the mastery of JS a must for aspiring designers. + +Throughout the course, students will gain experience with JS using TwilioQuest, learning the basics as well as some advanced topics, by creating an custom interactive interface with digital and analog clocks. + +**Prerequisites** + +This introductory course is simplified so that those with minimal experience in computer science can try their hand at web design, so we just ask that students familiarize themselves with the material by checking out the [JS website](https://www.javascript.com) and reading up on [TwilioQuest](https://www.twilio.com/quest). + +**Agenda** + +* *Week 1*: Set up environment, learn basic HTML and JS to print out current time. +* *Week 2*: Design webpage using HTML and CSS to create a custom stylized digital clock. +* *Week 3*: Construct an analog clock using knowledge gained from building a digital clock. +* *Week 4*: Integrate completed clocks into one interface and finish by adding advanced features. + +**Tools** + +* VSCode +* Github +* TwilioQuest +* Linux/OS Terminal + +--- + +## Curriculum Outline + +#### **Week 1** + +*** + +📚 **Summary** + +In this assignment, students will **gain a thorough understanding of basic HTML syntax as well as JavaScript functions** to print out the **current time** given some user input. + +**Learning Objectives** + +- Setting up programming environment +- Creating HTML and JS files +- Learning basic HTML syntax to make buttons and display text +- Learning JS functions to receive and read user input + +#### **Week 2** + +*** + +📚 **Summary** + +In this week's assignment, students will build off of last weeks work and **style their existing webpage using CSS** to produce a more aesthetically pleasing **digital clock**. + +**Learning Objectives** + +- Creating a CSS file +- Defining classes for features in HTML +- Learning attributes and properties in HTML and CSS +- Stylizing digital clock and features in CSS + +#### **Week 3** + +*** + +:books: **Summary** + +Students will now **use the knowledge and experience they've gained** from building a digital clock to code a live **analog clock** that changes based on the user's selected time zone. + +**Learning Objectives** + +- Understanding basic syntax for HTML, CSS, and JS +- Creating an analog clock from the digital clock + +#### **Week 4** + +*** + +:books: **Summary** + +For the final assignment, students will **integrate all previous assignments into a single interface** and add some bells and whistles. + +**Learning Objectives** + +- Integrating both clocks into one interactive interface +- Adding buttons to switch between clocks diff --git a/Javascript/homework/config.yml b/Javascript/homework/config.yml new file mode 100644 index 00000000..7ddf8e6a --- /dev/null +++ b/Javascript/homework/config.yml @@ -0,0 +1,212 @@ +title: JavaScript with HTML and CSS +description: >- + This four-week JavaScript bootcamp will give students with little to no coding experience an introduction to web development. Throughout the course, students will create objects with HTML, style these objects with CSS, and animate them with JavaScript. +template: + name: learninglab-template + repo: your-learninglab-template +before: + - type: createIssue + title: Week 1 + body: 1.1-setup.md +steps: + - title: 'Week 1: Task 1: Environment setup and starting your first HTML file' + description: In this task, you'll be setting up your computer to get ready to code. We'll also show you how to create a simple HTML file. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1.2-buttons.md + issue: 1 + - title: 'Week 1: Task 2: Getting user input with buttons' + description: For task 2, we'll go over how to insert a radio button, or an option button, as well as a regular button. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1.3-user-input.md + issue: 1 + - title: 'Week 1: Task 3: Using JavaScript to read user input' + description: Now that we've set up the form, we'll use JavaScript to grab the user's input for us to use in our code. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1.4-date.md + issue: 1 + - title: 'Week 1: Task 4: Printing the time with JS' + description: In this task, we'll show you how to print your local machine's time onto your webpage using some basic JS tools. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1.5-timezone.md + issue: 1 + - title: 'Week 1: Task 5: Changing your clock based on user input' + description: Now we'll show you how to write a JavaScript function that takes the user's input from the radio button and prints the time in the timezone they selected. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 1 + - title: 'Week 1: Feedback' + description: Provide your feedback for Week 1! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1-complete.md + issue: 1 + - type: createIssue + title: Week 2 + body: 2.1-css-linking.md + - type: closeIssue + issue: 1 + - title: 'Week 2: Task 1: Linking your CSS file' + description: How to begin a CSS file and link it to your HTML file. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2.2-body.md + issue: 7 + - title: 'Week 2: Task 2: Styling the body' + description: In this task, we'll go over how to style the text in your body tag. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2.3-clock-design.md + issue: 7 + - title: 'Week 2: Task 3: Creating your clock' + description: For the third task, we're going to begin designing a digital clock using some basic styling techniques. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2.4-form-layout.md + issue: 7 + - title: 'Week 2: Task 4: Styling your buttons ' + description: Now that you've styled your text and your clock, now's time to make any changes to your radio buttons that you'd like. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 7 + - title: 'Week 2: Feedback' + description: Provide your feedback for Week 2! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2-complete.md + issue: 7 + - type: createIssue + title: Week 3 + body: 3.1-integrating-code.md + - type: closeIssue + issue: 7 + - title: 'Week 3: Task 1: Gathering your existing code' + description: This step will simply guide you through starting a JavaScript file and copying your code from last week's assignment. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3.2-clock-styling.md + issue: 12 + - title: 'Week 3: Task 2: Building the background of your clock' + description: In this task, we'll cover some tips and tricks to get your clock shaped and positioned correctly on your page. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3.3-clock-digits.md + issue: 12 + - title: 'Week 3: Task 3: Adding numbers to your clock' + description: We'll use HTML and CSS in this step to print numbers on your clock and get them ready for positioning. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3.4-rotation.md + issue: 12 + - title: 'Week 3: Task 4: Using rotation to align the numbers on your clock' + description: In this task, we'll walk you through how to use variables in CSS, as well as how to use a built-in CSS function to rotate your numbers so that they're in the right position on your clock. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3.5-clock-hands.md + issue: 12 + - title: 'Week 3: Task 5: Designing the hands of your clock' + description: We'll go over some more CSS tricks in this step to get the hands of your clock in position for time-telling. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3.6-moving-hands.md + issue: 12 + - title: 'Week 3: Task 6: Getting your hands to move' + description: We'll add some final touches to your CSS file so that your hands rotate correctly and then get to work on your JavaScript so that your clock can do what clocks do. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 12 + - title: 'Week 3: Feedback' + description: Provide your feedback for Week 3! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3-complete.md + issue: 12 + - type: createIssue + title: Week 4 + body: 4.1-page-setup.md + - type: closeIssue + issue: 12 + - title: 'Week 4: Task 1: Create a new page with an analog and a digital clock' + description: Your final assignment is going to merge everything you've created so far onto a single webpage, and allow the user to choose between a digital clock and analog clock. This first task will help you get all of your code in one place. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 4.2-more-buttons.md + issue: 19 + - title: 'Week 4: Task 2: Adding radio buttons for clock preferences' + description: Next, we're going to create a set of radio buttons that allow a user to choose if they’d like to see the time on an analog clock or on a digital clock. This task will demonstrate a different approach to radio buttons. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 4.3-more-js-functions.md + issue: 19 + - title: 'Week 4: Task 3: Toggling between a digital and an analog clock' + description: Now that we have the page all set up, all that's left to do is to get our code to do what the webpage says! This task will go over some JavaScript functions using methods you've learned previously. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 4.4-customization.md + issue: 19 + - title: 'Week 4: Task 4: Adding the bells and whistles' + description: Your final task will be to use your creativity to add anything you'd like to your clock webpage + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 19 + - title: 'Week 4: Feedback' + description: Provide your feedback for Week 4! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 4-complete.md + issue: 19 + - type: closeIssue + issue: 19 diff --git a/Javascript/homework/course-details.md b/Javascript/homework/course-details.md new file mode 100644 index 00000000..18c4469b --- /dev/null +++ b/Javascript/homework/course-details.md @@ -0,0 +1,36 @@ +# JavaScript with HTML and CSS + +*This four-week JavaScript bootcamp will give students with little to no coding experience an introduction to web development. Throughout the course, students will create objects with HTML, style these objects with CSS, and animate them with JavaScript.* + +## **Week 1: Getting started with HTML and JavaScript** + +**Learning Objectives** + +- Setting up programming environment +- Creating HTML and JS files +- Learning basic HTML syntax to make buttons and display text +- Learning JS functions to receive and read user input + +## **Week 2: Styling your webpage with CSS** + +**Learning Objectives** + +- Creating a CSS file +- Defining classes for features in HTML +- Learning attributes and properties in HTML and CSS +- Stylizing digital clock and features in CSS + +## **Week 3: Advanced topics in HTML, CSS, and JavaScript** + +**Learning Objectives** + +- Understanding basic syntax for HTML, CSS, and JS +- Creating an analog clock from the digital clock + +## **Week 4: Applying what you've learned** + +**Learning Objectives** + +- Integrating both clocks into one interactive interface +- Adding buttons to switch between clocks +- Using your creativity to jazz up your page \ No newline at end of file diff --git a/Javascript/homework/responses/1-complete.md b/Javascript/homework/responses/1-complete.md new file mode 100644 index 00000000..c73619aa --- /dev/null +++ b/Javascript/homework/responses/1-complete.md @@ -0,0 +1 @@ +[That's it for Week 1! Click here to move on to Week 2!]({{ repoUrl }}/issues) \ No newline at end of file diff --git a/Javascript/homework/responses/1.1-setup.md b/Javascript/homework/responses/1.1-setup.md new file mode 100644 index 00000000..b1d3a4fd --- /dev/null +++ b/Javascript/homework/responses/1.1-setup.md @@ -0,0 +1,21 @@ +## Task 1: Environment setup and starting your first HTML file + +#### In this task, you'll be setting up your computer to get ready to code. We'll also show you how to create a simple HTML file. + +If you have not already set up your environment for this course, be sure to watch the loom video (this is where I'd add a link to the video I'm gonna create about setting up your environment) and download [Microsoft Visual Studio Code](https://code.visualstudio.com/Download) for your machine. + +- Once installed, open the application and create a new folder for this class. + - Inside of that folder, create another folder for this week's homework - you should have a separate folder for every assignment to keep your code organized. + - Once you've selected your week 1 homework folder, create a new HTML file and title it "index.html". + +- After you've opened this file, type "html" in the editor and select the shortcut "html:5". This will automatically type out some mandatory HTML syntax for you. + +- When your file is all set up, add a title by typing put your title here<title> within the <head> section and make sure within your <body> section thats it prints "Hello World!" + +#### Open a pull request for your code + +Once you've completed this task, be sure create a new branch titled `[your GitHub username]-[week]-[task number]`. For example my GitHub username is `danzelo1` so my branch name for week 1's first task (this assignment) would be `danzelo1-1-1`. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 2. \ No newline at end of file diff --git a/Javascript/homework/responses/1.2-buttons.md b/Javascript/homework/responses/1.2-buttons.md new file mode 100644 index 00000000..5d32d618 --- /dev/null +++ b/Javascript/homework/responses/1.2-buttons.md @@ -0,0 +1,27 @@ +## Task 2: Getting user input with buttons + +#### For task 2, we'll go over how to insert a radio button, or an option button, as well as a regular button. + +Next, lets set up a form for a user to select their timezone for the clock we're going to build. To do this, we'll use radio buttons - these are the type of buttons that you'd associate with a multiple choice question - there are a few different options to select, but, since we only want to show one time, we only want the user to be able to select one of these buttons. + +Radio buttons can be defined using the HTML `input` field if you set the `type` attribute to `"radio"`. + +- In order to let the computer know that these items are in a group, be sure to give each input field the same same `name` attribute (I named mine `"timezone"`). +- Each item should also have a unique value tag. +- Once you've set up your input fields, feel free to add some labels and breaks to make your form easier to read. + +Next, we need to add a submit button. + +- This can be defined using a `button` tag with the` type` attribute set to `"button"` and `value` attribute set to `"Submit"`. + +Whenever we want to take in some user input involving input fields and a submit button, we want to make sure to group our relevant code in the `form` tag so that the computer knows what to look for. With that being said, make sure to surround your code related to the input fields and submit button with a form tag. + +Finally, add a break and a `div` tag with a unique `id` right below the submit button. We will use this later to print the selected timezone. + +#### Open a pull request for your code + +Just as you did for the last task, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. As a reminder my GitHub username is `danzelo1` so my branch name for week 1's second task (this assignment) would be `danzelo1-1-2`. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 3. \ No newline at end of file diff --git a/Javascript/homework/responses/1.3-user-input.md b/Javascript/homework/responses/1.3-user-input.md new file mode 100644 index 00000000..86fdf684 --- /dev/null +++ b/Javascript/homework/responses/1.3-user-input.md @@ -0,0 +1,34 @@ +## Task 3: Using JavaScript to read user input + +#### Now that we've set up the form, we'll use JavaScript to grab the user's input for us to use in our code. + +Outside of the form, but still in the body, open the `script` tag with the `type` attribute set to `"text/javascript"`. + +- To open the script tag you would type `<script type="">` +- Inside here, define a function to print the user's selection from the timezone form. + - You can do this by looping through the radio buttons and seeing if the `checked` attribute is true. + +Once you find the checked radio button, save it to a variable. + +- Next, use `document.getElementById().innerHTML` + + - Place the id of the div you defined below the submit button in the parentheses. + + - Set this line equal to the variable holding the checked radio button to print it onto your webpage. + - For example, I set my div's id to `"result"` and named my variable `output` and my code looked like this:`document.getElementById("result").innerHTML = output;` + +Finally, you'll want to scroll up to your submit button + +- Add the `onclick` attribute to the `button` tag and set it equal to the name of the function you just defined + - This will let the computer know to call this function when the submit button is clicked. + - My function was named `ValidateForm` and my button tag looks like this:`<button type="button" value="Submit" onclick="ValidateForm()"> Submit </button>` + +Now, your page should print out the value of whichever item the user has selected when they click the submit button. + +#### Open a pull request for your code + +Just as you did for your previous tasks, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. As a reminder my GitHub username is `danzelo1` so my branch name for week 1's third task (this assignment) would be `danzelo1-1-3`. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 4. \ No newline at end of file diff --git a/Javascript/homework/responses/1.4-date.md b/Javascript/homework/responses/1.4-date.md new file mode 100644 index 00000000..7a398069 --- /dev/null +++ b/Javascript/homework/responses/1.4-date.md @@ -0,0 +1,39 @@ +## Task 4: Printing the time with JS + +#### In this task, we'll show you how to print your local machine's time onto your webpage using some basic JS tools. + +Next, we will print the time on your local machine onto the webpage with a simple JavaScript function. + +First, define a new function inside your `script` tag, but outside of the function you just wrote for finding the selected radio button. + +- Define a new variable and set it equal to `new Date()`. This will grab the current date and time from your local machine. + +Next, create variables for the current hour, minute, and second using the respective `Date` functions. + +- You may also want to define a session variable that keeps track of whether your clock is showing "AM" or "PM" - you can do this using a few simple conditionals. + +Once you've defined your time variables, define a new variable to concatenate the hour, minute, and second variables, each separated by a colon (you can also add your session variable here). + +We'll want our clock to be updated every second, so, at the bottom of the function, call the `setTimeout()` function with the name of your clock function and `1000` as parameters. + +- This will call your function every 1000 ms (or 1 second) that your page is running. + +Lastly, to print your clock, add a break and a div tag outside of your form tags. + +- Give this element a unique tag. + +Now, scroll back down to your JavaScript clock function + +- Use the document's `getElementById()` function to print your time variable, just as you did to print the form result in your previous function. + +Now, you should have a working digital clock and a form that prints the item selected! + +P.S. Don't forget call your clock function once at the bottom of your script! + +#### Open a pull request for your code + +Just as you did for your previous tasks, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. As a reminder my GitHub username is `danzelo1` so my branch name for week 1's fourth task (this assignment) would be `danzelo1-1-4`. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 5. \ No newline at end of file diff --git a/Javascript/homework/responses/1.5-timezone.md b/Javascript/homework/responses/1.5-timezone.md new file mode 100644 index 00000000..8a7b7bdc --- /dev/null +++ b/Javascript/homework/responses/1.5-timezone.md @@ -0,0 +1,27 @@ +## Task 5: Changing your clock based on user input + +#### Now we'll show you how to write a JavaScript function that takes the user's input from the radio button and prints the time in the timezone they selected. + +Finally, let's integrate the functions we wrote to produce a clock that changes given a selected timezone. + +- First, define a global variable and set it to 0. + - This variable will be how we keep track of how many hours we need to change the clock by. + +Now, scroll down to the function you wrote to find the selected timezone. + +- Using either conditionals or a switch statement, change the offset based on the timezone selected. + - For example, if your computer is set to eastern standard time and the user selected pacific standard time, then you would set the offset to 3. + +Once you've set up your conditionals, revisit your function that sets your clock. + +- In the line where you define your variable that holds your current hour, add `+ offset` so that the offset is added to whatever hour your computer's clock is set to and then that new hour is saved to the hour variable. + +Finally, call the function that sets your clock at the end of your function that changes the timezone so that the time gets updated. Now, your clock should change when you select a timezone and hit submit. + +#### Open a pull request for your code + +Just as you did for your previous tasks, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. As a reminder my GitHub username is `danzelo1` so my branch name for week 1's third task (this assignment) would be `danzelo1-1-3`. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. This is the last task for week 1 so there's nothing else for you to do from here. Until next week! \ No newline at end of file diff --git a/Javascript/homework/responses/2-complete.md b/Javascript/homework/responses/2-complete.md new file mode 100644 index 00000000..9cb97f30 --- /dev/null +++ b/Javascript/homework/responses/2-complete.md @@ -0,0 +1 @@ +[That's it for Week 2! Click here to move on to Week 3!]({{ repoUrl }}/issues) \ No newline at end of file diff --git a/Javascript/homework/responses/2.1-css-linking.md b/Javascript/homework/responses/2.1-css-linking.md new file mode 100644 index 00000000..c4af6e3d --- /dev/null +++ b/Javascript/homework/responses/2.1-css-linking.md @@ -0,0 +1,23 @@ +## Task 1: Linking your CSS file + +#### How to begin a CSS file and link it to your HTML file. + +This week, we're going to take the HTML and JavaScript code we wrote last week and style our page using CSS to make it more aesthetically pleasing. + +- Copy your index.html file into a new html file in your week 2 homework folder. + +To style our webpage, we must link a css file to our HTML file. + +- Add a `link` tag inside the head of your html file + - Set the `rel` attribute to `"stylesheet"` and the `href` attribute to `"style.css"`. + +Next, open a new file in your week 2 folder and save it as `style.css`. It's important that your file name matches the one you typed in your HTML document in its link tag's `href` attribute, as this will be what links your two files. + +#### Open a pull request for your code + +Just as you did for your previous tasks, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. For example, my GitHub username is `danzelo1` so my branch name for week 2's first task (this assignment) would be `danzelo1-2-1`. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 2). A new comment should have appeared for your next task. This is where you'll find the instructions for task 2. + diff --git a/Javascript/homework/responses/2.2-body.md b/Javascript/homework/responses/2.2-body.md new file mode 100644 index 00000000..02ed773c --- /dev/null +++ b/Javascript/homework/responses/2.2-body.md @@ -0,0 +1,25 @@ +## Task 2: Styling the body + +#### In this task, we'll go over how to style the text in your body tag. + +In your CSS file: + +- Define a body selector (`.body{}`) +- Set the `display` to `flex` + +This will make sure all elements fit the screen appropriately. + +- Use the `justify-content` and `align-items` attributes to center your items on the y axis and the x axis respectively. +- You may also want to set the `min-height` to `100vh` so that height of your content will always be relative to the size of the screen. + +Inside the body, you can also change the color of the background, as well as the color, font, and size of your text. I recommend using the `font-family` attribute with a few backup fonts in case your browser doesn't support your font of choice. You can add back up fonts by following your font with a comma and another font family or type. My font-family line looks like this: + +`font-family: "Trebuchet MS", Verdana, sans-serif;` + +#### Open a pull request for your code + +Just as you did for your previous tasks, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. For example, my GitHub username is `danzelo1` so my branch name for week 2's second task (this assignment) would be `danzelo1-2-2`. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 2). A new comment should have appeared for your next task. This is where you'll find the instructions for task 3. \ No newline at end of file diff --git a/Javascript/homework/responses/2.3-clock-design.md b/Javascript/homework/responses/2.3-clock-design.md new file mode 100644 index 00000000..892fdc27 --- /dev/null +++ b/Javascript/homework/responses/2.3-clock-design.md @@ -0,0 +1,34 @@ +## Task 3: Creating your clock + +#### For the third task, we're going to begin designing a digital clock using some basic styling techniques. + +After you're satisfied with the body of your page, define a selector that styles elements in the `clock` class. + +![Screen Shot 2021-01-15 at 5.49.29 PM](../../images/Screen Shot 2021-01-15 at 5.49.29 PM.png) + +- Set a width and a height for the box that's going to hold your time +- Add a background and a solid border using colors different from the screen's background so you can see what the box will look like. + - Use the `background-color` and `border` attributes for these items respectively + +- Set your `display` to `flex` +- Center your text using `align-items` and `justify-content` + +You need to do this again because these attributes in the body only centered the box on your page; repeating the two bullets above in the clock section will center your text within the box. + +You may also want to adjust the margins of your clock so that theres some space between the box and the form - I simply adjusted the left margin of my clock. + +You can add as many bells and whistles to this clock that you please. I increased the font-size here and added a box-shadow to add some depth to my clock. + +![Screen Shot 2021-01-15 at 6.17.26 PM](../../images/Screen Shot 2021-01-15 at 6.17.26 PM.png) + +The first number in each line represents the x-offset which is the horizontal distance from which you want the object to appear. The second number is the y-offset - the vertical distance from which the box will appear. The third number is the blur radius - a larger blur radius will create a bigger shadow and vice versa. + +Lastly is the color. I used the `rgba()` tool to define my color. The first 3 numbers represent the amount of red, green, and blue in the color, respectively. The fourth number is the opacity on a scale from 0 to 1, with 0 being complete transparency and 1 being fully opaque. + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week. A new comment should have appeared for your next task where you'll find the instructions for task 4. \ No newline at end of file diff --git a/Javascript/homework/responses/2.4-form-layout.md b/Javascript/homework/responses/2.4-form-layout.md new file mode 100644 index 00000000..c36b6820 --- /dev/null +++ b/Javascript/homework/responses/2.4-form-layout.md @@ -0,0 +1,17 @@ +## Task 4: Styling your buttons + +#### Now that you've styled your text and your clock, now's time to make any changes to your radio buttons that you'd like. + +Lastly, you'll define a timezone selector to style the labels and buttons used for your timezone selector. Similarly to the way you defined the clock styles using the unique id from the clock div, preceded by a '.', you'll define the radio button style class using whatever class you used to group together your timezone buttons. I grouped my radio buttons and labels in a div with the class set to `"timezone"` so my CSS file looks like this: + +![Screen Shot 2021-01-15 at 6.29.34 PM](../../images/Screen Shot 2021-01-15 at 6.29.34 PM.png) + +If you're already satisfied with how your page looks because of how you styled the body, then this part is unnecessary, but I recommend you do some styling here to get a better hang of CSS attributes. + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. This is the last task for week 2, so you're all done! \ No newline at end of file diff --git a/Javascript/homework/responses/3-complete.md b/Javascript/homework/responses/3-complete.md new file mode 100644 index 00000000..df74c213 --- /dev/null +++ b/Javascript/homework/responses/3-complete.md @@ -0,0 +1 @@ +[That's it for Week 3! Click here to move on to Week 4!]({{ repoUrl }}/issues) \ No newline at end of file diff --git a/Javascript/homework/responses/3.1-integrating-code.md b/Javascript/homework/responses/3.1-integrating-code.md new file mode 100644 index 00000000..44eddf02 --- /dev/null +++ b/Javascript/homework/responses/3.1-integrating-code.md @@ -0,0 +1,23 @@ +## Task 1: Gathering your existing code + +#### This step will simply guide you through starting a JavaScript file and copying your code from last week's assignment. + +Open new css and html in visual studio code in your week 3 folder. This week will involve a little more JavaScript code, so you may want to make a separate JS file this time. You can save it as "script.js" and link this file to your HTML file by adding the following line in your head, right below your CSS file link: + +`<script defer src="script.js"></script>` + +In script.js, you can copy and paste everything that was inside the script tag for your week 2 clock, you'll just want to delete the lines that print the time onto the screen. + +You can also copy your HTML from last week, but make sure to remove the JavaScript code from your HTML document and add the tag above. Your CSS code from week 2 can also be copied as long as you clear out the clock styling. + +If you've copied and filtered all your code correctly, this is what your page should look like: + +![Screen Shot 2021-01-15 at 8.11.26 PM](../../images/Screen Shot 2021-01-15 at 8.11.26 PM.png) + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. For reference, my username is `danzelo1` so my branch would be titled `danzelo1-3-1` for this task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 3). A new comment should have appeared for your next task where you'll find the instructions for task 2. \ No newline at end of file diff --git a/Javascript/homework/responses/3.2-clock-styling.md b/Javascript/homework/responses/3.2-clock-styling.md new file mode 100644 index 00000000..55de320c --- /dev/null +++ b/Javascript/homework/responses/3.2-clock-styling.md @@ -0,0 +1,61 @@ +## Task 2: Building the background of your clock + +#### In this task, we'll cover some tips and tricks to get your clock shaped and positioned correctly on your page. + +Inside of your HTML file, make sure you have a div with its class set to `"clock"`. This div should be defined after your form ends, but still inside the body tags. + +Once you've established your clock div, move to your `style.css` file and define a selector for your clock class (`.clock`). This will affect all elements with class = "clock"; therefore, the div we just defined. + +- Set the height and width + - It doesn't matter what you set them to, as long as they are the same value. + - I set my height and width to both be 300px. + +- Set a background color for your clock + - Make sure it differs from the background of the screen so that the clock is visible + +If you load your HTML at this point, it should look something like this (give or take depending on what you've set your attributes to): + +![Screen Shot 2021-01-16 at 1.01.26 AM](../../images/Screen Shot 2021-01-16 at 1.01.26 AM.png) + +- Set the `border-radius` in the `.clock` section to 50% + - This will completely round the edges of the square, thus making it a circle. +- Add a border - I suggest solid black + +- Set the position of the items in this class to relative + - This will help us glue together the elements we're going to place on top of the clock. + +Next, use the after selector on your clock class to define a new block like so: + +`.clock::after{}` + +This will create a new element associated with the clock class that we're going to use to design a small button that will sit in the middle of the clock, on top of where the hands are going to overlap.. + +- Set the position to absolute + - This ensures the element is anchored to the circle we have on the page +- Set `content` to `''` + - This will make sure nothing is printed inside this small block + +You'll also want to set the height and width to be a small square - I've set mine to 20px - and change the border-radius to 50%, just as we did with the base of the clock, to make it a circle. + +- Set `top` to 50% +- Set `left` to 50% + +These two steps move the small circle to the center of the clock. + +If you load your page now, you'll notice that the small circle is slightly off center:![Screen Shot 2021-01-16 at 1.59.41 AM](../../images/Screen Shot 2021-01-16 at 1.59.41 AM.png) + +This is because the object is aligned with its position relative to the left and top sides, not its center. To fix this, enter the following line into the `clock::after` block, below where you set the top and left positions: + +`transform: translate(-50%, -50%);` + +This will translate the item 50% of its width to the left, and 50% of its width upwards. Now your clock should look like this: + +![Screen Shot 2021-01-16 at 2.06.44 AM](../../images/Screen Shot 2021-01-16 at 2.06.44 AM.png) + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. For reference, my username is `danzelo1` so my branch would be titled `danzelo1-3-2` for this task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 3). A new comment should have appeared for your next task where you'll find the instructions for task 3. \ No newline at end of file diff --git a/Javascript/homework/responses/3.3-clock-digits.md b/Javascript/homework/responses/3.3-clock-digits.md new file mode 100644 index 00000000..2ec081d1 --- /dev/null +++ b/Javascript/homework/responses/3.3-clock-digits.md @@ -0,0 +1,41 @@ +## Task 3: Adding numbers to your clock + +#### We'll use HTML and CSS in this step to print numbers on your clock and get them ready for positioning. + +Next, we need to set up the numbers on our clock. + +- Go back to the HTML document and define divs for numbers 1-12 inside the clock div tags. + - Name the classes for these divs "number number[digit]" so for the first digit, the tag would look like: + + ​ `<div class="number number1">1</div>` + +- Repeat this for numbers 2-12. + +Next, open up your `style.css` file and define a selector `.clock .number` - this will target all target all divs with a class starting with `"number"` within a div with a `"clock"` class, a.k.a. all of the divs we just made for our numbers on the clock. + +Here, you'll want to customize the appearance of the numbers on your clock. + +- Set the `position` to `absolute` so that the numbers are anchored to the clock. +- Set the `width` and `height` to 100%. + +The method we're going to use to get the numbers in the correct position will involve us making a square around each number that we will later rotate. Setting the height and width to 100% will ensure that this square is always the same size as the clock background. + +*Tip: You may want to add a border inside the `.clock .number` CSS section to help you better visualize what's going on in these next steps.* + +- Set the `text-align` to `center` + +Now, the numbers will stay centered at the top of the clock, no matter the clock's size. You may also want to change the font family or size here, as well as the text color. + +At this point your clock should look something like this: + +![Screen Shot 2021-01-16 at 2.16.29 AM](../../images/Screen Shot 2021-01-16 at 2.16.29 AM.png) + +You'll notice that the numbers overlap in one spot and you can't read them. In the next step we'll use rotation tools to change the positioning of each digit on the clock. + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 3). A new comment should have appeared for your next task where you'll find the instructions for task 4. \ No newline at end of file diff --git a/Javascript/homework/responses/3.4-rotation.md b/Javascript/homework/responses/3.4-rotation.md new file mode 100644 index 00000000..dbbae743 --- /dev/null +++ b/Javascript/homework/responses/3.4-rotation.md @@ -0,0 +1,47 @@ +## Task 4: Using rotation to align the numbers on your clock + +#### In this task, we'll walk you through how to use variables in CSS, as well as how to use a built-in CSS function to rotate your numbers so that they're in the right position on your clock. + +To move the digits to their respective positions on the clock, we could individually position them using the `top` and `left` attributes, but this would be a very tedious task. Instead, we're going to use a trick to change the position of each digit using the `rotate()` tool in the `transform` attribue. + +- Define a variable `--rotation` and set it equal to 0. + +This variable will hold the number of degrees that the text will be rotated so that it sits in the right position on the clock. Make sure to include the preceding dashes when defining `--rotation` as this is what will make this value a variable. Your code should look like this: + +`--rotation: 0;` + +- Use the `transform` attribute to call `rotate()` on your rotation variable. + +When using a variable in CSS, its important to surround your variable's name in the `var()` function like so: + +`transform: rotate(var(--rotation));` + +This line of code will rotate all divs inside both the clock class and any class with "number" in its name to rotate by a varying degree. Right now, this degree is set to 0 for all numbers. + +Now, all that's left to do is assign varying degrees for each of the numbers. Since there are 12 numbers on a clock, and a circular clock is 360 degrees, each number will be placed 30 degrees apart. + +- Starting with number 1 and ending with number 11, set the rotation variable of each number to increase by 30 degrees. + + - For example, the code for number 1 will look like this: + + `.clock .number1 { --rotation: 30deg; }` + +- Repeat this until you reach number 11, which should look like this: + + ​ `.clock .number11 { --rotation: 330deg; }` + +If you refresh your HTML page, you'll see there's no need to change anything for `.clock .number12` since the 12 is sitting at the top of the clock by default. + +Now, your clock should look something like this: + +![Screen Shot 2021-01-16 at 10.43.07 PM](../../images/Screen Shot 2021-01-16 at 10.43.07 PM.png) + +*Don't forget to delete the border from `.clock .number` after this step if you included it earlier.* + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 3). A new comment should have appeared for your next task where you'll find the instructions for task 5. \ No newline at end of file diff --git a/Javascript/homework/responses/3.5-clock-hands.md b/Javascript/homework/responses/3.5-clock-hands.md new file mode 100644 index 00000000..3899ff9f --- /dev/null +++ b/Javascript/homework/responses/3.5-clock-hands.md @@ -0,0 +1,85 @@ +## Task 5: Designing the hands of your clock + +#### We'll go over some more CSS tricks in this step to get the hands of your clock in position for time-telling. + +Within your clock div you're going to include three more divsions - these will represent the hands on our clock. + +- For each div, set the class to "hand [type of hand]" and set the data-* attribute to `data-[type of hand]-hand`. + + - For example, the div tag for the hour hand would look like: + + ​ `<div class="hand hour" data-hour-hand></div>` + + - Repeat this for the minute hand and the second hand. + +Though this div-defining process seems complicated, it will greatly simplify things when we design our clock hands in the CSS file. + +We'll want all three of our hands to have some similar attributes, so in your css file, + +- Define a selector for all items within the clock class with "hand" in their class. + + - The definition of this field will be similar to the way we defined the first number section in the last task, so your code should look like this: + + ​ `.clock .hand { }` + +- Inside of this block, set the `bottom` and `left` attributes to `50%` + - This places the hands at the center of the clock. + +- Set `position` to `absolute` + - This anchors the hands to the clock. + +We'll change this later, but just so you get an idea of what we're doing, + +- Set your `height` and `width` to *some arbitrary values* and your `background color` to `black`. +- I set my height to 40% and my width to 10px and this is how my clock looks at this point in the code: + +![Screen Shot 2021-01-16 at 11.24.27 PM](../../images/Screen Shot 2021-01-16 at 11.24.27 PM.png) + +As you can see, the hand is slightly off center, which is the same issue we had earlier with the circle in the center of the clock. Since we just want to move the hand to the left, we'll use the same trick as we did earlier, but this time the y-coordinate in the translate function will be 0, like so: + +`transform: translate(-50%, 0)` + +- Add a white border around the hands + - This will make the hands easier to see when they're overlapping +- Finally, round the edges of the hands by setting the `border-top-left-radius` and `border-top-right-radius` attributes to `10px`. + +Now, let's style each hand to be unique. + +- To select the second hand, we'll define a selector: + + ​ `.clock .hand.second{ }` + - Make sure to leave no space between `.hand` and `.second`, as this will be crucial to your definition. + +- Repeat this process for the minute hand and the hour hand. + +In each of these blocks, + +- Customize the hands so that the **seconds** hand is the **longest and thinnest**, and the **hour** hand is **shortest and widest** +- Also, override the current `background-color` attribute for the seconds hand by setting it to `red` in the `.clock .hand.second` block. + +Now, your clock should look something like this: + +![Screen Shot 2021-01-16 at 11.59.41 PM](../../images/Screen Shot 2021-01-16 at 11.59.41 PM.png) + +- Set the second hand's `z-index` attribute to 12 + - This makes sure that the second hand is always on top of the others + +Similarly, we'll want the hour hand to always be on the bottom and the minute hand in the middle, + +- Set their `z-index` attributes to 10 and 11 respectively + +We'll also want the small circle in the center of the clock to always be on top of all of the hands to hide the overlap. + +- Set the `z-index` in `clock::after` to 100. + +This attribute defines the order in which items will appear on the z-axis, so items with a higher z-index will appear to sit on top of items with a lower z-index. + +Now that we have all of the styling done for the clock, it's time to get the hands moving! + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 3). A new comment should have appeared for your next task where you'll find the instructions for task 6. \ No newline at end of file diff --git a/Javascript/homework/responses/3.6-moving-hands.md b/Javascript/homework/responses/3.6-moving-hands.md new file mode 100644 index 00000000..05b9d497 --- /dev/null +++ b/Javascript/homework/responses/3.6-moving-hands.md @@ -0,0 +1,100 @@ +## Task 6: Getting your hands to move + +#### We'll add some final touches to your CSS file so that your hands rotate correctly and then get to work on your JavaScript so that your clock can do what clocks do. + +In order to get our hands to be able to rotate around the clock, we have to use a trick similar to the one we used for rotating the numbers on the clock. + +In your CSS file, + +- Define a variable `--rotation` in your `.clock .hand` selector + - Initialize it to 0 + - This will serve as a variable to hold the number of degrees our hand will be rotated at any given second. + +To actually utilize this variable and make our hand rotate, + +- Add `rotate()` as a second parameter for your transform attribute, since transform handles object movement in CSS. +- Inside of the parentheses of `rotate()`, use the `calc()` function and enter your variable * 1deg. + - The calc function handles mathematical operations in CSS, so we're using it to basically convert our rotation variable, which is simply an integer, to a degree. + +The `transform` line should now look like this: + +​ `transform: translate(-50%,0) rotate(calc(var(--rotation) * 1deg));` + +Now, if you set `--rotation` to 30 to test out this rotate tool, you'll see that the hand rotates with the center as its axis rather than its bottom end: + +![Screen Shot 2021-01-17 at 2.00.40 AM](../../images/Screen Shot 2021-01-17 at 2.00.40 AM.png) + +To fix this, use the `transform-origin` attribute to change the position from which the hand is rotated to `bottom` like so: + +​ `transform-origin: bottom;` + +Now, your clock should look like this: + +![Screen Shot 2021-01-17 at 2.04.43 AM](../../images/Screen Shot 2021-01-17 at 2.04.43 AM.png) + +Now that our hands are all set up, we can finally move onto the JavaScript portion of the code. + +You should have copied your JavaScript file from last week's assignment into the folder for this homework. Here, you should keep any functions for the timezone selection, and delete everything inside your function that prints the time. + +Inside your now-empty showTime() function, + +- Define a variable `const day` and initialize it to a `new Date()`, just as we did in last week's assignment. +- Initialize a new variable `const secondsRatio` to `day.getSeconds()/60`. + +The variable above and all those similarly named will be used to find the degree at which the corresponding hand will be rotated at any given second. We divide the seconds by 60 because there are 60 seconds in a minute, or 60 possible positions for the seconds hand to be in, since the second hand only changes position 60 times every minute. This concept might be hard to wrap your head around at first, but the math isn't as important as the concepts. + +- Next, initialize a `const minutesRatio` variable. + - Since we don't want our minute hand to jump positions every minute, we'll set this variable to `(day.getMinutes() + secondsRatio) /60`. + - By adding `secondsRatio`, we are including a percentage of a minute to our `minutesRatio`, which will allow the minute hand to gradually change positions every second. + +Similarly, for the `const hoursRatio` variable, we want to add in the `minutesRatio`, which also includes the `secondsRatio`, giving us an hour hand that moves every second. So, + +- set `hoursRatio` to `(day.getHours() + minutesRatio + offset) / 12` + +since there are 12 hours on the clock and we need to incorporate the offset from the timezone function. + +Now, we have to link the divs we used to design the hands to this JavaScript file. + +- Define 3 global variables at the top of your JS file, right below your offset variable. + +- Name them `const hourHand`, `const minuteHand`, and `const secondHand` + + - Set them equal to the respective hand's div's data attribute using the `document.querySelector` tool. + + - For example, the line of code for the hour hand would be: + + ​ `const hourHand = document.querySelector('[data-hour-hand]')` + +Once these three hands are defined, + +- Create a new function called `setRotation` that takes two parameters, an `element` and a `rotationRatio` so the definition will look like: + + ​ `function setRotation(element, rotationRatio)` + +This function will take the elements that we just created that link to the hand divs and the ratio for rotation that we defined in our setClock function and link them to move the hands on the analog clock. + +- Inside the function, add the line: + + ​ ``element.style.setProperty(`--rotation`, rotationRatio * 360)`` + +This line will set the rotation property in our hand div to be equal to the rotationRatio * 360 which is the position for the hand given its rotationRatio. + +Now, we just need to call this function on our hands so scroll back up to the function that sets up your clock. + +- Below the second, minute, and hour ratio variable definitions, call setRotation 3 times, passing each hand element with its respective ratio, so the function call for the seconds hand would look like: + + ​ `setRotation(secondHand, secondsRatio)` + +Finally, add a call to `setInterval` in global space at the top of your code to call your function that sets the time ever 1000 ms (or any 1 second). The code looks like this: `setInterval(showTime, 1000)` + +As you may notice, the clock starts with all hands facing the 12 when we start the page because all hands are initialized to have a rotation variable equal to 0. To fix this bug, simply call your `showTime` function once at the bottom of your code. + +Now, when you refresh the page, the time will already be set on the clock. Also, thanks to the function you wrote in last week's code for the timezone selector, you shouldn't have to do any work to get this feature working on your analog clock! + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. And thats a wrap for week three! \ No newline at end of file diff --git a/Javascript/homework/responses/4-complete.md b/Javascript/homework/responses/4-complete.md new file mode 100644 index 00000000..61e7880b --- /dev/null +++ b/Javascript/homework/responses/4-complete.md @@ -0,0 +1 @@ +That's it for Week 4! Great job on finishing the course! \ No newline at end of file diff --git a/Javascript/homework/responses/4.1-page-setup.md b/Javascript/homework/responses/4.1-page-setup.md new file mode 100644 index 00000000..4a860df4 --- /dev/null +++ b/Javascript/homework/responses/4.1-page-setup.md @@ -0,0 +1,34 @@ +## Task 1: Create a new page with an analog and a digital clock + +#### Your final assignment is going to merge everything you've created so far onto a single webpage, and allow the user to choose between a digital clock and analog clock. This first task will help you get all of your code in one place. + +- Copy your files from last week into your week 4 folder. +- Add a div tag below your clock div (below the `</div>` tied to `<div class="clock">` ). + - Make sure to give this tag a unique id attribute, my line of code looks like `<div class="digital" id="digital clock"></div>`. + +- Copy the function you wrote for your digital clock in week 2 to show the time. +- Paste the contents of this function into the function that sets the analog clock so that both clocks are set with a single function call. + +Be sure to rename any repeating variables if necessary to get the function working. Also, make sure to change the code you use to print the time to search for an element with `id="digital clock"`, so my line of code looks like `document.getElementById("digital clock").textContent = time;`. + +At this point, your page should look something like this:![Screen Shot 2021-01-17 at 9.11.28 PM](../../images/Screen Shot 2021-01-17 at 9.11.28 PM.png) + +- Add a selector in your css file that selects the `"digital"` class like so: + +`.digital {}` + +You may choose to style your digital clock differently this time, but if not, feel free to copy the code from week 2's CSS file in the `.clock` section and paste it into your `.digital` section. + +Your page should now look something like this: + +![Screen Shot 2021-01-17 at 9.18.06 PM](../../images/Screen Shot 2021-01-17 at 9.18.06 PM.png) + +Feel free to size down the digital clock so that it doesn't mess up your layout when you resize your screen. + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. For example, my username is `danzelo1` so my branch would be called `danzelo1-4-1` for this task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 4). A new comment should have appeared for your next task where you'll find the instructions for task 2. \ No newline at end of file diff --git a/Javascript/homework/responses/4.2-more-buttons.md b/Javascript/homework/responses/4.2-more-buttons.md new file mode 100644 index 00000000..fbbe1724 --- /dev/null +++ b/Javascript/homework/responses/4.2-more-buttons.md @@ -0,0 +1,24 @@ +## Task 2: Adding radio buttons for clock preferences + +#### Next, we're going to create a set of radio buttons that allow a user to choose if they’d like to see the time on an analog clock or on a digital clock. This task will demonstrate a different approach to radio buttons. + +- Open another form tag directly below the one you have for the timezone selector. +- Similar to how you set up the timezone buttons, open a div tag with a unique class (I named mine "view") +- Insert 2 radio buttons. + - Make sure these radio buttons share the same `name` attribute and have unique `value` and `id` attributes. + +These two radio buttons should have the user input whether they'd like to see the time on a digital clock or an analog clock. There's no need to add a submit button as we will set up our page to change on the click of the radio button rather than on the submit button. + +After this step, your page should look like this: + +![Screen Shot 2021-01-17 at 9.31.52 PM](../../images/Screen Shot 2021-01-17 at 9.31.52 PM.png) + +At this point, you can customize the appearance of these two radio buttons in your CSS file by defining a block that selects all items in your "view" class. I suggest adding some margins and padding so that items don't look so crowded. + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 4). A new comment should have appeared for your next task where you'll find the instructions for task 3. \ No newline at end of file diff --git a/Javascript/homework/responses/4.3-more-js-functions.md b/Javascript/homework/responses/4.3-more-js-functions.md new file mode 100644 index 00000000..91aa7906 --- /dev/null +++ b/Javascript/homework/responses/4.3-more-js-functions.md @@ -0,0 +1,53 @@ +## Task 3: Toggling between a digital and an analog clock + +#### Now that we have the page all set up, all that's left to do is to get our code to do what the webpage says! This task will go over some JavaScript functions using methods you've learned previously. + +In your JavaScript file, + +- Define two functions - one called `setDigital()` and another called `setAnalog()` . +- Inside of each of these functions, + - Use `document.getElementById()` to define 2 variables that select the analog clock and the digital clock. + - So, your code for the digital clock would look like this: `var digital = document.getElementById("digital clock")` because my digital clock data is linked to a div tag with `id="digital clock"`. + +- Do the same thing for a variable that holds your analog clock data + - If you copied your code from week 3, the id for your analog clock should be `"clock"`. + +Next, we're going to use these variables to change their display so that only one will be shown at a time. + +- In `setAnalog()`, set `analog.style.display` to `"flex"` so the code should look like this: `analog.style.display = "flex"` + +- Set the digital clock object's display to `"none"`. + - This code will override the current CSS display settings to hide the digital clock and hide the analog clock. + +Use the same methodology to hide the analog clock and show the digital clock in your `setDigital()` function. + +Finally, we just have to link these functions to the radio buttons. + +Back in your HTML code, + +- Add the `onclick` attribute to both input fields. + +In the input field for the analog clock, + +- Set `onclick` to `"setAnalog()"` +- Set the digital clock button's `onclick` attribute to `"setDigital()"`. + +This is the same way we linked a function to the submit button, so feel free to refer to that code for help. + +Now, if you click the "Analog" button, your screen should look like this: + +![Screen Shot 2021-01-17 at 10.55.15 PM](../../images/Screen Shot 2021-01-17 at 10.55.15 PM.png) + +And if you click the "Digital" button, it will look like this: + +![Screen Shot 2021-01-17 at 10.55.26 PM](../../images/Screen Shot 2021-01-17 at 10.55.26 PM.png) + +However, you may notice that when you first load your page, both clocks appear. To fix this, add the `checked` attribute to the input field tag for the analog clock's radio button so that this button will be selected when the field loads. Then, in your JavaScript file, call the `setAnalog()` function after it's defined. + +#### Open a pull request for your code + +Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 4). A new comment should have appeared for your next task where you'll find the instructions for your fourth and final task. \ No newline at end of file diff --git a/Javascript/homework/responses/4.4-customization.md b/Javascript/homework/responses/4.4-customization.md new file mode 100644 index 00000000..9e480040 --- /dev/null +++ b/Javascript/homework/responses/4.4-customization.md @@ -0,0 +1,15 @@ +## Task 4: Adding the bells and whistles + +#### Your final task will be to use your creativity to add anything you'd like to your clock webpage + +Now that your page incorporates all of your existing work and allows the user to toggle between a digital and analog clock, your task is almost complete. + +For the last task of your final assignment, you must add two features of your choosing to this page. A feature can be as simple as adding a heading to your page, or as complex as having users enter a city and setting the clock to this city's time - just be creative. We encourage that you use outside resources to implement any features that we haven't covered in this course. + +#### Open a pull request for your code + +Finally, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. + +After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately. + +As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. That's all for this course! I hope you enjoyed making your clock and learning HTML, CSS, and JS! \ No newline at end of file diff --git a/Javascript/homework/responses/feedback.md b/Javascript/homework/responses/feedback.md new file mode 100644 index 00000000..25c438dd --- /dev/null +++ b/Javascript/homework/responses/feedback.md @@ -0,0 +1,3 @@ +## Providing Feedback + +What was confusing about this week? If you could change or add something to this week, what would you do? Your feedback is valued and appreciated! \ No newline at end of file diff --git a/Javascript/images/Screen Shot 2021-01-15 at 5.49.29 PM.png b/Javascript/images/Screen Shot 2021-01-15 at 5.49.29 PM.png new file mode 100644 index 00000000..280616d6 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-15 at 5.49.29 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-15 at 6.17.26 PM.png b/Javascript/images/Screen Shot 2021-01-15 at 6.17.26 PM.png new file mode 100644 index 00000000..7fbd49f4 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-15 at 6.17.26 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-15 at 6.29.34 PM.png b/Javascript/images/Screen Shot 2021-01-15 at 6.29.34 PM.png new file mode 100644 index 00000000..4877a93f Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-15 at 6.29.34 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-15 at 8.11.26 PM.png b/Javascript/images/Screen Shot 2021-01-15 at 8.11.26 PM.png new file mode 100644 index 00000000..0803df2b Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-15 at 8.11.26 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-16 at 1.01.26 AM.png b/Javascript/images/Screen Shot 2021-01-16 at 1.01.26 AM.png new file mode 100644 index 00000000..768d849f Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-16 at 1.01.26 AM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-16 at 1.59.41 AM.png b/Javascript/images/Screen Shot 2021-01-16 at 1.59.41 AM.png new file mode 100644 index 00000000..56c3fef2 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-16 at 1.59.41 AM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-16 at 10.43.07 PM.png b/Javascript/images/Screen Shot 2021-01-16 at 10.43.07 PM.png new file mode 100644 index 00000000..20dbbac2 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-16 at 10.43.07 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-16 at 11.24.27 PM.png b/Javascript/images/Screen Shot 2021-01-16 at 11.24.27 PM.png new file mode 100644 index 00000000..ea5b9c99 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-16 at 11.24.27 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-16 at 11.59.41 PM.png b/Javascript/images/Screen Shot 2021-01-16 at 11.59.41 PM.png new file mode 100644 index 00000000..810c4bb6 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-16 at 11.59.41 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-16 at 2.06.44 AM.png b/Javascript/images/Screen Shot 2021-01-16 at 2.06.44 AM.png new file mode 100644 index 00000000..df32193d Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-16 at 2.06.44 AM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-16 at 2.16.29 AM.png b/Javascript/images/Screen Shot 2021-01-16 at 2.16.29 AM.png new file mode 100644 index 00000000..570f2757 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-16 at 2.16.29 AM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-17 at 10.55.15 PM.png b/Javascript/images/Screen Shot 2021-01-17 at 10.55.15 PM.png new file mode 100644 index 00000000..50488f91 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-17 at 10.55.15 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-17 at 10.55.26 PM.png b/Javascript/images/Screen Shot 2021-01-17 at 10.55.26 PM.png new file mode 100644 index 00000000..7de9ae22 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-17 at 10.55.26 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-17 at 2.00.40 AM.png b/Javascript/images/Screen Shot 2021-01-17 at 2.00.40 AM.png new file mode 100644 index 00000000..37bc22c7 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-17 at 2.00.40 AM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-17 at 2.04.43 AM.png b/Javascript/images/Screen Shot 2021-01-17 at 2.04.43 AM.png new file mode 100644 index 00000000..e0468693 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-17 at 2.04.43 AM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-17 at 9.11.28 PM.png b/Javascript/images/Screen Shot 2021-01-17 at 9.11.28 PM.png new file mode 100644 index 00000000..354a16fa Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-17 at 9.11.28 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-17 at 9.18.06 PM.png b/Javascript/images/Screen Shot 2021-01-17 at 9.18.06 PM.png new file mode 100644 index 00000000..74c7efb9 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-17 at 9.18.06 PM.png differ diff --git a/Javascript/images/Screen Shot 2021-01-17 at 9.31.52 PM.png b/Javascript/images/Screen Shot 2021-01-17 at 9.31.52 PM.png new file mode 100644 index 00000000..02437ef5 Binary files /dev/null and b/Javascript/images/Screen Shot 2021-01-17 at 9.31.52 PM.png differ diff --git a/Javascript/week0/issues/0.0-done.md b/Javascript/week0/issues/0.0-done.md deleted file mode 100644 index 908b909f..00000000 --- a/Javascript/week0/issues/0.0-done.md +++ /dev/null @@ -1 +0,0 @@ -Congrats! You're finished. diff --git a/Javascript/week0/issues/0.0-response.md b/Javascript/week0/issues/0.0-response.md deleted file mode 100644 index 16693b11..00000000 --- a/Javascript/week0/issues/0.0-response.md +++ /dev/null @@ -1 +0,0 @@ -When a section is completed, a new issue will be created with the next step. [Click here to start!]({{ repoUrl }}/issues/) diff --git a/Javascript/week0/issues/0.0-welcome.md b/Javascript/week0/issues/0.0-welcome.md deleted file mode 100644 index ed87ef87..00000000 --- a/Javascript/week0/issues/0.0-welcome.md +++ /dev/null @@ -1,3 +0,0 @@ -Welcome to Bit Project's Github Learning Lab on JavaScript. - -This Learning Lab is going to teach you some of the fundamental coding skills you will need to start building awesome Javascript projects :rocket: diff --git a/Javascript/week1/issues/1.1-fizzbuzz.md b/Javascript/week1/issues/1.1-fizzbuzz.md deleted file mode 100644 index dd394275..00000000 --- a/Javascript/week1/issues/1.1-fizzbuzz.md +++ /dev/null @@ -1,121 +0,0 @@ -## FizzBuzz In SPACE - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -### :airplane: Starting off - -Create a file called fizzbuzz.js - -**FizzBuzz** - -FizzBuzz is a program used to demonstrate basic functionality of a language, often when switching between programing languages or as an introduction (that's us!) to first learning a language. - -The goals of the program is to go through the numbers from 1 to 100 and print "fizz" whenever a number is divisible by 3, print "buzz" when it's divisible by 5, print "fizzbuzz" when it's divisible by both 3 and 5, and print the number when it's not divisible by either. For our program, you will do something very similar: - -For the numbers from 1 to 100: -* print 👽 and the number if it is divisible by 3 -* print 🚀 and the number if it is divisible by 5 -* print 🛰 and the number if it is divisible by both 3 and 5 -* print 💩 and the number if it is not divisible by either 3 or 5 - -Tip: copy paste the emojis to get it into your code! - -### Help: - -* [Loops in Javascript](https://www.w3schools.com/js/js_loop_for.asp) -* [Conditions in Javascript](https://www.w3schools.com/js/js_if_else.asp) -* [Command Line Arguments in Javascript](https://nodejs.org/en/knowledge/command-line/how-to-parse-command-line-arguments/) -* [console.log Method](https://www.w3schools.com/jsref/met_console_log.asp) - - -### :pencil: Commenting your Code - -Use in line comments to explain how your code works. Commenting your code helps ensure that you understand what is happening, and helps the code reviewer read through your code easily. For example: - -**Great example:** -``` -var i; // Initialize a variable -for (i = 0; i < nums.length; i++) { // Initialize a for loop that iterates from 0 to length of the nums array - nums[i]+5; // At every iteration, add the i-th integer in the nums array to the text variable -} // End of loop -``` - -When you start writing more code (200+ lines) you will want to do the next example. For this course, your code should not extend past 50-100 lines and we want to use your comments to see how well you understand the concepts and language, so it's better to use the previous example. - -**Okay example:** -``` -// This code uses a for loop to iterate through the entire nums array and add 5 to each element -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} -``` - -**Don't do this:** -``` -// Add 5 to all values in nums array -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} -``` - -### :red_car: Running your Code - -1. Save your file -2. Make sure you're in the same directory in which you saved your fizzbuzz.js file - -In this program, you need to allow your program to take a second argument, so: -3. To run your fancy new program, type: ```node fizzbuzz.js``` with an integer between 1-100 in terminal - -### :pencil2: Testing - -To test your code, run it with different integers in the program argument to see what happens. - -**Test Case 1:** - -If you run ```node fizzbuzz.js 5``` the output should be: - -``` -💩 1 -💩 2 -👽 3 -💩 4 -🚀 5 -``` - -**Test Case 2:** - -If you run ```node fizzbuzz.js 17``` the output should be: - -``` -💩 1 -💩 2 -👽 3 -💩 4 -🚀 5 -👽 6 -💩 7 -💩 8 -👽 9 -🚀 10 -💩 11 -👽 12 -💩 13 -💩 14 -🛰 15 -💩 16 -💩 17 -``` - -**Output example:** - -![](fizzbuzz.png) - -### ✅ Submit - -**Task 1: Complete the FizzBuzz program as described above** - -Commit a file called fizzbuzz.js - -Good job, you're fizzing and buzzing in space! diff --git a/Javascript/week1/issues/1.2-github.md b/Javascript/week1/issues/1.2-github.md deleted file mode 100644 index b96857e6..00000000 --- a/Javascript/week1/issues/1.2-github.md +++ /dev/null @@ -1,17 +0,0 @@ -## Learning GitHub - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -### GitHub - -GitHub is a cloud-based repository hosting service that is widely used in the tech industry. It allows teams to use Git for version control, collaboration, and file management. If you don't know what Git is, it's a version-control system for tracking changes, managing state, and concurrently developing on the same files or directories. Git and Github's tools are specifically designed to make coordinating work easier, and they are one of the most pervasive shared tools among students and the industry. - -If you want to learn more about *what it is* and *how to use it*, try taking [this](https://lab.github.com/githubtraining/introduction-to-github#:~:text=Audience.%201%20Assign%20yourself.%20Assign%20the%20first%20issue,an%20issue.%20%204%20Create%20a%20branch.%20) GitHub Learning Lab Course. After finishing it, you will have a strong understanding of all the features GitHub has to offer. To make an account, go to: https://github.com/join to sign up. After making an account, you're all set to complete Task 3! - - - -**Task 2: create a repository and commit your homework javascript file to it (make sure you know key functions like commits, forking, pull request, branch, etc).** - - - -Good job, you're done with both parts! diff --git a/Javascript/week1/issues/1.3-terminal.md b/Javascript/week1/issues/1.3-terminal.md deleted file mode 100644 index 8b718e8f..00000000 --- a/Javascript/week1/issues/1.3-terminal.md +++ /dev/null @@ -1,51 +0,0 @@ -## Terminal - -### Mac: -* Click the "spotlight search" icon in the top right corner. -* Search for "terminal". -* Click terminal to open it (right click it to run as admin). - -![Terminal Instructions](https://github.com/Bahburs/javascript-course/blob/main/images/terminal.png) - -### Windows: - -* Click the search bar in the bottom left corner. -* Search for "command prompt". -* Click terminal to open it (right click and say "run as administrator" to run as admin). - -![Command Prompt Instructions](https://github.com/Bahburs/javascript-course/blob/main/images/commandprompt.png) - - - -### Basic Terminal Commands - -**Shortcuts:** -* `.` : current directory -* `..` : previous directory -* `~` : home directory - -**Directory (folder):** -* `pwd` : print current directory (if you're lost, or need the full path to the current directory you're in) -* `ls` : list everything in current directory (super useful to know which files/folders you can currently access) -* `ls [directory path]` : list everything in current [directory path] -* `cd [directory path]` : change directory to [directory path] - * `cd /home/users/Shreya/Documents/terminal.md` - * `cd .` : change directory to current directory (doesn't really do much) - * `cd ..` : change directory to previous directory (useful) - * `cd ../some_folder_name` : change directory to some_folder_name directory in previous directory (sort of like going back one and into another folder) - * `cd .` : change directory to home directory - -**Opening files (in terminal, you don't need this if you're using GitHub desktop)** -In file: -* `vi` : open file -* `[ECS] -> *+w+q` : save file -* more useful commands: https://www.cs.colostate.edu/helpdocs/vi.html - -**Running a program** -* `./[program_name.extension]` [any other expected arguments] - * `./sumarray.js` (week 2) - * `./romanint.js 78` (week 3) - -Find more useful commands: https://www.techrepublic.com/article/16-terminal-commands-every-user-should-know/ - -Not sure which command to use or how it works? **Google it!** Everyone uses terminal so there's a lot of useful content/blogs/video tutorials online. You can also ask your mentor for help if you're not sure where to start. diff --git a/Javascript/week1/issues/fizzbuzz.png b/Javascript/week1/issues/fizzbuzz.png deleted file mode 100644 index 7ea7960f..00000000 Binary files a/Javascript/week1/issues/fizzbuzz.png and /dev/null differ diff --git a/Javascript/week2/code/solution/2.1-romancalc-phase1.js b/Javascript/week2/code/solution/2.1-romancalc-phase1.js deleted file mode 100644 index 0ff1e689..00000000 --- a/Javascript/week2/code/solution/2.1-romancalc-phase1.js +++ /dev/null @@ -1,15 +0,0 @@ -// Initialize an array that will hold the values to be calculated (from the command line) -function get_args() { - const operand1 = process.argv[2]; - const operator = process.argv[3]; - const operand2 = process.argv[4]; - let op = [operand1, operator, operand2]; - return op; -} - -// Test cases: -/* run romancalc.js a b c*/ -let op = get_args(); -console.log("The first operand is: ", op[0]); -console.log("The second operand is: ", op[2]); -console.log("The operator is: ", op[1]); \ No newline at end of file diff --git a/Javascript/week2/code/solution/2.2-romancalc-phase2.js b/Javascript/week2/code/solution/2.2-romancalc-phase2.js deleted file mode 100644 index bea093bc..00000000 --- a/Javascript/week2/code/solution/2.2-romancalc-phase2.js +++ /dev/null @@ -1,49 +0,0 @@ -//PHASE 1: - -// Initialize an array that will hold the values to be calculated (from the command line) -function get_args() { - var operand1 = process.argv[2]; - var operator = process.argv[3]; - var operand2 = process.argv[4]; - let op = [operand1, operator, operand2]; - return op; -} - -// PHASE 2: - -function calculate() { - // Use previously built get_args function to get operators and operand - let op = get_args(); - var a = Number(op[0]); - var operator = op[1]; - var b = Number(op[2]); - - // Initialize variable to hold result of operations - var result = 0; - - // Use conditions to determine what the operation is from the user input and calculate the result - if(operator == '+') { - result = a + b; - } else if(operator == '-') { - result = a - b; - } else if(operator == 'x') { - result = a * b; - } else if(operator == '/') { - result = a / b; - } else if(operator == '^') { - result = a ** b; - } else if(operator == '%') { - result = a % b; - } - - return result; -} - -// Testing: -/* -Run romancalc.js a b c -where a and c are numbers -and b is the operator. -This code is sensitive to the spacing in the user input (command line). -*/ -console.log(calculate()); \ No newline at end of file diff --git a/Javascript/week2/code/solution/2.3-romancalc-phase3.js b/Javascript/week2/code/solution/2.3-romancalc-phase3.js deleted file mode 100644 index 1d3ada7b..00000000 --- a/Javascript/week2/code/solution/2.3-romancalc-phase3.js +++ /dev/null @@ -1,89 +0,0 @@ -//PHASE 1: - -// Initialize an array that will hold the values to be calculated (from the command line) -function get_args() { - const operand1 = process.argv[2]; - const operator = process.argv[3]; - const operand2 = process.argv[4]; - let op = [operand1, operator, operand2]; - return op; -} - -// PHASE 2: - -function calculate() { - // Use previously built get_args function to get operators and operand - let op = get_args(); - var a = Number(op[0]); - var operator = op[1]; - var b = Number(op[2]); - - // Initialize variable to hold result of operations - var result = 0; - - // Use conditions to determine what the operation is from the user input and calculate the result - if(operator == '+') { - result = a + b; - } else if(operator == '-') { - result = a - b; - } else if(operator == 'x') { - result = a * b; - } else if(operator == '/') { - result = a / b; - } else if(operator == '^') { - result = a ^ b; - } else if(operator == '%') { - result = a % b; - } - - return result; -} - -// PHASE 3: - -// Learn more about associative arrays in JS: https://www.xul.fr/javascript/associative.php -const letterVals = { - "I": 1, - "V": 5, - "X": 10, - "L": 50, - "C": 100, - "M": 1000 -}; - -// Function (romanToInt) that takes input as a parameter and returns int from roman value, ex. XXVII: 27, XIV: 14 -function romanToInt(input) { - if (input === "") { - return 0; - } - romanArr = input.split(""); - - len = romanArr.length - value = 0; - romanArr.forEach((item, index) => { - if (item === "I" && index + 1 < len && - (romanArr[index + 1] === "V" || romanArr[index + 1] === "X")) { - // I can be placed before V (5) and X (10) to make 4 and 9 - value -= 2 * letterVals[item]; - } else if (item === "X" && index + 1 < len && - (romanArr[index + 1] === "L" || romanArr[index + 1] === "C")) { - // X can be placed before L (50) and C (100) to make 40 and 90. - value -= 2 * letterVals[item]; - } else if (item === "C" && index + 1 < len && - (romanArr[index + 1] === "D" || romanArr[index + 1] === "M")) { - // C can be placed before D (500) and M (1000) to make 400 and 900 - value -= 2 * letterVals[item]; - } - - value += letterVals[item]; - }); - - return value; -} - -// Testing -console.log(romanToInt(process.argv[2])); -//console.log(romanToInt("4")); -//console.log(romanToInt("IV")); -//console.log(romanToInt("XIV")); -//console.log(romanToInt("XXVII")); \ No newline at end of file diff --git a/Javascript/week2/code/solution/2.4-romancalc-phase4.js b/Javascript/week2/code/solution/2.4-romancalc-phase4.js deleted file mode 100644 index cf969a5d..00000000 --- a/Javascript/week2/code/solution/2.4-romancalc-phase4.js +++ /dev/null @@ -1,100 +0,0 @@ -//PHASE 1: - -// Initialize an array that will hold the values to be calculated (from the command line) -function get_args() { - const operand1 = process.argv[2]; - const operator = process.argv[3]; - const operand2 = process.argv[4]; - let op = [operand1, operator, operand2]; - return op; -} - -// PHASE 2: - -function calculate() { - // Use previously built get_args function to get operators and operand - let op = get_args(); - var a = Number(op[0]); - var operator = op[1]; - var b = Number(op[2]); - - // Initialize variable to hold result of operations - var result = 0; - - // Use conditions to determine what the operation is from the user input and calculate the result - if(operator == '+') { - result = a + b; - } else if(operator == '-') { - result = a - b; - } else if(operator == 'x') { - result = a * b; - } else if(operator == '/') { - result = a / b; - } else if(operator == '^') { - result = a ^ b; - } else if(operator == '%') { - result = a % b; - } - - return result; -} - -// PHASE 3: - -// Learn more about associative arrays in JS: https://www.xul.fr/javascript/associative.php -const letterVals = { - "I": 1, - "V": 5, - "X": 10, - "L": 50, - "C": 100, - "M": 1000 -}; - -// Function (romanToInt) that takes input as a parameter and returns int from roman value, ex. XXVII: 27, XIV: 14 -function romanToInt(input) { - if (input === "") { - return 0; - } - romanArr = input.split(""); - - len = romanArr.length - value = 0; - romanArr.forEach((item, index) => { - if (item === "I" && index + 1 < len && - (romanArr[index + 1] === "V" || romanArr[index + 1] === "X")) { - // I can be placed before V (5) and X (10) to make 4 and 9 - value -= 2 * letterVals[item]; - } else if (item === "X" && index + 1 < len && - (romanArr[index + 1] === "L" || romanArr[index + 1] === "C")) { - // X can be placed before L (50) and C (100) to make 40 and 90. - value -= 2 * letterVals[item]; - } else if (item === "C" && index + 1 < len && - (romanArr[index + 1] === "D" || romanArr[index + 1] === "M")) { - // C can be placed before D (500) and M (1000) to make 400 and 900 - value -= 2 * letterVals[item]; - } - - value += letterVals[item]; - }); - - return value; -} - -// https://stackoverflow.com/questions/9083037/convert-a-number-into-a-roman-numeral-in-javascript -function intToRoman(input) { - if (isNaN(input)) - return NaN; - var digits = String(+input).split(""), - key = ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM", - "","X","XX","XXX","XL","L","LX","LXX","LXXX","XC", - "","I","II","III","IV","V","VI","VII","VIII","IX"], - roman = "", - i = 3; - while (i--) - roman = (key[+digits.pop() + (i * 10)] || "") + roman; - return Array(+digits.join("") + 1).join("M") + roman; -} - -// Testing -console.log(intToRoman(process.argv[2])); \ No newline at end of file diff --git a/Javascript/week2/code/solution/2.5-romancalc-phase5.js b/Javascript/week2/code/solution/2.5-romancalc-phase5.js deleted file mode 100644 index 7aecd2f6..00000000 --- a/Javascript/week2/code/solution/2.5-romancalc-phase5.js +++ /dev/null @@ -1,116 +0,0 @@ -function isNumber(n) { return /^-?[\d.]+(?:e-?\d+)?$/.test(n); } - -// PHASES 3 & 4 shifted to top: - -// Learn more about associative arrays in JS: https://www.xul.fr/javascript/associative.php -const letterVals = { - "I": 1, - "V": 5, - "X": 10, - "L": 50, - "C": 100, - "M": 1000 -}; - -// Function (romanToInt) that takes romanString as a parameter and returns int from roman value, ex. XXVII: 27, XIV: 14 -function romanToInt(romanString) { - if (romanString === "") { - return 0; - } - romanArr = romanString.split(""); - - len = romanArr.length - value = 0; - romanArr.forEach((item, index) => { - if (item === "I" && index + 1 < len && - (romanArr[index + 1] === "V" || romanArr[index + 1] === "X")) { - // I can be placed before V (5) and X (10) to make 4 and 9 - value -= 2 * letterVals[item]; - } else if (item === "X" && index + 1 < len && - (romanArr[index + 1] === "L" || romanArr[index + 1] === "C")) { - // X can be placed before L (50) and C (100) to make 40 and 90. - value -= 2 * letterVals[item]; - } else if (item === "C" && index + 1 < len && - (romanArr[index + 1] === "D" || romanArr[index + 1] === "M")) { - // C can be placed before D (500) and M (1000) to make 400 and 900 - value -= 2 * letterVals[item]; - } - - value += letterVals[item]; - }); - - return value; -} - -// https://stackoverflow.com/questions/9083037/convert-a-number-into-a-roman-numeral-in-javascript -function intToRoman(input) { - if (isNaN(input)) - return NaN; - var digits = String(+input).split(""), - key = ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM", - "","X","XX","XXX","XL","L","LX","LXX","LXXX","XC", - "","I","II","III","IV","V","VI","VII","VIII","IX"], - roman = "", - i = 3; - while (i--) - roman = (key[+digits.pop() + (i * 10)] || "") + roman; - return Array(+digits.join("") + 1).join("M") + roman; -} - -//PHASE 1 & PHASE 5: - -// Initialize an array that will hold the values to be calculated (from the command line) -function get_args() { - if (!isNumber(process.argv[2])) { - var operand1 = romanToInt(process.argv[2]); - } else { - var operand1 = process.argv[2]; - } - - if(!isNumber(process.argv[4])) { - var operand2 = romanToInt(process.argv[4]); - } else { - var operand2 = process.argv[4]; - } - - var operator = process.argv[3]; - let op = [operand1, operator, operand2]; - return op; -} - -// PHASE 2: - -function calculate() { - // Use previously built get_args function to get operators and operand - let op = get_args(); - var a = Number(op[0]); - var operator = op[1]; - var b = Number(op[2]); - - // Initialize variable to hold result of operations - var result = 0; - - // Use conditions to determine what the operation is from the user input and calculate the result - if(operator == '+') { - result = a + b; - } else if(operator == '-') { - result = a - b; - } else if(operator == 'x') { - result = a * b; - } else if(operator == '/') { - result = a / b; - } else if(operator == '^') { - result = a ** b; - } else if(operator == '%') { - result = a % b; - } - - return result; -} - -var result = calculate(); -op = get_args(); - -console.log("Results:"); -console.log(result); -console.log(intToRoman(result)); \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/addFirstToLast.js b/Javascript/week2/code/solution/twilioquest-code/addFirstToLast.js deleted file mode 100644 index 1c780b22..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/addFirstToLast.js +++ /dev/null @@ -1,7 +0,0 @@ -function addFirstToLast(stringArray) { - if (stringArray.length === 0) { - return ""; - } else { - return stringArray[0] + stringArray[stringArray.length-1]; - } -} \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/enhancedLifeDetector.js b/Javascript/week2/code/solution/twilioquest-code/enhancedLifeDetector.js deleted file mode 100644 index 6714e0f9..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/enhancedLifeDetector.js +++ /dev/null @@ -1,11 +0,0 @@ -const treeStatus = process.argv[2]; - -if (treeStatus === '0') { - console.log("alive"); -} else if (treeStatus === "1") { - console.log("flowering"); -} else if (treeStatus === "2") { - console.log("shedding"); -} else { - console.log("other"); -} \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/freighterInventory.js b/Javascript/week2/code/solution/twilioquest-code/freighterInventory.js deleted file mode 100644 index 02c6acd0..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/freighterInventory.js +++ /dev/null @@ -1 +0,0 @@ -const inventory = ["Ducktypium Ore", "Uranium Rod", "Ruthenium Isotopes", "Concave Lens", "Refraction Panel"] \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/getFirstAmountSorted.js b/Javascript/week2/code/solution/twilioquest-code/getFirstAmountSorted.js deleted file mode 100644 index 69616437..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/getFirstAmountSorted.js +++ /dev/null @@ -1,9 +0,0 @@ -function getFirstAmountSorted(stringArray, number){ - stringArray.sort(); - //console.log(stringArray); - const slicedArray = stringArray.slice(0, number); - return slicedArray; -} - -const newArray = getFirstAmountSorted(['cat', 'apple', 'bat'], 2); -console.log(newArray); \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/northBridgeControl.js b/Javascript/week2/code/solution/twilioquest-code/northBridgeControl.js deleted file mode 100644 index d5c9c803..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/northBridgeControl.js +++ /dev/null @@ -1,5 +0,0 @@ -const command = process.argv[2]; - -if (command === "EXTEND") { - console.log("Extending bridge!"); -} \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/shouldWater.js b/Javascript/week2/code/solution/twilioquest-code/shouldWater.js deleted file mode 100644 index ced502cf..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/shouldWater.js +++ /dev/null @@ -1,7 +0,0 @@ -const lifeStatus = process.argv[2]; -const dryLevel = process.argv[3]; -const dryNumber = Number(dryLevel); - -if (lifeStatus === '0' && dryNumber > 10) { - console.log("WATER"); -} \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/sortOrder.js b/Javascript/week2/code/solution/twilioquest-code/sortOrder.js deleted file mode 100644 index ce168261..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/sortOrder.js +++ /dev/null @@ -1,10 +0,0 @@ -const firstWord = process.argv[2].toLowerCase(); -const secondWord = process.argv[3].toLowerCase(); - -if (firstWord < secondWord) { - console.log(-1); -} else if (firstWord > secondWord) { - console.log(1); -} else { - console.log(0); -} \ No newline at end of file diff --git a/Javascript/week2/code/solution/twilioquest-code/treeLifeDetector.js b/Javascript/week2/code/solution/twilioquest-code/treeLifeDetector.js deleted file mode 100644 index f1ee19eb..00000000 --- a/Javascript/week2/code/solution/twilioquest-code/treeLifeDetector.js +++ /dev/null @@ -1,7 +0,0 @@ -const treeStatus = process.argv[2]; - -if (treeStatus === '0') { - console.log("alive"); -} else { - console.log("other"); -} \ No newline at end of file diff --git a/Javascript/week2/issues/2.1-romancalc.md b/Javascript/week2/issues/2.1-romancalc.md deleted file mode 100644 index c18016ce..00000000 --- a/Javascript/week2/issues/2.1-romancalc.md +++ /dev/null @@ -1,99 +0,0 @@ -## Roman Calculator - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You're a time traveller who is about to go back in time and want to build a bunch of cool devices for the people back in the day. You decide to build a basic calculator since math is the coolest subject in the world and you want to help the Romans become really efficient in their calculations. - -### :airplane: Phase 1 - -Create a file called romancalc.js - -**Collecting user input from command line in JS** - -Create a function called get_args that, quite literally, gets arguments from the user and returns the arguments. The user will provide these arguments in the command line when they run their code: ``` node romancalc.js 5 x 4 ```. For the first phase, we will only focus on getting and storing those arguments for future use. - -Knowing that functions can only return one element, you want to store these arguments in an array. You can then return the array so that other functions calling get_args can have access to the the arguments. - -### :pencil: Commenting your Code - -Use in line comments to explain how your code works. Commenting your code helps ensure that you understand what is happening, and helps the code reviewer read through your code easily. For example: - -**Great example:** - -``` -var i; // Initialize a variable -for (i = 0; i < nums.length; i++) { // Initialize a for loop that iterates from 0 to length of the nums array - nums[i]+5; // At every iteration, add the i-th integer in the nums array to the text variable -} // End of loop - -``` - -When you start writing more code (200+ lines) you will want to do the next example. For this course, your code should not extend past 50-100 lines and we want to use your comments to see how well you understand the concepts and language, so it's better to use the previous example. - -**Okay example:** - -``` -// This code uses a for loop to iterate through the entire nums array and add 5 to each element -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -**Don't do this:** - -``` -// Add 5 to all values in nums array -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -### :red_car: Running your Code - -1. Save your file -2. Make sure you're in the same directory in which you saved your romancalc.js file -3. To run your fancy new program, type: `node romancalc.js` in terminal with any additional arguments - -### :pencil2: Testing - -1. Add ```let op = get_args();``` to the end of your code to check that the get_args function returns an array -2. Add the following to confirm if your array contains the right arguments -- ```console.log("The first operand is: ", op[0]);``` -- ```console.log("The second operand is: ", op[2]);``` -- ```console.log("The operator is: ", op[1]);``` - -Run ```node romancalc.js a b c``` - -**Test Case 1:** - -**Input:** ```node romancalc.js 4.4 / 4``` - -**Output:** - -```c -The first operand is: 4.4 -The second operand is: 4 -The operator is: / -``` - -**Test Case 2:** - -**Input:** ```node romancalc.js 2 r to``` - -**Output:** - -```c -The first operand is: 2 -The second operand is: to -The operator is: r -``` - -### ✅ Submit - -**Task 1: Complete a function that gets and stores user input!** - -Commit a file called romancalc.js diff --git a/Javascript/week2/issues/2.2-romancalc.md b/Javascript/week2/issues/2.2-romancalc.md deleted file mode 100644 index 83432b82..00000000 --- a/Javascript/week2/issues/2.2-romancalc.md +++ /dev/null @@ -1,124 +0,0 @@ -## Roman Calculator - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You're a time traveller who is about to go back in time and want to build a bunch of cool devices for the people back in the day. You decide to build a basic calculator since math is the coolest subject in the world and you want to help the romans become really efficient in their calculations. - -### :airplane: Phase 2 - -Continue working in romancalc.js - -**Building a basic calculator** - -Create a function called calculate() that calculates using operands and operand from the user and returns the result. - -1. Initialize variables with the second, third, and fourth arguments from user input. You have already created a function called get_args(), which you can use in calculate to get the operators and operand. -2. Initialize variable to hold result of operations. -3. Use conditions to determine what the operation is from the user input and calculate the result: - - Addition: + - - Subtraction: - - - Multiplication: x - - Division: / - - Exponents: ^ - - Modulus: % -4. Return the result (don't print them other than for testing). - -**Assumptions:** - -- Assume that the operator will always be one of the above -- Getting * from the command line might cause an error so you can assume that multiplication will be represented with an 'x' - -**Challenge** - -This calculator is really simple and doesn't handle error management very well. Try adding some error messages for the user so they know when their input in invalid. Consider what valid input should look like. - -Can you think of any more operations you want to implement? Try adding them! - -Consider developing your calculator to handle more complicated equations. - -**Hints** - -- Build the calculator with temporary variable that you declare in the code and think about user input after you have the basic functionality working. -- Multiplication and exponents do not use 'x' or '^' in JS - you will need to research the correct operator to make the calculations - -### :pencil: Commenting your Code - -Use in line comments to explain how your code works. Commenting your code helps ensure that you understand what is happening, and helps the code reviewer read through your code easily. For example: - -**Great example:** - -``` -var i; // Initialize a variable -for (i = 0; i < nums.length; i++) { // Initialize a for loop that iterates from 0 to length of the nums array - nums[i]+5; // At every iteration, add the i-th integer in the nums array to the text variable -} // End of loop - -``` - -When you start writing more code (200+ lines) you will want to do the next example. For this course, your code should not extend past 50-100 lines and we want to use your comments to see how well you understand the concepts and language, so it's better to use the previous example. - -**Okay example:** - -``` -// This code uses a for loop to iterate through the entire nums array and add 5 to each element -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -**Don't do this:** - -``` -// Add 5 to all values in nums array -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -### :red_car: Running your Code - -1. Save your file -2. Make sure you're in the same directory in which you saved your romancalc.js file -3. To run your fancy new program, type: `node romancalc.js` in terminal with any additional arguments - -### :pencil2: Testing - -1. Add ```console.log(calculate());``` to the end of your code - -Run ```node romancalc.js a b c``` - -**Test Cases:** - -**Input:** ```node romancalc.js 98 + 94``` - -**Output: 192** - -**Input:** ```node romancalc.js 22 - 95``` - -**Output: -73** - -**Input:** ```node romancalc.js 53 x 48``` - -**Output: 2544** - -**Input:** ```node romancalc.js 25 / 84``` - -**Output: 0.2976190476190476** - -**Input:** ```node romancalc.js 5 ^ 4``` - -**Output: 625** - -**Input:** ```node romancalc.js 143 % 7``` - -**Output: 3** - -### ✅ Submit - -**Phase 2: Complete a calculator that can do basic math equations!** - -Commit a file called romancalc.js diff --git a/Javascript/week2/issues/2.3-romancalc.md b/Javascript/week2/issues/2.3-romancalc.md deleted file mode 100644 index ca62e2ff..00000000 --- a/Javascript/week2/issues/2.3-romancalc.md +++ /dev/null @@ -1,87 +0,0 @@ -## Roman Calculator - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You're a time traveller who is about to go back in time and want to build a bunch of cool devices for the people back in the day. You decide to build a basic calculator since math is the coolest subject in the world and you want to help the romans become really efficient in their calculations. - -### :airplane: Phase 3 - -Continue working in romancalc.js - -**Converting from Roman Numerals to Integers** - -You have now successfully created a calculator and a way to get the users's input. The issue is that since you're taking this calculator to the Romans, your calculator needs to be able to work with Roman Numerals. - -Create a function called romanToInt() that takes a string of characters as input and converts it to an integer, and returns the converted integer. - -### :pencil: Commenting your Code - -Use in line comments to explain how your code works. Commenting your code helps ensure that you understand what is happening, and helps the code reviewer read through your code easily. For example: - -**Great example:** - -``` -var i; // Initialize a variable -for (i = 0; i < nums.length; i++) { // Initialize a for loop that iterates from 0 to length of the nums array - nums[i]+5; // At every iteration, add the i-th integer in the nums array to the text variable -} // End of loop - -``` - -When you start writing more code (200+ lines) you will want to do the next example. For this course, your code should not extend past 50-100 lines and we want to use your comments to see how well you understand the concepts and language, so it's better to use the previous example. - -**Okay example:** - -``` -// This code uses a for loop to iterate through the entire nums array and add 5 to each element -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -**Don't do this:** - -``` -// Add 5 to all values in nums array -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -### :red_car: Running your Code - -1. Save your file -2. Make sure you're in the same directory in which you saved your romancalc.js file -3. To run your fancy new program, type: `node romancalc.js` in terminal with any additional arguments - -### :pencil2: Testing - -Add ```console.log(romanToInt("process.argv[2]"));``` to the end of your code and run ```node romancalc.js a``` where 'a' is the Roman Numeral you want to convert - -**Test Case 1:** - -**Input:** ```node romancalc.js 4``` - -**Output: NaN (error)** - -**Test Case 1:** - -**Input:** ```node romancalc.js IV``` - -**Output: 4** - -**Test Case 1:** - -**Input: `**``node romancalc.js CMXXVII``` - -**Output: 927** - -### ✅ Submit - -**Phase 3: Complete a function to convert Roman Numerals to Integers** - -Commit a file called romancalc.js diff --git a/Javascript/week2/issues/2.4-romancalc.md b/Javascript/week2/issues/2.4-romancalc.md deleted file mode 100644 index 9dd70f74..00000000 --- a/Javascript/week2/issues/2.4-romancalc.md +++ /dev/null @@ -1,87 +0,0 @@ -## Roman Calculator - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You're a time traveller who is about to go back in time and want to build a bunch of cool devices for the people back in the day. You decide to build a basic calculator since math is the coolest subject in the world and you want to help the romans become really efficient in their calculations. - -### :airplane: Phase 4 - -Continue working in romancalc.js - -**Converting from Integers to Roman Numerals** - -If you get user input in the form of Roman Numerals, you will need to convert them into integers to do the calculations. But once the calculations are done, you will want to convert them back into Roman Numerals so that the user can read them. - -Create a function called intToRoman() that takes an integer as input and converts it to Roman Numerals, and returns the converted Roman Numerals. - -### :pencil: Commenting your Code - -Use in line comments to explain how your code works. Commenting your code helps ensure that you understand what is happening, and helps the code reviewer read through your code easily. For example: - -**Great example:** - -``` -var i; // Initialize a variable -for (i = 0; i < nums.length; i++) { // Initialize a for loop that iterates from 0 to length of the nums array - nums[i]+5; // At every iteration, add the i-th integer in the nums array to the text variable -} // End of loop - -``` - -When you start writing more code (200+ lines) you will want to do the next example. For this course, your code should not extend past 50-100 lines and we want to use your comments to see how well you understand the concepts and language, so it's better to use the previous example. - -**Okay example:** - -``` -// This code uses a for loop to iterate through the entire nums array and add 5 to each element -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -**Don't do this:** - -``` -// Add 5 to all values in nums array -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -### :red_car: Running your Code - -1. Save your file -2. Make sure you're in the same directory in which you saved your romancalc.js file -3. To run your fancy new program, type: `node romancalc.js` in terminal with any additional arguments - -### :pencil2: Testing - -Add ```console.log(intToRoman("process.argv[2]"));``` to the end of your code and run ```node romancalc.js a``` where 'a' is the integer you want to convert - -**Test Case 1:** - -**Input:** ```node romancalc.js M``` - -**Output: NaN (error)** - -**Test Case 1:** - -**Input:** ```node romancalc.js 4``` - -**Output: IV** - -**Test Case 1:** - -**Input: `**``node romancalc.js 927``` - -**Output: CMXXVII** - -### ✅ Submit - -**Phase 4: Complete a function to convert integers to Roman Numerals** - -Commit a file called romancalc.js diff --git a/Javascript/week2/issues/2.5-romancalc.md b/Javascript/week2/issues/2.5-romancalc.md deleted file mode 100644 index b37ba5da..00000000 --- a/Javascript/week2/issues/2.5-romancalc.md +++ /dev/null @@ -1,95 +0,0 @@ -## Roman Calculator - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You're a time traveller who is about to go back in time and want to build a bunch of cool devices for the people back in the day. You decide to build a basic calculator since math is the coolest subject in the world and you want to help the romans become really efficient in their calculations. - -### :airplane: Phase 5 - -Continue working in romancalc.js - -**Before starting, add this function to the top of your code:** - -```function isNumber(n) { return /^-?[\d.]+(?:e-?\d+)?$/.test(n); }``` this function returns true (0) for input that is a number and false for anything else, and will help you identify if your user input is an integer or a Roman Numeral. - -**Putting it all together** - -Now that you have your functions all set, all you have to do it put them together: - -- Move your functions from phases 3 and 4 above the get_args function of the file (so that the functions can be called later) -- Edit your get_args function so that it converts any Roman Numeral inputs into integers before storing (you can use the isNumber function here) -- Always display both the integer and Roman Numeral version of the results for accessibility - -### :pencil: Commenting your Code - -Use in line comments to explain how your code works. Commenting your code helps ensure that you understand what is happening, and helps the code reviewer read through your code easily. For example: - -**Great example:** - -``` -var i; // Initialize a variable -for (i = 0; i < nums.length; i++) { // Initialize a for loop that iterates from 0 to length of the nums array - nums[i]+5; // At every iteration, add the i-th integer in the nums array to the text variable -} // End of loop - -``` - -When you start writing more code (200+ lines) you will want to do the next example. For this course, your code should not extend past 50-100 lines and we want to use your comments to see how well you understand the concepts and language, so it's better to use the previous example. - -**Okay example:** - -``` -// This code uses a for loop to iterate through the entire nums array and add 5 to each element -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -**Don't do this:** - -``` -// Add 5 to all values in nums array -var i; -for (i = 0; i < nums.length; i++) { - nums[i]+5; -} - -``` - -### :red_car: Running your Code - -1. Save your file -2. Make sure you're in the same directory in which you saved your romancalc.js file -3. To run your fancy new program, type: `node romancalc.js` in terminal with any additional arguments - -### :pencil2: Testing - -Add ```console.log(intToRoman("process.argv[2]"));``` to the end of your code and run ```node romancalc.js a``` where 'a' is the integer you want to convert - -**Test Case 1:** - -**Input:** ```node romancalc.js 4 + X``` - -**Output: 14, XIV** - -**Test Case 1:** - -**Input:** ```node romancalc.js 4732 / 34``` - -**Output: 139.1764705882353** - -(There will be no Roman Numeral for this) - -**Test Case 1:** - -**Input: `**``node romancalc.js CCCXCIII % LXXVII``` - -**Output: 8, VIII** - -### ✅ Submit - -**Phase 5: Complete a function to convert integers to Roman Numerals** - -Commit a file called romancalc.js diff --git a/Javascript/week3/issues/3.1-recursion-intro.md b/Javascript/week3/issues/3.1-recursion-intro.md deleted file mode 100644 index 2d9ccdbb..00000000 --- a/Javascript/week3/issues/3.1-recursion-intro.md +++ /dev/null @@ -1,112 +0,0 @@ -# Introduction to Recursion - -*This assignment will demonstrate the basics of recursion, and ask you to create a recursive function of your own. If at any moment you need help, feel free to contact your TAs.* - -In English, the term "*recursive*" means something is "*characterized by recurrence or repetition*." Many natural processes in the world are recursive. As an example, start with an equilateral triangle, and replace the middle 1/3rd of each side by another equilateral triangle. Continue this process over and over until you begin to see something like a snowflake. This is called a [Koch snowflake](http://en.wikipedia.org/wiki/Koch_snowflake). - -![Koch snowflake](https://upload.wikimedia.org/wikipedia/commons/f/fd/Von_Koch_curve.gif) - -**Recursion** is the process in which a function calls itself directly or indirectly. A function is said to be **recursive** if it calls itself. Let's look at an example. - -```javascript -function HelloWorld(count) { - if (count < 1) return - print("Hello World!") - HelloWorld(count - 1) -} -``` - -Let's trace through an example of calling this function. We'll call `HelloWorld(5)`. - -```javascript -HelloWorld(5) -// count of 5 is not less than 1. Print Hello World. Call HelloWorld(4). -// count of 4 is not less than 1. Print Hello World. Call HelloWorld(3). -// count of 3 is not less than 1. Print Hello World. Call HelloWorld(2). -// count of 2 is not less than 1. Print Hello World. Call HelloWorld(1). -// count of 1 is not less than 1. Print Hello World. Call HelloWorld(0). -// count of 0 IS less than 1. Return. -``` - -Notice how the command `print("Hello World!")` is run 5 times in total throughout this recursive call. Thus, our output should look something like this: - -```bash -Hello World! -Hello World! -Hello World! -Hello World! -Hello World! -``` - -You may wonder why we don't simply use a `for` loop, in which case your argument would be completely valid! However, in this case, we used a relatively simple function in order to demonstrate how recursion works. Where recursion truly shines is in the more complex problems. - -Let's take a look at the Fibonacci numbers. In mathematics, the **Fibonacci numbers** form a sequence called the **Fibonacci sequence**, such that each number is the sum of the two preceding ones, starting from 0 and 1. What's cool is that the Fibonacci sequence uses zero-based indexing, which lends itself very well to most programming languages. Here is the beginning of the Fibonacci sequence: - -![fibonacci sequence](https://latex.codecogs.com/svg.latex?0,%201,%201,%202,%203,%205,%208,%2013,%2021,%2034,%2055,%2089,%2014,...) - -How can we use code to find the *n*th Fibonacci number? For example, we would input the number 3 and the program should output 2, the 3rd Fibonacci number (remember that the Fibonacci sequence uses zero-based indexing!). It turns out that recursion lends itself very well to this particular problem. - -```javascript -function findFibonacci(n) { - if (n < 2) return n - return findFibonacci(n-1) + findFibonacci(n-2) -} -``` - - Let's trace through the code using an example of ``findFibonacci(3)``. - -```javascript -findFibonacci(3) -// n of 3 is not less than 2. return findFibonacci(2) + findFibonacci(1) - // findFibonacci(2): n of 2 is not less than 2. return findFibonacci(1) + findFibonacci(0) - // findFibonacci(1): n of 1 IS less than 2. return n (which is 1) - // findFibonacci(0): n of 0 IS less than 2. return n (which is 0) - // Thus, findFibonacci(1) + findFibonacci(0) = 1 + 0 = 1 - // findFibonacci(1): n of 1 IS less than 2. return n (which is 1) - // Thus, findFibonacci(2) + findFibonacci(1) = 1 + 1 = 2 -Output: 2 -``` - -Take some time to run through the process above and make sure it makes sense. There is something we should take care to note: notice how we run the function `findFibonacci(1)` twice! This actually becomes *incredibly* burdensome once we use larger numbers, and we can end up running the same functions hundreds, even thousands of times - and there is most definitely a faster way to compute the Fibonacci numbers. However, this is beyond the scope of the course, and we utilized this function just to show an example of what recursion can look like. - -Pay attention to how our recursive functions have been structured so far. We first always identify **a base case** such that our recursive calls will always be stopped at some point. In `findFibonacci(n)`, our base case was any *n* less than 2, to mark the first two numbers of the Fibonacci sequence: 0 and 1. In `Hello World`, our base case was `count < 1` i.e. whenever our count got down to 0. This makes sense because once our count comes down to zero, we don't want to print any more `Hello World!`s. Thus, our first recommendation for writing recursive functions is to **always identify the base case first!** - -![base case](https://miro.medium.com/max/2800/1*JpCAqm8HdKuBhyRs9NYCOg.png) - -Your next step should then to make the recursive calls. This skill can only be polished with more practice, so don't worry if you don't get it the first time. Our best advice here is to **trust that your code works**. - -![trust and believe](https://media4.giphy.com/media/QM6TiqlweEa7MBJhyG/giphy.gif?cid=ecf05e47xrzp72ck8kixabfe9lz1noiid4ih8b1ust1v5m68&rid=giphy.gif) - -Hopefully you now have a sense of what recursion is, and a vague idea of how to construct a recursive function. Don't worry if you're struggling a little bit with thinking recursively - it will start coming naturally with more and more practice. If you're looking to try out a few more problems by yourself, [this](https://codingbat.com/java/Recursion-1) is a great website with a list of incrementally harder recursion problems to solve! Although it only compiles Java (not JavaScript), you can use Node to run your code locally on your machine instead. Moreover, in the website, you can type a return statement in the given code box and click the `Go` button to find many more test cases to ensure your program runs correctly. - -**🚗 Challenge** - -To complete this assignment, create a recursive function that returns the factorial of an integer *n* (without using a for loop!). Recall that the [factorial](https://en.wikipedia.org/wiki/Factorial#:~:text=In%20mathematics%2C%20the%20factorial%20of,convention%20for%20an%20empty%20product.) of a number n is denoted by *n!*, where: - -![factorial definition](https://latex.codecogs.com/svg.latex?n!=n%20\cdot%20(n-1)\cdot%20(n-2)\cdot%20(n-3)\cdot...\cdot3\cdot2\cdot1) - -For example, 5! = 5 x 4 x 3 x 2 x 1 = 120. - -Hint: Identify a base case first! Then move onto the recursive call. Please contact your TA if you need any help at all! - -### ✏️ Testing - -Once you have your function set up, it's time to test it out! Here are a few test cases: - -| Function Call | Output | -| ------------- | --------- | -| factorial(1) | 1 | -| factorial(2) | 2 | -| factorial(3) | 6 | -| factorial(4) | 24 | -| factorial(5) | 120 | -| factorial(6) | 720 | -| factorial(7) | 5040 | -| factorial(8) | 40320 | -| factorial(12) | 479001600 | - -Here is a [list of 100 factorials](https://www.mymathtables.com/numbers/100-factorial-tables-chart.html) in case you'd like to check more. - -### ✅ Submit - -Commit a file called factorial.js with your recursive factorial function! diff --git a/Javascript/week3/issues/3.2-javascriptcanvas.md b/Javascript/week3/issues/3.2-javascriptcanvas.md deleted file mode 100644 index 28f3e517..00000000 --- a/Javascript/week3/issues/3.2-javascriptcanvas.md +++ /dev/null @@ -1,62 +0,0 @@ -## Recursive Art - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You've received some signals from aliens that decode to result in intricate graphics. These images have patterns that seem to repeat themselves and represent mathematical concepts which appear all around earth in nature. You have decided to recreate these messages in order to resume communication with the extraterrestrials. -### :airplane: Phase 2 - -Create a new file named drawing.js - -**Learning how to draw in JavaScript** - -*In your project for this week, you will mainly focus on creating a function that will draw **one** shape continuously, so keep these handy!* - -Shapes: -* Rectangle: `rect(x, y, w, h)` -* Ellipse: `ellipse(x, y, w, h)` -* Triangle: `triangle(x1, y1, x2, y2, x3, y3)` -* Line: `line(x1, y1, x2, y2)` -* Point: `point(x, y)` -* Arc: `arc(x, y, w, h, start, stop)` -* Bezier: `bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2)` -* Quadrilateral: `quad(x1, y1, x2, y2, x3, y3, x4, y4)` -* Image: `image(image, x, y, width*, height*)` - -*For more complex shapes and examples, visit [here](https://www.khanacademy.org/computing/computer-science/algorithms/recursive-algorithms/pp/project-recursive-art)* (Thank you Khan!) - -Want to be :sparkles:fancy:sparkles:? Try changing the colors: -* `background(r, g, b)` (Set background color) -* `fill(r, g, b)` (Set fill color) -* `noFill()` (Stop filling in shapes) -* `stroke(r, g, b)` (Set the outline color for shapes) -* `strokeWeight(thickness)` (Alter thickness of strokes) -* `noStroke()` (Stop outlining for shapes) -* `color(r, g, b)` (Store a color in a variable) -* `blendColor(c1, c2, MODE)` (Blend two colors) -* `lerpColor(c1, c2, amount)` (Using 2 colors, find one in between) - -Randomizing Your Drawing -* Using `Math.random()*n` gives you a random number in the range of 0 and n. -> Tip: Try manipulating the number in some way to incorporate it into the parameter of a shape or color - -**Challenge** - -To practice implementing the concept of recursion in JavaScript art, start by creating a drawing of an alien (doesn't have to be perfect!). This drawing will be unique each separate time you run the program. - -### :red_car: Running your Code - -*Since we are focusing on pure JavaScript and this task requires HTML to run, we are going to be borrowing Khan's website to display our artwork.* -1. Go to this [website](https://www.khanacademy.org/computer-programming/new/pjs) -2. Write your code in the provided area -3. If your code doesn't have output that will be different everytime, the drawing will update whenever you change the code -3. If you implement something like randomization, a "restart" button will appear to run it multiple times - -### :pencil2: Testing - -Time to check if you are able to create a unique :alien: everytime, press "restart" and see the face change! - -### ✅ Submit - -**Phase 2: Complete a program that draws a unique alien** - -Commit a file called drawing.js diff --git a/Javascript/week3/issues/3.3-recursionexample.md b/Javascript/week3/issues/3.3-recursionexample.md deleted file mode 100644 index 9e9c82fd..00000000 --- a/Javascript/week3/issues/3.3-recursionexample.md +++ /dev/null @@ -1,96 +0,0 @@ -## Recursive Art - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You've received some signals from aliens that decode to result in intricate graphics. These images have patterns that seem to repeat themselves and represent mathematical concepts which appear all around earth in nature. You have decided to recreate these messages in order to resume communication with the extraterrestrials. -### :airplane: Phase 3 - -For this lesson, we're just going to be taking a look at an example of recursive art to get your gears running. - -**:eyes: Taking a peek at an example** - -[See what our shell looks like](https://www.khanacademy.org/computer-programming/drawing-a-shell-through-recursion/5014901340454912) - -### :question: What's happening? - -**The key to recursion is `drawShape()` in this program** - -Before we get into how this drawing is done with the concept, we'll go over what's happening. - -* The *very first* time the function is called, x = 200, y = 200, size = 360, and orientation = false. -```js -drawShape(200, 200, 360, false); -``` - -* In the function, the parameter `orientation` determines which way the arc should face (up or down). In this case, it's false, so we are drawing an arc face down. -```js - // start and stop degrees of arc - var start = 0; - var stop = 180; - - // if arc is right side up, switch start and stop so arc becomes right side up - if (orientation) { - start = 180; - stop = 360; - } -``` - -* We then draw our first arc with the parameters called with the function (x = 200, y = 200, size = 360, and orientation = false) -```js - // draw arc - arc(x, y, size, size, start, stop); -``` - -* The variable `orientation` also dictates where the arc should begin to draw: -```js - if (orientation) { - x = x + scale * size; - } else { - x = x - scale * size; - } -``` - -* Next we see `var scale = 0.085;`, which is a key component in the recursion calculation. This is what causes the arcs to get smaller as we go deeper and deeper. -* And that leads into our the key calculation! For the arcs to become spirals, if orientation is `true` (or the arc is facing up) it will move the pen to the right. If orientation is `false` (or the arc is facing down) the pen will start further to the left instead. This allows the shell to spiral and get smaller. -> Keep in mind, these new calculated values will be applied the next time the function is called. In additional to different x values, we will also make the radius smaller by assigning a new value to `size` -```js - // adjust x coordinate of next arc depending on orientation of arc - if (orientation) { - x = x + scale * size; - } else { - x = x - scale * size; - } -``` -* In order for the arc to stay centered *and* decrease in size, we also need to calculate a `newSize` value. `var newSize = size/1.2;` -* Lastly, to continue the recursion we need to call our `drawShape()` function again, but with some catches. -```js - if (newSize >= 4) { - drawShape(x, y, newSize, !orientation); - } -``` -> 1. Since recursion is not an infinite loop, we want the function to stop being called once the size is less than 4 -> 2. We want to flip the boolean of orientation so that if it previously drew an arc facing down, we will now draw one facing up. - -**And that's it! `drawShape()` will continue to be called, arcs will continue to be drawn, and new values will be calculated until the size becomes less than 4.** - - -### :pencil2: Requirements - -In the next part, you're going to be creating *your own* recursive art, but we'll be adding some requirements: -1) Have a base case (*This is the "endpoint" where the calculation terminates or stops*) - * Remember: Recursion is **not** an infinite loop! -2) Have a rule that causes the calculation continue or go deeper and deeper (continues the recursion) -3) For fun and **not demonstrated in the example**: the artwork must be randomized, meaning that a characteristic (can be size, color, length, or shape) is changed everytime the code is run - -*These requirements are exemplified in the example above, so let's talk a little about how the code incorporates them* - -1) The base case in the example is when the size is divided by 1.2 so many times that it becomes less than 4. *This is when the calculation terminates and the function is not called anymore* -2) The rule that causes the calculation to go deeper is the fact that function will need to be continuously called within eachother until size is less than 4. - -### ✅ Submit - -**Time to do some research: Find *one* example of recursion in nature and explain how *one* of the requirements applies.** - -![recursive leaf](https://qph.fs.quoracdn.net/main-qimg-391b16b1db97d8d518a0abf46cf725d2) - -Comment your findings to move on and start on your artwork! :mag: diff --git a/Javascript/week3/issues/3.4-creatingart.md b/Javascript/week3/issues/3.4-creatingart.md deleted file mode 100644 index 929e3ce8..00000000 --- a/Javascript/week3/issues/3.4-creatingart.md +++ /dev/null @@ -1,44 +0,0 @@ -## Recursive Art - -*For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.* - -You've received some signals from aliens that decode to result in intricate graphics. These images have patterns that seem to repeat themselves and represent mathematical concepts which appear all around earth in nature. You have decided to recreate these messages in order to resume communication with the extraterrestrials. -### :airplane: Phase 4 - -Create a new file named artproject.js - -**Creating your own Recursive Art** - -It's finally time to send the aliens your own personalized art for them to decipher... We just have the 3 requirements in order to make communication go smoothly. - -Here are some examples that you can take inspiration from, but try to keep yours original! -* [Ferns](https://www.khanacademy.org/computer-programming/spin-off-of-project-recursive-art/4629064758460416) -* [Colorful Tree](https://www.khanacademy.org/computer-programming/spin-off-of-project-recursive-art/5247010782445568) -* [Geometric](https://www.khanacademy.org/computer-programming/spin-off-of-project-recursive-art/4677141495414784) - -*Find more [here](https://www.khanacademy.org/computer-programming/project-recursive-art/6665781324021760) under "Spinoffs"* - -**Challenge** - -Draw anything (with common sense) utilizing recursion. Meet these 3 requirements: -1) Have a base case (*This is the "endpoint" where the calculation terminates or stops*) - * Remember: Recursion is **not** an infinite loop! -2) Have a rule that causes the calculation continue or go deeper and deeper (continues the recursion) -3) For fun: the artwork must be randomized, meaning that a characteristic (can be size, color, length, or shape) is changed everytime the code is run - -### :red_car: Running your Code - -*Since we are focusing on pure JavaScript and this task requires HTML to run, we are going to be borrowing Khan's website to display our artwork.* -1. Go to this [website](https://www.khanacademy.org/computer-programming/new/pjs) -2. Write your code in the provided area -3. With randomization, a "restart" button will appear to run it multiple times - -### :pencil2: Testing - -Go ahead and press "restart" as many times as you wish to view your recursive art. Make sure it meets those 3 requirements! - -### ✅ Submit - -**Phase 2: Complete a program that creates a randomized piece of art with recursion!** - -Commit a file called artproject.js diff --git a/Javascript/week4/issues/4.1-project.md b/Javascript/week4/issues/4.1-project.md deleted file mode 100644 index eeeca1fe..00000000 --- a/Javascript/week4/issues/4.1-project.md +++ /dev/null @@ -1,15 +0,0 @@ -### :rocket: Project! - -#### :tada: Congratulations! :tada: You’ve reached the final week of Camp Twilio. Now let’s put your experience from time traveling :alarm_clock: and communicating with aliens :alien: to the ultimate test. - -For your final project, you have complete :sparkles:creative freedom:sparkles: to essentially create whatever your heart’s desire is—with a few catches. To ensure that you’ve learned a lesson from your adventure through the cosmos, there are a few concepts you need to make sure you include in your creation. - -* :arrow_right: **Incorporate JavaScript arrays, loops, conditional statements, and recursion!** -* :arrow_right: **Keep your inputs and outputs based in the console like we’ve been doing these past 3 weeks.** - -If you’re having trouble brainstorming :brain: the perfect project idea, take a look at these examples and talk with your mentors. Don’t be afraid to reach out to them as well if you have questions about how to integrate those concepts. - -> Try creating... -> 1. [Text adventure game](https://github.com/okaybenji/text-engine) -> 2. [Tic Tac Toe](https://dev.to/shriji/game-on-console-log-5cbk) -> 3. Try Googling "Javascript console.log() projects" diff --git a/MENTORSHIP_INFORMATION.md b/MENTORSHIP_INFORMATION.md index 9c43b553..7b3450d3 100644 --- a/MENTORSHIP_INFORMATION.md +++ b/MENTORSHIP_INFORMATION.md @@ -20,22 +20,24 @@ A Bit Camp is Bit Project's version of a software bootcamp. Our Bit Camps are al - Weekly mentoring sessions - Our weekly mentoring sessions are the main component that mentors are responsible for. Every week, mentors will set up either 1-1 or group sessions with their mentees. Mentors and students can collaborate to choose which format (1-1 or group) they prefer as well as the days and times of each session. We only ask that mentors make sure all students get a chance to speak if a group session is chosen. The purpose of these sessions is for students to be able to develop meaningful relationships with developers in the industry, ask questions about the concepts and topics they are learning, and get advice and help on their final projects. Mentors can expect to have 2-3 mentees and spend around 2-3 hours per week on these sessions. + Our weekly mentoring sessions are the main component that mentors are responsible for. Every week, mentors will set up either 1-1 or group sessions with their mentees. Mentors and students can collaborate to choose which format (1-1 or group) they prefer as well as the days and times of each session. We only ask that mentors make sure all students get a chance to speak if a group session is chosen. The purpose of these sessions is for students to be able to develop meaningful relationships with developers in the industry, ask questions about the concepts and topics they are learning, and get advice and help on their final projects. -- Channel for communication (discord or slack) + Mentors can expect to have 2-3 mentees and spend around 2-3 hours per week on these sessions. Depending on the Bit Camp, these sessions can either be every week for the entire duration, or every week for only the second half of the program. Please reach out to info@bitproject.org to inquire about the mentorship time commitment for a specific Bit Camp. + +- Channel for communication (Discord or Slack) There will be an open channel of communication for students, mentors, and the Bit Project team. The medium will be either Discord or Slack and everyone will get invites the week before the program starts. This channel will be used for all communication related to the Bit Camp. - Final project presentation webinar - At the end of the program, we will hold a final project presentation webinar. Mentors are highly encouraged to attend to support their students and see the culmination of the their work. + At the end of the program, we will hold a final project presentation webinar. Mentors will be asked to attend to support their students and see the culmination of the their work. ### Mentor Expectations and Responsibilities - Knowledge of Bit Camp topics/concepts - - Our GitHub repos contain all of the Bit Camp curriculum and will be finalized in advance of the program start so mentors have a chance to look through it and brush up on any skills required. These bootcamps are intended for beginners and topics will not be overly complex or difficult + - This GitHub repo contains all of our Bit Camp curriculums. Each program's curriculum will be finalized in advance of the start date so mentors have a chance to look through it and brush up on any skills required. These bootcamps are intended for beginners and topics will not be overly complex or difficult -- Setting up weekly mentoring sessions with assigned students (2-3 hours/week) +- Setting up weekly mentoring sessions with assigned students (2-3 hours/week for entire program or second half of program, varies per Bit Camp) - Developing relationships with your mentees by discussing interests, goals, technology - Assist students with understanding Bit Camp topics and concepts - Give guidance and help on students' final projects @@ -52,7 +54,7 @@ A Bit Camp is Bit Project's version of a software bootcamp. Our Bit Camps are al - Level of experience - Our Bit Camps are intended for beginners. Students may be completely new to programming or they may have experience in programming, but not in the specific topic of the Bit Camp. Mentors can expect beginner to intermediate high school and college students. + Our Bit Camps are intended for beginners. Students may be completely new to programming or they may have experience in programming, but not in the specific topic of the Bit Camp. Most Bit Camp students will be beginner to intermediate programmers in high school or college. - Weekly interactions with students diff --git a/README.md b/README.md index f79f01be..17d75448 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,12 @@ [![first-timers-only](https://img.shields.io/badge/first--timers--only-friendly-blue.svg?style=flat-square)](https://www.firsttimersonly.com/) ## Bit Camp by Bit Project - +![Bit Camp Logo](/BitCampIllustration.jpeg) ## About Us -[Bit Project](https://www.bitproject.org/) is a 501(c)(3) nonprofit dedicated to making tech equitable by providing free open source education. We believe lack of accessibility is a prominent issue in the technology industry and we’re aiming to solve it. +[Bit Project](https://www.bitproject.org/) is a 501(c)(3) nonprofit dedicated to making tech equitable by providing free open source education. We believe lack of accessibility is a prominent issue in the technology industry and we’re aiming to solve it. -Top schools provide their students with access to countless educational resources, student organizations, and networking opportunities outside of the classroom. Additionally, the “brand” of these schools alone can open doors for their graduates. But what about the majority of schools that don’t have these resources? Their students are left trying to find their own ways to stay marketable in a competitive industry. With their heavy course loads and busy schedules, students are not easily able to supplement their education by themselves. Non-traditional paths, like software engineering bootcamps, are often expensive and inaccessible to underserved communities. To help bridge this gap, we offer a free open source alternative, called “Bit Camps”, to teach beginner students a variety of topics relevant to the software engineering field. +Top schools provide their students with access to countless educational resources, student organizations, and networking opportunities outside of the classroom. Additionally, the “brand” of these schools alone can open doors for their graduates. But what about the majority of schools that don’t have these resources? Their students are left trying to find their own ways to stay marketable in a competitive industry. With their heavy course loads and busy schedules, students are not easily able to supplement their education by themselves. Non-traditional paths, like software engineering bootcamps, are often expensive and inaccessible to underserved communities. To help bridge this gap, we offer a free open source alternative, called “Bit Camps”, to teach beginner students a variety of topics relevant to the software engineering field. These programs can serve as a jumping off point for students who want to improve their tech skills or make their own side projects, but lack the appropriate resources or don't know where to begin. At their core, our programs are intended for anyone who is eager to learn new technologies. Whether you are already a tech student looking to improve your skills or someone who has never programmed a day in your life, we welcome you to join a Bit Camp and start learning! And if you are already confident in your skills, we are always eager for new contributors to help build our program curriculum! ## Bit Camps Repository @@ -50,7 +50,7 @@ We encourage open-source contributors like you to help improve our curriculum! Y Think you've found a bug in this BitCamp repository? Bugs can include problems with code, unclear directions in instructions, and suggested improvements to camp curriculum structure. To report this problem, create a [Github Issue](https://guides.github.com/features/issues/#:~:text=Issues%20are%20a%20great%20way,own%20section%20in%20every%20repository.). When doing so, select the [BUG] template and follow the guidelines included in the description so that other contributors clearly understand your bug. -## Past Projects & Further Reading +## Further Reading Website: https://www.bitproject.org @@ -59,3 +59,7 @@ Blog Posts: https://www.bitproject.org/blog Current Program Offerings: https://www.bitproject.org/programs Youtube (has past livestreams and all other recorded Bit Project content): https://www.youtube.com/channel/UCV20hvrYZrgCf458R8cJWag + +Open Positions: https://www.bitproject.org/contribute#positions + +Join Our Discord: http://join.bitproject.org/ diff --git a/Serverless-Functions/README.md b/Serverless-Functions/README.md index 15515809..50c8128d 100644 --- a/Serverless-Functions/README.md +++ b/Serverless-Functions/README.md @@ -1,4 +1,4 @@ -# Bitcamp Serverless ⚡ +# Serverless Functions ⚡ Have you ever heard of the cloud? It's the servers that can be accessed over the internet. This can not only be used to store your files, but also to run your own written code. Just like how you can store your files in Google Drive instead of on your computer, you can also run code in a "serverless" fashion and not on your personal machine. With serverless architecture, you're free from the worries of managing a server, which is pretty complicated. All you have to do is worry about the logic! As a student with beginning experience or advanced, mastering Functions allow you to get skills of processing bulk data, integrating systems, and building simple APIs and micro-services. These concepts can be applied *everywhere* in computing and application development. diff --git a/Serverless-Functions/week1/blog.md b/Serverless-Functions/week1/blog.md new file mode 100644 index 00000000..4caf54be --- /dev/null +++ b/Serverless-Functions/week1/blog.md @@ -0,0 +1,121 @@ +## **Week 1** + +Below is a written format of the livestream for this week, included for future reference. **To move on, close this issue.** + +Last week, you should've learned how to use GitHub, Visual Studio Code, and deploy a simle Azure function. +<br></br> + +### **Learning Objectives** + +- navigating the GitHub learning lab +- downloading Visual Studio Code and installing extensions +- deploying a simple Azure function +<br></br> + +### **Livestream** + +In the livestream, we're going to set up the GitHub learning lab, Visual Studio Code, and create an Azure function resource. + +- For the full video, look in the [video folder](https://github.com/emsesc/bitcamp-serverless/blob/master/week2/livestream/videos). +- For the full code, look in the [code folder](https://github.com/emsesc/bitcamp-serverless/blob/master/week2/livestream/code). + +**We'll be going over how to:** + +1. enroll in/complete the GitHub course +2. download Visual Studio Code +3. install extentions in Visual Studio Code +4. set up a resource folder in Azure functions +5. deploy a simple HTTP trigger function in Azure + +--- + +## 📝 Review: setting up Visual Studio Code + +Visual Studio Code (or VSCode) was downloaded from this link: https://code.visualstudio.com + +Inside VSCode, you downloaded four extensions: Azure Account, Azure App Service, Azure Functions, and Live Server. All of the Azure extensions allow you to work on your Azure Function App in VS code instead of working directly through the Microsoft portal. Live Server is a quick and temporary testing server, and you can use it to test HTML pages. To launch, right click on your html file and press "Open with Live Server" or click "Go Live" in the bottom right corner: + +<img width="552" alt="Screen Shot 2021-01-10 at 1 53 20 PM" src="https://user-images.githubusercontent.com/70852990/104403390-6cf44c80-5526-11eb-8274-0a73f0840954.png"> +<img width="552" alt="Screen Shot 2021-01-10 at 1 53 40 PM" src="https://user-images.githubusercontent.com/70852990/104403466-93b28300-5526-11eb-8534-34e408a5d600.png"> +<br></br> + +## 🖥️ Navigating GitHub and GitHub desktop + +For the GitHub portion of the week, there are two core things to remember: + +1. repositories +2. committing changes + +Repositories (or repos) are essentially folders where you can store files of code. The repo of our learning lab was duplicated into your profile when you enrolled in the course so that you can commit changes and complete each lesson. + +For our learning lab, each lesson is placed inside an issue. Only when you complete the lesson (committing the necessary code and commenting), will the issue close and you can move on to the next issue. Don’t worry – committing changes is easier than it sounds. +<br></br> + +**Here are the steps to cloning and committing changes to the learning lab repo (through GitHub desktop):** + +1. Download GitHub desktop. This is one way you can commit changes to the learning lab to complete each lesson here. +2. To have access to the learning lab on GitHub desktop, the name of the learning lab repo needs to be entered in the top-left corner in the box with placeholder “Filter” and “Clone Repository” should be selected. + +<img width="429" alt="clone" src="https://user-images.githubusercontent.com/70852990/104529805-8e157580-55d8-11eb-9b12-b004263a71ce.png"> + +3. Click “Pull Origin” once the repo is cloned to pull to GitHub desktop the most current version of the learning lab. +4. Open VSCode by clicking the button “Open in Visual Studio Code”. The files in the learning lab will be opened in VS code, and now you can complete the lesson (adding the necessary code). You need to add your code in a new file, so make sure you create a new file under the folder in VSCode. When you are done creating your new file and adding the necessary code, save the file and return to GitHub desktop. +5. The change will be shown. Add a summary and description of your change and then click “Commit to main”. Next, click “Push origin”, to push the change made in VSCode to the website. + +<img width="900" alt="steps4desktop" src="https://user-images.githubusercontent.com/70852990/104529850-a6859000-55d8-11eb-9a85-908d18b52421.png"> + +*Remember, each step and lesson is posted on the repo on github.com. You will commit changes when the lesson instructs you to, and once you click “Push origin” and refresh the GitHub page, the issue will close and you can move on.* + +**You don’t have to commit changes on GitHub desktop, though.** + +Here are the steps to committing code on the GitHub website: + +1. In the learning lab repo, there should be a button labeled “Add file” – click it. +2. Click the dropdown option “Create new file”. +3. You can add your code there, and when you are finished, you can click “Commit new file” +4. If you click the second dropdown option under the “Add file” button (“Upload files”), you can upload a file from VS code that is saved in your computer. +<br><br/> + +## ⚡️ Navigating the Azure Portal + +Working with Azure Functions was the biggest task of the week (and vital to the next seven weeks). + +**Here are the steps to creating a resource and deploying a simple HTTP trigger function in that resource:** + +1. Click “Create a resource” in your portal (near the top left of the screen) + +<img width="1134" alt="resourceCreate" src="https://user-images.githubusercontent.com/70852990/104529849-a6859000-55d8-11eb-9d4e-335f21c94776.png"> + +2. Choose “Function App” (it should be in the list of popular resources, with the lightning logo) + +<img width="589" alt="FunctionApp" src="https://user-images.githubusercontent.com/70852990/104529847-a5ecf980-55d8-11eb-8ca2-b739ea386472.png"> + +3. Create a new resource group, with a unique resource name (make it relevant to what the app does). Add a unique Function App name as well. +4. Make sure the "Code" button is selected next to Publish, the Runtime stack is Node.js, and the Version selected is 12 LTS + +<img width="763" alt="codeDocker" src="https://user-images.githubusercontent.com/70852990/104529846-a5ecf980-55d8-11eb-8883-a128333c4bff.png"> + +5. Select your region +6. All of the other tabs in this step should be correctly filled (you can double-check them if you want), so you should be ready to click “Create” +7. Deploying may take a few minutes – be patient! +8. Once the function is deployed, open it and go to the “Functions” tap on the left (with symbol {fx}). +9. Click “Add” on this page, and then “HTTP trigger” (in the side window that opens) +10. Click “Add” (at the bottom of the side window) – creating this HTTP trigger may take a few seconds, so remember: patience! + +<img width="1167" alt="httpTrigger" src="https://user-images.githubusercontent.com/70852990/104529848-a6859000-55d8-11eb-902d-f77bfd3df12a.png"> + +11. Once this trigger is created, it should open automatically. Click the “Code + Test” tab on the left side, and the code should open. + +<img width="1440" alt="code+Test" src="https://user-images.githubusercontent.com/70852990/104529845-a5ecf980-55d8-11eb-9c88-64e6e5065a2a.png"> + +12. If you need to review the code we created, review the livestream. +13. Click “Save” and “Refresh” (in that order, and refresh only once the trigger has completely saved) when you have finished writing your code (or in between – it never hurts). +14. Click “Test/Run” once you are ready to try out your new trigger function. If it all works smoothly, and the code has no errors, you should receive the correct time based on the information inputted! +<br><br/> + +*One more tip: don’t forget to save! Rewriting code can be challenging and extremely frustrating, so save yourself the trouble!* +<br><br/> + +### 🎉 That's the Week 1 Livestream! Reach out to your instructors if you're having trouble. + +**To move on, comment any questions you have. If you don't have any questions, comment Done.** diff --git a/Slack-Apps/README.md b/Slack-Apps/README.md index 48710f4a..4b21092d 100644 --- a/Slack-Apps/README.md +++ b/Slack-Apps/README.md @@ -1,4 +1,4 @@ -# Bitcamp Slack 💬 +# Slack Apps 💬 Slack Apps are powerful extensions for Slack, a channel-based messaging platform widely used in the industry like IBM, Amazon, and more. These Apps allow users in a workspace to interact, connect, communicate, and work for efficently. diff --git a/Slack-Apps/homework/config.yml b/Slack-Apps/homework/config.yml index f44de7d3..80b4e7d2 100644 --- a/Slack-Apps/homework/config.yml +++ b/Slack-Apps/homework/config.yml @@ -1,143 +1,172 @@ -title: 'Creating Slack Apps with Bolt Framework, NodeJS, and APIs' +title: Creating Slack Apps with Bolt Framework, NodeJS, and APIs description: >- - This learning lab course is intended for the purpose of Bit Project's bootcamp - with Slack on Slack Apps. + Slack Apps are powerful extensions for Slack, a channel-based messaging platform widely used in the industry like IBM, Amazon, and more. These Apps allow users in a workspace to interact, connect, communicate, and work for efficently. In this 6-week course hosted by Bit Project & Slack, you'll learn how to make your own Slack App using the Bolt Framework, Slack API, Node (JavaScript) and various 3rd Party APIs. template: - repo: slackapps-template - name: slackapps-folder + name: learninglab-template + repo: your-learninglab-template before: - - type: createIssue - title: Week 1 - body: 1.1-bolt-intro.md + - type: createIssue + title: Week 1 + body: 1.1-bolt-intro.md steps: - - title: 'Week 1: Intro to the Bolt Framework' - description: Week 1 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/1' - actions: - - type: respond - with: 1.2-bots-and-apps.md - issue: 1 - - - title: 'Week 1: Intro to Slack Apps' - description: Week 1 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/1' - actions: - - type: respond - with: 1.3-setup-app-and-learn-events.md - - - title: 'Week 1: Config Setup and Event Listeners' - description: Week 1 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/1' - actions: - - type: respond - with: 1.4-basic-slack-app.md - - - title: 'Week 1: Creating a Basic Slack App' - description: Week 1 Description - event: issues.closed - link: '{{ repoUrl }}/issues/1' - actions: - - type: respond - with: 0.0-response.md - - type: createIssue - title: Week 2 - body: 2.1-blocks-and-actions.md - - - title: 'Week 2: BlockKit and Actions' - description: Week 2 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/2' - actions: - - type: respond - with: 2.2-blocks-and-actions-app.md - - - title: 'Week 2: Slack App with BlockKit' - description: Week 2 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/2' - actions: - - type: respond - with: 2.3-commands-and-modals.md - - - title: 'Week 2: Commands and Modals' - description: Week 2 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/2' - actions: - - type: respond - with: 2.4-time-converter.md - - - title: 'Week 2: Time Converter Slack App' - description: Week 2 Description - event: issues.closed - link: '{{ repoUrl }}/issues/2' - actions: - - type: respond - with: 0.0-response.md - - type: createIssue - title: Week 3 - body: 3.1-reaction-event-listener-and-threads.md - - - title: 'Week 3: Reactions and Threads' - description: Week 3 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/4' - actions: - - type: respond - with: 3.2-oauth-account-and-credentials.md - - - title: 'Week 3: OAuth and Credentials' - description: Week 3 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/4' - actions: - - type: respond - with: 3.3-calling-translator-api.md - - - title: 'Week 3: Calling the Translator API' - description: Week 3 Description - event: issues.closed - link: '{{ repoUrl }}/issues/3' - actions: - - type: respond - with: 0.0-response.md - - type: createIssue - title: Week 4 - body: 4.1-express.md - - - title: 'Week 4: Learning About ExpressJS' - description: Week 4 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/4' - actions: - - type: respond - with: 4.2-webhooks.md - - - title: 'Week 4: Intro to Webhooks' - description: Week 4 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/4' - actions: - - type: respond - with: 4.3-final-project.md - - - title: 'Week 4: Final Project' - description: Week 4 Description - event: issue_comment.created - link: '{{ repoUrl }}/issues/4' - actions: - - type: respond - with: 0.0-done.md - - type: closeIssue - issue: 4 - - -tags: - - Slack - - Slack Apps - - JavaScript - - Bit Camp - - Bit Project + - title: 'Week 1: Introduction to Bolt JS' + description: Learning about Bolt, a framework for creating Slack Apps. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1.2-bots-and-apps.md + issue: 1 + - title: 'Week 1: Slack Bots vs. Slack Apps' + description: Learn about the various types of Slack Apps you can make. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1.3-setup-app-and-learn-events.md + issue: 1 + - title: 'Week 1: Config Setup and Event Listeners' + description: Setting up a text editor and using event listeners. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1.4-basic-slack-app.md + issue: 1 + - title: 'Week 1: Creating a Basic Slack App' + description: Use what you learned and make your first Slack App. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 1 + - title: 'Week 1: Feedback' + description: Provide your feedback for Week 1! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 1-complete.md + issue: 1 + - type: createIssue + title: Week 2 + body: 2.1-blocks-and-actions.md + - type: closeIssue + issue: 1 + - title: 'Week 2: Block Kits and Actions' + description: Introduction to BlockKits and Actions in the Slack API. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2.2-blocks-and-actions-app.md + issue: 6 + - title: 'Week 2: Building an App with Block Kits and Actions ' + description: Use BlockKits and Actions to make a Slack App. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2.3-commands-and-modals.md + issue: 6 + - title: 'Week 2: Commands and Modals' + description: Introduction to Commands and Modals in the Slack API. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2.4-time-converter.md + issue: 6 + - title: 'Week 2: Time Converter Slack App' + description: Use what you learned to create a Time Converter Slack App. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 6 + - title: 'Week 2: Feedback' + description: Provide your feedback for Week 2! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 2-complete.md + issue: 6 + - type: createIssue + title: Week 3 + body: 3.1-reaction-event-listener-and-threads.md + - type: closeIssue + issue: 6 + - title: 'Week 3: Google Translate API: Event Listener & Threads' + description: Introduction to a new event listener and responding in threads. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3.2-oauth-account-and-credentials.md + issue: 11 + - title: 'Week 3: Google Translate API: Account & Credentials' + description: Setting up a Google Developer Account and using the Translator. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3.3-calling-translator-api.md + issue: 11 + - title: 'Week 3: Google Translate API: Calling the Translator' + description: Integrating the Translator in a Slack App. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 11 + - title: 'Week 3: Feedback' + description: Provide your feedback for Week 3! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 3-complete.md + issue: 11 + - type: createIssue + title: Week 4 + body: 4.1-express.md + - type: closeIssue + issue: 11 + - title: 'Week 4: Introduction to Express' + description: Learn about ExpressJS and what it can do. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 4.2-webhooks.md + issue: 15 + - title: 'Week 4: Introduction to Webhooks' + description: Learn about what webhooks are and how to use them in a Slack App. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 4.3-final-project.md + issue: 15 + - title: 'Week 4: Final Project with Github API' + description: Finish up the course by creating your last Slack App with the Github API. + event: pull_request.closed + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: feedback.md + issue: 15 + - title: 'Week 4: Feedback' + description: Provide your feedback for Week 4! + event: issue_comment.created + link: '{{ repoUrl }}/issues' + actions: + - type: respond + with: 4-complete.md + issue: 15 + - type: closeIssue + issue: 15 diff --git a/Slack-Apps/homework/course-details.md b/Slack-Apps/homework/course-details.md index 8a997dd7..623bca0e 100644 --- a/Slack-Apps/homework/course-details.md +++ b/Slack-Apps/homework/course-details.md @@ -1,4 +1,8 @@ -### **Week 1: Getting Started with Slack API** +# Creating Slack Apps with Bolt Framework, NodeJS, and APIs + +*Slack Apps are powerful extensions for Slack, a channel-based messaging platform widely used in the industry like IBM, Amazon, and more. These Apps allow users in a workspace to interact, connect, communicate, and work for efficently. In this 6-week course hosted by Bit Project & Slack, you'll learn how to make your own Slack App using the Bolt Framework, Slack API, Node (JavaScript) and various 3rd Party APIs.* + +### **Week 1: Getting Started with Slack API** **Learning Objectives** diff --git a/Slack-Apps/homework/responses/0.0-done.md b/Slack-Apps/homework/responses/0.0-done.md deleted file mode 100644 index 908b909f..00000000 --- a/Slack-Apps/homework/responses/0.0-done.md +++ /dev/null @@ -1 +0,0 @@ -Congrats! You're finished. diff --git a/Slack-Apps/homework/responses/0.0-response.md b/Slack-Apps/homework/responses/0.0-response.md deleted file mode 100644 index 16693b11..00000000 --- a/Slack-Apps/homework/responses/0.0-response.md +++ /dev/null @@ -1 +0,0 @@ -When a section is completed, a new issue will be created with the next step. [Click here to start!]({{ repoUrl }}/issues/) diff --git a/Slack-Apps/homework/responses/1-complete.md b/Slack-Apps/homework/responses/1-complete.md new file mode 100644 index 00000000..c73619aa --- /dev/null +++ b/Slack-Apps/homework/responses/1-complete.md @@ -0,0 +1 @@ +[That's it for Week 1! Click here to move on to Week 2!]({{ repoUrl }}/issues) \ No newline at end of file diff --git a/Slack-Apps/homework/responses/1.0-blog.md b/Slack-Apps/homework/responses/1.0-blog.md deleted file mode 100644 index b2365ee4..00000000 --- a/Slack-Apps/homework/responses/1.0-blog.md +++ /dev/null @@ -1,80 +0,0 @@ -# Week 1 Livestream - -Welcome to your first livestream of Bitcamp Slack! In week 1, we are going to be going over the basics of navigating the Slack API, using the Bolt Framework, and setting up a coding environment for NodeJS. - -## 📝 Objectives - -### Week 1 Objectives - -This week's goals include: - -- Understanding the basics of the Slack API -- Learning how to use the Bolt Framework in NodeJS -- Setting up a coding environment (an IDE/compiler) - -### Livestream Objectives - -The livestream for Week 1 is an introduction to the week's objectives. During the livestream, you will learn how to navigate, understand, and use the Slack API documentation. As well, how to use the Bolt Framework to create Slack Apps and lastly, how to setup a working environment to create your own Slack Apps and how to run them on your own computer. - -The livestream will be based on introductory information needed to understand more complex ideas that will be introduced in later weeks. This week will focus on the ability to understand the concepts of what a Slack App is, how it is built, and how it is ran (from your home computer). - -## What is a Slack App? 📲 - -First of all, if you haven't used Slack yet (which you probably have), Slack is a workplace communication tool/platform, “a single place for messaging, tools and files.” This means Slack is an instant messaging system with lots of add-ins for other workplace tools. The add-ins aren’t necessary to use Slack, though, because the main functionality is all about talking to other people. There are two methods of chat in Slack: channels (group chat), and direct message or DM (person-to-person chat). - -![Slack Example](https://kazuar.github.io/images/slack_bot/screen1.png "Slack Example") - -Within Slack, you have Slack Apps! Slack Apps can be compared to extensions that help you in your day to day process. For example, some of the most known Slack Apps include Google Calendar Events, Polly, and Paymo (for a complete list, if you're interested: https://www.paymoapp.com/blog/best-slack-apps/). Slack Apps allow you to make your own Slack Workspace more complete through Slack Apps that help you with your work, communication, and efficency. Also, they can really make your workspace more lively! - -If you want to learn more, checkout these links: - -- https://slack.com/help/articles/202026038-An-introduction-to-Slackbot -- https://blog.hubspot.com/marketing/slack-apps-integrations -- https://slack.com/help/articles/115005265703-Create-a-bot-for-your-workspace - -## What is Bolt? ⚡ - -Bolt is a framework that lets you build Slack apps in a flash. Bolt handles much of the foundational setup so you can focus on your app's functionality. By default, Bolt includes token validation and server support, a simplified OAuth interface, and automatic retry and rate-limiting logic. - -Although Bolt will also be covered in the homework (as it is SUPER IMPORTANT for understand how to make a Slack App), the best way to learn is trying it out yourself: https://api.slack.com/start/building/bolt-js. - -![Bolt Example](https://res.cloudinary.com/practicaldev/image/fetch/s--cvKydi1d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://a.slack-edge.com/80588/img/api/articles/bolt/slack_hello.png "Bolt Example") - -## Setting Up an IDE 💻 - -What is an IDE vs. a compiler? Well think about it like this, an IDE, or Integrated Development Environment, contains not only a compiler but many other features that make the process of creating code much easier because of these said features that assist you. - -IDEs increase programmer productivity by combining common activities of writing software into a single application: editing source code, building executables, and debugging. - -Some of these features include: editing source code, syntax highlighting, and autocomplete. One of the most well-known IDEs is **Visual Studio Code** created by Microsoft. Feel free to use an IDE of your choice but make sure it has compatibility for NodeJS. If you want to install VSC, follow the steps below: - -1. Go to https://code.visualstudio.com/download and select what operating system you have (mac, windows, etc). - -2. Open the installer (.msi or .exe) and continue until VSC starts downloading. Once downloaded, open it up and watch this video on how to navigate around: https://www.youtube.com/watch?v=VqCgcpAypFQ. - -3. To install NodeJS (for Slack Apps), head to: https://nodejs.org/en/download/ and download the LTS version. - -4. Once installed, if you're on Windows, you're all set and ready to code! If you're on linux or macOS, make sure to add NodeJS to path just in case you have the setting to do so off in the installer: https://www.tutorialspoint.com/nodejs/nodejs_environment_setup.htm. - -Congrats! You now have a working IDE and are ready to create your first Slack App. If you need any help, make sure to reach out to your student mentors or checkout the links below: - -- https://www.youtube.com/watch?v=MlIzFUI1QGA -- https://www.youtube.com/watch?v=tCfbi5PF1y0 -- https://www.youtube.com/watch?v=AuCuHvgOeBY -- https://www.youtube.com/watch?v=TQks1p7xjdI - - - - -## Demo Slack App! - -Mentors will livestream themselves creating a Slack App for the students to understand the different components of creating one. If you want to follow along, the tutorial is posted here: https://slack.dev/bolt-js/tutorial/getting-started. - -### 🎉 That's the Week 1 Livestream! Reach out to your mentors if you're having trouble. - - - - - - - diff --git a/Slack-Apps/homework/responses/1.1-bolt-intro.md b/Slack-Apps/homework/responses/1.1-bolt-intro.md index 1d0994b0..ddcd0dc2 100644 --- a/Slack-Apps/homework/responses/1.1-bolt-intro.md +++ b/Slack-Apps/homework/responses/1.1-bolt-intro.md @@ -1,4 +1,8 @@ -# Introduction to Bolt JS +## Introduction to Bolt JS + +#### Learning about Bolt, a framework for creating Slack Apps. + +**If you missed the livestream or are unable to view the recording, here is a link to a written copy: https://github.com/bitprj/BitCamp/blob/master/Slack-Apps/week1/blog.md** Bolt JS is a framework, or a platform, for developing in JavaScript for Slack. Bolt **significantly** reduces the learning curve for Slack development by abstracting away some of the more complicated language barriers involved. In this issue, you will be familiarizing yourself with Bolt. @@ -9,3 +13,7 @@ Before getting into Bolt, [read up on Slack](https://api.slack.com/start/overvie ## ✍️ Reflection After you are done with both articles, write down three things you found interesting and would like to learn more about. Afterwards, write down three more things that you found difficult to understand. + +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** diff --git a/Slack-Apps/homework/responses/1.2-bots-and-apps.md b/Slack-Apps/homework/responses/1.2-bots-and-apps.md index 35296380..f204a797 100644 --- a/Slack-Apps/homework/responses/1.2-bots-and-apps.md +++ b/Slack-Apps/homework/responses/1.2-bots-and-apps.md @@ -1,4 +1,6 @@ -# Bots and Apps +## Slack Bots vs. Slack Apps + +#### Learn about the various types of Slack Apps you can make. Now that you better understand Bolt and Slack, it is time to learn about different types of projects we can build on Slack! This issue will cover the differences between a Slack **app** and a Slack **bot**. @@ -15,3 +17,7 @@ The article on bots listed a couple of their use cases, including: * Uploading files! Come up with 2-3 ideas for a Slack app and 2 ideas for a bot and leave them as comments. These ideas don't have to consider any logistics, and can be as simple or complex as you would like! + +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** diff --git a/Slack-Apps/homework/responses/1.3-setup-app-and-learn-events.md b/Slack-Apps/homework/responses/1.3-setup-app-and-learn-events.md index 3540e9b8..5051b6fc 100644 --- a/Slack-Apps/homework/responses/1.3-setup-app-and-learn-events.md +++ b/Slack-Apps/homework/responses/1.3-setup-app-and-learn-events.md @@ -1,4 +1,6 @@ -# Setting up a Slack App +## Config Setup and Event Listeners + +#### Setting up a text editor and using event listeners. Now that you have done some research on Slack development, its time to get building! In this issue, you will learn how to set up a Slack app. @@ -99,4 +101,8 @@ An important part of the app you just built is a **slack event**. Understanding While you're following both tutorials, write down any questions you have (ie what is this dependency, what is a scope). Then, research one of those questions and submit a 2-4 sentence summary of your findings as a comment. -After you have completed the project, try changing what the app listens for (ie instead of "hello" it checks for "bit camp"). See if there is anything you can't listen for as part of a chat. \ No newline at end of file +After you have completed the project, try changing what the app listens for (ie instead of "hello" it checks for "bit camp"). See if there is anything you can't listen for as part of a chat. + +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** diff --git a/Slack-Apps/homework/responses/1.4-basic-slack-app.md b/Slack-Apps/homework/responses/1.4-basic-slack-app.md index cb3a7a95..0053d9a9 100644 --- a/Slack-Apps/homework/responses/1.4-basic-slack-app.md +++ b/Slack-Apps/homework/responses/1.4-basic-slack-app.md @@ -1,4 +1,6 @@ -# Coding an App +## Creating a Basic Slack App + +#### Use what you learned and make your first Slack App. You will be building your first app, which is a bot that listens for and responds to specific text in chats. If you are having trouble, refer to [this article](https://slack.dev/bolt-js/tutorial/getting-started#:~:text=%20Getting%20started%20with%20Bolt%20for%20JavaScript%20,handled%2C%20it%E2%80%99s%20time%20to%20set%20up...%20More%20%E2%80%A9https://slack.dev/bolt-js/tutorial/getting-started) as an example of another simple app. Make sure that your app is set up (ie. ngrok is installed and running, ) @@ -75,3 +77,7 @@ const result = await client.chat.postMessage({ The output string should look something like "Welcome to the workspace, !" You can get the user id as a property of the event parameter. When finished, reinstall the app to your workspace. If you have any or need some help, feel free to reach out to your TAs! + +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** diff --git a/Slack-Apps/homework/responses/2-complete.md b/Slack-Apps/homework/responses/2-complete.md new file mode 100644 index 00000000..9cb97f30 --- /dev/null +++ b/Slack-Apps/homework/responses/2-complete.md @@ -0,0 +1 @@ +[That's it for Week 2! Click here to move on to Week 3!]({{ repoUrl }}/issues) \ No newline at end of file diff --git a/Slack-Apps/homework/responses/2.0-blog.md b/Slack-Apps/homework/responses/2.0-blog.md deleted file mode 100644 index ec6d058f..00000000 --- a/Slack-Apps/homework/responses/2.0-blog.md +++ /dev/null @@ -1,212 +0,0 @@ -# Week 2 Livestream - -During Week 1, you have learned how to work with the Slack API. This week, you will utilize the Slack API to create apps using shortcuts, modals, and Block Kit. - -## Objectives - -### Week 2 Objectives - -This week's goals include: - -- Understand and use BlockKit -- Understand modals and views -- Create a polling slack app that uses a view and modal - -### Livestream Objectives - -The livestream will be the first step to reaching the weekly objectives mentioned above. It will be a guided tutorial on how to create a polling Slack app. The following concepts are going to be covered: - -- How to create a shortcut -- Integrating a block within a modal (in this case, a shortcut) -- Creating a view within a message -- Integrating a block within a message - - - -## Creating a Shortcut - -To start this project, you will first need to create a Slack app. Refer to the [issues for week 1](https://github.com/bitprj/BitCamp/tree/master/Slack-Apps/week1/homework/responses) for a review on how to do this. Next, you will need to create a shortcut. Shortcuts enable users of the app to easily find features using '/'. The outline for a shortcut is as follows: - -```javascript -app.shortcut('create_poll', async ({ ack, shortcut, client }) => { - await ack(); -}); -``` - -The only parameter you change is the trigger id, which is the first parameter. This is used to listen for when the shortcut is called. - - - -### Views - -The next step is to make a view that pops up when the shortcut is invoked. First, create a constant that gets the necessary information to create a view: - -```javascript -const { user, trigger_id } = shortcut; -``` - -The trigger id is going to be necessary for the app to recognize when to open the shortcut. Next, you will need to create a view, input the trigger id, and specify what type of view you want to create: - -```javascript -await client.views.open({ - trigger_id, - view: { - type: 'modal', - callback_id: 'poll_shortcut_modal', - title: { - type: 'plain_text', - text: 'Create new poll', - }, - }); -``` - -> **Note: ** everything in the rest of the client.views.open() call will be in the view object, save for submitting the view. - - - -### Making a block - -Now it is time to assemble your view's interface using a block. You will first specify the channel that the poll should open in: - -```javascript -blocks: [ - - // Channel Selection - { - type: "input", - block_id: "target_conversation", - element: { - type: "conversations_select", - placeholder: { - type: "plain_text", - text: "Select a conversation", - emoji: true - }, - filter: { - include: [ - "public", - "mpim" - ], - exclude_bot_users: true - }, - action_id: 'input', - }, - label: { - type: "plain_text", - text: "Select the conversation to publish your poll to:", - emoji: true - } - }, -``` - -This section of the block includes the type of information the view wants, which is user input through a selector tool. Now it is time to build an interface for the user to create a polling question. This is a shorter version of the channel selection code. - -```javascript -// Poll Question - { - type: 'input', - block_id: 'poll_question', - element: { - type: 'plain_text_input', - action_id: 'input' - }, - label: { - type: 'plain_text', - text: 'Poll Question', - emoji: true - } - }, -``` - -Note that the type of block for the question is still input, but is plain text field rather than a selector tool. Lastly, the poll needs to include options. For this project, **create 3 options**. One polling option is shown for reference below: - -```javascript -// Poll Options - { - type: 'input', - block_id: 'option_1', - element: { - type: 'plain_text_input', - action_id: 'input' - }, - label: { - type: 'plain_text', - text: 'Option 1', - emoji: true - } - } - ], -``` - -### Finishing the Shortcut - -Finally, you need to create a submit obbject for the view: - -```javascript - submit: { - type: 'plain_text', - text: 'Start Poll' - } -``` - - - -## Creating a Poll Shortcut Modal - -Copy and paste the following code: - -```javascript -app.view('poll_shortcut_modal', async ({ ack, body, view, client }) => { - await ack(); - - const { user } = body; - const { - target_conversation, - poll_question, - option_1, - option_2, - option_3, - } = view.state.values; - -``` - -This will create a new view, grab the user information, then also the state values of an invoked poll shortcut. You will then need to post a message where the poll is located when a person votes for an option: - -```javascript -blocks: [ - { - "type": "section", - "text": { - "type": "mrkdwn", - "text": `<@${user.id}> wants to know: *${poll_question.input.value}*` - } - }, - { - "type": "section", - "text": { - "type": "plain_text", - "text": `:one: ${option_1.input.value}`, - "emoji": true - } - }, -``` - - Make sure to recreate the code for the first option for your other two. When you have completed this, the message will be complete. - - - -### Adding Voting Emoji Options - -The last thing to do for this project is to add emoji options. Duplicate the following code for all three of your options: - -```javascript - await client.reactions.add({ - channel, - name: "one", - timestamp: ts - }); -``` - - - -Voila! Your polling app is complete. Feel free to reach out to your mentors for any help or guidance. diff --git a/Slack-Apps/homework/responses/2.1-blocks-and-actions.md b/Slack-Apps/homework/responses/2.1-blocks-and-actions.md index 0bc5e4b0..b1839e1f 100644 --- a/Slack-Apps/homework/responses/2.1-blocks-and-actions.md +++ b/Slack-Apps/homework/responses/2.1-blocks-and-actions.md @@ -1,4 +1,8 @@ -# Block Kits and Actions +## Block Kits and Actions + +#### Introduction to BlockKits and Actions in the Slack API. + +**If you missed the livestream or are unable to view the recording, here is a link to a written copy: https://github.com/bitprj/BitCamp/blob/master/Slack-Apps/week2/blog.md** Block Kits are a more advanced way of sending messages through an app. In this issue, you will build an app that uses block kits. to interact with users. @@ -52,5 +56,9 @@ await say({ > **Hint**: Note in the template that a block can have an event id. This means that you can listen for events within the block (i.e. a button being clicked) +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** + diff --git a/Slack-Apps/homework/responses/2.2-blocks-and-actions-app.md b/Slack-Apps/homework/responses/2.2-blocks-and-actions-app.md index eadbc4bf..82f69af5 100644 --- a/Slack-Apps/homework/responses/2.2-blocks-and-actions-app.md +++ b/Slack-Apps/homework/responses/2.2-blocks-and-actions-app.md @@ -1,4 +1,6 @@ -# Building an App with Block Kits and Actions +## Building an App with Block Kits and Actions + +#### Use BlockKits and Actions to make a Slack App. Now it's time to make a block kit yourself! Your goal will be to write an app that will listen for the word 'hello' in a workspace's channels, then respond in the same channel announcing that who person said hello. The message should include a block kit with a button saying 'click me'. If someone clicks the button, then the app announces that a person clicked the button in a regular message. @@ -76,3 +78,7 @@ await say(`<@${body.user.id}> clicked the button`); Test your app and make sure everything works. If you need any help, you can ask either of your mentors. +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** + diff --git a/Slack-Apps/homework/responses/2.3-commands-and-modals.md b/Slack-Apps/homework/responses/2.3-commands-and-modals.md index 33de287a..fc84e0be 100644 --- a/Slack-Apps/homework/responses/2.3-commands-and-modals.md +++ b/Slack-Apps/homework/responses/2.3-commands-and-modals.md @@ -1,4 +1,6 @@ -# Commands and Modals +## Commands and Modals + +#### Introduction to Commands and Modals in the Slack API. In this issue, you will be learning about commands and modals. Commands are a shorthand way to perform an action in Slack. In order to invoke an app with a command, you just need to type '/' in a message field. Modals are another type of view that a Slack app can have. Read [this article](https://api.slack.com/surfaces/modals) to learn more about modals. @@ -148,4 +150,8 @@ app.command('/<name of command>', async ({ ack, body, client }) => { ``` -Test your app to make sure it works. If you have any questions, feel free to reach out to either of your mentors! \ No newline at end of file +Test your app to make sure it works. If you have any questions, feel free to reach out to either of your mentors! + +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** diff --git a/Slack-Apps/homework/responses/2.4-time-converter.md b/Slack-Apps/homework/responses/2.4-time-converter.md index 37552d6d..7df98661 100644 --- a/Slack-Apps/homework/responses/2.4-time-converter.md +++ b/Slack-Apps/homework/responses/2.4-time-converter.md @@ -1,4 +1,6 @@ -# Making a Time Converter +## Time Converter Slack App + +#### Use what you learned to create a Time Converter Slack App. This issue will be a project that uses a slash command, modals, and block kits. Make an app that, when the right slash command is invoked, prompts the user for their timezone and hour and the timezone they would like to convert to. Afterwards, send them a message in the chat with the converted time. @@ -9,3 +11,7 @@ The shortcut should use selection menus for all of its fields. You should be abl Feel free to reach out to either of your mentors with any questions! + +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** diff --git a/Slack-Apps/homework/responses/3-complete.md b/Slack-Apps/homework/responses/3-complete.md new file mode 100644 index 00000000..df74c213 --- /dev/null +++ b/Slack-Apps/homework/responses/3-complete.md @@ -0,0 +1 @@ +[That's it for Week 3! Click here to move on to Week 4!]({{ repoUrl }}/issues) \ No newline at end of file diff --git a/Slack-Apps/homework/responses/3.0-blog.md b/Slack-Apps/homework/responses/3.0-blog.md deleted file mode 100644 index 79ee6745..00000000 --- a/Slack-Apps/homework/responses/3.0-blog.md +++ /dev/null @@ -1,97 +0,0 @@ -# Week 3 Livestream - -During the week 2 livestream, you learned about Blockkit and modals. This week, you will be introduced to reaction event listeners and threads. This allows you to have your program react when an emoji reaction is added and have your Slack App respond within a given thread. - -## 📝 Objectives - -### Week 1 Objectives - -This week's goals include: - -- Learn about the new event listener: `reaction_added` -- Understanding how a Slack App responds in a thread -- Introduction to 3rd party APIs (general, not translator API) - -### Livestream Objectives - -The livestream for Week 3 is an introduction to 2 new Slack App concepts as well as a basic introduction to 3rd party APIs if you haven't worked within them in the past. The new event listener and respond function are the following: using a new event listener called `reaction_added` that responds when a user adds a reaction (emoji) to a message and threads, allowing your Slack App to send messages in a given thread. - -The goal of the livestream is to prepare the students for the HW which focuses specifically on the Google Translate API. Within the Github Learning Lab, students will be putting the 3 concepts together and creating a Slack App that translates a message based on the corresponding language of a flag emoji (ex: spain flag = spanish, japan flag = japanese, etc). - -## Event Listeners - -In the past, you have probably worked with some simple event listeners like when a message is sent or a specific word. While these are great for making simple Slack Apps that get the job done, there are plenty of more! - -Emoji Reactions: https://api.slack.com/events/reaction_added - ```javascript - app.event('reaction_added', async ({ event, client }) => { - /* Listening for Reaction Emojis */ - }); - -``` - -Above is an example of using the new `reaction_added` listener. You should notice it looks the same as a simple message listener and has all the same aspects: `app.event`, `async`, `event`, `client`. When using a `reaction_added` event listener, you'll want to keep track of what emoji the user sent. - -```javascript -const { reaction, user, item: { channel, ts } } = event; -``` -To do this we will want to create a new constant that saves the `reaction` (btw: channel is the conversation ID it was sent in and ts is the thread... which we'll get into soon!) - -Using this concept, we'll be creating a Slack App that responds with the hardcoded translation and integrate the Google Translator API in the homework. To do this we need to introduce a few more concepts... - -Some flags don't contain the ID `flag-` which means we won't be able to find the language of EVERY single flag. Luckily, that's no problem! All we need to do is find a way to check if the reaction ID includes `flag-`, if it does then use `.split('-')` and get the flag ID, if not... - -*A previous idea was to use `case and break`, can you think of a better way?* - -Did you think of it? We need to create a map, almost like a dictionary of corresponding flag codes to country codes with values. - -An example of this: -```javascript -const langMap = { - mx: ['es', 'Spanish'], - es: ['es', 'Spanish'], - ru: ['ru', 'Russian'], - jp: ['ja', 'Japanese'], - } -``` -Now that we have the language code, all we have to do is create the code to call the API and have the callback logic respond with the translated text in the code, however, you'll learn how to do this in the homework! - -For now, we are simply going to hardcode a response: - -``` - switch (country) { - case 'mx': - translatedText = 'This is in Spanish'; - break; - case 'jp': - translatedText = 'This is in Japanese'; - break; -``` -In this example, we use `case and break` and simply responsed with a hardcoded string. - -## Threads - -Having your Slack App post to a thread is quite easy! Whenever you setup your event listener, make sure you keep track of the channel (conversation ID) because it's what we will use to find which channel and thread the Slack App should respond in. - -For example, we did this when keeping track of the `reaction_added` by creating a new constant (see above in `event listeners`). -``` -await client.chat.postMessage({ - channel, - thread_ts: ts, - text: translatedText - }); -``` -Using `client.chat.postMessage` we can send a text (in this case the translated text under the string translatedText to a `channel`, which we already set, and a `thread_ts`, which is simply asking which thread in the channel. *How do you suppose we find this?*) - -To find the `thread_ts` we will want to repeat the step of finding the `channel`. Using our example of `reaction_added` we once again can pass through `ts` and find which thread/message the user responded to with an emoji. Simple as that! - -In the homework, you'll learn a few concepts: first, how to create a Google Developer Account and get yourself started with credentials and API tokens, second, how to actually integrate the Translator library with your NodeJS program, and lastly, how to code the translator API logic. - - -### 🎉 That's the Week 3 Livestream! Reach out to your mentors if you're having trouble. - - - - - - diff --git a/Slack-Apps/homework/responses/3.1-reaction-event-listener-and-threads.md b/Slack-Apps/homework/responses/3.1-reaction-event-listener-and-threads.md index 085dcc73..23ba2418 100644 --- a/Slack-Apps/homework/responses/3.1-reaction-event-listener-and-threads.md +++ b/Slack-Apps/homework/responses/3.1-reaction-event-listener-and-threads.md @@ -1,4 +1,8 @@ -# Google Translate API: Event Listener & Threads +## Google Translate API: Event Listener & Threads + +#### Introduction to a new event listener and responding in threads. + +**If you missed the livestream or are unable to view the recording, here is a link to a written copy: https://github.com/bitprj/BitCamp/blob/master/Slack-Apps/week3/blog.md** During the livestream, you were introduced to two new concepts: a new event listener to emoji reactions and a new way of having your Slack App respond to a thread. In this issue, you will be incorportating these concepts as you integrate your Slack App with your first third party API, Google Translate! @@ -43,6 +47,10 @@ Reactions: https://api.slack.com/events/reaction_added (event listener) If you have any further questions, please reach out to your mentors! +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** + diff --git a/Slack-Apps/homework/responses/3.2-oauth-account-and-credentials.md b/Slack-Apps/homework/responses/3.2-oauth-account-and-credentials.md index 4be7adcd..b61c1d53 100644 --- a/Slack-Apps/homework/responses/3.2-oauth-account-and-credentials.md +++ b/Slack-Apps/homework/responses/3.2-oauth-account-and-credentials.md @@ -1,4 +1,6 @@ -# Google Translate API: Account & Credentials +## Google Translate API: Account & Credentials + +#### Setting up a Google Developer Account and using the Translator. After setting up our event listener and making our Slack App respond in a thread, it's finally time to to integrate the Google Translate API. Before we install the client libary and actually create the translation callback logic for our Slack App, we need to create an account and find our downloaded API token. @@ -45,6 +47,10 @@ Translator Object: ```const translator = new Translate();``` If you have any questions, please reach out to your mentors or read the documentation [here](https://cloud.google.com/translate/docs/setup "here"). +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** + diff --git a/Slack-Apps/homework/responses/3.3-calling-translator-api.md b/Slack-Apps/homework/responses/3.3-calling-translator-api.md index a1ca561e..48a1f0a0 100644 --- a/Slack-Apps/homework/responses/3.3-calling-translator-api.md +++ b/Slack-Apps/homework/responses/3.3-calling-translator-api.md @@ -1,4 +1,6 @@ -# Google Translate API: Calling the Translator +## Google Translate API: Calling the Translator + +#### Integrating the Translator in a Slack App. You should now return to your ```app.js``` to implement adding Cloud Translation. In the livestream, you should have noticed the Slack App response was hardcoded to a phrase like "This is Spanish" or "This is Japanese". Now, we are going to be adding the response as the actual ```translated text``` in a thread. @@ -78,6 +80,10 @@ Inside ```catch()```, we want to catch whatever errors we find so we will will s Congrats, you're done with Week 3! If you have any questions, reach out to your mentors. +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** + diff --git a/Slack-Apps/homework/responses/4-complete.md b/Slack-Apps/homework/responses/4-complete.md new file mode 100644 index 00000000..61e7880b --- /dev/null +++ b/Slack-Apps/homework/responses/4-complete.md @@ -0,0 +1 @@ +That's it for Week 4! Great job on finishing the course! \ No newline at end of file diff --git a/Slack-Apps/homework/responses/4.0-blog.md b/Slack-Apps/homework/responses/4.0-blog.md deleted file mode 100644 index 75672745..00000000 --- a/Slack-Apps/homework/responses/4.0-blog.md +++ /dev/null @@ -1,175 +0,0 @@ -# Week 4 Livestream - -Last week, you learned how to work with third party APIs and respond in threads. This week is covers different similar topics. - -## 📝 Objectives - -### Week 4 Objectives - -This week's goals include: - -- Understanding and utilizing webhooks -- Understanding and utilizing Express and other frameworks - -### Livestream Objectives - -The livestream for Week 4 is an introduction to the week's objectives. During the livestream, you will learn how to use GitHub webhooks and handle the payload. For reference, Github is a verison control site that lets you maintain repositories of code across several iterations. It is extremely useful for both personal and proffessional projects. Getting the payload from a webhook will involve using the Express framework. - -The mentor leading the stream teaches these principles through two sample projects. The first is listening for a repository to be starred, then messaging a Slack channel when the event occurs. The second involves listening for the home of an app to be opened, then publishing a view with the event information. - -## 🔨 Project 1 - -Webhooks are applications that send other apps useful information. They are almost the opposite of an API; rather than prompting the third party for data, the third party gives you data when it becomes available. - -### Creating Your Own Webhook - -If you don't have an account already, create one at www.github.com. You will need a repository, which can be created by pressing the 'create repository' button at the top left of your dashboard: - -![](./Gifs_Images/4.1-creating-repo.gif) - -Once you have created a repository, navigate to the settings page from the dashboard and select 'secrets'. You will need a secret in order to access the repository. Create an arbitrary secret name and value. - -![](./Gifs_Images/4.2-secret.gif) - - - - - -### ⚡️ Set Up - -Express is used in to project to handle the payload from a GitHub webhook. After you have finished the regular setup of your app, navigate in your terminal to the directory where it is located. Call ```npm install express ``` and wait for the package to download. Then call ```npm install axios```. You will not need axios for this project, but can use it in the next. - -When the dependencies have been installed, open your app.js file in a text editor and paste the following code: - -```javascript -const { App, ExpressReceiver } = require('@slack/bolt'); -const express = require('express'); -const express = require('axios'); -const { config } = require('dotenv'); - -const app = new App({ - token: process.env.SLACK_BOT_TOKEN, - receiver -}); -``` - -This handles all dependencies and objects needed for a basic app as well as the Express package you downloaded. - -### 🔔 Creating an ExpressReceiver - -Create an ExpressReceiver object to handle the webhook payload: - -```javascript -const receiver = new ExpressReceiver({ signingSecret: process.env.SLACK_SIGNING_SECRET }); -receiver.router.use(express.json()); -``` - -This object can be used to invoke the GET and POST functions with the webhook payload. For this project, only the POST function will be used. Make sure to create a channel in the Slack app that your bot has access to. - -```javascript -receiver.router.post('/github-stars', async (req, res) => { - - await app.client.chat.postMessage({ - token: process.env.SLACK_BOT_TOKEN, - channel: '<your channel>', - text, - }); - - res.sendStatus(200); -}); - -``` - -This is the basic outline of what the app will do. It will listen on a server for a payload, then formulate some sort of message, then post that text in a channel that the bot is in. The next snippet of code locates the information in the payload then uses it to construct this text: - -```javascript -const { action, repository, sender } = req.body; - const verb = action === 'deleted' ? 'unstarred' : 'starred'; - const text = `${sender.login} just ${verb} the \`${repository.name}\` repository, bringing the total number of stars to ${repository.stargazers_count}.`; -``` - -> **Note: ** you will have to run a local server in order to receive the payload. - -## 🔨 Project 2 - -> **Note: ** these projects are small enough that you can keep them together, which would save you some time on set up. - -### Outlining the Function - -The second project listens for the home of an app to be opened, then publishing a view with the GitHub repository's issue information. This project is encapsulated into one function call. Below is the function signature and body: - -```javascript -app.event('app_home_opened', async ({ event, client }) => { -}); -``` - - This has an event id and some basic information received when the event occurs. The first step in building this app is to get the data from the repository: - -```javascript -const GITHUB_REPO_URL = 'https://api.github.com/repos/misscoded/slack-bit-camp'; -const { data: issues } = await axios.get(`${GITHUB_REPO_URL}/issues`); -``` - -### 👷🏻 Creating the View - -Then you will create a map with the object 'issue' that holds the repository information. These pieces of information will be added to the view that is published on your Slack app: - -```javascript -const issueBlocks = issues.map(issue => ({ - type: 'section', - text: { - type: 'mrkdwn', - text: `<${issue.html_url}|${issue.title}> opened by <${issue.user.html_url}|${issue.user.login}>` - }, - })); -``` - -This organizes the data appropriately to fit the format of a block. The final step will be to actually publish the view. This will send the view to the user who invoked the event: - -```javascript -await client.views.publish({ - user_id: event.user, - view: { - type: 'home', - blocks: [ - { - type: 'header', - text: { - type: 'plain_text', - text: 'Open Issues' - }, - }, - ...issueBlocks, - ] - } - }); - -``` - - - -And that is all of the content from your final livestream! Reach out to your mentors for any help or questions. - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/Slack-Apps/homework/responses/4.1-express.md b/Slack-Apps/homework/responses/4.1-express.md index 78ca3b4a..d3cb9679 100644 --- a/Slack-Apps/homework/responses/4.1-express.md +++ b/Slack-Apps/homework/responses/4.1-express.md @@ -1,4 +1,8 @@ -# ⚡️Express +## Introduction to Express + +#### Learn about ExpressJS and what it can do. + +**If you missed the livestream or are unable to view the recording, here is a link to a written copy: https://github.com/bitprj/BitCamp/blob/master/Slack-Apps/week4/blog.md** This week will involve using a popular JavaScript framework called Express. Frameworks give you a fundamental structure that you can build on without starting completely from scratch. For example, Bolt is also a framework. @@ -16,4 +20,8 @@ After you are done, read [this article](https://codeforgeek.com/handle-get-post- Create a post request that prints a hello message to your local host server. Create another post request that takes parameters for a book and author, then prints out a sentence using the information. -Refer to the articles above and feel free to reach out to your mentors with any questions! \ No newline at end of file +Refer to the articles above and feel free to reach out to your mentors with any questions! + +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** diff --git a/Slack-Apps/homework/responses/4.2-webhooks.md b/Slack-Apps/homework/responses/4.2-webhooks.md index fc98c3e0..f92fa807 100644 --- a/Slack-Apps/homework/responses/4.2-webhooks.md +++ b/Slack-Apps/homework/responses/4.2-webhooks.md @@ -1,4 +1,6 @@ -# Webhooks +## Introduction to Webhooks + +#### Learn about what webhooks are and how to use them in a Slack App. Webhooks are applications that send other apps useful information. They are extremely useful and can expand your Slack apps to a new level! @@ -26,5 +28,9 @@ Next, start your Slack app and create an ExpressReceiver object. Follow these st 4. Copy and paste the secret value you create into the 'Secret' field. 5. Lastly, select individual events and choose 'starred', then press 'update'. Check the ngrok server in your terminal to see if the webhook connected successfully. +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** + diff --git a/Slack-Apps/homework/responses/4.3-final-project.md b/Slack-Apps/homework/responses/4.3-final-project.md index 70536606..e6d17ed5 100644 --- a/Slack-Apps/homework/responses/4.3-final-project.md +++ b/Slack-Apps/homework/responses/4.3-final-project.md @@ -1,4 +1,6 @@ -# ✔️Final Project +## Final Project with Github API + +#### Finish up the course by creating your last Slack App with the Github API. Congratulations, you are about to complete your final homework assignment! It's time for you to apply the concepts from this week into a project. You will create an app that listens for Github comments and posts in the app's chat whenever this event occurs. @@ -74,3 +76,7 @@ To test the app, go to your repository and comment on an issue. This project is pretty challenging, so make sure to reach out to your mentors with any questions! +**After you have finished, make sure to commit any file changes you made. To do this, please create a `branch` off of the master called `week(x)` with x being the # of the week you are on. For that week you will need to create a PR for every Learning Lab step to review and make sure your work is correct. For example: After finishing step 1.2, make a new branch off of `week(x)` and call it `week(x)-1.2` (with 1.2 being the step you're on). Then create a `Pull Request` between `week(x)` and `week(x)-1.2`. After reviewing you're PR or having another user review it, merge you're work and continue.** + +**REMINDER: If you are part of the MENTORED group, after you complete all steps within a certain week and followed the instructions above, create a `Pull Request` with your work from `week(x)` to `master` and assign your mentor as a reviewer. If you are an open-source user, do the same but self-review your PR to continue to the next week.** + diff --git a/Slack-Apps/homework/responses/feedback.md b/Slack-Apps/homework/responses/feedback.md new file mode 100644 index 00000000..25c438dd --- /dev/null +++ b/Slack-Apps/homework/responses/feedback.md @@ -0,0 +1,3 @@ +## Providing Feedback + +What was confusing about this week? If you could change or add something to this week, what would you do? Your feedback is valued and appreciated! \ No newline at end of file diff --git a/repo_logistics/README.md b/repo_logistics/README.md index 9bbf0c2b..d27e668c 100644 --- a/repo_logistics/README.md +++ b/repo_logistics/README.md @@ -6,6 +6,96 @@ * This README.md file will give a brief overview of where everything is located. * If you need a reference to a complete Bitcamp documentation, click [here](https://github.com/bitprj/BitCamp/tree/master/Serverless-Functions) * In the `learning_lab` directory, you will find instructions to create your very own Github Learning Lab from your curriculum. +* In this README.md, learn about the Github Action that creates Learning Labs + +--- + +## :collision: The Github Action + +The Github Action automatically generates the needed files to create a Github Learning Lab. Refer to the below documentation for formatting requirements and how it works: + +### :one: Input and Output + +**User must provide:** +- Response files in `/camp-name/homework/responses` +- `course-details.md` file in `/camp-name/homework/course-details.md` + +**Github Action produces:** +- Completion response files named `#-complete.md` and `feedback.md` +- A `config.yml` file + +Note: "camp-name" is whatever the Bit Camp is called. If we were to create files for a camp named "Serverless-Functions", the file path would be `/Serverless-Functions/homework/responses`. + +### :two: Formatting Requirements + +In order for the Action to successfully parse content, the files **must** be named and formatted like so: + +#### Response files + +File name format: `[Week#].[Step#]-[Step title].md` + +> Example: `1.1-Week Step 1.md` + +File path: `/Serverless-Functions/homework/responses/[all response files]` + +File content: +* Response files are to be **titled with h2** at the very beginning of each markdown file. The title at the top will be the same title used in Github Learning Labs (what is in the config.yml file). +* The **description** of the step should be placed directly under formatted in **h4**. + +> Example: +```md +## Week 1 Step 1 + +#### This is the description +``` + +#### `course-details.md` File + +File name: `course-details.md` + +File path: `/camp-name/homework/course-details.md` + +File content: +* The `course-details.md` file must contain the course name and description. +* The course name must be **formatted with h1** and the course description **must be italicized.** + +> Example: + +```md +# Course Title + +*Course description* +``` + +### :three: Specifying the Camp name + +The Github Action will not run the Python file until a subdirectory (ie. Serverless-Functions) is specified. To do so, edit the `learninglabauto.py` file's `subdir` value. + +**Before:** +```py +subdir = "" + +if subdir == "": + exit() +``` + +**After:** +```py +subdir = "[Insert your camp name. Ex: Serverless-Functions]" + +if subdir == "": + exit() +``` + +### :four: Finishing up + +Once both the change to the `learninglabauto.py` file in `scripts/` and the addition of the other files are committed, the Github Action should trigger and run. + +Linked [here](https://github.com/emsesc/sample-learninglab) is a sample containing correctly formatted file names and structures. + +Watch this video for a walkthrough: +[![Watch the video](https://cdn.loom.com/sessions/thumbnails/d21df3bc8776488b81c6682449e81776-with-play.gif)](https://www.loom.com/share/d21df3bc8776488b81c6682449e81776) +--- ## :deciduous_tree: Documenting Bitcamp Curriculum (`sample-camp/`) diff --git a/scripts/learninglabauto.py b/scripts/learninglabauto.py index 6a82e149..7f9b11a9 100644 --- a/scripts/learninglabauto.py +++ b/scripts/learninglabauto.py @@ -15,7 +15,10 @@ # determining number of weeks for file in responses: - weeks.append(file[0]) + if file[0].isnumeric(): + weeks.append(file[0]) + else: + responses.remove(file) nweeks = int(max(weeks)) print("Number of weeks:", nweeks)