These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Sep 2017
JamesHaengsin
@JamesHaengsin
Sep 09 2017 00:22
Hello, I am looking for some advice on resources for javacript and DOM manipulation.
aRtoo
@artoodeeto
Sep 09 2017 00:35
whats up fam!!! quick question. should i get the total of cid from this algorithm challenge entitled Exact Change
Peter Steele
@PeterHSteele
Sep 09 2017 02:35
@artoodeeto i don't totally remember how i did that one but getting the total cid seems like a good place to start, that way you can compare it it to change due and see right away if you need to return 'insufficient funds'
Minoy
@minoy
Sep 09 2017 06:12

Hello! I am trying to toggle the colour of a button on clicking between two colours. It is not working. Following is the JS code:

var button = document.getElementById("button");

button.addEventListener("click", changeColor);

function changeColor() {
    if (this.style.color === "purple") {
        this.setAttribute("color", "white");
    } else {
        this.setAttribute("color", "purple");
    }
}

Any ideas? I am wondering is I am using 'this' correctly...

silver537
@silver537
Sep 09 2017 10:08
You're using 'this' correctly.
There are no attributes called color. Maybe try style.
And passing in an object color: white
alpox
@alpox
Sep 09 2017 10:19
@minoy just use this.style.color = "white"
and this.style.color = "purple"
Bashir Harrell
@bookofbash
Sep 09 2017 10:37
Can anyone take a gander at why these "cards do not align? : https://bookofbash.github.io/twitchviewer/
I have been struggling with this for weeks. I think I am pretty much done with the assignment, but it bothers me that they wont align
So i keep coming back to it with nothing ever changing
Bashir Harrell
@bookofbash
Sep 09 2017 11:00
I did it FINALLY! display:inline-grid; Hahahahaha :)
Robert Ridley
@robert1ridley
Sep 09 2017 12:10

Hi everyone.

I have a list of objects that has a similar structure to this:

