Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Can Tural
Can Tural
13,053 Points

(jQuery Spoiler Revealer Project)Doing the same by using javaScript without any libraries

Hi, I tried to do the same without using jQuery. I haven't been successful so far. Is there anyone who tried the same or want to try the same? If you can please post your code here.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Could you provide the original code, and/or a link to the course page?

Be sure to format posted code using the instructions found in the Markdown Cheatsheet below the "Add an Answer" area.

4 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Pure JavaScript, no libraries:

I left the original code in as comments for comparison:

//1, Hide spoiler
//$(".spoiler span").hide();
document.querySelectorAll(".spoiler span").forEach(e => e.style.display = "none");
//2, Add a button
//$(".spoiler").append("<button>Reveal Spoiler!</button>");
document.querySelectorAll(".spoiler").forEach(e => {
  var btn = document.createElement("button");
  btn.textContent = "Reveal Spoiler!";
  e.appendChild(btn);
//3, When button pressed
//$("button").click(function() {
  btn.onclick = function () {
  //3.1, Show spoiler next to the button clicked
  //$(this).prev().show();
    this.previousElementSibling.style.display = "inline";
  //3.2, Get rid of button
  //$(this).remove();
    this.parentNode.removeChild(this);
  };
});

I optimized it by setting the click handlers in the same loop when the button is created. If I had duplicated the jQuery functionality more literally it would have been even more verbose.

Can Tural
Can Tural
13,053 Points
Can Tural
Can Tural
13,053 Points

Hi, Sorry It took me so long to respond. I have been working a lot lately.

this is the HTML Code:

<!DOCTYPE html> <html> <head> <title>Star Wars Spoilers</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"> </head> <body> <img src="img/deathstar.png" /> <p class="spoiler"> <!--Spoiler:--> <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span> </p> <p class="spoiler"> <!--Spoiler:--> <span>Luke and Leia are siblings. Ew.</span> </p> <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html>

CSS Code: body { background: #2f558e url(../img/bg.png) repeat 0 0; background-size: 400px auto; font-family: sans-serif; } img { display: block; width: 150px; margin: 100px auto; } button { background: #dae1e4; border: none; border-radius: 5px; color: #1d3c6a; font-size: 24px; width: 480px; padding: 40px 0; margin: -40px -20px; outline: none; cursor: pointer; } .spoiler { background: #1d3c6a; width: 440px; margin: 0 auto 20px; border-radius: 5px; padding: 40px 20px; text-align: center; font-size: 24px } .spoiler span { color: #dae1e4; }

jQuery Code //Prevent spoilerphobes from seeing spoilers //Solution: Hide spoilers and reveal them through user interaction

//1, Hide spoiler $(".spoiler span").hide(); //2, Add a button $(".spoiler").append("<button>Reveal Spoiler!</button>"); //3, When button pressed $("button").click(function(){ //3.1, Show spoiler next to the button clicked $(this).prev().show(); //3.2, Get rid of button $(this).remove(); });

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

To make posted code readable, always use the formatting instructions found in the Markdown Cheatsheet below the "Add an Answer" area.

Can Tural
Can Tural
13,053 Points
Can Tural
Can Tural
13,053 Points

This is also the link to the lesson

https://teamtreehouse.com/library/jquery-basics/creating-a-spoiler-revealer/perfect

Can Tural
Can Tural
13,053 Points
Can Tural
Can Tural
13,053 Points

Thanks a lot, Steven.