learn-co-curriculum/fewpjs-fns-as-first-class-data-do-behavior

JavaScript Functions as First Class Data: Do behavior

Learning Goals

• Create a JavaScript function triggered by an event

Introduction

In JavaScript, functions are what's known as first-class citizens of the language. This means they can be treated like any other variable: they can be assigned to a variable, stored in a data structure, passed as an argument to another function, or be the return value of another function. In this lab, we're going to have an event handler send some information gathered by an <input> field to a helper function.

Create a "First-Class" Function

We're going to create a web greeting! You're provided a text input field in which you should enter a time in 24 hour time. When you click the Submit button, some provided code will run which will make calls to two functions.

The greet() function

The greet function should take one argument, a String which specifies the 24-hour time in the format HH:MM.

• If the time is earlier than 12pm, return "Good Morning".
• If the time is between 12pm and 5pm, return "Good Afternoon".
• If the time is later than 5pm, return "Good Evening".

NOTE: The value returned from the <input> will be of type String. You’ll need to take the String of the 24 hour time and convert it to a number. The split() function and parseInt() function should help.

The displayMessage() function

The displayMessage function should take one argument, a String.

When the function runs it should update the text inside the #greeting node with the content of the argument.

It does not return anything.

Testing

Finally, open up your index.html file in the browser. After typing 15:00 in the input field and pressing the Submit button should, you should see "Good Afternoon" printed on the DOM.

Did it work? If so, take time to celebrate! Don't move on yet! Take some time to digest and internalize the code you've just wrote. If not, take time to debug.

Conclusion

This lab demonstrates just the tip of the iceberg when it comes to leveraging the power of JavaScript functions. There are heaps of features that JavaScript has — some are even comparable to Ruby and other programming languages. We'll be exploring more on JavaScript events in the next lesson.

fewpjs-fns-as-first-class-data-do-behavior's Issues

Missing variable declaration in test file

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/1882/assignments/125625?module_item_id=259499

Describe the bug

Write a clear and concise description of what the bug is. Include the file and
line number(s) if possible.
In the original test code located in indexTest.js, the variable greetingEl on line 22 is not declared.

What is the expected behavior?

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

I had both functions working properly but the tests returned as failing since 'greetingEl' was not defined. I added it into the file to pass the tests.

Screenshots

If applicable, attach screenshots to help explain your problem.

What OS are you using?

• [x ] OS X
• WSL
• Linux

Any additional context?

Add any other context about the problem here.

Learn IDE issue.

// ♥ learn open fewpjs-fns-as-first-class-data-do-behavior-online-web-sp-000
Looking for lesson...
Traceback (most recent call last):
11: from /usr/local/rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in <main>' 10: from /usr/local/rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in eval'
9: from /usr/local/rvm/gems/ruby-2.6.1/bin/learn-open:23:in <main>' 8: from /usr/local/rvm/gems/ruby-2.6.1/bin/learn-open:23:in load'
7: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/bin/learn-open:7:in <to p (required)>' 6: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/lib/learn_open/opener.rb :12:in run'
5: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/lib/learn_open/opener.rb
:38:in run' 4: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/lib/learn_open/lessons.r b:19:in classify'
3: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/lib/learn_open/lessons.r
b:19:in find' 2: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/lib/learn_open/lessons.r b:19:in each'
1: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/lib/learn_open/lessons.r
b:20:in block in classify' /usr/local/rvm/gems/ruby-2.6.1/gems/learn-open-1.2.28/lib/learn_open/lessons/ios_lesson.rb:6:in detect': undefined method `any?' for false:FalseClass (NoMethodError)

Misleading readme

The note under displayMessage() is misleading - it makes it sound as though the method is supposed to display the time in h1, when actually it's supposed to replace the inner text of h1 with the provided argument. It's possible this note was meant to be under the greet() section? It makes more sense there and would help with the solution of implementing that function.

Receiving error message when opening in terminal + trying to submit

Hi there,

I can't open this lab locally, I get this error message:

gems/learn-open-1.2.28/lib/learn_open/lessons/ios_lesson.rb:6:in detect': undefined method any?' for false:FalseClass (NoMethodError)

To workaround it, I cloned from the repo and was able to get local tests to pass, but now when I try to run learn submit, I receive the following:

command': git '--git-dir=/Users/RickyRojas/fewpjs-fns-as-first-class-data-do-behavior-online-web-pt-041519/.git' '--work-tree=/Users/RickyRojas/fewpjs-fns-as-first-class-data-do-behavior-online-web-pt-041519' push 'origin' 'master' 2>&1:remote: Repository not found. (Git::GitExecuteError)
fatal: repository 'https://github.com/Ricky199X/fewpjs-fns-as-first-class-data-do-behavior-online-web-pt-041519.git/' not found

I'm receiving these same errors in Learn IDE as well, not just my local environment.

Shows message in greeting tag

My code shows the message in the greeting tag as requested yet does not pass the tests. The content grabbed by the text is undefined.

Test issues

• Tests are different between master and solution branches
• Unclear whether to send number or string as argument to greet
• Isn't testing that this line of code runs from solution document.getElementById("greeting").innerHTML = greet; and it may not be clear from README that students need to put that text into the H1