allProjectideas =[
    {
        "name":"name1", 
        "subjects":[
            {"item":"math"},
            {"item":"science"},
            {"item":"eng"}
            ],
        "ageGroups":[
            {"item":"elementary"}
            ],
        "description":[
            {"item":"difficulty:mid"},
            {"item":"Time:4hrs"}
        },


        {
            "name":"name2", 
            "subjects":[
                {"item":"math"},
                {"item":"science"},
                {"item":"eng"}
                ],
            "ageGroups":[
                {"item":"elementary"}
                ],
            "description":[
                {"item":"difficulty:mid"},
                {"item":"Time:4hrs"}
            }
]

I then have a single object with the same structure:

projectIdea = {
        "name":"name1", 
        "subjects":[
            {"item":"math"},
            {"item":"science"},
            {"item":"eng"}
            ],
        "ageGroups":[
            {"item":"elementary"}
            ],
        "description":[
            {"item":"difficulty:mid"},
            {"item":"Time:4hrs"}
        }

I want to find the objects in the list (allProjectIdeas) that are similar to the individual object (projectIdea). I have done this by finding matches between the subjects, age groups, etc.

My solution works. However, I am not sure whether it is the most effective solution; there are a lot of nested loops. I was wondering whether anyone has a solution that would return the same results but with more efficiency. My code is below:

ageGroupMatch();

                    function ageGroupMatch(){
                        for(var j=0; j<allProjectIdeas.length; j++){
                            var count = 0;
                            for (var k=0; k<allProjectIdeas[j].ageGroups.length; k++){
                                for (var l=0; l<projectIdea.ageGroups.length; l++){
                                    if(projectIdea.ageGroups[l].item === allProjectIdeas[j].ageGroups[k].item){
                                        count = count+1;
                                        console.log("name: " + allProjectIdeas[j].name + "ageGRoup: " + projectIdea.ageGroups[l].item);
                                    }
                                    allProjectIdeas[j].matchCount = count;
                                }
                            }
                            descAndSubMatch(allProjectIdeas[j].description, projectIdea.description, allProjectIdeas[j]);
                            descAndSubMatch(allProjectIdeas[j].subjects, projectIdea.subjects, allProjectIdeas[j]);
                        }
                    }

                    function descAndSubMatch(newSubjDesc, matchSubjDesc, addCount){
                        for (var k=0; k<newSubjDesc.length; k++){
                            for (var l=0; l<matchSubjDesc.length; l++){
                                if(matchSubjDesc[l].item === newSubjDesc[k].item){
                                    addCount.matchCount = addCount.matchCount + 1;
                                    console.log("name: " + addCount.name + " " + newSubjDesc[k].item);
                                }
                            }
                        }
                    }
Tom
@moT01
Sep 09 2017 12:17
@robert1ridley wonder if a filter function would work there, ...
allProjectsideas.filter(idea => idea !== projectIdea)
mpontus
@mpontus
Sep 09 2017 12:42
Can I reference in-document SVG element with CSS background-color's url()?
Minoy
@minoy
Sep 09 2017 13:08
@silver537 @alpox Thanks!
CamperBot
@camperbot
Sep 09 2017 13:08
minoy sends brownie points to @silver537 and @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1328 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 936 | @silver537 |http://www.freecodecamp.com/silver537
Peter Steele
@PeterHSteele
Sep 09 2017 13:18
does anyone know how to make the react transition group library work in codepen? I have the cdn linked but when I try to include a <Transition /> component in my code it says it's undefined. https://codepen.io/psteele1128/pen/mMxNLw?editors=0110
Ahmed raza
@Raza403
Sep 09 2017 13:25
I need help in fabonacci challenge, kindly help me in finding bug https://pastebin.com/UCJd2Uv0
Peter Steele
@PeterHSteele
Sep 09 2017 14:01
@Raza403 the problem's in your for loop. Right now you're adding numbers to your fibs array until i is equal to the target number, when actually, you only want to add them until fibs[i] is equal to the target number. The condition you're trying to meet is fib[i-2] + fib[i-1]<num. I used a while loop instead of a for loop here.
krckyboy
@krckyboy
Sep 09 2017 15:27
I'm trying to add a skewed header effect ( https://codepen.io/erikdkennedy/pen/EZozpV ) to my code, but I don't quite understand how to do it. I would really appreciate it if someone could explain it t ome. Thank you very much! My code: https://codepen.io/krcky/pen/eEqvVy
Tom
@moT01
Sep 09 2017 15:40
@krckyboy line 16 in the csss
I think I did it.
The problem I had is not adding position: relative; to the main parent container (header).
I just added that to the container inside, and it didn't work.
Ahmed raza
@Raza403
Sep 09 2017 17:13
I am having strange error in "smallest common multiple" challenge, it works well for all except (23,18) input. For this it gives output 2018940, which is exactly 1/3 of the answer. Here is the code https://pastebin.com/V8a0D0Zq
When I change quote in the code to 2018940 I get output 4037880 which is exact double of 2018940.
And when I give 4037880 then return is 6056820 which is right answer.
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:22
Im trying to clone this resume template here: https://creativemarket.com/ikonome/686585-Material-Resume-Blue/screenshots/#screenshot1 How do I create those bars by "software" and the other graphics in "work" and "skills"?
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:26
oh I have never heard of W3.css xD I abandoned that place since I prefer MDN for documentation.
thanks @AmazeCPK
CamperBot
@camperbot
Sep 09 2017 17:26
htmlnoob sends brownie points to @amazecpk :sparkles: :thumbsup: :sparkles:
:cookie: 77 | @amazecpk |http://www.freecodecamp.com/amazecpk
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:27
@HTMLNoob np, that's just the first result google turned up. the first big step is knowing what to google.
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:27
xD progress bars I kept on searching bar graphs and I tried SVG.
piteto
@piteto
Sep 09 2017 17:27
@HTMLNoob If this is for your resume, I would not recommend using bars to indicate how skilled you are.
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:27
@HTMLNoob as for the rest of the graphics, the circles are called 'progress circle' or 'progress circle bar' or.. a million other things lol
piteto
@piteto
Sep 09 2017 17:28
Years of experience and references to projects are much more meaningful than, for example: 8/10 on javascript
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:28
@piteto Its for practice and its a project objective in P1xts guide
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:28
@HTMLNoob and last, the vertical lines with the circles in the work section are usually called 'timeline' http://freefrontend.com/css-timelines/
arizona2014
@arizona2014
Sep 09 2017 17:29
hi guys
piteto
@piteto
Sep 09 2017 17:29
hello arizona
arizona2014
@arizona2014
Sep 09 2017 17:29
any IONIC 2 experts here ?
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:29
@AmazeCPK Noting these down: progress bars, progress circle bars, and css-timelines. got it :D
arizona2014
@arizona2014
Sep 09 2017 17:29
or even Angular2
piteto
@piteto
Sep 09 2017 17:29
I don't think they teach that at free code camp??
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:29
xD I'm learning reactJS
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:29
@piteto +1. progress bars for skill levers look good, but are unquantifiable filler. But looks like @HTMLNoob knows what to use them for :)
piteto
@piteto
Sep 09 2017 17:30
Agreed :)
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:30
xD I want practice in making a nice site with understandable and readable code
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:30
sorry @arizona2014 have you tried the angular discord rooms?
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:31
Hopefully, I can get into the next Chingu Cohort ^^
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:31
@HTMLNoob yesss! always strive for human readable code :) I rarely comment my work now, since I started taking that approach
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:33
@AmazeCPK Well I realized that if I ever hope to get a job as a junior developer, I need to make sure the team can read my code instead of wasting 30 minutes trying to understand what the heck is going on.
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:34
absolutely! sure using frameworks will abstract that methodology here and there, but for the most part, good strategy to take!
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:36
YDKJS is really interesting xD I never knew there was more to javascript than a web a eventListeners
But thank you for the links @AmazeCPK It will definitely help me with this resume project.
CamperBot
@camperbot
Sep 09 2017 17:38
htmlnoob sends brownie points to @amazecpk :sparkles: :thumbsup: :sparkles:
api offline
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:40
Holy moly! lol you're in for a treat @HTMLNoob . If you ver dive into SPA, then you'll start noticing, JS is king. Even with just a Node application, we can spin up a simple webserver using JS
You'll realize that JS is EXTREMELY versatile, and you'll be doing things with it that you never ever dreamed were possible. lol
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:44
@AmazeCPK I have been in a treat for awhile. I first started learning HTML from my dad's XHTML books from 2002.....Inadvertantly, I was learning the struggles of early web developers.. and I thought frames were cool xD
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:45
lmao. yeah.. please don't read any book on programming that is not extremely up to date.
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:46
xD I have already learned that lesson.
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:46
Technology will change so fast in just 6 months, that it can render older literature obsolete.
Right now.. I would suggest not only learning JS, but also ES6 and ES7
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:47
ES7? already? I just got around to learning a few things about ES6.
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:48
Ohhh yes. ES7 provides some much deesrved syntactic suggar :)
Like async and await
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:48
Have browsers started implementing ES7
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:48
No, and they probably wont for a long long time
But ES6/7 gets compiled into plain JS that browsers can support
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:49
xD IE still dragging us down?
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:49
using libraries like babel.
So we can definitely use all the neat JS features in all modern browsers, without worrying about compatibility
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:50
I'll have to add babel to the infinite list of things to learn
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:50
and yes IE is dragging is down, now permenantly but that's mostly CSS, and HTML issues with is, not js
honestly, don't worry about babel. figure out how to implement it, and let it live. it just takes a few minutes to get set up most of the time.
just like webpack.. and various other libraries, you can start using them right away.. it's only when you need specific functionality from them, that you really start diving into them.
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:52
I'll keep that in mind :D
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:52
And although that may not be a popular opinion amongst the web dev elite, I am a strong believer in fairly quick grattification, especially for those coming into the field, and wanting to wet their feet with the new tech
BrianWilliams28
@BrianWilliams28
Sep 09 2017 17:53
is there a comparison operator in Javascript where if something = to null, NaN, undefined, etc... will return true/false?
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:53
@BrianWilliams28 if(!thing)
you can also do if(thing ==false), but note that due to the JS way of handling 'false' values.. values like undefined, and 0 will also register as false.
BrianWilliams28
@BrianWilliams28
Sep 09 2017 17:55
if (!collection.pre) this checks if the object property is undefined or not?
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:55
if you need a value to match to a certain data type, then you can use trippe equals signs (===)
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 17:56
Why are null, NaN, and undefined seperate object types when in reality they are basically the same thing?
debugging purposes?
BrianWilliams28
@BrianWilliams28
Sep 09 2017 17:56
bascially i'm trying to check if an object property has a value or not. if it doesnt i want to return false, otherwise return true
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:57
@BrianWilliams28 yes, so a typical case looks like
if(!collection.pre){
    console.log('collection.pre does not exist');
}else{
    console.log('collection.pre does exist!');
}
BrianWilliams28
@BrianWilliams28
Sep 09 2017 17:57
@AmazeCPK thank you
CamperBot
@camperbot
Sep 09 2017 17:57
brianwilliams28 sends brownie points to @amazecpk :sparkles: :thumbsup: :sparkles:
:cookie: 78 | @amazecpk |http://www.freecodecamp.com/amazecpk
Anthony Contreras
@AmazeCPK
Sep 09 2017 17:58
@BrianWilliams28 no problem :)
@HTMLNoob They all mean slightly diffrent things tbh, and debugging their results can be helpful
@HTMLNoob for instance, null and undefined. Null means the object exists but was not initialized (i.e. does not hava a value). Undefined on the other hand means the object was never created, and does not reside in the DOM
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:00
oh crap it needs to test for a boolean field also
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:00
@BrianWilliams28 it will test for boolean the way I wrote it
@BrianWilliams28 it will check for 'falsey' values. so true, 0, null, undefined, etc.
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 18:01
oh wow, if you had a large application, debugging would be harder so knowing what errors are occuring you would be able to diagnose the problem faster and fix it faster
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:01
Exactly!
The tricky errors are logic errors. when you code runs, and compiles just fine.. but somewhere along the line, your logic is off. that won't throw an automatic error, and you have to begin debugging yourself
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 18:04
Wont it throw an error in strictmode?
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:06
syntactic errors will. but not logic errors. For instance, you are doing a math operation, and your math is coming out incorrectly because your variables are getting manipulated elswhere in your code
or.. let me simplify an example
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 18:09
oh I see, variables can collide with each other and values get mixed up but the engine is compiling it nevertheless.
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:10
so for some reason this works for most of the arguments but not for three of them.
function truthCheck(collection, pre) {
  for (let i = 0; i < collection.length; i++) {
  if (!collection[i].pre) {
    return false;
  }
return true;
  }
}

truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex");
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 18:10
which three are not working? @BrianWilliams28
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:11
the below call for example is returning false when it should return true
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:11

@HTMLNoob

for(i = 0;i>=9;i++){
    console.log(i);    //0,1,2,3...
}
console.log(i);

Here the second console.log(i) will output 0 because it is outside of the scope of the for loop. You usually want that, but maybe your program is trying to read i outside of the for loop scope
and you can't figure out why it is outputting 0

BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:11
as well as truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true, "alias": "Repete"}, {"name": "FastFoward", "onBoat": true}], "onBoat")
and truthCheck([{"single": "yes"}], "single")
both of those are turning flase when it should be true
korzo
@korzo
Sep 09 2017 18:12
@BrianWilliams28 Shouldn't you return true after for loop is finished?
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 18:13
@AmazeCPK thank you I understand now
CamperBot
@camperbot
Sep 09 2017 18:13
htmlnoob sends brownie points to @amazecpk :sparkles: :thumbsup: :sparkles:
api offline
Tyler Del Rosario
@TylerDelRosario
Sep 09 2017 18:13
I gtg rn. cya :D and happy coding
korzo
@korzo
Sep 09 2017 18:13
Because now you return after 1. iteration @BrianWilliams28
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:14
uh
idk i was trying to check the property for all the objects in argument 1, i figured the for loop was the right way to go
korzo
@korzo
Sep 09 2017 18:15
@BrianWilliams28 You are checking only 1. object right now
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:15
later @HTMLNoob
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:15
@korzo im checking collection
which can have 1 object or several
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:17
@BrianWilliams28 for (let i = 0; i > collection.length; i++) {
korzo
@korzo
Sep 09 2017 18:18
@BrianWilliams28 No. Only first one. Because both return statements are inside loop.
Here is your code, formatted, with console.log. Try it.
function truthCheck(collection, pre) {
  for (let i = 0; i < collection.length; i++) {
    console.log(i);
    if (!collection[i].pre) {
      return false;
    }
    return true;
  }
}

truthCheck(
  [
    { user: "Tinky-Winky", sex: "male" },
    { user: "Dipsy", sex: "male" },
    { user: "Laa-Laa", sex: "female" },
    { user: "Po", sex: "female" }
  ],
  "sex"
);
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:19
@korzo Look at the for loop. it is ending the loop immediately because I will always be less than collection.length
@BrianWilliams28 @korzo i>collection.length
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:20
this is weird, the first console log i did showed everything, 1 sec
im not sure what happened
how would i iterate through all the objects?
korzo
@korzo
Sep 09 2017 18:24
@BrianWilliams28 move return true after the end of the loop
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:24
basically @BrianWilliams28 This is how it should look
function truthCheck(collection, pre) {
  for (let i = 0; i > collection.length; i++) {
    console.log(i);
    if (!collection[i].pre) {
      return false;
    }
  }
  return true;
}

truthCheck(
  [
    { user: "Tinky-Winky", sex: "male" },
    { user: "Dipsy", sex: "male" },
    { user: "Laa-Laa", sex: "female" },
    { user: "Po", sex: "female" }
  ],
  "sex"
);
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:25
i tried that before
i think it still wasnt working in fcc
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:25
@BrianWilliams28 Because your comparison operator inside the for loop was backwards!
@BrianWilliams28 i> collection.length not i< collection.length
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:26
except when i change the comparison operator all it does is correct the 3 that werent working before, and now the rest are broken
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:26
show me the rest then.
because the code I provided works 100%
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:27
truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex") should return true.
truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex") should return false.
truthCheck([{"user": "Tinky-Winky", "sex": "male", "age": 0}, {"user": "Dipsy", "sex": "male", "age": 3}, {"user": "Laa-Laa", "sex": "female", "age": 5}, {"user": "Po", "sex": "female", "age": 4}], "age") should return false.
truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true}, {"name": "FastFoward", "onBoat": null}], "onBoat") should return false
truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true, "alias": "Repete"}, {"name": "FastFoward", "onBoat": true}], "onBoat") should return true
truthCheck([{"single": "yes"}], "single") should return true
truthCheck([{"single": ""}, {"single": "double"}], "single") should return false
truthCheck([{"single": "double"}, {"single": undefined}], "single") should return false
truthCheck([{"single": "double"}, {"single": NaN}], "single") should return false
those are all of them.
brb a sec
diegoignacious
@diegoignacious
Sep 09 2017 18:28
hey everyone !
korzo
@korzo
Sep 09 2017 18:28
@BrianWilliams28 What's the name of challenge?
@BrianWilliams28 also if (!collection[i].pre) should be if (!collection[i][pre])
diegoignacious
@diegoignacious
Sep 09 2017 18:30
sorry, what should include on this piece of code, make it persistent trough the scroll ?
                    <img src="505logo.png" style="padding-top:30px;padding-left:155px;"" style="width:20px;height:20px;" style="position: fixed;">
