No description, website, or topics provided.
Clone or download
Latest commit ad92e8e Nov 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
starter_code assignment 4 finish Nov 8, 2019
.DS_Store assignment 4 finish Nov 8, 2019
.gitattributes Initial commit Nov 8, 2019
README.md assignment 4 finish Nov 8, 2019
rubric.md assignment 4 finish Nov 8, 2019

README.md

FEWD Week #4: JavaScript Basics



Description

The team from Relaxr is back...again! They want their page to be more interactive and asked you to add JavaScript to their source code. You've been given the HTML and CSS but will need to create a JavaScript file and add a few different pieces of interactivity: Users should be able to click a link and have the remainder of the blog's content slide down and appear on the page, both on the main content column and the side bar; users should also be able hide the content when they are finished reading. See a detailed technical explanation below.



Real-World Applications

  • Practice programmatic thinking to plan before writing code
  • Use basic JavaScript to create an interactive page based on a user action
  • Link an external JavaScript file from HTML


Technical Requirements

  • Prevent a form submission with the event.preventDefault() function

  • Select the appropriate DOM elements with CSS selectors upon a user's click using the $.click() handler

  • If a user clicks "Read More" on the primary column:

    • have the text in the <p> tag slide down along with a "Read Less" link in the blog post using $.slideDown() and $.show()
    • hide the "Read More" link using $.hide()
  • If a user clicks "Read Less" on the primary column:

    • have the <p> slide up and hide the "Read Less" link using $.slideUp() and $.hide()
    • show the "Read More" link using $.show()
  • Using the same functions as above, if a user clicks the "Learn More" link in the sidebar, have the <span> inside that <p> slide down and hide the "Learn More" link using $.slideDown() and $.hide()



Resources



Evaluation / Submission

Students should use the same folder and GitHub repository as the previous project ("homework-landingpage"). When ready for evaluation they should push their code to that repository and notify the instructional team via slack. Instructional team should evaluate against the solution code and the student's use of technical elements. They will provide a numeric grade on a scale: does not meet expectations (0); meets expectations (1); exceeds expectations (2). Note: If bullets have child bullets, grade the child bullets and not the parent bullet belonging to the child. The maximum possible score on this assignment is 16/16. Bonus materials are completely optional.

Final Project Milestone 1

By this week, you should have created and handed in wireframes that sketch out your idea and basic design for a final project.