@Zerka1982 without looking at the code - make a class and add or toggle it when its clicked
class that keeps it the full width
@Zerka1982 I think maybe you could do with less divs for each anchor item
anyone wanna test out my snake game? https://s.codepen.io/moT01/full/eGvXqq/
@moT01 It's cool but too fast for me haha
My highest score was only 900 😅
thanks @caixeta-paula , keep practicing
mot01 sends brownie points to @caixeta-paula :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @caixeta-paula |http://www.freecodecamp.com/caixeta-paula
1600, isn't the grid smaller than usual snake ? i don't really remember
i dont know
you can play with the numbers if you want
dimensions would change the size - just make sure you can divide the skale into dimensions or it might break
framerate at the bottom will change the speed
@moT01 You should focus canvas on load, otherwise keys doesn't work unless you click on the body
i noticed
im looking into it
@korzo @Gersho thanks for checking it out
mot01 sends brownie points to @korzo and @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 570 | @korzo |http://www.freecodecamp.com/korzo
:cookie: 497 | @gersho |http://www.freecodecamp.com/gersho
checking videogames ? always
did you have one of those old nokia's with snake?
of course, snake2
i maybe should have made it light ugly green and dark ugly green to stay true
had a 31 10, then a 33 30
only need to charge it once a week anyway
After this I had Erricson t68, then Nokia 7650, Nokia 6600
thats some classic stuff right there
does that thing even have two colors? or is it just one on a static background
it did levels of gray, like a gameboy iirc
but maybe only black and white
@moT01 It has only levels of grey. It was revolution anyway.
Hello, I have a basic DOM manipulation question. I am trying to find an element like and ordered list then add another list item to it using appendChild. If I search for the list using getElementByTagName, appendChild does not work, I get a type error (appendChild is not a function). However if I select the list using querySelector then appendChild works just fine. What is the difference?
i did have one where the "wallpaper" was an image behind the screen, visible even when phone off
do you have multiple of that tag?
@NJM8
@NJM8 getElementByTagName returns collection
@NJM8 querySelector first element
so getElementsByTagName[0] ?
mdn is showing me it's getElementsByTagName
plural
yep, I was copypasting
I see, getElementsByTagName is an array of those elements with that tag, and querySelector is the actual elements
*element
not sure that syntax would work but, maybe if you did it on the var or after you put the tag in @Gersho
@moT01 As it returns collection, it works..as long as collection is not empty
var tags = getElementsByTagName('ul');
tags[0].append...
that seems to work
@moT01 you can use
getElementsByTagName('ul')[0].appendChild() as long as you are sure at lest one element exists
i usually put id to stuff like that, so you don't get screwed when you add stuff later
yup, the tutorial I'm looking at suggested using querySelector but i don't like that, too vague.
yea, that's something to keep in mind - if you add another ul and it's before the one you're trying to target - it will mess things up
if the ul has a class can't you do something like querySeletor("ul .insertclassnamehere")
don't know that works in js, try it and let us know :p
thats a no.
thanks @NJM8
gersho sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @njm8 |http://www.freecodecamp.com/njm8
I guess if it has a class you would just search for that class with getElementByClassName.
plural
you'd have the same issue than getElementsByTagName
well, so querySelector(element class) actually searches the children of the found element with that class name
@NJM8 I would say it should work
parameter is CSS selector
so if you had a ul, and the first li has a class of first, you can find it with querySelector("ul .first");
@NJM8 yes
@NJM8 so it's not vague at all
but it would aim the li, not the ul
@khaduch thanks!
halohah sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3334 | @khaduch |http://www.freecodecamp.com/khaduch
@piteto Thanks! This actually helps understands some things.
hi all
hi
damn i'm working all alone again on redoing a page from scratch :) just 1 day left :/
i really need your help on this :)
can use css grid or bootstrap ?
@X140hu4 any thoughts ?
Hello Fellow campers,
I am stuck on my first project of building a tribute page, can anyone help me as I am inserting a picture into the codes but it's not displaying.
@Umurerwa08 Hope this helps
:'D
@linkin-park what do you mean one day left?
good question @longnt80 i need to do a reverse engineer some site and i have a day left for my homework
@linkin-park what are the requirements?
they have given a website :)
cant share the link of the website , since its given never share site online for the purpose of homework - guidelines todo homework :(
@linkin-park I'd say do it with vanilla css using css grid
don't use bootstrap
my question is what if the old browser didnt support grid :?
how old
not sure about that :fire:
@linkin-park you can apply progessive enhancement method
linkin-park @linkin-park googles progressive enhance......
write styles that support old browsers, then ..
use feature query to write css that can make use of css grid
so basically, old browsers that don't support grid will look different
something like this:
/* css for old browsers */
@supports (display: grid) {
/* css for grid supported browsers */
}
@longnt80
@supports is not supported by IE ;)
that's why you put it under / css for old browsers /
@linkin-park btw, depends on your goal
if you're into front end and css then use vanilla css and grid
otherwise, you can use bootstrap to make a quick website
if you're into front end and css then use vanilla css and grid
otherwise, you can use bootstrap to make a quick website
well i thought of using grid - its f! cool .
then got scared of old browsers
then got scared of old browsers
@linkin-park that's why I asked about the requirement
if there's no requirement to support old browser, just use grid
I think grid will become mainstream next year, IE's gonna adopt grid by the end of this year
thanks @longnt80 @Masd925
linkin-park sends brownie points to @longnt80 and @masd925 :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @longnt80 |http://www.freecodecamp.com/longnt80
:star2: 4518 | @masd925 |http://www.freecodecamp.com/masd925
Back to you friends :)
@longnt80 how are you doing ?
anybody able to help me out with a problem?
what's up @EclectickMedia ?
i'm going through elm , well is it better if i go with React / Vue ?
elm its great i came across Elm from a fellow camper :)
@Zerka1982 I'm good, how are you?
@longnt80 Can I ask you a question please ;)
@longnt80 Im doing very well, thank you!
zerka1982 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 578 | @longnt80 |http://www.freecodecamp.com/longnt80
@Zerka1982 If you have a question do not hesitate to ask :) not everyone is looking at the chat constinuously ^^;
The question is: When I hover the anchor (the left side of the page). When I click I want to keep it displayed
later :)
@Zerka1982 I managed to keep the width on the active button by having another class selector "[...] anchor-item .active" with the width set to 150px (the hover width)
The text does not show unless you hover, but you will be able to figure out that I imagine :)
Can you send me the sample
thanks in advance
@Zerka1982 you need JavaScript to do that
By any chance does anyone knows a person working in retail?
Area manager?
@BuntyBru which side of the planet ?
Asia
India
You?
@kirbyedy
Hello campers!!
hi guys
@jamiebutt16 Yo.
Hi there, does anyone have experience using stylus. I’m trying to get it to watch and auto build css styles. I’m using webpack. when I run npm start, I don’t get stylus watching the styles.styl pack so no changes propgate to the style.css file. Any help appreciated.
Not exactly sure who the whole thing hangs together.
Ugh, I have a problem with the Exact Change in the advanced scripting...
@X140hu4 Ask away.
I am always short of one nickel because of the lack of precision of float
@X140hu4 The robust way is to use penny amounts that are safe integers.
hmm starting reading on this. Thanks @Masd925
x140hu4 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4519 | @masd925 |http://www.freecodecamp.com/masd925
my request earlier….nevermind, I think I worked it out.
@X140hu4 Some rounding scheme or margin of error on comparisons can also work but it is much harder to prove that it works on every situation.
Is anyone here experienced with Electron?
Hello im having a problem with a jquery button target , needs to be clicked twice to work
@Cornielle post your code if you want
@aplchian how can I post my code with a dark background format?
are you using codpen you could link to that
okey
but isn't work in codepe is a big proyect
idk
if you arent using codepen just post your code here
put it liek this
```
your code here
wrapped up in three back ticks
thanks
@if(!isset($collateral))
@if(isset($data))
@if($data['basicInfo']->globalStatus == 'Collateral' && Auth::user()->department != 'Collateral')
@elseif($data['basicInfo']->globalStatus == 'Collateral' && Auth::user()->department == 'Collateral')
<button type="button" id="reviewApp" data-toggle="tooltip" data-placement="top" title="@lang('util.review')" section="loanInfo" class="btn bg-red btn-circle-lg waves-effect waves-circle waves-float" style="position: fixed; bottom: 15px; right: 75px; z-index: 9999;">
<i class="material-icons" style="color: white;">note_add</i>
</button><button type="button" id="saveLoan" data-toggle="tooltip" data-placement="top" title="@lang('util.savebtn')" data-trigger ="hover" section="loanInfo" class="btn bg-red btn-circle-lg waves-effect waves-circle waves-float" style="position: fixed; bottom: 15px; right: 15px; z-index: 9999;">
<i class="material-icons" style="color: white;">save</i>
</button>
@elseif($data['basicInfo']->globalStatus == 'declined' || $data['basicInfo']->globalStatus == 'cancelled')
<button type="button" id="reviewApp" data-toggle="tooltip" data-placement="top" title="@lang('util.review')" section="loanInfo" class="btn bg-red btn-circle-lg waves-effect waves-circle waves-float" style="position: fixed; bottom: 15px; right: 15px; z-index: 9999;">
<i class="material-icons" style="color: white;">note_add</i>
</button>
@elseif($data['basicInfo']->globalStatus != 'Collateral')
<button type="button" id="reviewApp" data-toggle="tooltip" data-placement="top" title="@lang('util.review')" section="loanInfo" class="btn bg-red btn-circle-lg waves-effect waves-circle waves-float" style="position: fixed; bottom: 15px; right: 75px; z-index: 9999;">
<i class="material-icons" style="color: white;">note_add</i>
</button><button type="button" id="saveLoan" data-toggle="tooltip" data-placement="top" title="@lang('util.savebtn')" section="loanInfo" class="btn bg-red btn-circle-lg waves-effect waves-circle waves-float" style="position: fixed; bottom: 15px; right: 15px; z-index: 9999;">
<i class="material-icons" style="color: white;">save</i>
</button>
@endif
@else
<button type="button" id="saveLoan" data-toggle="tooltip" data-placement="top" title="@lang('util.savebtn')" section="loanInfo" class="btn bg-red btn-circle-lg waves-effect waves-circle waves-float" style="position: fixed; bottom: 15px; right: 15px; z-index: 9999;">
<i class="material-icons" style="color: white;">save</i>
</button>
@endif
@endif
this is a laravel/html side and jquery is :
``````
``````
i have no idea lol
$('#saveLoan').click(function(){
// $('[data-toggle="popover"]').popover();
var objects = {};
if(checkForEmpty()){
swal('@lang("util.youmust")');
return;
}
for(var k in ents){
objects[ents[k]] = convertToArray(ents[k]);
}
@if(isset($collateral))
objects['collateral'] = true;
objects['loanIdNumber'] = '{{$data["basicInfo"]["loanIdNumber"]}}';
objects['transit'] = '{{$data["basicInfo"]["transit"]}}';
objects['cifkey'] = '{{$data["basicInfo"]["CifKey"]}}';
@endif
$.ajax({
type : 'Post',
data : {
_token : '{{csrf_token()}}',
data: objects,
},
url : '{{url("autosave/app")}}',
dataType : 'json',
success: function(data){
if (data.message == 'success') {
@if(isset($collateral))
window.history.back();
@else
window.location = '{{url("DRT/LoanRegister")}}';
@endif
}
},
error: function (jqXHR, exception) {
console.log(jqXHR.responseText);
}
});
});
this is the jquery code
thanks anyway @aplchian
cornielle sends brownie points to @aplchian :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @aplchian |http://www.freecodecamp.com/aplchian
the last button after an else conditional is the only button that have this problem I try to copy the same code and specifiy a differente target but still happend
hello guys
hey @Pradeep7695
Hey folks, any idea why the simulation gets held up by scrolling by mouse wheel? https://codepen.io/kbaig/pen/wrqbNb?editors=1010
Hi! I have tried to make this game for practicing on javascript. It malfunctions at some points i am unable to debug that. But more that i am stuck on how to make it work on a mobile phone as on computer i am handling the paddle by both keypress and mousemove event but which event i am suppose to look at when trying to make it work for mobile. any suggestions
https://codepen.io/adeelsalim/pen/QqqBgj
https://codepen.io/adeelsalim/pen/QqqBgj
@adeelsalim there must be some sort of touch event for phones
get the touch location and move the piece
@kbaig i couldn't reproduce that, it seems to be working for me
the thing that says
a freeCodeCamp project by kbaig is in the middle of the board though
@Cornielle when and where is the laravel blade rendering the js code? in the head or body? is the DOM ready?
@moT01 I was implementing the footer when you opened it I think, should be fine now
@moT01 When I use the mouse wheel, the timeout seems to be paused for me
@kbaig yea, still no problems with the mouse wheel, try fixed position on the footer, it's still in the way for me
@moT01 hmm it's position absolute bottom 0 atm...
@kbaig shrink the window and refresh
then scroll down or enlarge the window
maybe it's my browser, but i don't think so
@moT01 It's not, I think it's because it's positioning the div before the app mounts
@moT01 Quick fix would be to just stick the footer into the app I guess
Hello guys, is there anyone present at this moment ?
whats up
if you just ask, someone might come along and answer
or if you're just taking a roll call, im here
@HowdyHero present :hand:
hello guys
hello @aman-kumayu
:) so happy to receive answer guys, thanks. I have a little situation. Last month I started to build a website and I bought a domain name and hosting with SiteGround. After few days of trying to set up my wordpress website I decided to just write myself the code, and Im almost finnished
Now after I uploaded my site (the code) with filezilla, when I check the website I get the live the website from wordpress and not the one that I've coded. What should I do ? Do you guys have any suggestions ?
I don't want live the wordpress website which is not even created but instead I want live the website that I created myself
@HowdyHero You probably need to talk to SiteGround support - we don't know how your server is configured, what hosting package you have, etc.
@HowdyHero may be you should switch to another web hosting service.
This isn't something that has an easy, obvious answer
@piteto thanks for suggestion
howdyhero sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 183 | @piteto |http://www.freecodecamp.com/piteto
@HowdyHero have you deleted the wordpress files and folders? what file do your web server point to? some index.php or your uploaded index.html?
whats up folks
// Setup
var collection = {
"2548": {
"album": "Slippery When Wet",
"artist": "Bon Jovi",
"tracks": [
"Let It Rock",
"You Give Love a Bad Name"
]
},
"2468": {
"album": "1999",
"artist": "Prince",
"tracks": [
"1999",
"Little Red Corvette"
]
},
"1245": {
"artist": "Robert Palmer",
"tracks": [ ]
},
"5439": {
"album": "ABBA Gold"
}
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));
// Only change code below this line
function updateRecords(id, prop, value) {
/* if (prop==="tracks") {
id.tracks.push(value);
}*/
var get = collection["2468"].prop;
return get;
}
// Alter values below to test your code
updateRecords(5439, "tracks", "kukhövve");
why is this not returning an array with "1999" and "little red corvette?"
hey whats up guys
prop is a variable... NO dot notation with variables @iangracia
moigithub sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @iangracia |http://www.freecodecamp.com/iangracia
lol .. cbot is crazy, giving out brownies to everyone
how do you mean ? @moigithub
@iangracia With variables, we have to use bracket notation:
var get = collection["2468"][prop];
piteto sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @iangracia |http://www.freecodecamp.com/iangracia
its still returning the whole collection object @piteto
It should return
["1999", "Little Red Corvette"]
@OrangeKulture its cuz his name have "thanks" on it
i want it just to return the array with "1999" and "little red corvette?"
What are you hoping to return?
@piteto
Yeah, that's what it returns
not for me
var get = collection["2468"][prop]; // ["1999", "Little Red Corvette"]
ill try refreshing the page
@moigithub no it doesnt
@OrangeKulture gracia
moigithub sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 471 | @orangekulture |http://www.freecodecamp.com/orangekulture
nope still returning the whole object
see ?? well missing an "s"
gracia is not thanks
gracias is
exactly @OrangeKulture
piteto sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Yes it is :) lol
so ... @moigithub thank
orangekulture sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3651 | @moigithub |http://www.freecodecamp.com/moigithub
I don't know where you're looking at the code
lol
but bot takes that as a thanks..
@moigithub than
hahah .. oh man .. lets send him back to class
some1 had a name with "danke" on it.. he got free brownies too
im looking at it on challenge 347, "Record Collection"
@piteto
cbot
you called?
That black box on the freecodecamp challenges isn't a valid console
learn spanish
:P
how can i pass the challenge then :cry:
it only outputs the results of the tests they run against your code - with the more complicated challenges, you need to use an environment with an actual developer console. codepen, repl.it, or your own local environment
It helps a lot with the debugging
ok, then when im finished i can just paste the code and pass the challenge?
Yes, exactly
i mean, maybe i need to access something with the method im using right now
maybe it wont work then either
but alright, ill finish the challenge on codepen
i get the feeling that fcc black box have betrayed me in the past and i thought it was something wrong with my code
It looks like there are some conditions to consider to pass that challenge
If prop isn't "tracks" and value isn't empty (""), update or set the value for that record album's property.
I hit the same problem as you when I started the challenges - surprised you made it to the advanced algorithms without using an actual coding environment
I applaud your perseverance :p
haha yeah.. the secret is to rage quit every once and then and take a break from coding for a couple of weeks and tell yourself you suck at coding, then come back more motivated than ever
Great advice !
Hey, what is "" equal to?
nvm
Hey folks, would appreciate some feedback on my Game of Life so far https://codepen.io/kbaig/full/wrqbNb/
@iangracia Equal can mean many things.
masd925 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @iangracia |http://www.freecodecamp.com/iangracia
Hi, anyone online?
yeah
i also want to live in london
@iangracia then move to london lol :D
pickorita sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @iangracia |http://www.freecodecamp.com/iangracia
btw could anyone pm me please, I need quick help with CSS
put your code in codepen
Feel free to ask your question here @Pickorita plenty willing to help. If it's a lot of code, put it in a codepen or jsfiddle
I can't put it in codepen
its quite large and in dreamweaver
There are just 3 elements that I need to align but I think I messed up something so its just aligning wrongly
anyone willing to check screenshots?
var collection = {
"2548": {
"album": "Slippery When Wet",
"artist": "Bon Jovi",
"tracks": [
"Let It Rock",
"You Give Love a Bad Name"
]
},
"2468": {
"album": "1999",
"artist": "Prince",
"tracks": [
"1999",
"Little Red Corvette"
]
},
"1245": {
"artist": "Robert Palmer",
"tracks": [ ]
},
"5439": {
"album": "ABBA Gold"
}
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));
// Only change code below this line
function updateRecords(id, prop, value) {
if (value=="") {
delete collection[id][prop];
return collection;
}
switch(prop) {
case "tracks":
if (collection.hasOwnProperty(prop)) {
collection[id][prop].push(value);
}
else {collection[id][prop]= [value];}
break;
default:
collection[id][prop] = value;
}
return collection.hasOwnProperty(prop);
}
// Alter values below to test your code
console.log(updateRecords(2468, "tracks", "Free"));
guys why is it returning false
when it obv should return true because 2468 has a property called tracks
no need to look at the whole code, just tell me why the returned boolean is false
Hi! Does anyone here use UI Router? I have a problem with my code, been trying to find other solutions for about an hour now, help is pretty much appreciated!
@iangracia heres how I did that problem
wnghero sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @iangracia |http://www.freecodecamp.com/iangracia
// Setup
var collection = {
2548: {
album: "Slippery When Wet",
artist: "Bon Jovi",
tracks: [
"Let It Rock",
"You Give Love a Bad Name"
]
},
2468: {
album: "1999",
artist: "Prince",
tracks: [
"1999",
"Little Red Corvette"
]
},
1245: {
artist: "Robert Palmer",
tracks: [ ]
},
5439: {
album: "ABBA Gold"
}
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));
// Only change code below this line
function updateRecords(id, prop, value) {
if(value !== "" && prop !== "tracks"){
collection[id][prop] = value;
} else if(prop=="tracks"&&value!==""&&collection[id][prop]===undefined){
collection[id][prop] = [];
collection[id][prop].push(value);
} else if(prop=="tracks"&&value!==""){
collection[id][prop].push(value);
} else if(value===""){
delete collection[id][prop];
}
return collection;
}
// Alter values below to test your code
updateRecords(5439, "tracks", "Take a Chance on Me");
i found the problem
i was missing [id]
ahhh
wrong : collection.hasOwnProperty(prop);
right: collection[id].hasOwnProperty(prop);
right: collection[id].hasOwnProperty(prop);
dont you just love coding? :coding:
:cry:
lmao it sucks but the money thoooo
right? @wnghero
@Pickorita do u have it some place where we can see it live?
@sorinr yea, I will send you a dm
@JustineDiza
Hi! Does anyone here use UI Router? I have a problem with my code, been trying to find other solutions for about an hour now, help is pretty much appreciated!
Here's my HTML base:
<ul class="formSteps uk-margin-large-top">
<li ui-sref-active="active">
<a ui-sref=".substep" class="removeLink">Basic Information</a>
</li>
<li ui-sref-active="active">
<a ui-sref=".step_four" class="removeLink">Business Information</a>
</li>
<li ui-sref-active="active">
<a ui-sref=".step_five" class="removeLink">Business Activity</a>
</li>
<li>
<a class="removeLink">Documents</a>
</li>
<li>
<a class="removeLink">Gallery</a>
</li>
<li>
<a class="removeLink">Employee</a>
</li>
<li>
Complete
</li>
</ul>
<!-- Substeps for step1 go here -->
<div ui-view="substep"></div>
<div class="br-form-container">
<div class="page-header text-center">
<!-- Our nested state views will be injected here -->
<div ui-view></div>
</div>
</div>Here's my route.js:
// Adding state for substeps
.state('business_registration.substep', {
url: '/1-sub',
data: { activeTab: 'business'},
controller: 'AccountBusinessController',
params: {
businessType: null
},
controllerAs: 'abc',
views: {
'': {
templateUrl: 'business/step1.html'
},
'substep@business_registration.substep': {
templateUrl: 'business/substep.html'
}
}
})What I'm trying to do is to have 2 separate step progress counter, where the substep consists of substeps for different views, but it doesn't show up in the page.
var x = 0;
x += 1.01;
x += 2.05;
console.log(x);
//why does this equal 3.0599999999999996
//and not 3,06???
@iangracia floating point arithmetic - https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript
piteto sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @iangracia |http://www.freecodecamp.com/iangracia
@piteto thx, will study
iangracia sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 185 | @piteto |http://www.freecodecamp.com/piteto
var x = 0;
x += 1.01;
x += 2.05;
console.log(Number(x.toFixed(2)));
// or
console.log(Number(parseFloat(x).toPrecision(12)));
can't belive simple math has to be so complicated
Hi all, i'm trying to get my freecodecamp quote gen to post the quotes to twitter, but i'm currently stuck with the javascript. Could anyone take a look at my code and lend a hand?
@piteto why do you have to use parsefloat if the variables aren't strings?
i'm having a hard time wrapping my head around this simple problem
@iangracia You don't have to in that example - it works with numbers or strings
piteto sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
You could do something like this to facilitate:
var x = 0;
x += 1.01;
x += 2.05;
x = preciseValue(x);
console.log(x);
function preciseValue(num) {
return Number(parseFloat(num).toPrecision(12));
}
@MrOolong To use the official twitter share button, you'll need to use their code for generating the button and specifying the text: https://dev.twitter.com/web/tweet-button/javascript-create
If you don't care how the button looks, make it a hyperlink, style it like a button, and link to:
https://twitter.com/intent/tweet?text="your quote text"
you are just confusing me when you're using a function without the need of it
lmao
but shouldnt toPrecision(3) be the correct use?, should 12 give me like 11 decimals
@piteto and if I don't want to manually specify the text to tweet? What if I want to tweet the quote in the DOM element that's generated from an array in the JS file?
@MrOolong You would replace "your quote text" in that example above with a variable representing the text you want to tweet
In your case, the "textToTweet" variable
basically, to make your current window.open code work, you'll need to remove your html that pulls in the twitter widget code: //platform.twitter.com/widgets.js
i think I just figured out another way
var x = 3.0599999999999996;
console.log(Number(x.toPrecision(1))); // 3
console.log(Number(x.toPrecision(2))); // 3.1
console.log(Number(x.toPrecision(3))); // 3.06
console.log(Number(x.toPrecision(4))); // 3.06 ????
console.log(Number(x.toPrecision(7))); // 3.06????
console.log(Number(x.toPrecision(9))); // 3.06???
why does it stop at 2 decimals
@iangracia because there are only 2 significant digits after the decimal point. Try it with a different number, like: var x = 3.12345999999996;
piteto sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
@piteto thank you for steering me in the right direction with the link to the twitter button. I got it to work with this twttr.widgets.createShareButton(
'/',
document.getElementById('quotebox'),
{
text: document.getElementById('quotebox').innerHTML
}
);
'/',
document.getElementById('quotebox'),
{
text: document.getElementById('quotebox').innerHTML
}
);
mroolong sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 186 | @piteto |http://www.freecodecamp.com/piteto
@MrOolong No problem! I think you would want to use
textContent instead of innerHTML, but it may not matter based on the content of your quotes.
anyone knows how to align these 3 in the center? http://prntscr.com/gsws0e
All 3 elements are in 1 div element and are lists
@Pickorita could just use flexbox and margins
but now when I resize it to smaller size
it is not centered
do you know how to fix it?
http://prntscr.com/gswver
http://prntscr.com/gswvnc
it is not centered
do you know how to fix it?
http://prntscr.com/gswver
http://prntscr.com/gswvnc
code:
.wrapperimages {
display:flex;
justify-content:center;
margin: 0 auto;
}
.wrapperimages {
display:flex;
justify-content:center;
margin: 0 auto;
}
@Pickorita would have to make flex-direction column below a certain width
@Pickorita if you don't want to let the size of the image change
@Pickorita with align-items: center and your choice of justify-content
doesn't work when I add flex direction
With a media query for the width?
Like
@media (max-width: 500px) {
.wrapperimages-parent {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
}
let me test 1sec
not working
@Pickorita would be a lot more helpful to have your code in a pen or something
we really need a live demo to help you debug this - it can depend on a lot of things
.wrapperimages {
display:flex;
justify-content:center;
margin:auto;
}
@kbaig I don't have code pen
I'm doing it in dreamweaver
@Pickorita wrapperimages is the class for the children right? flex has to go on the parent of the items flex is being applied to
You don't need an account - create an anonymous pen: https://s.codepen.io/pen?editors=1101
yea its a class for a div
and there are 3 lists
this is how it looks
Are each of the boxes in that screenshot a div with class wrapperimages?
no each box is a list
there is 1 UL
and then 3 LI items
each li item is 1 image
Can you see @kbaig
screenshot above
let me paste code
```
<div class="wrapperimages">
<section class="portfolio">
<ul class="portfolio-grid portfolio-galery-3 clearfix masonry" id="portfolio-grid">
<li class="portfolio-item mix cat1">
<div class="portfolio-style-1 entry wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s" style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeIn;">
<img src="img/work-img3.png">
<div class="magnifier">
<div class="visible-title">
<h4><a href="#">Project Name</a></h4>
<small>
<a href="#">Category</a>
</small>
</div>
<!-- end visible title -->
<div class="visible-title1 clearfix">
<span class="pull-left">
<a data-rel="prettyPhoto" href="img/screencapture-file-C-Users-Pickorita-Desktop-ITA-DW-Honey-20Cake-20Site-index-html-1506611749492.png">
<i class="fa fa-search"></i>
</a>
</span>
<span class="pull-right">
<a href="#">
<i class="fa fa-heart"></i>
300</a>
</span>
</div>
</div>
</div>
</li>```
ul {
display: flex;
justify-content: space-around;
}
@media (max-width: 500px) {
ul {
flex-direction: column;
align-items: center;
}
}
I can't change ul
since I have more ul's on other pages
give it an id ?
So put a class on that ul and replace
or id
1 sec let me try
Highly recommend reading up on flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
@kbaig nice cheat sheet, thanks
gersho sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @kbaig |http://www.freecodecamp.com/kbaig
@Gersho no prob, there is a grid equivalent too ;) https://css-tricks.com/snippets/css/complete-guide-grid/
thanks I'll check
I added this code
but this is how it looks now
Is that not what you wanted
no
I want it to be centered when smaller
but not all 3 in a row
Hi gu
Not sure what you mean by that, can I get an example?
yes
look
Is it ok if I can ask here something not related to code but related to life as a front end developer or the path to this job?
so this website was inspiration pretty much
I tried to make that for practice
so next thing is alignment
and I can't get it right
@kbaig
@Pickorita If you want to copy the exact functionality of that page, you need to use css transitions, grid, and media queries
Or flexbox instead of grid
ok I see
@Pickorita for some guidance: https://codepen.io/ramenhog/pen/MpORPa
thank you
did you just make it?
or is it ramenhog's?
nvm
I fixed it with media queries
Hey guys
How do you append a class to another class with js?
displaying some previews to additonal sites, have the 'pens' set into a flexbox, is it better to just use html image tags or use css background-image: url()
well i figured it out , using image tags just worked instantly, guess background-image is only real good for the background.... who would've though
@eweiss17 use <img> if they're all the same aspect ratio. Use background-image if they're different aspect ratios, you don't want to resize, and don't mind some truncation
@Refath Lots of options here: https://stackoverflow.com/questions/2739667/add-another-class-to-a-div-with-javascript
@palingheorghe You might have better success in the main chat room or on a front-end related subreddit
rooms
freeCodeCamp rooms:
:point_right: Here is a list of our official chat rooms
/freecodecamp is the most active of the chatrooms