korzo
@korzo
Sep 09 2017 18:31
@diegoignacious You have 3 style attributes. Put them together. Also there is 1 " more than necessary
diegoignacious
@diegoignacious
Sep 09 2017 18:32
thanks ! @korzo , as you may noticed im really new coding
CamperBot
@camperbot
Sep 09 2017 18:32
diegoignacious sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 465 | @korzo |http://www.freecodecamp.com/korzo
Anthony Contreras
@AmazeCPK
Sep 09 2017 18:32
whoops. yes I'm sorry the comparison operator should be like you said. you had it the right way. Rookir mistake!
diegoignacious
@diegoignacious
Sep 09 2017 18:35
@korzo , when i put all the 3 styles together, won't show me the picture
won't print the pic
korzo
@korzo
Sep 09 2017 18:36
@diegoignacious
<img src="505logo.png" style="padding-top:30px; padding-left:155px; width:20px; height:20px; position: fixed;">
diegoignacious
@diegoignacious
Sep 09 2017 18:36
lemme try
korzo
@korzo
Sep 09 2017 18:37
@korzo But you should better put your styles in separate CSS file
diegoignacious
@diegoignacious
Sep 09 2017 18:37
Nope, @korzo it happens again, it doesn't print it
yea, i know i should be writting this on a css class
but, you can do it too on the html file , right ?
korzo
@korzo
Sep 09 2017 18:38
@diegoignacious Is your image path correct?
@diegoignacious Yes, in <style> tag
diegoignacious
@diegoignacious
Sep 09 2017 18:39
it is, in fact as i have the code with separated style, it shows it, now my trouble here, is that i want this to make it persistent trough the scroll
image.png
image.png
like my navbar, you see ?
@korzo
korzo
@korzo
Sep 09 2017 18:42
@diegoignacious It's difficult to say without seeing the code. Post it on codepen
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:43
@korzo its called eveything be true intermediate algorithm
@korzo doesn't if (!collection[i].pre) and if (!collection[i][pre]) do the same thing?
korzo
@korzo
Sep 09 2017 18:44
@BrianWilliams28 no. You can't use variable with dot notation
@BrianWilliams28 it will look for 'pre' property, not pre variable as property
BrianWilliams28
@BrianWilliams28
Sep 09 2017 18:45
oh
maybe that's why its not working
yeah sure enough
i changed that and it worked
@korzo thanks again
CamperBot
@camperbot
Sep 09 2017 18:45
brianwilliams28 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 467 | @korzo |http://www.freecodecamp.com/korzo
diegoignacious
@diegoignacious
Sep 09 2017 18:48
@korzo, alright, im making a new one, but as im new on this, im confused. As im putting the code of my whole website on the pen. It also has js files, so what should i put there, if my template use like 8 files ?
korzo
@korzo
Sep 09 2017 18:50
@diegoignacious You can include js and css files in settings panel of given pen.
Or push it to github or on you server if you have one
@diegoignacious Or jsbin.com. You can paste there whole HTML with head part
@diegoignacious or https://www.bitballoon.com/ :)
Engjell Bislimi
@Engjell00
Sep 09 2017 19:02
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
in codepen what this code doesnt put all the nav bar in one side
iso
@iso1048
Sep 09 2017 19:40
@Engjell00 have you loaded bootstrap v4?
Engjell Bislimi
@Engjell00
Sep 09 2017 19:40
yeah but for now i won't touch the nav bar it doesnt seem to work
could you please take a look at this. @gothamknight
Is there any way to margin the text and the image to be sided by sided
since I know the text a 100% margin and the imagee too.. but even if i put 50% to each they won't align horizontaly
Rafael Monroy
@rafaelmonroy
Sep 09 2017 19:50
hey guys! just finished my twitch API project, let me know what you think :grinning: https://codepen.io/rafaelmonroy/pen/xLewBM
Tom
@moT01
Sep 09 2017 19:51
@Engjell00 change the display to inline or inline-block
Engjell Bislimi
@Engjell00
Sep 09 2017 19:51
@moT01 in css? I do the that?
Tom
@moT01
Sep 09 2017 19:52
yes
Engjell Bislimi
@Engjell00
Sep 09 2017 19:52
it doesn't work
@moT01 Sorry i am persistent i've been restarting the portefolio like 4-5 times lol
Tom
@moT01
Sep 09 2017 19:56
https://codepen.io/moT01/pen/MvNvPr
i wouldn't put too much effort into the portfolio if you plan on continuing to the next projects
you will just want to redo it all after a while anyway
Engjell Bislimi
@Engjell00
Sep 09 2017 19:58
yeah I guess but I feel like i'm missing some knowledge about bootstrap that's why I don't want to continue to JavaScript. I kinda feel comfortable with the HTML Structure and some basic CSS but the bootstrap is so confusing
I don't understand aligning this and that
diegoignacious
@diegoignacious
Sep 09 2017 20:00
yo @korzo , u still there ?
Tom
@moT01
Sep 09 2017 20:00
bootstrap is just predefined css styling
and you will learn more as you do those projects
diegoignacious
@diegoignacious
Sep 09 2017 20:02
yo, guys
Engjell Bislimi
@Engjell00
Sep 09 2017 20:02
@moT01 well after the portefolio it's Javascript wouldn't it be more confusing if I keep learning more?
diegoignacious
@diegoignacious
Sep 09 2017 20:03
what should include on this code, to make it this picture persisten trough scroll ?
<img src="505logo.png" style="padding-top:30px;padding-left:155px;"" style="width:20px;height:20px;" style="position: fixed;">
Tom
@moT01
Sep 09 2017 20:03
i dont think so
Johnny
@JohnnyBizzel
Sep 09 2017 20:03
@diegoignacious You should not repeat style tags
Tom
@moT01
Sep 09 2017 20:04
i mean it helps to know more but, i think your going to learn more that way
Johnny
@JohnnyBizzel
Sep 09 2017 20:04
<img src="505logo.png" style="padding-top:30px;padding-left:155px; width:20px; height:20px; position: fixed;">
diegoignacious
@diegoignacious
Sep 09 2017 20:04
@JohnnyBizzel , i've tryed to put them all together in one style tag, but it won't print the picture
Tom
@moT01
Sep 09 2017 20:06
@rafaelmonroy looks good, some of the text gets cut off when you shrink the window
could maybe add a few more channels?
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:07
@moT01 hmmm ok let me work on that.
Tom
@moT01
Sep 09 2017 20:08
looks good enough to be done with if you wanted, ...that's pretty minor
Engjell Bislimi
@Engjell00
Sep 09 2017 20:08
thanks @moT01 last question If I rewrite my code would it be better to use this https://v4-alpha.getbootstrap.com/layout/media-object/
CamperBot
@camperbot
Sep 09 2017 20:08
engjell00 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 844 | @mot01 |http://www.freecodecamp.com/mot01
Johnny
@JohnnyBizzel
Sep 09 2017 20:08
@diegoignacious Your styles make the image invisible on some screen sizes: https://codepen.io/JohnnyBizzel/pen/gxVxEP
Tom
@moT01
Sep 09 2017 20:09
@Engjell00 im not sure, i havent used a whole lot of bootstrap... i feel like its better to know how to do things with just css
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:10
@moT01 i added the users, as for the text, are you talking about the twicth streamers text? or ?
Tom
@moT01
Sep 09 2017 20:10
if you use bootstrap to build all your stuff but don't know how the css under it works, you won't be able to customize /modify things as easily.
diegoignacious
@diegoignacious
Sep 09 2017 20:12
@JohnnyBizzel oh i got it, thanks, but that's not exactly my issue. I want it to make it persistent trough the scroll. What should i write on there ?
CamperBot
@camperbot
Sep 09 2017 20:12
diegoignacious sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1752 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Tom
@moT01
Sep 09 2017 20:12
@rafaelmonroy the word streamers is the only one that went out of its container for me
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:14
@moT01 i think fixed it, can you double check if it still goes out?
Johnny
@JohnnyBizzel
Sep 09 2017 20:15
Tom
@moT01
Sep 09 2017 20:15
now it doesnt @rafaelmonroy
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:16
@moT01 cool, thanks for the feedback
CamperBot
@camperbot
Sep 09 2017 20:16
rafaelmonroy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 845 | @mot01 |http://www.freecodecamp.com/mot01
Johnny
@JohnnyBizzel
Sep 09 2017 20:16
@diegoignacious
#fixed {
  top: 5px;
  position: absolute;
}
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:16
@moT01 any tips on the roman numeral converter challenge? I have no idea how to even start it lol
Johnny
@JohnnyBizzel
Sep 09 2017 20:17
@rafaelmonroy Work backwards from the highest value to the lowest.
Tom
@moT01
Sep 09 2017 20:17
start at the number and work your way down to zero
Johnny
@JohnnyBizzel
Sep 09 2017 20:17
:P
Engjell Bislimi
@Engjell00
Sep 09 2017 20:17
@moT01 I know the basic css but the width and align dont understand
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:18
@JohnnyBizzel @moT01 how should I apply the roman value to the namber? create multiple variables?
Johnny
@JohnnyBizzel
Sep 09 2017 20:18
@rafaelmonroy That might work. Try it.
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:19
@JohnnyBizzel nice, thanks
CamperBot
@camperbot
Sep 09 2017 20:19
rafaelmonroy sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1753 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Sep 09 2017 20:19
@rafaelmonroy Good luck and have fun!
Tom
@moT01
Sep 09 2017 20:20
@rafaelmonroy if num>1000 { answer += 'M' num-=1000 }
Rafael Monroy
@rafaelmonroy
Sep 09 2017 20:22
@moT01 cool man thanks !
CamperBot
@camperbot
Sep 09 2017 20:22
rafaelmonroy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Tom
@moT01
Sep 09 2017 20:23
@Engjell00 align, meaning display types?
Engjell Bislimi
@Engjell00
Sep 09 2017 20:27
@moT01 yes https://codepen.io/EngjellBislimi/pen/JygygV As you can see with bootstrap I did it
diegoignacious
@diegoignacious
Sep 09 2017 20:27
@JohnnyBizzel , thank's for your help sir, i've been trying to
CamperBot
@camperbot
Sep 09 2017 20:27
diegoignacious sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
api offline
Johnny
@JohnnyBizzel
Sep 09 2017 20:28
@diegoignacious De nada
Engjell Bislimi
@Engjell00
Sep 09 2017 20:28
@moT01 but with css even if I did inline it doesn't work the image doesn't go there.
diegoignacious
@diegoignacious
Sep 09 2017 20:29
but it won't make it persistent, even copying the assets from your code
hey @JohnnyBizzel hablas español! jaja, gracias amigo, gracias a este chat he vuelto a seguir aprendiendo código
CamperBot
@camperbot
Sep 09 2017 20:30
diegoignacious sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
api offline
krckyboy
@krckyboy
Sep 09 2017 20:30

