Created
August 16, 2020 11:26
-
-
Save waseemnawaz/7ef0ff33269f3e48cf40a7966a1e4f5e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Instructions: | |
| Using css and JS modify the form as follows. Only display the review text box if the user selects "Yes". Hide the thank you message until form has been submitted. | |
| */ | |
| //$(document).ready( function() { | |
| /* add your code here */ | |
| //}); | |
| //the textarea | |
| var textArea = document.getElementsByClassName('textarea')[0] | |
| //hide it | |
| textArea.style.display = "none" | |
| //the thanks message | |
| //var thanks = document.querySelector('body').lastElementChild.previousElementSibling | |
| var thanks = document.querySelector('body').firstElementChild.nextElementSibling; | |
| thanks.style.display = "none" | |
| //console.log(thanks) | |
| //reveal textarea when the user clicks yes | |
| var radio = document.getElementsByClassName('radio')[0] | |
| var yes = function(event){ | |
| textArea.style.display = "block" | |
| } | |
| radio.addEventListener('click', yes, true) | |
| //reveal thanks message on submit | |
| var button = document.querySelector('button') | |
| console.log(button) | |
| var showThanksMessage = function(event){ | |
| event.preventDefault(); | |
| thanks.style.display = "block" | |
| } | |
| button.addEventListener('click', showThanksMessage, true) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Form Challenge</title> | |
| <link rel="stylesheet" href="css/style.css"/> | |
| <script src="//code.jquery.com/jquery.min.js"></script> | |
| <!--script src="js/app.js"></script--> | |
| </head> | |
| <body> | |
| <form> | |
| <label>Would you like to us leave a review? </label> | |
| <div class="radio"> | |
| <label><input type="radio" name="review" value="Yes"/>Yes</label> | |
| </div> | |
| <div class="radio"> | |
| <label><input type="radio" name="review" value="No"/>No</label> | |
| </div> | |
| <!-- Step 1. Hide the review text box unless user selects "Yes" --> | |
| <div class="textarea"> | |
| <label>Great! Please leave your review here:</label> | |
| <br> | |
| <textarea cols="40" rows="10"></textarea> | |
| </div> | |
| <div class="button"> | |
| <button name="submit" type="submit">Submit</button> | |
| </div> | |
| </form> | |
| <!-- Step 2. Hide the thank you message until the form has been submitted --> | |
| <div>Thanks for your feedback! Have a great day.</div> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment