diff --git a/Challenges/Week2/README.md b/Challenges/Week2/README.md index d8830c1..2386e56 100644 --- a/Challenges/Week2/README.md +++ b/Challenges/Week2/README.md @@ -1,7 +1,20 @@ Try and do all of the following: +<<<<<<< HEAD + +-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 of your choice (such as "Incorrect input!" + +-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! +======= 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! +>>>>>>> refs/remotes/CodeLouisville/master diff --git a/Challenges/Week2/app.js b/Challenges/Week2/app.js index 146acc5..a2a83a6 100644 --- a/Challenges/Week2/app.js +++ b/Challenges/Week2/app.js @@ -6,3 +6,25 @@ //Call function //Alert user results + +/* -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 of your choice (such as "Incorrect input!" + +-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! +*/ + +function hello() { + var sayHello = prompt(); + if (sayHello === 'Hello') { + alert('Hello World'); + document.write("you did it!") + } else { + alert("Incorrect input!"); + } +} +hello(); 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/README.md b/Challenges/Week3/README.md index 402a7de..dd438c1 100644 --- a/Challenges/Week3/README.md +++ b/Challenges/Week3/README.md @@ -1,5 +1,5 @@ -Week 3 JQuery Code Challenge - -An incomplete flashcard game has been set up. Complete the remaining functionality using JQuery commands. - -Open app.js and index.html in your text editor. Read the comments in app.js for instructions on what to add. Try and complete the missing features of the game by modifying app.js! +Week 3 JQuery Code Challenge + +An incomplete flashcard game has been set up. Complete the remaining functionality using JQuery commands. + +Open app.js and index.html in your text editor. Read the comments in app.js for instructions on what to add. Try and complete the missing features of the game by modifying app.js! diff --git a/Challenges/Week3/css/style.css b/Challenges/Week3/css/style.css index a0847a0..a283af2 100644 --- a/Challenges/Week3/css/style.css +++ b/Challenges/Week3/css/style.css @@ -1,80 +1,80 @@ -html { - height: 100%; - box-sizing: border-box; -} - -body { - /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cb60b3+0,ad1283+50,de47ac+100;Pink+3D */ - background: #cb60b3; /* Old browsers */ - background: -moz-linear-gradient(-45deg, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(-45deg, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(135deg, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - background-attachment: fixed; - color: white; - font-family: sans-serif; -} - - -h1 { - text-shadow: 2px 2px 2px #000; - display: block; - text-align: center; -} - -.flash-card { - background: white; - color: black; - height: 100px; - border-radius: 5px; - margin-top: 1em; - transition: all .2s ease-in-out; - overflow: hidden; -} - -.question { - height: 3em; - margin-bottom: 1em; - display: block; -} - -.answer { - display: block; -} - -.flash-card:hover { - transform: scale(1.05); - box-shadow: 2px 2px 10px black; -} - -ul { - margin: 0; - padding: 0; -} - -ul li { - list-style: none; - width: 20%; - margin: 0 1%; - padding: 1em; - display: inline-block; - cursor: pointer; -} - -.cheat-button { - color: white; - background-color: purple; - border: none; - padding: 1em; - border-radius: 5px; - display: block; - margin: 0 auto; - margin-top: 1em; - font-size: 1.2em; - cursor: pointer; - transition: all .2s ease-in-out; -} - -.cheat-button:hover { - transform: scale(1.05); +html { + height: 100%; + box-sizing: border-box; +} + +body { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cb60b3+0,ad1283+50,de47ac+100;Pink+3D */ + background: #cb60b3; /* Old browsers */ + background: -moz-linear-gradient(-45deg, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(-45deg, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(135deg, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + background-attachment: fixed; + color: white; + font-family: sans-serif; +} + + +h1 { + text-shadow: 2px 2px 2px #000; + display: block; + text-align: center; +} + +.flash-card { + background: white; + color: black; + height: 100px; + border-radius: 5px; + margin-top: 1em; + transition: all .2s ease-in-out; + overflow: hidden; +} + +.question { + height: 3em; + margin-bottom: 1em; + display: block; +} + +.answer { + display: block; +} + +.flash-card:hover { + transform: scale(1.05); + box-shadow: 2px 2px 10px black; +} + +ul { + margin: 0; + padding: 0; +} + +ul li { + list-style: none; + width: 20%; + margin: 0 1%; + padding: 1em; + display: inline-block; + cursor: pointer; +} + +.cheat-button { + color: white; + background-color: purple; + border: none; + padding: 1em; + border-radius: 5px; + display: block; + margin: 0 auto; + margin-top: 1em; + font-size: 1.2em; + cursor: pointer; + transition: all .2s ease-in-out; +} + +.cheat-button:hover { + transform: scale(1.05); } \ No newline at end of file diff --git a/Challenges/Week3/js/app.js b/Challenges/Week3/js/app.js index 432dc9b..e455ac9 100644 --- a/Challenges/Week3/js/app.js +++ b/Challenges/Week3/js/app.js @@ -1,14 +1,14 @@ -// 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') - -/* 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') - -/* 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. */ +// 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') + +/* 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') + +/* 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 diff --git a/Solutions/Week2/app.js b/Solutions/Week2/app.js index abe5f74..5cbdba9 100644 --- a/Solutions/Week2/app.js +++ b/Solutions/Week2/app.js @@ -1,12 +1,12 @@ -function getWelcomeMessage(value) { - - if(value == 'Hello') - { - return "Hello world!" - } - else{ - return "You didn't say hello :(" - } -} -var val = prompt("Type 'Hello'") -alert(getWelcomeMessage(val)); +function getWelcomeMessage(value) { + + if(value == 'Hello') + { + return "Hello world!" + } + else{ + return "You didn't say hello :(" + } +} +var val = prompt("Type 'Hello'") +alert(getWelcomeMessage(val)); diff --git a/Solutions/Week2/index.html b/Solutions/Week2/index.html index 5877a87..27b8b75 100644 --- a/Solutions/Week2/index.html +++ b/Solutions/Week2/index.html @@ -1,20 +1,20 @@ - - - Week 2 Code Challenge - - -
    -

    My first code challenge!

    -
    -

    Try and do all of the following:

    -
      -
    1. Prompt the user for input and store that into a variable
      2. -
    2. Pass that value into a function
      3. -
    3. If the user entered 'Hello' into the prompt, alert the user with 'Hello World!'
      4. -
    4. If they entered anything else, alert with a different message
      5. -
    5. 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!
      6. -
    - - - - + + + Week 2 Code Challenge + + +
    +

    My first code challenge!

    +
    +

    Try and do all of the following:

    +
      +
    1. Prompt the user for input and store that into a variable
      2. +
    2. Pass that value into a function
      3. +
    3. If the user entered 'Hello' into the prompt, alert the user with 'Hello World!'
      4. +
    4. If they entered anything else, alert with a different message
      5. +
    5. 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!
      6. +
    + + + +