Can someone help me out, please? I am trying to make .text-landing go below the header, but I don't know how it's not going there. I even put display: block on both elements and it's not working out. Tried to add some negative margins and nothing. If someone could explain to me what's going on, I'd really appreciate it big time.

https://codepen.io/krcky/pen/YxmQLL

diegoignacious
@diegoignacious
Sep 09 2017 20:30
cada vez que lo intentaba y me quedaba atascado con algo, quiteaba.
Johnny
@JohnnyBizzel
Sep 09 2017 20:30
@diegoignacious Si, hablo español. ¡Buena suerte hombre! Hay muchos cosas de aprender.
diegoignacious
@diegoignacious
Sep 09 2017 20:31
@JohnnyBizzel , sure it has a lot of things to learn
im really new coding
anyway, would you checkout my website ? it is a portfolio, and i want the logo make it persistent to scrolling :( @JohnnyBizzel
can't do it
Tom
@moT01
Sep 09 2017 20:32
@krckyboy remove display: flex;
krckyboy
@krckyboy
Sep 09 2017 20:33
@moT01 Thank you!
CamperBot
@camperbot
Sep 09 2017 20:33
krckyboy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 846 | @mot01 |http://www.freecodecamp.com/mot01
Johnny
@JohnnyBizzel
Sep 09 2017 20:33
@krckyboy Why is header width 80%?
krckyboy
@krckyboy
Sep 09 2017 20:34
@JohnnyBizzel So it wouldn't take all the space of the screen. Removing flex worked for me, by the way.
Daniel
@DanJP2016
Sep 09 2017 20:34
class Ninja {
    constructor() {
        let _skillLevel = 0;
        Object.defineProperty(this, 'skillLevel', {
            get: () => {
                console.log('getting skilllevel...');
                return _skillLevel;
            }, 
            set: value => {
                console.log('setting skilllevel...');
                _skillLevel = value;
            }
        });
    }
}
Johnny
@JohnnyBizzel
Sep 09 2017 20:34
@diegoignacious Qual sitio web?
Daniel
@DanJP2016
Sep 09 2017 20:34
is this the only way to set private variables in classes?
diegoignacious
@diegoignacious
Sep 09 2017 20:35
@JohnnyBizzel i was updating the files, it is http://505.cl
image.png
that's the picture that i want to make it persistent @JohnnyBizzel
Johnny
@JohnnyBizzel
Sep 09 2017 20:37
@krckyboy How about flex-direction: column; ?
@diegoignacious Make the top section position: absolute
krckyboy
@krckyboy
Sep 09 2017 20:39

@JohnnyBizzel I'm trying to do without flexbox for now. Next website I will do in flexbox. Just learning now.

But since you mentioned it, what would flex-direction: column; do?

diegoignacious
@diegoignacious
Sep 09 2017 20:39
you mean, put the div of the picture inside of the div of the navbar and make it "position:absolute"?
@JohnnyBizzel
Johnny
@JohnnyBizzel
Sep 09 2017 20:40
@diegoignacious No se. Es complicado.
diegoignacious
@diegoignacious
Sep 09 2017 20:42
shit, i thought i would finally fix thattttttttt, anyway thanks a lot man @JohnnyBizzel
CamperBot
@camperbot
Sep 09 2017 20:42
diegoignacious sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
api offline
Johnny
@JohnnyBizzel
Sep 09 2017 20:43
@diegoignacious Buena suerte ;)
krckyboy
@krckyboy
Sep 09 2017 20:44

