add challenges from old js3 repo

https://github.com/CodeYourFuture/JavaScript-Core-3-Challenges

Author: SallyMcGrath

challenges/challenge-cowsay-two/readme.md

@@ -0,0 +1,38 @@
+# Cowsay
+
+Do you remember [Cowsay](https://github.com/CodeYourFuture/JavaScript-Core-1-Challenges)? We learned about node packages and made a cow say stuff. Now, we know more about programming, let's figure out how to make a cow say things in Node by ourselves.
+
+## Project
+
+For this project we don't need a package, a library or lots of options. Let's just get our own cow printing out and saying whatever we write in the command line. What would be helpful? I think we need to:
+
+- [Accept an argument](https://nodejs.dev/learn/nodejs-accept-arguments-from-the-command-line) from the command line.
+- Output to the command line. You've already done this with console.log.
+- Make an ASCII cow.
+- Write a function that puts the string into the cow's speech bubble.
+
+Write your solution in the file solution1.js and test it by running your program in the command line. How will you handle it when no argument is given? How will you make the picture of a cow?
+
+### Iterating
+
+We could make our program more accessible by adding a command line interface that prompts us to write in the cow's words. What tools can we use? I think we could use:
+
+- A command line interface. I'll start you off by letting you know that there is a built in CLI called [readline](https://nodejs.dev/learn/accept-input-from-the-command-line-in-nodejs).
+- Our ASCII cow again.
+- And our cow function.
+
+Write your solution in a file called solution2.js and test it by running your program in the command line. Use a prompt to ask for your cow saying.
+
+Compare your approach to the sample solutions (you can unlock next week). Your solution might be different and that's ok. If you can print a cow and you can make it say different things, you solved it.
+
+A slightly simpler ASCII cow that might help if you hit formatting issues.
+
+```
+       /
+      /
+^__^ /
+(oo)'_______
+(__)        )-~
+   ||----w |
+   ||     ||
+```

challenges/challenge-cowsay-two/solution1.js

@@ -0,0 +1,30 @@
+// =================
+// Stripped down cowsayer CLI, 
+// no libraries
+// https://nodejs.dev/learn/nodejs-accept-arguments-from-the-command-line
+// =================
+
+// 1. Accept arguments
+
+// how will you accept arguments?
+
+// 2. Make supplies for our speech bubble
+
+let topLine = '_';
+let bottomLine = '-';
+let saying = '';
+
+// 3. Make a cow that takes a string
+
+function cowsay(saying) {
+// how will you make the speech bubble contain the text?
+
+// where will the cow picture go?
+
+// how will you account for the parameter being empty?
+
+}
+
+//4. Pipe argument into cowsay function and return a cow
+
+// how will you log this to the console?

challenges/challenge-cowsay-two/solution2.js

@@ -0,0 +1,18 @@
+// =================
+// Stripped down cowsayer CLI, 
+// no libraries or arguments
+// https://nodejs.dev/learn/accept-input-from-the-command-line-in-nodejs
+// =================
+
+// 1. Make  a command line interface.
+
+// 2. Make supplies for our speech bubble
+
+// 3. Make a cow that takes a string
+
+const cow = (saying) => {
+    // how did you make the cow before?
+}
+
+// 4. Use readline to get a string from the terminal 
+// (with a prompt so it's clearer what we want)

challenges/challenge-weather-app/README.md

@@ -0,0 +1,41 @@
+# Mini-weather
+
+![Screenshot](assets/meteoropolis.png)
+
+[Click here for live demo](https://mini-weatherapp.herokuapp.com/)
+
+This app blends data from [openweathermap.org](https://openweathermap.org/) and
+[Unsplash](https://unsplash.com/developers) to create a visual depiction of the current weather in your area.
+
+## Set-up
+
+- Fork and clone the repo
+
+- You will need to sign up for both services to get an API key to use each service.
+
+  - **Open Weather** - sign up for API key at [https://openweathermap.org/appid](https://openweathermap.org/appid) and append it to URL as `APPID` URL parameter. For example, `http://api.openweathermap.org/data/2.5/weather?q=london&APPID=ABC` where `ABC` is the API key you were provided.
+  - **Unsplash** - sign up for Unsplash at [https://unsplash.com/join](https://unsplash.com/join) and register your app. You will receive an Access Key which you should append it to the URL as `client_id` URL param. For example, `https://api.unsplash.com/search/photos?query=snow&client_id=XYZ` where `XYZ` is your Access Key.
+
+- The base HTML and CSS have been supplied if you wish to focus on the programming and not the UI, but you should feel free to customise your application as you see fit. You can insert the main photo into the element with the id `photos` and thumbnails into the element with id `thumbs`. Use developer tools to inspect the structure of HTML in working example to get a sense of what it required.
+
+## Objectives
+
+- [ ] Use `fetch` to retrieve the weather for a single day. You can see the documentation at [https://openweathermap.org/current](https://openweathermap.org/current). For now, we'll set London or another location of your choice as the default.
+
+- [ ] Once you've retrieved the weather data, use its `description` property to get matching images from Unsplash. You can see the documentation for image search at [https://unsplash.com/documentation#search-photos](https://unsplash.com/documentation#search-photos).
+
+- [ ] Display the images as a gallery of clickable thumbnails (clicking loads the main image)
+
+- [ ] Commit code regularly, push and create a pull request so we can see how you got on
+
+## Stretch goals
+
+- [ ] Use the input field that lets us see what the weather is like in other cities
+
+- [ ] Add a feature of your choice
+
+- [ ] Display photographer credits in bottom right hand corner with link to their portfolio on Unsplash
+
+- [ ] Display white border around thumbnail of image currently displayed as main image using `active` class
+
+You may need to use data attributes as part of the exercise. You can see more info about them at [https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).

challenges/challenge-weather-app/assets/globals.css

@@ -0,0 +1,46 @@
+@keyframes fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:root {
+  --thumb-w: 80px;
+  --thumb-h: 45px;
+  --thumbs-px: 10px;
+  --thumbs-py: 10px;
+  --thumbs-h: calc(var(--thumb-h) + (var(--thumbs-py) * 2));
+}
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  transition: 1s background-color;
+
+  overflow: hidden;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
+  background: center center no-repeat;
+  background-size: contain;
+  color: #333;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}