diff --git a/Challenges/Week2/app.js b/Challenges/Week2/app.js index 146acc5..b81ef31 100644 --- a/Challenges/Week2/app.js +++ b/Challenges/Week2/app.js @@ -1,8 +1,15 @@ //create function +function Hello(value) { //control and return statements - -//Prompt user for input and store variable - -//Call function - + if(value == 'Hello') + { + return "Hello world!" + } + else{ + return "You didn't say hello :(" + } +} +//Prompt user for input and store variable and call function +var userInput = prompt("Type 'Hello'") //Alert user results +alert(Hello(userInput)); \ No newline at end of file diff --git a/Challenges/Week2/index.html b/Challenges/Week2/index.html index afe8e37..5877a87 100644 --- a/Challenges/Week2/index.html +++ b/Challenges/Week2/index.html @@ -11,10 +11,10 @@

My first code challenge!

  • Prompt the user for input and store that into a variable
  • Pass that value into a function
  • If the user entered 'Hello' into the prompt, alert the user with 'Hello World!'
    • -
  • If they entered anything else, alert with a different message -
  • Don't forget to call your script file from this HTML file! I've created the script tags for you, but you have to add something to it! +
  • If they entered anything else, alert with a different message
    • +
  • Don't forget to call your script file from this HTML file! I've created the script tags for you, but you have to add something to it!
    • - + diff --git a/Challenges/Week3/index.html b/Challenges/Week3/index.html index 2ee5d5a..93ab978 100644 --- a/Challenges/Week3/index.html +++ b/Challenges/Week3/index.html @@ -1,49 +1,49 @@ - - - Flash Cards - - -

    Flash Cards

    - + + + Flash Cards + + +

    Flash Cards

    + - - - - - + + + + + \ No newline at end of file diff --git a/Challenges/Week3/js/app.js b/Challenges/Week3/js/app.js index 432dc9b..bd6a985 100644 --- a/Challenges/Week3/js/app.js +++ b/Challenges/Week3/js/app.js @@ -1,14 +1,24 @@ // 1.) Make sure you have a reference to jQuery from a CDN in the index.html file. // 2.) Use a jQuery to hide all of the answers to all the questions. -$('.answer') +$('.answer').hide(); /* 3.) Write code to show the answer when hovering over a flash card, and hide it when the mouse leaves. Find the approriate event on the jQuery API page to trigger an action on hover https://api.jquery.com/category/events/ Hint: You can use "this" inside your jQuery function to reference a selected DOM node. */ -$('.flash-card') +$( "li" ).hover( + function() { + $(this).children('.answer').show(); + }, function() { + $(this).children('.answer').hide(); + } +); /* 4.) Use jQuery to find the button element on the page and have it toggle all of the answers on and off when clicked. Hint: jQuery has a toggle function that can toggle the visibility of a selected DOM node. Bonus: Change the text of the button using jQuery when you toggle the answers on/off. */ -$() \ No newline at end of file +$('.cheat-button').click( + function() { + $('.answer').toggle() + } +); \ No newline at end of file diff --git a/Challenges/Week4/ChallengeFiles/challenge.css b/Challenges/Week4/ChallengeFiles/challenge.css new file mode 100644 index 0000000..9de5961 --- /dev/null +++ b/Challenges/Week4/ChallengeFiles/challenge.css @@ -0,0 +1,26 @@ +body { + background-color: black; + padding: 10px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: white; +} + +.planet { + width: 300px; + height: 300px; + border-radius: 50%; + text-align: center; + padding: 10px; + position: relative; + background-color: silver; +} + +.moon { + position: absolute; + width: 50px; + height: 50px; + border-radius: 50%; + background: rgb(153, 153, 153); +} + \ No newline at end of file diff --git a/Challenges/Week4/ChallengeFiles/challenge.html b/Challenges/Week4/ChallengeFiles/challenge.html new file mode 100644 index 0000000..c19067d --- /dev/null +++ b/Challenges/Week4/ChallengeFiles/challenge.html @@ -0,0 +1,14 @@ + + + + + + + + +

    Week 4 Code Challenge:

    +

    DOM manipulation with only JavaScript!

    + + + + \ No newline at end of file diff --git a/Challenges/Week4/ChallengeFiles/challenge.js b/Challenges/Week4/ChallengeFiles/challenge.js new file mode 100644 index 0000000..a085ad7 --- /dev/null +++ b/Challenges/Week4/ChallengeFiles/challenge.js @@ -0,0 +1,8 @@ +// Part 1: Create a new div of class "planet" and set its background color +// to the color of your choice. Then, append it to the body in the DOM. + +
    + +// Part 2: Create a new div of class "moon" and append it to the planet in the DOM. + +
    diff --git a/Challenges/Week4/SolutionFiles/challenge.css b/Challenges/Week4/SolutionFiles/challenge.css new file mode 100644 index 0000000..a6ba93b --- /dev/null +++ b/Challenges/Week4/SolutionFiles/challenge.css @@ -0,0 +1,25 @@ +body { + background-color: black; + padding: 10px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: white; +} + +.planet { + width: 300px; + height: 300px; + border-radius: 50%; + text-align: center; + padding: 10px; + position: relative; +} + +.moon { + position: absolute; + width: 50px; + height: 50px; + border-radius: 50%; + background: rgb(153, 153, 153); +} + \ No newline at end of file diff --git a/Challenges/Week4/SolutionFiles/challenge.html b/Challenges/Week4/SolutionFiles/challenge.html new file mode 100644 index 0000000..c19067d --- /dev/null +++ b/Challenges/Week4/SolutionFiles/challenge.html @@ -0,0 +1,14 @@ + + + + + + + + +

    Week 4 Code Challenge:

    +

    DOM manipulation with only JavaScript!

    + + + + \ No newline at end of file diff --git a/Challenges/Week4/SolutionFiles/challenge.js b/Challenges/Week4/SolutionFiles/challenge.js new file mode 100644 index 0000000..00ae11d --- /dev/null +++ b/Challenges/Week4/SolutionFiles/challenge.js @@ -0,0 +1,17 @@ +// Create a new div of class "planet" and set its background color +// to the color of your choice. Then, append it to the body in the DOM. + +// One Answer: + +var newPlanet = document.createElement("div"); +newPlanet.className = "planet"; +newPlanet.style.backgroundColor = "red"; +document.body.appendChild(newPlanet); + +// Create a new div of class "moon" and append it to the planet in the DOM. + +// One Answer: + +var newMoon = document.createElement("div"); +newMoon.className = "moon"; +newPlanet.appendChild(newMoon); diff --git a/Challenges/Week5/js/app.js b/Challenges/Week5/js/app.js index 1161a62..04689d0 100644 --- a/Challenges/Week5/js/app.js +++ b/Challenges/Week5/js/app.js @@ -6,7 +6,14 @@ function addPokemon(name) { `).appendTo('#pokemon'); }; - +{ + "count": 20, + "next": "http://pokeapi.co/api/v2/evolution-chain/?limit=20&offset=20", + "previous": null, + "results": [{ + "url": "http://pokeapi.co/api/v2/evolution-chain/1/" + }] +} // 1.) Use the PokéAPI from http://pokeapi.co along with jQuery's getJSON function to retrieve the first 20 Pokémon. // 1.1) Use the addPokemon function to show each of the Pokémon names that were retrieved. //Hint: Learn how to access resources via the documentation http://pokeapi.co/docsv2/#resource-lists diff --git a/Solutions/Week2/index.html b/Solutions/Week2/index.html index 5877a87..88c858f 100644 --- a/Solutions/Week2/index.html +++ b/Solutions/Week2/index.html @@ -17,4 +17,4 @@

    My first code challenge!

    - + \ No newline at end of file