@JohnnyBizzel Thanks. I dunno what you did, but I did it, as well!

https://codepen.io/krcky/pen/YxmQLL

I just removed display: flex; from header, and also I could achieve the same result if I put .full-view-container on display: block;

CamperBot
@camperbot
Sep 09 2017 20:44
krckyboy sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1754 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Sep 09 2017 20:45
@krckyboy Making progress!
krckyboy
@krckyboy
Sep 09 2017 20:46
Man, photos have such a strong effect on websites.
Engjell Bislimi
@Engjell00
Sep 09 2017 20:46
ANYone can explain me what is the remainder javascript what does it mean
Tom
@moT01
Sep 09 2017 20:47
its what is left over after you would divide
5%2 = 1
13%5 = 3
pretty sure that's how it works
intcreate
@intcreate
Sep 09 2017 21:27
does anyone know how to center the orange div? https://codepen.io/anon/pen/wqVrmp
i want to support ie8 so i cannot use flex
Eric Weiss
@eweiss17
Sep 09 2017 21:31
  left: 33.33%;
  width: 33.33%;
gonna be rough depending on how mobile friendly you want
how to put a small border
to separate
but not to take all the width
Eric Weiss
@eweiss17
Sep 09 2017 21:45
separate what?..
Engjell Bislimi
@Engjell00
Sep 09 2017 21:45
do you see the border line. I wish to make the width of that border smaller not to take all the container space
Eric Weiss
@eweiss17
Sep 09 2017 21:46
the line above "i wish to have a good job with this" ?
Engjell Bislimi
@Engjell00
Sep 09 2017 21:47
yes!
i'm sorry If I use the wrong words!
Eric Weiss
@eweiss17
Sep 09 2017 21:48
i'll see what i can do
think i forked it when u were adding a list
I put your content in a grid, seperated it into two divsions, text and image
that way you don't have to use float: right.... which i really hate
Engjell Bislimi
@Engjell00
Sep 09 2017 21:59
thanks !! @eweiss17 there is so many ways to do it wow I am almost about to give up haha
CamperBot
@camperbot
Sep 09 2017 21:59
engjell00 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 594 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Eric Weiss
@eweiss17
Sep 09 2017 22:00
just made a change that centers that image better and got rid of the float
yeah i actually just discovered css grid recently.... it is so nice
i'll be on here for a bit if you have any more questions
Engjell Bislimi
@Engjell00
Sep 09 2017 22:04
@eweiss17 As you can see here https://codepen.io/freeCodeCamp/full/YqLyXB after his presentation he put's his projects below. to do that I know I need to create a img list but do I need to put it in the same container? because if I don't it will have a space between those 2
Eric Weiss
@eweiss17
Sep 09 2017 22:06
his projects are just screenshots
you can easily use one container for all the images,
Engjell Bislimi
@Engjell00
Sep 09 2017 22:07
hmm I mean like the 2 container are not separate like their is no white space between the 2
Eric Weiss
@eweiss17
Sep 09 2017 22:09
containers for what? the images?
do you see the hello
how can i put the border that touch the other one on top
like to put them together
Eric Weiss
@eweiss17
Sep 09 2017 22:12
the upper content has a bottom margin
by using developer tools you can identify this
dev tools.PNG
Tom
@moT01
Sep 09 2017 22:13
@Engjell00 you can use multiple classes on an element
Eric Weiss
@eweiss17
Sep 09 2017 22:14
see that orange section, that is the margin that is causing them to have a space between
Engjell Bislimi
@Engjell00
Sep 09 2017 22:14
so should i do *{ margin: 0 auto; padding: 0 auto;}
Eric Weiss
@eweiss17
Sep 09 2017 22:15
you can if you want, you will need to add margin and padding to everything if you want to do that
if you want margin or padding that is not 0 that is
Engjell Bislimi
@Engjell00
Sep 09 2017 22:16
is there an another way?
I will probaly destroy everything is I put margin at 0 lol
Eric Weiss
@eweiss17
Sep 09 2017 22:17
just do
```
.jumbotron {
margin: 0;
}
and change that hello div to a span, which is inline
Engjell Bislimi
@Engjell00
Sep 09 2017 22:18
ohh so in the span I could put the image list?
add a div
Eric Weiss
@eweiss17
Sep 09 2017 22:19
i was just solving the 'no white space inbetween sections' problem
Engjell Bislimi
@Engjell00
Sep 09 2017 22:20
well what I meant is Should I create a Div before the span or after
right now everything is in one <div container>
but i'm creating an another bloc
Eric Weiss
@eweiss17
Sep 09 2017 22:21
just do a div for your new block
Engjell Bislimi
@Engjell00
Sep 09 2017 22:21
so like
<span> hello </span>
<div class="bloc2" </div>
Eric Weiss
@eweiss17
Sep 09 2017 22:22
you want 'hello' within your page? i thought you were just using that as example
Engjell Bislimi
@Engjell00
Sep 09 2017 22:23
well I want Portefolio in the center of that block and underneath some random images
like the example I linked you
Eric Weiss
@eweiss17
Sep 09 2017 22:25
just do a whole new div
then have a div with that message
and a div with the images
<div> 
    <div>
         Hello
    </div>
    <div>
         images go here 
    </div> 
</div>
Engjell Bislimi
@Engjell00
Sep 09 2017 22:28
ohh perfect thank you!
thanks @eweiss17 Last question for the image I need to do <ul><li> </li> </ul> right?
CamperBot
@camperbot
Sep 09 2017 22:29
engjell00 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
api offline
Eric Weiss
@eweiss17
Sep 09 2017 22:29
try creating what you want and when u have problems just let me know
the communication is hard
Engjell Bislimi
@Engjell00
Sep 09 2017 22:35
also could you tell me how to put a margin between picture
thanks @eweiss17
Eric Weiss
@eweiss17
Sep 09 2017 22:39
in that example you should me they used the bootstrap grid system
Engjell Bislimi
@Engjell00
Sep 09 2017 22:45
if I got 4 picture I put col-sm-3 in each of them?
Eric Weiss
@eweiss17
Sep 09 2017 22:48
ya
that adds to 12 so it works
why does it do that
what if i put padding
on the .Image img { }
Eric Weiss
@eweiss17
Sep 09 2017 22:59
looks okay, what is wrong with it?
Engjell Bislimi
@Engjell00
Sep 09 2017 22:59
oh yeah I just fix it sorry thanks @eweiss17 I'm looking at different website and I just feel like i am copy pasting lol
CamperBot
@camperbot
Sep 09 2017 22:59
engjell00 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 595 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Engjell Bislimi
@Engjell00
Sep 09 2017 23:00
@eweiss17 You see my nav bar, is it JAvascript to give the function to scroll to the content when I click example Contact
Eric Weiss
@eweiss17
Sep 09 2017 23:03
if you do href="#contact"
and then give a div an id with contact
it will go there
Engjell Bislimi
@Engjell00
Sep 09 2017 23:05
i give the id to the div who has contact codes?
Eric Weiss
@eweiss17
Sep 09 2017 23:06
ya you already have the hrefs
give the id of contact to where u want it to take you
Engjell Bislimi
@Engjell00
Sep 09 2017 23:14
thank you @eweiss17 one last thing
CamperBot
@camperbot
Sep 09 2017 23:14
engjell00 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
api offline
do I use the Grid CSS to put the text side right to the Form?
Eric Weiss
@eweiss17
Sep 09 2017 23:16
you want your about information to be on the right?
Engjell Bislimi
@Engjell00
Sep 09 2017 23:16
yes!
I try to copy paste display: grid;
grid-template-columns: 80% 20%;
grid-template-rows: auto;
but it didn't work
Eric Weiss
@eweiss17
Sep 09 2017 23:17
in the future don't copy code without understanding it, it puts you into situations like this
don't use that grid for this
Engjell Bislimi
@Engjell00
Sep 09 2017 23:19
hmm i try float: right; didn't work aswell
if I put the width to the form at 50% I still have 50% place on the right so i dont understand what it doesnt go
should I use inline block?
Eric Weiss
@eweiss17
Sep 09 2017 23:20
do you know what inline-block means
Engjell Bislimi
@Engjell00
Sep 09 2017 23:21
it's like an another command that looks like float?
Eric Weiss
@eweiss17
Sep 09 2017 23:22
no
you seem to be guessing, i do used to do that a lot, you don't learn anything by doing that
you said you were copying code, if you copied this section, delete it and start from scratch
Engjell Bislimi
@Engjell00
Sep 09 2017 23:23
noo I copy what you gave me before when I ask you to put the image at the right side by the text at the beginning
  <form action="/action_page.php" class="form-group pull-right">
          <label for="fname"></label>
          <input type="text" id="fname" name="firstname" placeholder="Name">
              <label for="fname"></label>
              <input type="text" id="fname" placeholder="Email Adress">
              <label for="fname"></label>
              <input type="text" id="fname" placeholder="Phone Number">
              <label for="fname"></label>
              <input type="text" id="fname" placeholder="Message">
       <input type="submit" value="Submit">
  </form>
Engjell Bislimi
@Engjell00
Sep 09 2017 23:23
and also I ask so many people everyone gave me different code so I try to mix them
Eric Weiss
@eweiss17
Sep 09 2017 23:23
explain this all to me
CamperBot
@camperbot
Sep 09 2017 23:23

freeCodeCamp Wiki:

:point_right: The freeCodeCamp wiki can be found on our forum.
Please follow the link and search there.
Engjell Bislimi
@Engjell00
Sep 09 2017 23:24
each Label has a input that gives a name to the form which the action is to send an information
the input type can be checkbox or text?
place holder is what appear in the label
Eric Weiss
@eweiss17
Sep 09 2017 23:25
you are asking me or telling me?
you should be telling me
what do these mean
<label for="fname"></label>
i don't know
Engjell Bislimi
@Engjell00
Sep 09 2017 23:26
I am telling you but thats what I remember from the FFCC clan
fcc*
I have no idea
Eric Weiss
@eweiss17
Sep 09 2017 23:26
then why are they there
Engjell Bislimi
@Engjell00
Sep 09 2017 23:27
I copy that
Eric Weiss
@eweiss17
Sep 09 2017 23:28
when you copy code
and then don't know why it doesn't work how you want it
it'd be better to just redo it, then u understand how everything works
also in your code you have like 5 id's of fname, id's should be unique
Engjell Bislimi
@Engjell00
Sep 09 2017 23:37
I don't mind restarting it's my fifth one but I just don't understand how to position all my stuff
like I asked you before how to put the image on the right and the text on the left etc...
Eric Weiss
@eweiss17
Sep 09 2017 23:38
positioning is one of the hardest parts of designing like this
flexbox and CSS Grid are very helpful and I use them a lot, i'm sure other people have told you about them
Engjell Bislimi
@Engjell00
Sep 09 2017 23:39
actually you're the only one who show me the CSS Grid with that website
Eric Weiss
@eweiss17
Sep 09 2017 23:40
some1 told me that when i couldn't get flexbox to do what i wnat
that website looks real confusing but it helps you position elements where you want them, i'v found it very useful;
Engjell Bislimi
@Engjell00
Sep 09 2017 23:41
well example if I want to flex 3 images but they aren't the same size will flex be able to do it
Eric Weiss
@eweiss17
Sep 09 2017 23:42
is this what u wanted
Engjell Bislimi
@Engjell00
Sep 09 2017 23:42
or I put a the image all in a div and choose a height the same width
images not being same size is also difficult, i am making a site right now and i am just using placeholders, as it is a pain getting images that looks good at certain sizes
Engjell Bislimi
@Engjell00
Sep 09 2017 23:44
thanks @eweiss17 that's what I wanted but anyway I will restart all over again tomorrow. I want to be sure to know html css before going to javascript
CamperBot
@camperbot
Sep 09 2017 23:44
engjell00 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
api offline
Eric Weiss
@eweiss17
Sep 09 2017 23:45
i wasn't telling you to restart
i was saying for just the form
it looks decent right now
Engjell Bislimi
@Engjell00
Sep 09 2017 23:46
Well I want to retry with the flexbox because images and position triggers me
Eric Weiss
@eweiss17
Sep 09 2017 23:46
to get them to the right I just did
form {
   text-align: right;
}
you could also do center and they would be centered
Engjell Bislimi
@Engjell00
Sep 09 2017 23:47
oh nice
wait but what if the text was at the left side of the form?
you'll do text-align left?
Eric Weiss
@eweiss17
Sep 09 2017 23:47
well it was left by just doing nothing, but i'm sure you could still do text-align: left
Engjell Bislimi
@Engjell00
Sep 09 2017 23:48
i meant like not to put it on the bottom of the form but really sided
Eric Weiss
@eweiss17
Sep 09 2017 23:49
that ? "If you want to contact me I won't reply ,I will be on a roadtrip to Jupiter and I won't comeback in about 3 millions years. Thank you"
you want to the left of the form?
Engjell Bislimi
@Engjell00
Sep 09 2017 23:49
yes
Eric Weiss
@eweiss17
Sep 09 2017 23:50
we can do that with flexbox
Engjell Bislimi
@Engjell00
Sep 09 2017 23:51
ohh @eweiss17 thanks you! I will leave now I really appreciate your help! have a nice day
CamperBot
@camperbot
Sep 09 2017 23:51
engjell00 sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
api offline
Eric Weiss
@eweiss17
Sep 09 2017 23:52
i am about to do that hold on