Git Product home page Git Product logo

fewpjs-build-the-example's Introduction

Stitching Together the Three Pillars

Learning Goals

  • Set up an event listener to respond to a user action
  • Submit a request to a mocked-up server
  • Update the DOM based on the mock server's response

Introduction

Remember when we started this exploration of the "Simple Liker" application? You might not have been sure that you would make it to this point, but you have. Right now you should have the information needed to create a basic web application!

Your goal is to implement the "liking" functionality of "Simple Liker." As a reminder, the final product should look something like this:

Screenshot Final

The focus of this lab is the JavaScript code. You should only need to make one change to the HTML, and no changes to the CSS file.

You might be tempted to look back at previous code, but don't. Use your knowledge and documentation from the internet (if needed), to build the application.

Instructions

You will be doing your coding in main.js. If you take a look at the file, you will see that a function, mimicServerCall(), is being provided for you:

function mimicServerCall(url="http://mimicServer.example.com", config={}) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let isRandomFailure = Math.random() < .2
      if (isRandomFailure) {
        reject("Random server error. Try again.");
      } else {
        resolve("Pretend remote server notified of action!");
      }
    }, 300);
  });
}

What this function is doing is simply returning either a "success" or "fail" response at random. Because we don't have a backend server set up, we are using this function to "mock" the fact that a server request will return either a successful or unsuccessful HTTP response.

For this lab, you will need to write code to invoke mimicServerCall() in response to a user action. You will then need to handle the response just as if it came from a live server: updating the appearance of the heart if it returns a "successful" response, and displaying an error in the DOM otherwise.

Note that the content of the "successful" response from the server is not important here — we only care that it's successful. This means you will not need to call .json() on the response so you only need a single then() call.

Note: The tests will only check for the first part of the specification (adding the hidden class). You should verify the rest of the behavior yourself, by checking the page in the browser.

Here's the specification:

  • Add the .hidden class to the error modal in the HTML so it does not appear when the page first loads
  • When a user clicks on an empty heart:
    • Invoke mimicServerCall to simulate making a server request
    • When the "server" returns a failure status:
      • Respond to the error using a .catch(() => {}) block after your .then(() => {}) block.
      • Display the error modal by removing the .hidden class
      • Display the server error message in the modal
      • Use setTimeout to hide the modal after 3 seconds (add the .hidden class)
    • When the "server" returns a success status:
      • Change the heart to a full heart
      • Add the .activated-heart class to make the heart appear red
  • When a user clicks on a full heart:
    • Change the heart back to an empty heart
    • Remove the .activated-heart class
  • Keep all your styling rules entirely in style.css. Do not manipulate any .style properties.
  • Only manipulate the DOM once the server request responds. Do not make the heart full until you're inside a successful .then block.

Conclusion

That's it! Congratulations. You're now a real-deal front-end developer! You can use HTML, CSS, and JavaScript to create living, breathing applications. Every web application front-end you see or have seen is built using these three pillars, which you're now skilled with! Give yourself a well-deserved pat on the back!

fewpjs-build-the-example's People

Contributors

dependabot[bot] avatar geluso avatar ihollander avatar lizbur10 avatar maxwellbenton avatar rrcobb avatar telegraham avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fewpjs-build-the-example's Issues

When running learn test - after adding the hidden element to the index.html form - it marks my lab as passing even though I haven't added code to my main.js file yet.

Thanks for raising this issue! Future learners thank you for your diligence. In
order to help the curriculum team address the problem, please use this template
to submit your feedback. We'll work on addressing the issue as soon as we can.

Please fill out as much of the information below as you can (it's ok if you
don't fill out every section). The more context we have, the easier it will be
to fix your issue!

Note: you should only raise issues related to the contents of this lesson.
If you have questions about your code or need help troubleshooting, reach out to
an instructor/your peers.


Link to Canvas

Add a link to the assignment in Canvas here.

https://learning.flatironschool.com/courses/2072/assignments/68853?module_item_id=134064

Describe the bug

Write a clear and concise description of what the bug is. Include the file and
line number(s) if possible.

When running learn test - after adding the hidden element to the index.html form - it marks my lab as passing even though I haven't added code to my main.js file yet.

What is the expected behavior?

Write a clear and concise description of what you expected to happen.

I expected to see the rest of the errors in my lab.

Screenshots

If applicable, attach screenshots to help explain your problem.

What OS are you using?

  • OS X
  • WSL
  • Linux

Any additional context?

Add any other context about the problem here.

Broken image - screenshot final

The example screenshot image link is broken. If you open the image in a new tab, you get the following error:

This site can’t be reached curriculum-content.s3.amazonaws.com’s server IP address could not be found. Try running Windows Network Diagnostics. DNS_PROBE_FINISHED_NXDOMAIN

why mimic?!

Thanks for raising this issue! Future learners thank you for your diligence. In
order to help the curriculum team address the problem, please use this template
to submit your feedback. We'll work on addressing the issue as soon as we can.

Please fill out as much of the information below as you can (it's ok if you
don't fill out every section). The more context we have, the easier it will be
to fix your issue!

Note: you should only raise issues related to the contents of this lesson.
If you have questions about your code or need help troubleshooting, reach out to
an instructor/your peers.


Link to Canvas

https://learning.flatironschool.com/courses/2620/assignments/76888?module_item_id=148432

What should be changed?

there's too many pieces to the Mimic server call, have we ever seen this before?
Why can't this be built or defined elsewhere so we can GET PRACTICE WITH FETCH instead of trying to navigate around some mimic that has never been explained before. Very frustrating roadblock.

Additional context

Add any other context about the problem here.

Needs starter code

I get what we're trying to do here, but it feels like starting them off with some basic html/css would be a better use of time.

Either way, this page should show a picture/gif of the desired finished project

Solution code has a significant flaw

Each article element in the lab's index.html file has an unordered list where the singular list item contains the following code:

<li class="like">Like! <span class="like-glyph">&#x2661;</span></li>

The solution code attempts to grab the articleHearts with the following code:

let articleHearts = document.querySelectorAll(".like");

and then add's event listeners to each entire list item element.

for (let glyph of articleHearts) {
  glyph.addEventListener("click", likeCallback);
}

The issue arises when the variable heart is assigned to the event.target in the likeCallback function. If the event target was the list item element and not the nested span element inside of that list item then the solution code will try to replace the list items innerText which then errors out and displays "undefined" (see screenshot).

function likeCallback(e) {
  let heart = e.target;
  mimicServerCall("bogusUrl")
    .then(function(serverMessage){
      heart.innerText = glyphStates[heart.innerText];
      heart.style.color = colorStates[heart.style.color];
    })
    .catch(function(error) {
      document.getElementById("modal").className = "";
    });
}

No more functionality to Like! ♥!

Screen Shot 2020-10-29 at 5 52 58 PM

I think the simplest solution is to grab all the articleHearts from the span class instead and that span will be the only element with a click event listener.

let articleHearts = document.querySelectorAll(".like-glyph");

and the style.css file should be updated to reflect the cursor change only when hovered over the span element with the .like-glyph class:

.like-glyph {
  cursor: pointer;
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.