diff --git a/Challenges/Week2/app.js b/Challenges/Week2/app.js index 146acc5..3f1d70f 100644 --- a/Challenges/Week2/app.js +++ b/Challenges/Week2/app.js @@ -1,3 +1,4 @@ + //create function //control and return statements @@ -6,3 +7,23 @@ //Call function //Alert user results + +function processInput(message) +{ + if(message === "Hello!") + { + return("Hello World!"); + } + else { + return("You didn't say hello :("); + } +} + +var userInput; +var response; + +userInput = prompt(); + +response = processInput(userInput); + +alert(response); diff --git a/Challenges/Week2/index.html b/Challenges/Week2/index.html index afe8e37..2f1bae7 100644 --- a/Challenges/Week2/index.html +++ b/Challenges/Week2/index.html @@ -15,6 +15,6 @@

My first code challenge!

  • 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..13c4e32 100644 --- a/Challenges/Week3/index.html +++ b/Challenges/Week3/index.html @@ -41,9 +41,14 @@

    Flash Cards

    • - + + + - + + + + \ No newline at end of file diff --git a/Challenges/Week3/js/app.js b/Challenges/Week3/js/app.js index 432dc9b..3e3fe99 100644 --- a/Challenges/Week3/js/app.js +++ b/Challenges/Week3/js/app.js @@ -1,14 +1,29 @@ + // 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') - +$(document).ready(function(){ + $(".flash-card").mouseenter(function(){ + $('.answer').show(); + }); + $('.flash-card').mouseout(function(){ + $('.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 + Bonus: Change the text of the button using jQuery when you toggle the answers on/off. */ + $('.cheat-button1').click(function(){ + $('.answer').show(); + }); + $('.cheat-button2').click(function(){ + $('.answer').hide(); + }); + + + diff --git a/Challenges/Week4/ChallengeFiles/challenge.css b/Challenges/Week4/ChallengeFiles/challenge.css new file mode 100644 index 0000000..8da2eb5 --- /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: blue; +} + +.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..d455113 --- /dev/null +++ b/Challenges/Week4/ChallengeFiles/challenge.html @@ -0,0 +1,15 @@ + + + + + + + + +

    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..0102970 --- /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. +$("planet").append(""); + + +// Part 2: Create a new div of class "moon" and append it to the planet in the DOM. +$("moon").append("
    planet
    "); + diff --git a/Challenges/Week5/js/app.js b/Challenges/Week5/js/app.js index 1161a62..322b2b5 100644 --- a/Challenges/Week5/js/app.js +++ b/Challenges/Week5/js/app.js @@ -6,6 +6,105 @@ function addPokemon(name) { `).appendTo('#pokemon'); }; +<<<<<<< HEAD +//Using these variables to store the url of the next and previous list of Pokémon +var prevList = null; +var nextList = null; + +//This will hide the list of Pokémon and insert new html to show Pokémon detail. +function showPokemonDetail(name) { + $('.poke-card').hide(); + $('#previous, #next').hide(); + //$('#back').show(); + var spriteUrl = null; + var pokeName = null; + var pokeType = null; + + $.getJSON(`http://pokeapi.co/api/v2/pokemon/${name}`,function(data){ + pokeName = data.name; + spriteUrl = data.sprites.front_default; + pokeType = data.types[0].type.name; + $(` +
    + +

    ${pokeName}

    +

    ${pokeType}

    + + +
    + `).appendTo('#pokemon'); + + data.stats.forEach(function(stat){ + $(` +
  • + ${stat.stat.name}: ${stat.base_stat} +
    • + `).appendTo('#stats'); + }); + + }); + + +}; + +function hidePokemonDetail() { + $('#poke-detail').remove(); + $('.poke-card').show(); + + $('#previous, #next').show(); + //$('#back').hide(); +} + + +//Displays a list of Pokémon given a resource URL +function displayPokes(resource) { + $.getJSON(resource, function(data) { + prevList = data.previous; + nextList = data.next; + data.results.forEach(function(pokemon){ + addPokemon(pokemon.name); + }); + + if(!prevList) { + $('#previous').prop("disabled", true); + } else { $('#previous').prop("disabled", false); } + + if(!nextList) { + $('#next').prop("disabled", true); + } else { $('#next').prop("disabled", false); } + + }).done(function(){ + $('.poke-card').click(function(){ + var selectedPokemon = $(this).find('h3').text(); + showPokemonDetail(selectedPokemon); + }); + }); + +} + +//Register a click handler for the previous and next buttons. +$('#previous, #next').click(function(){ + $('.poke-card').remove(); + + if(this.id === 'previous' && prevList) { + displayPokes(prevList); + } + + if(this.id === 'next' && nextList) { + displayPokes(nextList); + } +}); + + +//Using on instead of click to look for events triggered by elements created after the DOM was loaded. +$('#pokemon').on('click', '#back', function() { + hidePokemonDetail(); +}); + + +//Initial display of Pokémon +displayPokes('http://pokeapi.co/api/v2/pokemon'); +======= // 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. @@ -22,4 +121,5 @@ function addPokemon(name) { type or anything else you would like to include. Add a way to go back to the list when your're done looking at the detail. Be creative, you can style/arrange the detail information however you like! -*/ \ No newline at end of file +*/ +>>>>>>> 85a3bb7dd64688251fe2c8d02fe7fc33d630c149 diff --git a/Challenges/Week6/index.html b/Challenges/Week6/index.html index f18ec2a..208359a 100644 --- a/Challenges/Week6/index.html +++ b/Challenges/Week6/index.html @@ -26,7 +26,7 @@

    Extra credit

    - + Height: @@ -46,6 +46,7 @@

    Extra credit

    - + + diff --git a/Challenges/Week6/js/app.js b/Challenges/Week6/js/app.js index 8234858..6fa93cb 100644 --- a/Challenges/Week6/js/app.js +++ b/Challenges/Week6/js/app.js @@ -1,10 +1,42 @@ //#Week 6 JQuery Code Challenge + //Objects - + var boxy = function(h, w){ + this.height = h; + this.width = w; + }; +boxy.prototype.area = function(h = this.height,w = this.width){ + return h * w; +}: + boxy.prototype.areaIncrease: function(){ + this.height ++; + this.width ++; + }; + boxy.prototype.areaDecrease: function(){ + this.height --; + this.width --; + }; + + boxy.prototype.heightIncrease: function(){ + this.height ++; + }; + boxy.prototype.widthIncrease: function(){ + this.width ++; + }; + boxy.prototype.heightDecrease: function(){ + this.height --; + }; + boxy.prototype.widthDecrease: function(){ + this.width --; + }; + + //Code Challenge: -//Create an object named "Box" with 3 properties, height, width, volume. +//Create an object named "Box" with 3 properties, height, width, volume + //Create 2 buttons for Height. The first button decreases the Box Height by 1. The second button increases the Box Height by 1. + //Create a button that prints the object and its attributes to the page (use the span "output". //Extra credit