i think they're all defined and ready to use when you put them in curlys
hi,
using hashtable how to find which number is ocurring how many times for example in 33767999we need to 3 has occurred 2 times, 7 two times and 9 three times
@texirv0203 - did you get the idea of my first part / suggestion that I posted in the other room?
@texirv0203 - it was to convert a value that is a number to a string, then split it. That gives you access to an array of the individual digits.
var num = 33767999;
num.toString().split('').forEach(
// you write a function here
);the function within the .forEach() method would be able to access the individual elements of the array, and build the hash in an object.
you could also take that same array, after the
.split() and use a for loop to access the elements. I'm not sure what your level of exposure is to various code functions in JavaScript.
@khaduch hey how to build hash...I have never used hash before :(
@texirv0203 - in this context, I would say that you need to make this "hash" as an object. Each key/value pair in the object will be a key consisting of one of the digit values in the string, and the value would be the number of times that it occurs in the number. So you would want to end up with an object, for your example digit string, that looks like this:
{3: 2, 6: 1, 7: 2, 9: 3}
3: 2
6: 1
7: 2
9: 3Are you familiar with creating objects in javascript?
anybody using vim?
@DanJP2016 - I haven't used it in a long time!
cool, I was wondering how to set it up for python and javascript or if it was even worth using it over sublime or vscode
@DanJP2016 - try this article: https://realpython.com/blog/python/vim-and-python-a-match-made-in-heaven/ - seems like that author thinks it's a great thing!
anyone familiar with python?
@evan17gr Yes
@khaduch no...how to achieve it :(
it doesnt print anything
ok, one sec.
alright thanks!
@evan17gr Ok, I've got it printing something, not sure if it was you need. (You had an infinite loop before by the way)
n = int(input("Enter a positive integer to retrieve all the values of the Fibonacci series that correspond to this input : "))
def fib(n) :
v1 = 0
v2 = 1
while n > 0 :
for i in range(n):
v1,v2 = v2,v1+v2
print(v1, v2)
n-=1
fib(n)
alright cheers i ll try to make it work
:thumbsup:
Hey, I'm trying to run
sudo install learnyounode -g in the cloud9 terminal in my blank workspace and it doesnt work :/
It should be
npm install learnyounode -g I think @TylerDelRosario
@edwin0258 same error occurs
module.js:471
throw err;
hmm, let me try it myself. One min. @TylerDelRosario
@TylerDelRosario Did you change the workspace before you tried installing in any way?
nope its a blank
Can you screenshot your cloud 9 interface? @TylerDelRosario
nvm I can open your workspace on my side.
@texirv0203 - these are some basics about how to make an object that you need to use for this hash / number counter.
var myObj = {}; // initialize an empty object
var anyNum = 8;
myObj[anyNum] = 1; // after this, the object should have an entry with a key of "8", value of "1"
myObj[anyNum]++; // after this, the object should have an entry with a key of "8", value of "2"
anyNum = 5;
myObj[anyNum] = 1; // after this, the object should still have the entry for "8" and a new entry with a key of "5", value of "1"
myObj[anyNum]++; // after this, the object should have an entry with a key of "5", value of "2"if you take that code and experiment with it, for example in a browser devtools console, you can see what's happening. Or you can go to http://pythontutor.com/javascript.html and plug it in, and run it.
@texirv0203 - that's showing the basics of what you will eventually want to have coded to solve your problem - getting the individual values into a variable where you can use them to accumulate your data in the object.
I have some questions but one question at a time.
In my CSS, the .navbar-brand img connects to my logo in the top left corner of my bootstrap navbar. Its off center in that corner. Does anyone know how to position the logo correctly? Let me know. Thanks
Thats the navbar-brand img selector in my CSS
@rodchsm
.navbar-brand img {
height: 50px;
margin-top: -15px;
}Try this. Because there is a lot of padding in actual image I had to use a negative margin.
@rodchsm - I got it to center just by cleaning up the code in your CodePen - removing the
<html>, <head> code into the proper places in the CodePen interface. Then it works...
@rodchsm - here is a link to the CodePen that I edited from yours and forked.
@khaduch thanks.
rodchsm sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3496 | @khaduch |http://www.freecodecamp.com/khaduch
@khaduch i will check it out after this
@edwin0258 how did you figure out there was a lot of padding in the image
@rodchsm - I"m not sure what in particular might have been causing the issue. It was just my first impression to move the external libs into the proper places for CodePen's template-based system.
I opened the image by iteself. It's ok though, I think @khaduch 's solution is better. @rodchsm
@edwin0258 @edwin0258 I have one more question. Why isnt my .backgroundheader image fitting all the space. In other words, why is the full image of the picture not show up to cover the h1 and the button. Is there a solution?
@rodchsm - what might have been going on is that when you include the links for the CSS and JS code in the HTML panel is that CodePen will generate the HTML page and things will get loaded in the wrong order. For example, your custom CSS will get loaded in the
<head> section, but then the HTML section will be inserted into the output HTML code and probably conflict with your custom settings. By putting the external CSS in the CSS config panel, things get loaded in the proper order. You might be able to see what is going on if you load your page as it is now, and do a "View Frame Source" for the output panel.
@rodchsm Only way I can think of is to remove background-attachment and add background-position with a value of center. But in order to cover the area you've specified it has to cut off some of the image.
@khaduch ok its my second time using codepen. Thats great information especially for the first question. However even in dreamweaver the CSS for the .backgroundheader is off. Do I need to use a background-size: contain; or something else to expand the image fully. I have been trying for an hour to fit that image.
@edwin0258 theres no way to fit all? :(
There are ways. Like making the container holding background image a larger size.
@rodchsm - so you want the full image to be in the rather small space at the top of the page?
@khaduch yes i was going to have it look like my old site techhut.bigcartel.com.
@rodchsm - if you shrink the width of the browser window to ba as small as you can get it, you'll see that the picture in the background will resize to be more-or-less showing the full image. The main problem is that the proportions of the image and the area that you are trying to fill are way off.
@edwin0258 Ill try that.
@khaduch oh ok! So, the image's dimensions are the wrong size for a regular browser?
*a browser
@rodchsm - yes - your old site had a front page that filled the screen or at least had a much larger size so the images were able to be shown completely.
@khaduch @edwin0258 alright thanks guys. Ill get to work. Is there anything else I need to know?
rodchsm sends brownie points to @khaduch and @edwin0258 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 812 | @edwin0258 |http://www.freecodecamp.com/edwin0258
@rodchsm - some of the settings for the old site for that top section, the selector
.slideshow div.featured_holder {
background-color: rgba(0, 0, 0, 0.3);
background: url("//cache1.bigcartel.com/theme_assets/91/1.4.10/images/overlay_pattern.png");
background-repeat: repeat;
background-size: 4px;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}Has the height and width settings set to 100%, so it fills the screen.
hello there!
@khaduch I threw the 100% for width and height into the .backgroundheader declaration section but it seems the image is locked into the div class="backgroundheader" section. Any suggestions?
Have you done the wikipedia viewer project?
@rodchsm Height of 100% doesn't work, use something like 100vh.
@edwin0258 is that why? I used 350vh and it worked. ha
Yeah :) @rodchsm
@edwin0258 ok so what if I wanted to go mobile with the viewport height would mess up the mobile page. therefore, would I just code a seperate page for mobile or something like that/
I suppose you could use a @media query to change the height if the size is mobile. @rodchsm
Hello all, I am working on a a bootstrap task and although I have the challlege right It feels as if a div tag is missing. Am I over thinking it? Would anyone mind checking over the code?
@rdavidson3 post your code or link here. Maybe someone able to help
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
<div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
</div>
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
Funny enough after reading it over enough I see where I became confused. that first
<Div class= "row"> isn't a part of the <div class="col-xs-*>. As I read it , It's a box within a box within a smaller box?
<Div class= "row"> isn't a part of the <div class="col-xs-*>. As I read it , It's a box within a box within a smaller box?
can anyone suggest my any website to download web development books
for free
like books of html css and javascript
some of the best book for js are free to read
any website ???
and You Don't Know JS
to download free material
@rdavidson3 nothing wrong with your code
yes i know js
but i want to master it
as well as html and css @longnt80
have you read You Don't Know JS?
what?
ohkk
@1rjun its a book,
suggest me
its link to download
thats written by kyle simpson is'nt it?
yep
cool, may have to check that out. watched some of his videos on front end masters, good stuff
@padunk Thank you for checking it over. I figured it out. I need to figure out a system to make the code more organized.
rdavidson3 sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @padunk |http://www.freecodecamp.com/padunk
@rdavidson3 np, use tab, indent and space to make it easier to read
@rdavidson3 - the other thing to do when posting code here in the chatroom is to use the Markdown format, which is, basically, putting a line with only three backticks on it ``` before and after your code block, and you can read the documentation on the freecodecamp forum: https://forum.freecodecamp.com/t/markdown-code-formatting/18391
Thanks for the tip @padunk I'm attempting to break up the code in that way now. Thanks for the link @khaduch :)
rdavidson3 sends brownie points to @padunk and @khaduch :sparkles: :thumbsup: :sparkles:
api offline
:star2: 3497 | @khaduch |http://www.freecodecamp.com/khaduch
this is my github repos
can anyone help me
to sort out my problem in the article <section >tab
def ajrun:
Hi all, got a question here
in these codes, why was html += used?
this is from the JSON challenge
@Seahchye its same as
html = html + .....
@Seahchye just a shortcut for additions
I got it, there is an empty html container that adds these details in
@sorinr thank
seahchye sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1354 | @sorinr |http://www.freecodecamp.com/sorinr
Does anyone know how to change my bootstrap .navbar into a different color? #1c7089
@rodchsm delete
navbar-inverse class and put your backgound color
Hi, guys. So I'm working on my Twitch.tv app for the front end course and the Twitch API needs an OAuth token. I don't think it's a good idea to have my OAuth token on full display in my CodePen. Is there any workaround?
I don't want to hardcode that JSON object either. That's just bad practice and it's hacky
Any help would be awesome
Please DM me so that I can find the message easily. I know this chat room gets extremely busy
@rodchsm or you may add this to css:
nav.navbar-inverse{
background-color: #1c7089;
}to override the default BS bg color
@Ryan-ED there's a workaround https://wind-bow.glitch.me/ step 9 in the instructions
Hello there. I study Frontend Developer couse. Could somone review my first tribute page on codepen?
@Grimmeu for the
col-md-xx to work properly in BS you need a parent element with class row. I also recommend you to change the content to english. i'm sure you will find info in English about Alexander Nicolaevich on wikipedia
@sorinr This is my first project so i decided to do it with my native language. I get your point about language. Should i use parent with class 'row' every time i want to use class 'clo-md-xx'?
@Grimmeu yes. bootstrap 3.3.7 is structured that way. a parent div.row is divided in columns by using columns(col-yy-xx)
@Grimmeu read here on bs 3.3.7 grid system
@sorinr Get it. Any other suggestion to improve?
@Grimmeu Maybe you could remove the cursing words from the page title. If you look for a developer job later, recruiters google things about you and such things can offend some people.
@Masd925 :+1: I don't know why but i most of the time don't look at the page title. i've noticed it after you pointed it out :)
@Grimmeu i would also make the ul on biography part like
<ul class=" col-md-10 col-md-offset-1"> to give more spread width to the text
Hi all, I'm working on rewriting my portfolio milestone in React but I want to leave my other milestones as is and link to them in my app. I'm using create-react-app and I've got my other static HTML/CSS/JS files stored in a structure like e.g. src/portfolio/twitch/index.html. Does anybody know the best way to route to them? If I create a normal <a href="./portfolio/twitch/index.html"> then it just redirects me back to my React app. I looked into React Router but it seems to exclusively want to render a component, which my static HTML pages are not. Any advice on this would be much appreciated.
@JheeBz Hi, i never doing that before, but since React is made by component, why don't you link twitch component into your portfolio? you could use react-router Link and your twitch project as a component
@Grimmeu It looks like the example, nice work! Do you think you can make the same exact page WITHOUT bootstrap though? That's one way to test whether you understand HTML and CSS well enough before moving on to JavaScript.
@JheeBz take a look to the react-router
I've looked at React Router but it only seems to render React Components. These are static HTML pages.
so what? you can define your static pages as a react component
How would you recommend doing that?
your static page is not made with React?
They are not. They're my already completed front-end milestones.
i would just write the static html page as a react component and instruct the react-router what component to inject nto my page base on the route match
@JheeBz then a simple <a> tag to href to your static page will go fine
So copy and paste the HTML into a React component? That's awfully messy, won't I have to de-render the rest of the page?
I just want to open them in a new tab.
then you may use the <a>
Well that's what I've tried to do, but it just renders my React app at the path /portfolio/twitch/index.html.
Hey everyone, i've almost finished my jQuery calculator. Can someone explain me why the last three buttons don't align with the others ? I think there is some margin somewhere but i can't find it. https://codepen.io/Ophe/pen/JOWQJW?editors=1111
which three buttons?
three bottoms
ok wait i try to fix.
@Ophellia just by looking at the calculator, it appears the zero button is to large.
The end of zero button does not line up with your other buttons, 2 & 5 for instance
Looks like I needed to include my static pages in /public. Thanks for your help @sorinr
jheebz sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1355 | @sorinr |http://www.freecodecamp.com/sorinr
hi guys i want to creat a facebook page ( freeCodeCamp Kreis Borken ) why its not working ?
using bootstrap it should take 50% of the space available, like button 1 and 2 take 25% each other
can any one here help
@Ophellia try this
@Ophellia Oh yeah but it still didn't solve your problem my bad
since screen sizes vary
i've nested my 0 button inside a div with class col-6 which take 50% of the width, and then modify the padding inside the div
try to avoid this type of things :D I did the same mistake back then
hi everyone i just want to toggle many colors but it's only toggling one color and i dont know what wrong with my code
_
_
@leet-hacks your code toggle between white and #c...
yeah but i want it to toggle between the two colors
@heroiczero tx
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2056 | @heroiczero |http://www.freecodecamp.com/heroiczero
@leet-hacks which colors? Than u need if true show colors[i] if false show colors[i+1]
If u want random colors, put your colors in an array and use math.random
var colors = ['white', 'orange', 'blue'];
var color = colors[Math.floor(Math.random()*colors.length)];
console.log(color); something like that and u dont need isColor variable
@leet-hacks Your code always selects the last color in the array. Your i variable you don't need a loop but a global idnex variable if you want to select from the array.
Or use the random code as described above
Or use the random code as described above
@rajarahull what is the error ?
Thanks @padunk it working fine now
leet-hacks sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @padunk |http://www.freecodecamp.com/padunk
but i thought i would loop through the colors and change the background color to the color i looped
@ashwins93 yes that is right
hello guys i need some help with a background route it is driving me crazy
@leet-hacks np. u dont need loop for that
Hi all I have just finished the first part of a small project with free API. Any feedback is appreciated https://alessiochiffi.github.io/snapnews/
Hi all I am doing the random quote machine challenge
but i am not sure how to proceed from here
@alessiochiffi nice ui, a link to the news is even better. What news company after financial times? The logo didnt show up
@Seahchye If you have confirm that you are getting the quotes (maybe use console.log in your forEach)
You can then examine the json and determine what string values you want to put into your page.
you can use the browser DOM API or something like jquery to do that
You can then examine the json and determine what string values you want to put into your page.
you can use the browser DOM API or something like jquery to do that
@padunk thanks! I have inserted a placeholder for articles without images
alessiochiffi sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 391 | @padunk |http://www.freecodecamp.com/padunk
@leet-hacks Each click drives the next color - so you don't need a loop.
can anyone tell me why this route is not working please
@sjames1958gm How do i confirm? clicking on the button?
@RogeMateos is it background-image
@Seahchye Not sure I understand your question.
Assume you have global
var colorIndex = 0;
in your click handler
Assume you have global
var colorIndex = 0;
in your click handler
if (isColor) {
// set color to white
} else {
// color is colors[colorIndex]
colorIndex = (colorIndex + 1) % color.length
}
isColor = !isColor;
@RogeMateos src looks like a server side directory - looking at your dist directory there is no
src
@RogeMateos has a file called 'src', the code might be confused here
i also tried ../img/background_vinyl.jpg
@sjames1958gm I set up the codes through FCC JSON lessons, but I dont get what is colorIndex
Hello! How can I implement scroll triggered animation?
thanks @jtan3
ryan-ed sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 463 | @jtan3 |http://www.freecodecamp.com/jtan3
@Seahchye colorIndex would replace your
i in the for loop - a global index into your colors
@Bhoomi-Github Lil bit of jquery :-)
@alpox Hi! Yes I was googling it but did not find anyhting specific. I want an image to appear on scroll and settle with overshoot kind of animation
@Bhoomi-Github Take a look at http://api.jquery.com/scroll/ :-) and https://api.jquery.com/scrollTop/
Hey guys! Newbie here.
Just finish my first project (The tribute page). Could someone review ?
https://codepen.io/sarkioja/full/zPZoLY
Tks!
Just finish my first project (The tribute page). Could someone review ?
https://codepen.io/sarkioja/full/zPZoLY
Tks!
Hey folks, I get this error in my react application:
POST http://localhost:4000/graphql 500 (Internal Server Error)
HTTPFetchNetworkInterface.fetchFromRemoteEndpoint @ apollo.umd.js:520
(anonymous) @ apollo.umd.js:535This is my networkInterface:
const networkInterface = createNetworkInterface({
uri: "http://localhost:4000/graphql",
opts: {
credentials: "same-origin",
mode: "no-cors" //remove this for production => Security!
}
});Did I declare something wrong? Without the anti cors option, I get an cross-server-error.
@sarkioja looks good. Add
target="_blank" to the link so that they work properly when being clicked on
@Gh05d Tks for the heads up! I forgot about that. Already update the code.
Hey Guys, I am new to this Group
@imonboss Hi.
Hi @Masd925
@imonboss - hey, welcome to freeCodeCamp (if you're new to the program) and welcome to HelpFrontEnd
Yes I am brand New to this world @khaduch
@imonboss - welcome aboard!
Thanks Captain @khaduch
imonboss sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3499 | @khaduch |http://www.freecodecamp.com/khaduch
@imonboss :)
@khaduch :D
Hope I will have all the Noob Help I need from this awesome community :)
good to have new people coming into the chat rooms - there used to be a lot more activity here, it's a good learning environment, many good contributors to help out here.
Happy to be part of this nice community! Hopefully I will learn many new things
How can I use the link in 27th Line JS to add background image or icon to https://codepen.io/lion18/pen/yzrKQw
which link if u can send/
hi all any ideas on how to split multiple results from wikisearch into paragraphs in my html on the fly?. that is I want my html to know the amount of search result and then create that amount of paragraphs and then slot each results into their respective paragraphs in no particular order?
how are you getting results / or what do results come as
i had single div and i would append each item to
@tundeiness In the Ajax success code block —
success: function (data) { ... } — you could create an array to hold the results of data.query.pagesand then use the length of that array to create a loop which creates the right number of paragraphs, each with one of the results.
Hello everyone :)
@maxv :wave:
Hello guys, can someone help in understanding a little problem ?
@bytao7mao You post the problem you have and someone will assist if they can
I have the following :
"Create a view consisting of a list of battles. The list should be:
-filterable by attacker and /or defender country;
-searchable by country (eg. I search for italy, the list should display only battle with italy as defender or attacker)
UI/UX bonus points!
API: www.exampleee.com/en/etc
I have a json file and from what i understand i have to make some API calls ?
@bytao7mao The link leads to an error page
the link is fictiv
I understand that : if i make a search box and it returns the country with the battle as defender or attacker winner or what ?
hello everyone...I'm working on my portfolio website and need some help.. the link is https://ingundela.github.io/portfolionew/ I want to change the color of the navigation menu from white to light grey but when I target the nav-item a it changes the all list and the spyscroll does not work.. please help.. all I want is just to change the color white and also have I hover it it changes to the yellow as #navbarNav .nav-link.active {
color: #FDCD3B;
}THANK YOU
color: #FDCD3B;
}THANK YOU
Hello everyone, I 'm having a little trouble centering an image using bootstrap3. I've tried a number of different code strings but no luck. Any one have an idea what I am doing wrong?
@rdavidson3 Already tried to nest the image under a div with class="thumbnail center" ?
@rdavidson3 Please upload code example in codepen so we can play with it
This is the latest attempt. (FYI I'm still not sure how to use code markdown as was recommened last night)
<H1 class="text-center"> Nikola Tesla</H1>
<div class="container">
<div class="col-sm-5" >
<img class="img-responsive center-block" src= "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/03/Tesla-compulsions-and-thinking3.jpg">
</div>
</div>
<div class="text-center">The Master of Electricity</div>
@maxv @sarkioja thanks for the response. I tried creating another <div> with class thumbnail center but, alast still not center.
rdavidson3 sends brownie points to @maxv and @sarkioja :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 113 | @sarkioja |http://www.freecodecamp.com/sarkioja
@CodeDraken beat me in codefights :(
hello everyone...I'm working on my portfolio website and need some help.. the link is https://ingundela.github.io/portfolionew/ I want to change the color of the navigation menu from white to light grey but when I target the nav-item a it changes the all list and the spyscroll does not work.. please help.. all I want is just to change the color white and also have I hover it it changes to the yellow as #navbarNav .nav-link.active {
color: #FDCD3B;
}THANK YOU
color: #FDCD3B;
}THANK YOU
Hey guys, I’m trying to understand the difference between state and props, I’m not sure I’m getting it despite searching it up. Would anyone care to explain?
@ingundela In your css you have the active link and brand as yellow. You have a navbar collapse a, but not an nav-item a{ . Also you have a 404 error on your Roboto fonts.
hi :wave:
@leanjunio you can change state, and you can't change props
every component can receive props, and only statefull components have their own state
inside component
@leanjunio Additionally, props are meant more to inform the component on how to behave, whereas state has to do more with, well, the state of the application, ie things are likely to change as the user interacts with them.
A basic example of how props would be used where state is not would be if you create a button component that could be any color. Maybe you pass the color as a prop when creating a form. Not a great example but hopefully you get the idea :+1: