get help in general - we have more specialized help rooms here: https://gitter.im/FreeCodeCamp/home
hello! I'm trying to modify a codepen, but so far feeling frustrated at not getting what I thought I understood.
my fork, with comments int he HTML & the JS
trying to 1) use a button instead of a div in the HTML. Why? Because I don't udnerstand how the div acts as a button, unless it's simply the event being listend for (click the div)
2) Tried to use jquery to listen for MY button click. Just didn't work.
When I get passed these things, I'll do more of the work I want to do with teh JS logic. I want to randomize a totally different thing than beer names, but like the logic he has laid out
thanks for any suggestions
yeah, a click can be listened for like a button, you just have to id the div and fill it in or give it some sort of semblance to a button. When I went to your page, entered my first name, I got a return of Disgruntled Dominic -- is this not what it's supposed to do?
yes it is, but it's using the original code.
I'm trying to get better at coding my udnerstanding some of the changes like using jquery, or listening for a button click rather than a div click
Ah, okay.
I have commented out the code I tried to add in the HTML and the JS
well your button has both a class and an ID on it. I didn't think that was possible // okay to do?
Did you try taking out one or the other and seeing if your event listener picks it up?
possible, perfectly acceptable, and if interacting with it through javascript, encouraged
no i iddin't it just seemed like it SHOULD work.
a lot of people are adopting the idea of "ids for javascript, classes for css"
what is encouraged @terakilobyte , class & ID? I did both because I was unsure, but fully udnerstand that with jquery I should be able to pick up either.
hmm. that' makes some sense!
OK, I have the button working.
trying to do too many thigns at once
OOOH yes. Got my jquery event listener working.
So simple but so satisfying.
:thumbsup:
now have it saying my OWN random works. Shortly those random words will be converted to actual workouts
wrap it and make it a mobile app :D
how do I do that?? :)
there are a few that do that, but mine will be better
Phonegap and other platforms, you can write android and iOS apps in js
cool good to know
function reverse(s) {
var o = [];
for (var i = 0, len = s.length; i <= len; i++)
o.push(s.charAt(len - i));
return o.join('');
}
may I know for the first loop, wouldn't it result in error since i=0; what does s.charAt(len) return?
It is pushing each character in a given string into an array, starting at the end of the string and making it's way to the beginning.
.charAt is the position of a character in a string.
so
s.charAt(len - i)will push a character in s, the string, at the calculated position of the string. That calculated position is equal to the value of the length of the s minus i.
I hope I explained that clearly :sweat_smile:
yea i got wat u mean, but say a string has 9 characters, the last character would be s.charAt(8) instead of s.charAt(9) right?
so in the first loop of the for statement, i=0, so what would s.charAt(9-0) return?
It should return undefined.
It wouldn't mess up the string when you join it, however.
Any JS gurus present?
@serhiicss I dabble here and there :D
Need some help?
yes, please. just a moment, I am working on my question :)
var list = function(obj) {
for(var prop in obj) {
console.log(prop);
}
Here we create a function that takes object name as argument
Question: what does exactly
prop do?
Alright, so when you are calling this function the argument you are passing is an array?
obj means it is going trough objects?
Objects, not array, or they count as same thing?
prop represents the keys in your object.
prop is the key that iterates through the array.
but how does
prop know what to do if it can be anything?
not necessarily an array, but all of the key:value pairs in the object you pass in.
it doesn't. It will log anything from vars to number to functions.
ah
So basically it reads anything it sees in the object?
reads anything enumerable, yes.
all objects have a handful of properties that aren't enumerable, and those won't get logged.
So if I call the function above, it should return everything in the object (all keys and values)?
No, it only returns the object names
I think I got it. Thank you, guys!
:+1:
it doesn't reach into an object. If the object passed in is an array of objects, then yes you'd just get objects in your log.
In other words it only loops trough objects, but not the object keys and values.
Ugh, programming is not easy :)
no it should log all of the keys
Then why does it return only objects? Is it because in
function(obj) we only call objects?
var friends = {};
friends.bill = {
firstName: "Bill",
lastName: "Gates",
number: "(206) 555-5555",
address: ['One Microsoft Way','Redmond','WA','98052']
};
friends.steve = {
firstName: "Steve",
lastName: "Jobs",
number: "(408) 555-5555",
address: ['1 Infinite Loop','Cupertino','CA','95014']
};
var list = function(obj) {
for(var prop in obj) {
console.log(prop);
}
};
so you're passing friends{} to your list function?
list(friends)
bill
steve
yes
ah yes, I think we just crossed wires.. so it doesn't reach into objects recursively unless you built a function that did so. if you did list(friends.steve) you'd get all of steves keys.
Ok if I call
list(friends.steve) it returns keys, but not their values. How do I call them both? Keys and their values.
This message was deleted
console.log(prop + " : " + prop[0])
@Rybar Thank you for your help!
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="PizzaPlanetApp">
<div class="header">
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div class="appetizers row" ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<h3 class="name">{{ appetizers.name }} </h3>
<p class="description">{{ appetizers.description }} </p>
</div>
<div class="price col-md-3">
<p class="price">{{ appetizers.price | currency }} </p>
</div>
</div>
<h2>Mains</h2>
<div class="mains row" ng-repeat="main in mains">
<div class="item col-md-9">
<h3 class="name">{{ mains.name }} </h3>
<p class="description">{{ mains.description }} </p>
</div>
<div class="price col-md-3">
<p class="price">{{ mains.price | currency }} </p>
</div>
</div>
<h2>Extras</h2>
<div class="extras row" ng-repeat="extra in extras">
<div class="item col-md-9">
<h3 class="name">{{ extras.name }} </h3>
<p class="description">{{ extras.description }} </p>
</div>
<div class="price col-md-3">
<p class="price">{{ extras.price | currency }} </p>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
}
];
$scope.mains = [
{
name: 'Margherita',
description: 'Marinara sauce, mozzarella, fresh basil.',
price: 6.95
},
{
name: 'Pepperoni',
description: 'Pepperoni, marinara sauce, mozzarella, fresh oregano.',
price: 7.95
},
{
name: 'Rustica',
description: 'Marinara sauce, kalamata olives, roasted garlic, fresh oregano.',
price: 8.95
}
];
$scope.extras = [
{
name: 'Breadsticks',
description: 'Served with marinara sauce',
price: 4.95
},
{
name: 'Soup of the day',
description: 'Take a chance',
price: 4.95
},
{
name: 'Buffalo wings',
description: 'Feel the power of wings',
price: 6.95
}
];
}]);var app = angular.module("PizzaPlanetApp", []);
which isn't working, or both of them?
also
for anything in anythings
anything.something will be a property of an individual item
anythings.somethingelse will be a property of the container you're iterating over
for example look at extras
when you ng-repeat, each element should be referred to by extra, not extras
mmm
ok so I can just have description?
without the mains?
{{description }}
confused
haha
for (main in mains) {
// I'd refer to each object in mains as main
main.property // not mains.property
}
ok ill try that
thanks
ng-repeat essentially does this, so, first I'd try making one small change, like so
<h2>Extras</h2>
<div class="extras row" ng-repeat="extra in extras">
<div class="item col-md-9">
<h3 class="name">{{ extra.name }} </h3>
<p class="description">{{ extra.description }} </p>
</div>
<div class="price col-md-3">
<p class="price">{{ extra.price | currency }} </p>
</div>
</div>
ah
try that
ok 2 secs
if extras shows up as you intended do it for the other categories
if not we'll have to dig deeper
IT worked
thanks!!!!!!!!!
:) enjoy!
How long should it take me to complete the coderbyte challenges ?
I know is relative but man they make me feel slow
It depends
I did it in about 2 or 3 days, but I've previous coding experience
also I focused on speed rather than good practices, optimized core or code reuse
some people do it in 1 day, for others I think it can take 2 weeks or more
Anyways, use this channel if you are stuck in something
cool good to know
I got hung up on one and finally skipped it and am making up ground again
Does anyone know of any good resources for learning how to write test in js?
I also want to learn TDD
I think mocha or Jasmine documentation is a good starting point
plus some grunt for running the tasks
@Vince33 If you want to start playing around with tests without setup, you can do so in the bonfire playground: http://www.freecodecamp.com/playground
It uses chaijs so you can use either assert or expect/should style: http://chaijs.com/api/
Help! I think I may have myself an infinite loop or some other problem...
function DashInsert(str) {
var arr = str.split("");
for (var i = 0; i<arr.length; i++){
if (arr[i]==1||3||5||7||9){
if (arr[i]==arr[i+1]){
arr.splice(arr[i+1],0,"-");
}
}
}
var end = arr.join("");
return end;
}
and/or a whole lot of problems :)
:)
first, use ===
don't use ==
do you know the difference?
nope
== will implicitly type convert for you
type coercion
where as === will not
it is far better to be explicit
if you need to convert, do so manually
you won't be surprised later
ah I see
in your first if, what exactly are you checking for?
if it's 1 or 3 or 5 or 7 or 9?
if the number in the array (which will be all digits) is an odd number
or, I'm suspecting, if it's odd
yep. coderbyte 23 easy
ok, how would I check if it was even?
ah! of course! there's a method for that isn't there....
well, not a method that I know of unless you made one
but if (num % 2 === 0)
will return true if it's an even number
so if (num % 2 !== 0)
will be true if it's an odd
when you are nesting conditional checks you have to explicitly compare
if (num === 1 || num === 3 || num ===5)
ok I see. that has screwed me up in the past, too. - I'll be back in about 15 mins, I'm sorry for post and ditching. got an important family call.
np
function DashInsert(str) {
var arr = str.split("");
for (var i = 0; i<arr.length; i++){
if (arr[i]% 2!==0 ){
if (arr[i]===arr[i+1]){
arr.splice(arr[i+1],0,"-");
}
}
}
var end = arr.join("");
return end;
}
updated
how is it working?
not great. it's giving me a "please wait" that lasts forever
ah
the coderbyte blues
@brianamarie regarding the code you posted
you are using arr[i]$ 2!==0
the values inside the array are string values
so, while it might work because of type coercion
you should make sure they are numbers first
var arr = str.split("").map(function(i) {
return +i;
});
something like that
of course, assuming your input will be a string with only digits
Ah I see. The inputs should be only digits. Thank you @crisberrios!
@crisberrios @brndnb Thanks guys sorry disappeared into my editor for a while
I think now my main issue is the placement of the "-" in the splice. It's not exactly where I want it to be, and I'm not certain why.
@brndnb I am going to dig into that bonfire and chains doc later
If I run an app locally is there any reason it wouldn't load scripts from a CDN
@brianamarie I was assuming they were digits, what are the instructions? or can you link the challenge?
@brianamarie when you do splice, array length is modified, so the whole function gets messed
Ah! I see. that makes sense! Didn't even think of that
Using the JavaScript language, have the function DashInsert(str) insert dashes ('-') between each two odd numbers in str. For example: if str is 454793 the output should be 4547-9-3. Don't count zero as an odd number.
I have a feeling I'm going to need to push something into something or...something