diff --git a/03-learn_to_crawl/02.js b/03-learn_to_crawl/02.js index 8cd79bf..cbfbe69 100644 --- a/03-learn_to_crawl/02.js +++ b/03-learn_to_crawl/02.js @@ -1,4 +1,6 @@ // Debug and modify the code so that the console does not display any errors. +// (You do not need to use all the variables) +// The variable tao should be declared in some way // Make the sum at the end add the apples and oranges. const tao = "unchanging" diff --git a/04-conditionals_loops_functions/02.js b/04-conditionals_loops_functions/02.js index ee2add3..fb153f0 100644 --- a/04-conditionals_loops_functions/02.js +++ b/04-conditionals_loops_functions/02.js @@ -1,16 +1,37 @@ /** * You may want to modify the html file to mute the output of certain exercises, * this one for instance, will generate many lines of output. You can comment - * out lines in HTML with tags. + * out lines in HTML file (not this file, this is a JS file) with + * tags. * * 1. Create a for loop that will log all the numbers between 5 and 1000. * incrementing in 5s. So the output would start "5, 10, 15, 20 ..." * 2. Create a for loop that outputs every number between 100 and -100 included. + * + * Lastly, a difficult one that you may not be able to get right away: + * * 3. Create a for loop that outputs this sequence of numbers: 3, 2, 5, 4, 7, 6, - * 9, 8 ... That is, starting at 0: +3, -1, +3, -1, +3. Make it output 5000 - * times, what is the number you get at the end? + * 9, 8 ... That is, if starting at 0: +3, -1, +3, -1, +3. + * For bonus points, make it output exactly 5000 numbers! + * So if the sequence is: + * 3, 2, 5 + * the count would be: + * 1, 2, 3 + * What is the number you get at the end? + * + * This last one is very tricky! There is more than one way to solve it, and it + * may take a few attempts spaced out over a few days. + * + * HINT: To get a hint, uncomment the lines of code below and look at the output. + * Don't worry about not understanding the code used for the hint, but feel + * free to explore it! * - * This last one can be tricky! There are a couple ways to do it, see if you can - * find both ways! - * - */ \ No newline at end of file + */ + + +// let encodedHint = [89, 111, 117, 32, 99, 97, 110, 32, 117, 115, 101, 32, 97, 115, 32, 109, 97, 110, 121, 32, 118, 97, 114, 105, 97, 98, 108, 101, 115, 32, 97, 115, 32, 121, 111, 117, 32, 108, 105, 107, 101, 46] +// let hint = [] +// for (let i=0; i` syntax. + * + * Use normal for loops and bear in mind that you can use as many variables as + * you like. */ stores = [ diff --git a/05-collections_arrays_objects/04.js b/05-collections_arrays_objects/04.js index 3952485..4a49961 100644 --- a/05-collections_arrays_objects/04.js +++ b/05-collections_arrays_objects/04.js @@ -12,11 +12,22 @@ * convert if needed. * 3. Output to the console all the temperatures in Jerusalem in Fahrenheit, * convert if needed. - * 4. Get the average temperatures for Vancouver and Jerusalem in both Celsius + * 4. Instead of outputting all the values as you come across them, build an + * array containing all the values, and then log the whole array at the end. + * Do this for both 2. and 3. + * 5. Get the average temperatures for Vancouver and Jerusalem in both Celsius * and Fahrenheit and output them to the console. - * 5. Write a function that will return a chosen city's average temperature in + * + * Finally, one last one to bring every thing together! You may want to write + * this function in a new file, or copy this file so you can rearrange and + * refactor the existing code from the questions above into your function. + * + * 6. Write a function that will return a chosen city's average temperature in * either fahrenheit or celsius defined by two parameters as shown in the * code below. + * + * This will be challening and will test you on many of thie things you have + * learned so far! * */ diff --git a/06-advanced_arrays_strings_functions/01.js b/06-advanced_arrays_strings_functions/01.js index e810a49..50dcffd 100644 --- a/06-advanced_arrays_strings_functions/01.js +++ b/06-advanced_arrays_strings_functions/01.js @@ -6,6 +6,21 @@ * 3. Use forEach to create a new array from the first one that halves all the * values. * 4. Use forEach on the new array to output the sum, count and average again. - * 5. Refactor: define the sum, count and average function as a separate - * function and pass it to the forEach functions as a name. + * + * 5. Use forEach loops with the random number generator to create a two + * dimensional array of 50 rows containing 50 random numbers each. + * + * [ + * [2, 5, 32, 95, 12, 13, ... up to 50 numbers], // this is one row + * [ ... ], + * [ ... ], + * [ ... ], + * [ ... ], + * [ ... ], + * ... 50 rows + * ] + * + * + * 6. Use forEach loops to iterate over every number, getting the sum, and + * average. */ \ No newline at end of file diff --git a/07-js_html_css_dom/00-motivation.md b/07-js_html_css_dom/00-motivation.md index d070460..d173e9f 100644 --- a/07-js_html_css_dom/00-motivation.md +++ b/07-js_html_css_dom/00-motivation.md @@ -1,6 +1,6 @@ The labs are going to take another form from here on out. They will be in the form of projects with which you can apply all the JavaScript knowledge you have gained so far. These could easily become portfolio projects for you. It is going to take a while to build them so take some time to prepare yourself! Sometimes real learning can only take place once you have put things into practice. -You will have to look back on your notes and this course for reminders. You will also have to look beyond this course because you will surely run into things that have not been covered here. You _could_ limit yourself to _only_ things covered in this course, which is not a bad idea as a first step. Though if you want to bring some style into it, you will definitely have to leave the confines of this course and dive into documentation and articles. You may even find it more efficient to go straight to the documentation instead of searching for it in this course, after all, this was not designed as a reference or cheat sheet, but as a guided introduction to JavaScript. +Look back on your notes and this course for reminders. You will also have to look beyond this course because you will surely run into things that have not been covered here. You _could_ limit yourself to _only_ things covered in this course, which is not a bad idea as a first step. Though if you want to bring some style into it, you will definitely have to leave the confines of this course and dive into documentation and articles. You may even find it more efficient to go straight to the documentation instead of searching for it in this course, after all, this was not designed as a reference or cheat sheet, but as a guided introduction to JavaScript. Remember that you will most likely feel overwhelmed at some point during these projects. Take a short break if need be. Look back at the online communities lesson and remember what rubber duck debugging is. A great way to progress through your projects is to post journal type entries in the forum. If you get stuck, while trying to get yourself unstuck, take notes and you will definitely progress towards a solution. If you feel you are not coming close to resolving it, use your notes to post in the forum. This will make it much easier to help you and you will improve much faster this way. Share your progress and celebrate the small victories! diff --git a/07-js_html_css_dom/04.md b/07-js_html_css_dom/04.md index 62200c4..8ee01e8 100644 --- a/07-js_html_css_dom/04.md +++ b/07-js_html_css_dom/04.md @@ -1,5 +1,7 @@ # Developing it further +You are done with the "official" portion of this project, well done! + A note about developing this project further. If you make the CSS more complex, you should consider what approach you want to take. Here is a link to a good article about different approaches towards dark mode for example. https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ diff --git a/07-js_html_css_dom/05-motivation.md b/07-js_html_css_dom/05-motivation.md index af3c266..4e1f38b 100644 --- a/07-js_html_css_dom/05-motivation.md +++ b/07-js_html_css_dom/05-motivation.md @@ -1,3 +1,3 @@ # Events -In this chapter you will get a chance to take what you have learned about events and put them to use alongside all the other knowledge you have gained by creating two new web sites on Git Hub pages. The capstone approaches! And so, the guides and prompts given to you are becoming less and less. You have everything you need to complete these projects, though maybe you don't have the confidence in yourself that you are able to make these, thats what these projects are here for. You are purposefully given minimal information to show you that the knowledge and skills you need are within you! +In this chapter you will get a chance to take what you have learned about events and put them to use alongside all the other knowledge you have gained by creating two new web sites on Github pages. The capstone approaches! And so, the guides and prompts given to you are becoming less and less. You have everything you need to complete these projects, though maybe you don't have the confidence in yourself that you are able to make these, thats what these projects are here for. You are purposefully given minimal information, a big part of the projects is research, and decision making with incomplete information; very important skills for a developer. diff --git a/07-js_html_css_dom/06-online-converter.md b/07-js_html_css_dom/06-online-converter.md index 0a6b6ba..7f5fb5e 100644 --- a/07-js_html_css_dom/06-online-converter.md +++ b/07-js_html_css_dom/06-online-converter.md @@ -2,14 +2,16 @@ Remember all the different conversion functions that you have already coded? No ## Recommended steps -- Create a new folder and git hub project and copy over your converter functions. +- Create a new folder and Github project and copy over your converter functions. - With a piece of paper, sketch out what you want your web page to look like, where the values are inserted, how you choose your units, and where you see the output. Get a feel for how you want it to look on the page, how big the text is, how you will organize the different conversion formulae, etc. - Sketch out the basic structure of your HTML on paper. First draw a big box for the body where everything fits, then for the main divisions of the page, and subsequent divisions until you reach your text boxes. Start thinking about the `id` names you will give these divisions. - Sketch out what the JavaScript will need to do and how you will handle different conversion functions and how the website will identify which function it wants to use. - Create a Code Pen to see what things are looking like without having to save and refresh a browser. - Built out your basic HTML and CSS. - Get your JavaScript talking to your HTML by getting the text from the input boxes. -- You may have to re-write or re-factor a lot of your JavaScript depending on what design you have gone for. -- Get a Minimum Viable Product (MVP) working. That is a very basic and ugly version of the page, but something that works. Then iterate over it making it better and better. - Publish it on GitHub Pages and show the world! - Get some feedback and jot down some things you would like to improve and then implement it! + +You may have to re-write or re-factor a lot of your JavaScript depending on what design you have gone for. + +Get a Minimum Viable Product (MVP) working. That is a very basic and ugly version of the page, but something that works. Then iterate over it making it better and better. \ No newline at end of file diff --git a/07-js_html_css_dom/07-tictactoe.md b/07-js_html_css_dom/07-tictactoe.md index ee47ec5..09d1d95 100644 --- a/07-js_html_css_dom/07-tictactoe.md +++ b/07-js_html_css_dom/07-tictactoe.md @@ -5,13 +5,14 @@ Your challenge is to make a working one page application where you can play 2 pl ## Recommended steps - Take a sheet of paper and sketch out all the different elements you think you will need. What specific tools and methods will you be using. -- Create a Code Pen. -- Construct your basic HTML and CSS, ideally with JavaScript. Keep that code separate from your game logic. Doesn't have to be a separate file, but just try to break up your code into chunks that are easy to manage and understand. -- Find a way to turn a user click into an 'X' or a 'O' on the screen. +- Construct very basic HTML and CSS. Assign event listeners with Javascript and not directly in the HTML. Keep the code that deals with displaying information to the user separate from the code that controls the status of the game. - Find a way to represent and store your game state. - Find a way to get the user clicks into your game state. - Find a way to implement turns. - Find a way to figure out how to identify whether someone has won, or when it's a draw. Keep it simple! - Find a way to reset the game once the two players are done. -- You should have a working game now, make it pretty, have the web page tell you whose turn it is and who won or if its a draw. Make a reset button. -- Publish it on GitHub Pages and show the world! +- Once you have this working in the game state, then move on to the display aspect. + +The web page tell you whose turn it is and who won or if its a draw. Make a reset button. + +Publish it on GitHub Pages and show the world! diff --git a/08-09-apis_requests/01.md b/08-09-apis_requests/01.md index 923fbb3..9a3e026 100644 --- a/08-09-apis_requests/01.md +++ b/08-09-apis_requests/01.md @@ -1,22 +1,17 @@ Now you will be making a project that should bring together almost all of what you have learnt so far. -The plan is to make a single page application that: - -- Tells you where you are based on your IP address, displaying your country, region, city, latitude and longitude and time zone. -- Tells you the time at your location. -- Displays the flag of the country you are in, the country code, the population, the area, the language and the regional bloc -- Tells you the time on sunrise and sunset at your location, the day length and the solar noon time. -- Modifies the text color and background color and general stylings of the site according to whether its daytime, around sunrise or sunset, or night time. -- Tells you at what time the next ISS flyover is and how many people are currently in space. +The plan is to make a single page application that will: +- Tell you where you are based on your IP address, displaying your country and city. +- Find out the weather at that location and display it. +- Find out something else about that location with an API and display it. Publish it on GitHub Pages when you have your structure and a couple of API calls made, and then iterate on it to build it out further. -Use try catch blocks or at least handle errors appropriately. There are many requests happening here so it is inevitable that at some point, you will run into an error, ensure that the output doesn't break if one of the requests fails. +Use try catch blocks or at least handle errors in some way. There are many requests happening here so it is inevitable that at some point, you will run into an error, ensure that the output doesn't completely break if one of the requests fails. + +Part of this project is to research and use publically available APIs. Since API's are always changing, with many coming and going, go to https://rapidapi.com/ and make an account. This is a site that provides a gateway to thousands of APIs and will make the process of research and getting API keys much more efficient. -All this can be done with free and no authentication APIs! +Once you are set up with an account, choose some APIs to use. When you go to an API page, take a look at the "pricing" tab. If it has a "Basic" plan at $0.00 cost, then you are good to go! Just take a look at the limits that you have (i.e. 1 request per second, or 50 requests per day). -- Country Data -- General Space Data -- Geolocation of IP addresses -- World Time \ No newline at end of file +There are APIs that provide an IP geolocation service and others that provide information and statistics on locations. If you can't find an IP geolocation (in the Rapid API search, type "ip location"), you can also ask the user of the site to input location data and then make the requests based on that. \ No newline at end of file