FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Patirck

@SomeRandom42

@alpox you know I think my issue is I have no idea how javascript interacts with html / css. I think I have idea of how to write the array (from the exercises) but being thrown into the wild . I am not sure how to make the java script work. in my knowledge the java script bod is just sitting in code pen

Jacob Leatherwood

@dadleatherwood

@alpox That one will stay with the About Page title.

@alpox I just want to get the icons to the right of the page.

alpox

@alpox

@SomeRandom42 The interactions happen through simple function calls. You probably want to use jQuery for this kind of interaction since its presented by freecodecamp

For access special objects on the page you use the html class or id of an element

If you want to access an object with the id "test": $("#test") represents this html object

if you want to access all objects with the class "active": $(".active") represents all these html objects

If you want to set the text of an element: $("#test").text("You put some new text in this element here");

This would set the text "You put some new text in this element here" inside the element with the id test

@dadleatherwood Ah alright. you probably want to set another class to that div then though (additionally) since col-md-6 is not very specific and gets reused since its declared by bootstrap

Patirck

@SomeRandom42

@alpox I am kind of getting it but do you know a good source with examples? I can play around with it to wrap my mind around it , but hard to do with moving chat bar

alpox

@alpox

@dadleatherwood Then you can set it position: relative too and right: 0;

@SomeRandom42 Well you can always play in codepen

@SomeRandom42 Just create html there, maybe just a div in the html panel

Then some simple javascript for testing this

@SomeRandom42

<div id="test">
</div>

In the html panel

$("#test").text("You put some new text in this element here"); in the javascript panel

Go sure to add jquery in the javascript panel in settings (top right of page)

Patirck

@SomeRandom42

@alpox Thanks I will play around with this for a little but and come back thank you :! so much!

CamperBot

@camperbot

somerandom42 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:

:cookie: 737 | @alpox |http://www.freecodecamp.com/alpox

Jacob Leatherwood

@dadleatherwood

@alpox Okay, will you take a look?

@alpox https://codepen.io/dadleatherwood/pen/BpLegq

Patirck

@SomeRandom42

@alpox If i wanted to show an element of an array from javascript onto html how would I do that?

alpox

@alpox

@dadleatherwood Sidenote:
Put

html, body {
    padding: 0;
    margin: 0;
}

in your css. You have a white border all around

@dadleatherwood Looks right otherwise i think :-)

@SomeRandom42 The full array or one of its elements?

Jacob Leatherwood

@dadleatherwood

@alpox I would prefer the icons at the bottom to be on the same "row" as the H1. Does that make sense?

Patirck

@SomeRandom42

@alpox one of the elements

alpox

@alpox

@SomeRandom42 Well if you have an array say var arr = [1,2,3,4] You can access its first element by arr[0], second element with arr[1] etc. until arr[arr.length-1] for the last element.
If you now want to show it on page you can therefore use:

var arr = [1,2,3,4];
$("#test").text(arr[0]);

Patirck

@SomeRandom42

@alpox question ? If i want to look up more how to use the $ sign is it JSON? I want to read some more and mess around in code pen with out asking here every couple of minutes when I have a question?

alpox

@alpox

@SomeRandom42 When you have questions about javascript you'd better go over to HelpJavascript anyway :-) Now i can answer you though.

You have to distinguish JSON and Javascript.
JSON is a text representation of objects Means a special format used to transfer data. It allows to store data in a well readable textformat and even send it through the wire as this.

Javascript objects are datastructures of javascript to represent data. It can be converted to JSON and JSON back to javascript objects.

I know that FreeCodeCamp and its users really often don't properly distinguish that and use the term interchangable which is not appropriate and confuses people.

The sign $ stands for a javascript function, its an abbreviation for jQuery --> $ = jQuery where jQuery is a javascript library which simplifies some tasks like interaction with the HTML DOM.

You find the documentation for jQuery here: http://api.jquery.com/

Its not easy to understand jQuery in its fullest as a beginner. What you have to know is that you always use it with the dollar sign followed by the braces to call the javascript function. Then you put there a selector. $(selector) which selects html objects.
Then you can do manipulations on these objects with predefined manipulation or data retrieval functions defined by jQuery in the link i sent you.

You find a lot of resources about jQuery everywhere on the web, you just have to google jquery <task>

@SomeRandom42 I hope that sums it up :-)

alpox

@alpox

Hmm i should copy that stuff out for standard answers here because that is stuff which people often don't get to know here but they should

Patirck

@SomeRandom42

@alpox It does! thanks so much, it helps me know the terms to look for and what i need to look at. My problem before you helped me was I know what i need to do but did not know what to look for. Now I have the basis and the name and even something to play around with to get an idea of what is going on! That helps so much and keeps me from wanting to say quit . Thanks a Million!!!

CamperBot

@camperbot

somerandom42 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:

:warning: somerandom42 already gave alpox points

pingrivero

@pingrivero

Is Bootstrap still being used in the workplace or ReactJS/Angular became the generally used framework in companies?

alpox

@alpox

@SomeRandom42 You're welcome :-) I'm glad i can help like this. Thats why i'm here, to help ;-)
I know that it can be very confusing in the beginning and noone cares to clearly define stuff here.

@pingrivero Don't mix up different kinds of things.
Bootstrap --> CSS Framework to easily create website designs.
Angular --> Fully fledged javascript framework (Going to be deprecated soon)
ReactJS --> Lightweight component framework (Creation of small web components) without any additional stuff like state containers or anything. Just components.

pingrivero

@pingrivero

@alpox thanks for the clarification!

CamperBot

@camperbot

pingrivero sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:

:cookie: 738 | @alpox |http://www.freecodecamp.com/alpox

Jamie Francis

@jfrancis2

@alpox nice explanations :smile:

alpox

@alpox

@jfrancis2 Uh thx :D

CamperBot

@camperbot

alpox sends brownie points to @jfrancis2 :sparkles: :thumbsup: :sparkles:

Where communities thrive

People

Repo info

Activity