Can someone help me with the Random Quote Generator? I am trying to figure out how to grab a new quote by clicking the "New Quote" button but am unsure how to add the
click() method in jQuery to my code. You can find my pen here: http://codepen.io/twhite96/pen/9b61fc44a276edb9bbb405cac84cf938?editors=1111
@codingisfun11 can you point me to the challenge you are doing?
@twhite96 You need to create a click event on the button which will then trigger the AJAX call which you have currently running to replace text in the <p> tag. Something like
javascript
$(“#button-id”).click(function() {
// do somethting here
};
You’ll want to wrap that in a document ready call to make sure the element is on the page before it is called @twhite96
@bsandusky and add the click event?
I tried that but I am not sure where to put it.
@twhite96 You can, however, you need a way to call the AJAX call. Right now it’s executing because it loads on the page. You may want to wrap that in a function itself, so that you can call it when the document loads AND on the click event
@codingisfun11 I think you need to use the sentence that they gave you, and make the slashes at the double quotes.
@twhite96 I have a function called “getQuote()” which calls the AJAX call to snag a quote and then update the page. I can call that when the documen loads or when i click on the button. https://codepen.io/bsandusky/pen/oLNRdr
@twhite96 Then, wrapped in document ready, I have a line
$("#generate").on("click", getQuote); which calls the getQuote() function when the button is clicked
@Ryanwfile Your issue is in your game function. You try to check if "start == true", but you don't have access to the start variable. When you do that check, your start variable is only defined in "starter" function. Made the fix on this codepen: http://codepen.io/Cory2911/pen/VjxPkL?editors=0010
@twhite96 It really does get a little easier. Just remember to open your document, create a get function and then at your button the click to go back to the original get function.
@Rom2711 on line 14, what is start wanting to do?
@KoniKodes I was was mistaken, there were some other problems as well. Like where the event listener is being added
@Rom2711 Thank you very much for the help, I thought the start variable was a global so it might work that way. I am looking at your code and it definitely seems like an improvement but the beeper() function still doesn't seem to be executing when start is clicked
ryanwfile sends brownie points to @rom2711 :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @rom2711 |http://www.freecodecamp.com/rom2711
@Rom2711 Yes, I can see that. I didn't take too close a look, that was what first caught my eye. I'm not there yet, but keeping open to possible future solutions to help with were I am.
@KoniKodes I dont need ot use that string it says I need to work with the provided string.
@codingisfun11 I'm sorry, I only saw myString with an ahref in it.
@codingisfun11 Which string do you see as the provided string?
@KoniKodes
@Ryanwfile Instead of doing your check on a variable state (started), you could just change your starter function to something like this:
function starter (){
$('#start').on('click', beeper)
}
function starter (){
$('#start').on('click', beeper)
}
That would tie your beeper function straight to the starter function
or at least your start button
@KoniKodes what should I do next.......I have 2/3 steps correct
@Rom2711 Ok that seems best I will do that, thanks again for the help
ryanwfile sends brownie points to @rom2711 :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave rom2711 points
@codingisfun11 I'm sorry that I don't understand why you have a var with an ahref instead of a string. It seems to see that you have done that, but I can't see the single quotes. Perhaps you can type the second orange sentence and see if that works.
I need some help with my navbar, it just isn't going flush with the edge of the page
body {
background-color:grey;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding-top: 20px;
padding-bottom: 20px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
.active {
background-color: #4CAF50;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
overflow: auto; /Enable scrolling if there is too much content./
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
margins and paddings are both 0
@sammytheindi Pretty sure adding 0 margin and padding on your body element should fix it, I think
My HTML is:
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
and it's fixed
@sammytheindi I think it will help to go to the code pen Settings in upper right corner. Under CSS add Bootstrap (from the dropdown).
@sammytheindi Under JS settings add Bootstrap js. Bootstrap helps with the nav-bar
Good! I'm looking around for inspiration on personal portfolios
When I find one I like, I sketch it out on paper. Then I'll pick my favs and try to code it into reality
@AaronBakerUT Sounds like a good plan. There are a lot of creative campers in this group. You should be able to find something you like that you can bring your personal touch to.
I'm open to viewing portfolios if anyone would like to share!
@AaronBakerUT Cool to see a fellow austinite on here, Aaron! I can't help you much with the design stuff, I couldn't design myself out of a plastic bag lol
haha! I love the design side of things. That's what keeps me going.
@KoniKodes loving the introduction paragraphs! I'm inspired. "great friends and the right tools" <3 cries a little bit
@AaronBakerUT Thank you. It's what I like about this group - like my coding ohana.
konikodes sends brownie points to @aaronbakerut :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @aaronbakerut |http://www.freecodecamp.com/aaronbakerut
Night @KoniKodes !
@AaronBakerUT I am still learning js and jquery. so I didn’t much on js part tho
@AaronBakerUT but thank you
lpy1994 sends brownie points to @aaronbakerut :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @aaronbakerut |http://www.freecodecamp.com/aaronbakerut
anything that i need improve?
I still can't get this to work right...I don't know what I am doing wrong. When I click "new quote" it gives me the same quote only below the original one...
aaronbakerut sends brownie points to @lpy1994 :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @lpy1994 |http://www.freecodecamp.com/lpy1994
well @lpy1994 the projects are a little vague. are they just placeholders for now?
if I have any project, then I’ll change it
any project ideas brewing?
I am learning js, now I thinking try to make more functioning website by use js , animate css and jQuery
just feel like they are so much to learn. I can’t think of any project without these knowledges
can someone have a look at my project. I am getting an error on the ajax call link http://codepen.io/akshay_nayak/pen/JKvbwV?editors=1111
Guys don't you know any implementation of swipe to close event on js?
@lpy1994 something that helped me to learn JS a bit: make buttons that hide/show content-boxes below
like.....lemme see if i can find an example
idk they have it super simply written with like 3 lines of jQuery but it can be a good exercise to just dive into and see if you can get it working with pure JS
event handlers on the buttons
I know a little bit of jquery and angujar. I am try to copy the example in that personally portfolio challenge.
Because i can't understand his code, that's why I am thinking I need to learn more
Got it to work! Now I need to know how to move my footer to the bottom of the page and make it sticky. Can anyone help?
My footer is inside the quote box and I want it to be at the bottom of the page
@twhite96 first, close your quote-box div. then give footer position: absolute and bottom: 0
on my twitch project. I am having trouble with my JSON call.
http://codepen.io/MikeBeers/pen/PzmpgV?editors=0002
I am displaying my call back to the console. I have one account that should come back with an error but it will not display. If I add "callback=?" to JSON call the account with the error will now show in the console. But then the images for my logos will not display and the status of the account will not display. What is going on with the "callback=?"
Line 13 in my codepen.
@dhcodes Thanks. someone just helped me with this. But I did not really understand what this code did. Could you look at this pen again then checkout the new line on LINE 59. can you try and explain what is going on?
mikebeers sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1241 | @dhcodes |http://www.freecodecamp.com/dhcodes
@MikeBeers the way I made mine work was to put the second JSON call inside the first and put it all within a loop through the users
I am missing some brackets or something in my code as I keep getting an error that I am not sure of what it means
Am I on the right track? Appending Variables to Strings javascrip
how to remove the white border at the bottom of my navbar?
@mremotoo you should paste the pen that gives us access to your code
@Manish-Giri I got it figured out but when I share the quote to Twitter I get <p> tags when I don't want them
Can you take a look?
I have been working on this for weeks and will not sleep until I get this final bit figured out
Ohhhh
I see now
Try it again @Manish-Giri
I had a + in a function
@twhite96 the problem is because your API returns the quotes wrapped in those
p tags itself. Trying to find a way to trim that.
twhite96 sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 1498 | @manish-giri |http://www.freecodecamp.com/manish-giri
@twhite96 here, try this
success: function(data) {
var post = data.shift(); // The data is an array of posts. Grab the first one.
var quoteContent = $(post.content);
console.log(quoteContent);
$('p').html(post.content);
$('#tweet-quote').click(function(e) {
//We tell our browser not to follow that link
e.preventDefault();
//We get the URL of the link
window.open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + quoteContent.text());
});
@twhite96 make it like this:
window.open('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + $(post.content).text());
@twhite96 did you catch what i said earlier about bottom-aligning the footer?
if i restrict body height to browser height and make overflow hidden, the container inside (that overflows and is a flex container) never gets a scrollable view, even if i put overflow of that container to auto or scroll - http://codepen.io/shub1427/pen/NAYykX
@twhite96 you could try
var temp = post.content;
temp = temp.replace(/<p>/g, "");
@qualitymanifest yes. I didn't use it because I wasn't sure if I needed to or not.
Thanks @sorinr! That totally works
twhite96 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 528 | @sorinr |http://www.freecodecamp.com/sorinr
@twhite96 it does look fine below the div vs. being at the bottom of the page
from the css of body
@twhite96 welcome. I haven't seen that @Manish-Giri suggested same thing. :)
i did that, and it works but than overflow has no meaning, i.e, putting overflow hidden inside the container also shows the container scrollable, which i don't want.
I want to have a scrollbar inside container div not on body
@GregatGit
I want to create an effect like Bootstrap modals, using flexbox @GregatGit
@Shub1427
.wrapper{
margin: 0px 10px;
}
.container {
max-height: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow-y: auto;
}
i only added margin to .wrapper so you could see that the scrollbar belongs to .container
shub1427 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1292 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
I am able to retrieve results for auto-completion but jquery isnt displaying it properly
can someone tell me how I can correct this
when I type in a word autocomplete options are being shown but the background is transparent and not white as I would like
@akshaynayak you are using jquery ui right?Did you include jqueryui-smoothness.css
That must be the problem pls do say if that didnt fix it
hey mathew i added smoothness that didnt work though
i was wondering if you knew how to handle the response being returned from the .autocomplete function
Guy, why are the addition and subtraction buttons not working properly?
@akshaynayak Maybe this code will help
$(document).on('keydown.autocomplete', selector, function() {
$(this).autocomplete({
source: function(request, response) {
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
response(data[1]);
}
});
}
});
});
hi, I was working on Random Quote generator everything is fine but link to share on twitter is not working!!!
pls help
this is my pen
to your <a href=""></a> element
it gives me a black page
Try the link I posted and try to tweet from there @hbnker31 .
Maybe it is a codepen issue.
thanks @Harry97 @brainyfarm
hbnker31 sends brownie points to @harry97 and @brainyfarm :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
:cookie: 65 | @brainyfarm |http://www.freecodecamp.com/brainyfarm
@hbnker31
Verify your codepen email address so you can use the full mode.
http://codepen.io/hbnker31/full/akYEVV
Verify your codepen email address so you can use the full mode.
http://codepen.io/hbnker31/full/akYEVV
@Harry97 you have same class for both session and break so when you use $(".button").click(function() will get only the last element defined that has .button class
@sorinr I've added an if function to distinguish between the addition button and subtraction one
and I used "this" in order to modify the number that's closest to the button clicked
@Harry97 are you in a hurry? i will fork your pen and make some changes to show you but i have to finish something now
harry97 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @sorinr |http://www.freecodecamp.com/sorinr
I am trying to use custom fonts from tympanus.net in codepen, the link is perfect(i have checked) but still the code isn't working - http://codepen.io/shub1427/pen/oLdkxZ
@font-face {
font-family: 'camera-icons-local';
src: url("https://tympanus.net/Development/ImageGridEffects/fonts/camera-icons/camera-icons.ttf");
font-weight: normal;
font-style: normal;
}
@hbnker31
You have
You have
target"_blank" as an attribute in your a element instead of target="_blank"
anyone here
Hi, I am having problem with Foundation Sites V6.2 SCSS file. I want to include an external color palette file. should I import this at the top in app.scss or in _settings.scss file? I intend to use the custom color palette in both app.scss and _settings.scss file to override the default colors. Thanks in advance
StackOverflow articles may have given hints on how to go about with the SEARCH part of the Wikipedia Viewer project. Now, I'm stuck and confused on how to get and display the search results to the html page. Any ideas?
I'm trying to align a row of text above a row of icons, but it isn't working out very well
Bootstrap classes don't affect icons
And adding percentages isn't working
Not really sure how to fix it
It's near the bottom at forecasticons and names
Namely, referring to "Mon / Tues / Wed/" etc. and the icons below them
@CrumrineCoder why not making div class row the #names and another row the #forecast-icons and each name or icon div class="col-md-2" ?
@CrumrineCoder you can do this way:
#names, #forecast-icons{
display: flex;
flex-direction: row;
justify-content: center;
}
I should probably learn all of those things of flexbox, display: **, etc.
Aw wait hangon, the icons are all bunched up, I'll try and fix it
how can i show the titles of articles instead of getting the whole bunch! i am at wikipedia viewer and here is my pen:
http://codepen.io/Mohammad_Hasham/pen/EyLPmW
http://codepen.io/Mohammad_Hasham/pen/EyLPmW
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 530 | @sorinr |http://www.freecodecamp.com/sorinr
how do I make an image a dropdown such that to see the dropdown, one has to click the image
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-limanAbba-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LimanAbba</a>
</div>
<div class="collapse navbar-collapse" id="bs-limanAbba-navbar-collapse-1">
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">Freelance</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>\
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span><ul class="dropdown-menu">
<li><a href="#">Liman</a></li>
<li><a href="#">Code90</a></li>
<li><a href="#">Coding</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div class="container">
</div></div></div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
when I insert an image the image must open on modal for cropping ....
hey guys how to make the hamburger icon dropdown menu on collapse?
one more issue...the order of scripts in JS editor of codepen get changed everytime when I switch between editor view to detail view back n forth
@Prince-Singh - make sure you save before you switch (if you haven't tried it) they might just reload the page? Not 100% sure... I haven't seen this problem.
yup that's the first thing came in my mind too but its not working after that too.
A friend of mine gave me this task. To extract the website from this.
77923B4D0R3B&url=httpwww.oldscpa.com
8009285G5S821H&url=httpwww.yachats.org
11224640Q0N6C34&url=httpwww.funstasticshows.comGuide me how to do this? I want the part like `www.oldscpa.com' from each line. Should I use regex or what?
I know its a bit irrelevant here.
Ignore if you don't want to help.
@faisal1337 I am not good at regex, but maybe this could work:
/w{3}\..+/
@faisal1337 test it here: https://regex101.com/
copy your text there, and test
@kirbyedy the expression should be added like this?
And I have a bunch of other same urls in next lines
regex would still work?
@faisal1337
"77923B4D0R3B&url=httpwww.oldscpa.com".match(/.*http(.*)/)[1]
"www.oldscpa.com"
@sjames1958gm thanks. It does work. Now can you guide me how can I automate this process on atext file.
faisal1337 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2115 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
On a text file may be difficult....I'm not aware of a way of doing it via pure, client-side js. With a server you could do it pretty easily. Someone else may know a client-side solution.
Or I could just paste the data somewhere online with the expression @sjames1958gm gave
@sorinr That one was answered, he's looking for a way of entering a text document into the browser and manipulating it from there
Once you get the text file into your DOM, it should be easy from there using jquery, etc.
I dont want to use this method. It seems complicated to me.
I think you're right, but I doubt there's an easier way of getting your file into the DOM. Anyways, good luck finding a solution!
One of the responses to that post might work, one of them mentions using an AJAX request
using ajax to open the file
One of them sums it up I think: "There is no standard way in Javascript to manipulate local files, like you said it's for security reason. "
@faisal1337 jsbin? Or you could use the browser api to load a browser local file and process.
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/File
@sjames1958gm Apparently a lot of browsers currently block the file protocol
var str = "11480668G3O923B&url=httpwww.feynmangroup.com103946E3L9H729C&url=httpwwvchamber.com74940N0F257N&url=httpwww.oregonsports.org10590634N4P2B4P&url=httpwww.kaiserpermanente.org%2f77923B4D0R3B&url=httpwww.oldscpa.com8009285G5S821H&url=httpwww.yachats.org11224640Q0N6C34&url=httpwww.funstasticshows.com";
var arr = [];
arr = str.split("=http");
arr[1] = arr[1].split("0-9+");
console.log(arr[1]);
I will paste the file in parts in the str variable
If I could only make the algorithm.
@faisal1337 why not use a $.get('textfile', function(data){} and do whatever you want with data ?
@sorinr I could paste the data in parts in the str variable
I just need to make the algorithm
@faisal1337 then look how you can interpret line by line an input type texarea for example
@faisal1337 var lines = $('textarea').val().split('\n'); then iterate lines and split string by "="
@sjames1958gm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="file" id="input">
</body>
</html>var lines = $('#input')[0].files[0].val().split('\n');
console.log(lines);
And the console shows the error
Uncaught reference error $ is not defined
what's that?
@faisal1337 Yes, you will have to research how to handle the events on this element.
load jQuery when $ is not defined
load jQuery when $ is not defined
there's some special ajax or something?
oh shit
I understand now
check
I've addedjquery
and how should it work?
@faisal1337 these may be helpful: :sparkles:
Da hell is wrong with me. Everything is going wrong. My phone bricked. Nothing's working. Frustrated.
pen.js:8 Uncaught TypeError: Cannot read property 'val' of undefined
Now this :/
@ndburrus got it fixed :o
Can anyone give me some pointers on how to solve the "No repeats Please" permutations challege?
I simply can't think of any permutation or combination formula that would do the task
Couple of times.
@faisal1337 the input type file lets you chose a file from your computer but not reads its contents
@sorinr to read it I would have to use some JS function?
@sorinr thanks man.
faisal1337 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 532 | @sorinr |http://www.freecodecamp.com/sorinr
Now let me tweak it to add the output in a string.
is there any other way of re writting the json object apart from append because that is a bit slow?
@MohammadHasham what do you mean by "re writting the json object" ?
i mean to append it as i am using a loop to iterate you can check here
http://codepen.io/Mohammad_Hasham/pen/EyLPmW?editors=1010
http://codepen.io/Mohammad_Hasham/pen/EyLPmW?editors=1010
@sorinr
@MohammadHasham first get rid of <form> and </form> tags unless you want to e.preventDefault(); in your js. because when you press enter into the input field will try to submit the form
done removing them
@sorinr but why does the append method takes a long while to load things up!
made*
@MohammadHasham first i have introduced this: $("#parag").html('');
@MohammadHasham then added }).setTimeout(50); to give some time to the $.get between keyups
was adding $("#parag").html(''); mandatory!
@MohammadHasham yes. to clear up your previous search. when y press "l" will go search for l and append. when you have "la" will go for "la" and append again without clearing the first "l" serach
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 533 | @sorinr |http://www.freecodecamp.com/sorinr
Hey everybody. Just finished the front end cert with this Simon game. Any feedback on the game very much welcome. Thanks. http://codepen.io/jer244/pen/jAxwjJ
hello everyoneee... I just want to know how to make an webpage static
I made a simple mistake how can I fix?
seems like I did everything right just like the example said.
?
i just asking for the tips to make a portfolio static .... i have made it into 2 parts in which first part is static and second one will be chnage by others ( companies ) .
you creat a webpage, normally you learned it before portfolio page
for to make first part static , what should i do ?? so that the Whole page could not load .
how to hide ?
and dont laugh at me ..
Does anyone know where to start with the scrolling nav of the portfolio page? I'm all done except for the scroll.
how do I link my bootsrap buttons to a section within the same page?
@AlexanderDom is right
@mremotoo you need
<a href="#idoftarget"> with id of your target
is important <a href="#test">I go to find test</a> <div id="test"></div>
oups
sorry for big letters
impossible @mremotoo you can apply button styles to links <a> too
here it is,
@mremotoo listen what i say , you can apply style of bootstrap buttons on links
ok gonna see
<a href="" class="btn navbar-btn btn-default abelFont">About</a> yes sir :)
and i didn't laugh at you ><
mremotoo sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@AlexanderDom another question though, how do I make it gracefully scroll not instantly scroll to the element
@mremotoo like said before it's a js plugin, forgot exact name but there plenty
i know it's hard i try to find some easy to "digest" exemple
sir its jquery actually
@mremotoo so read this (you don't need init part) if you have questions
@AlexanderDom brother , can u please open the link
than u will get understand what i actually want
i dont want to repeat the code around 6 times for thw upper part
the*
i just want to make my upper part static and it seems like your {Display: none } cant work !!!
???
@Rao-Sumeet sorry but i don't understand what exactly you want
six times repeat what, which part of page ?
according to there name , i want to assign them there webpages
show me your portfolio where you're now so i see where you blocking
you want to make six links to 6 pages ?
beacuase i have no other option than that
How do you link an image element on CodePen? I tried inserting the target="_blank" but it is not working.
@adblock31
<img src="urltoyourimage" alt="" >
@Rao-Sumeet did you have your page on codepen ?
THanks Alexander. That's actually my name too! But I think I need to rephrase my question. My page is on codepen, I have a picture already visible on the page. I want to embed a link on the image to direct the user to a new page.
see... in that portfolio which i sent you , the photo & name part remains same , it is independent of the button-group . soo.. how he do that ?
no but i am user of github
how can i make boxes when a search is performed i have used a well class in html but it is not making seperate boxes can anyone help me? i want to have my boxes like this
https://codepen.io/FreeCodeCamp/full/wGqEga/
https://codepen.io/FreeCodeCamp/full/wGqEga/
@Rao-Sumeet for mobile screen ?
@AlexanderDom I have : <a href="url" target="_blank">
<img class="class"<img src="url" alt=""/></a>
<img class="class"<img src="url" alt=""/></a>
@codepen gives 404 error
@adblock31 it's <a href="url" target="_blank">
<img class="class" src="url" alt=""/></a>
<img class="class" src="url" alt=""/></a>
hello everyone!!! i am on the wikipedia viewer.. so far i am able to bring in the object but i can't get the entire object. everything but "from" and "to" are showing up
Hello everyone!
I'm still stuck in the Wikipedia Viewer project.
I still can't figure out what API they used in the example project.
I don't want to "cheat" by checking its source code.
I've tried several combinations for the API query but I am not getting the same search results as what is shown in the example project.
I've checked StackOverflow already.
I've also tried action=opensearch and also getting a different search result.
Any ideas how to go about this? Thanks!
I'm still stuck in the Wikipedia Viewer project.
I still can't figure out what API they used in the example project.
I don't want to "cheat" by checking its source code.
I've tried several combinations for the API query but I am not getting the same search results as what is shown in the example project.
I've checked StackOverflow already.
I've also tried action=opensearch and also getting a different search result.
Any ideas how to go about this? Thanks!
i can show u by that only
@Rao-Sumeet you press print screen if you're on windows, or you drag and drop your image here
@lleander i founded they api doc is far from being easy to understand
/home/sumit/Desktop/Screenshot from 2016-07-25 00:28:57.png
/home/sumit/Desktop/Screenshot from 2016-07-25 00:29:19.png
/home/sumit/Desktop/Screenshot from 2016-07-25 00:29:19.png
i hope u will get this time ?
adblock31 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@Rao-Sumeet OK ! so easyiest (otherwise you need other language.. long story) you like you said must repeat six time samed thing :(
@Rao-Sumeet so i try to explain fast, you need to use some language where you can create one page/template where you gonna change inside, php, js with AngularJs or many others but you must copy paste this "header" on each page sadly
@lleander i used var api="https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&titles="+$input+"&prop=revisions&rvprop=content&format=json";
where $input is a variable that holds $(input[type"search"]).val(). that way the api has to search on whatever it is given. though. i am having trouble with my own wiki so take it as you will
@Rao-Sumeet in pure html, you need to copy pase
how can i make boxes when a search is performed i have used a well class in html but it is not making seperate boxes can anyone help me? i want to have my boxes like this
https://codepen.io/FreeCodeCamp/full/wGqEga/
https://codepen.io/FreeCodeCamp/full/wGqEga/
@AlexanderDom
@mpettaw2 , actually my problem is that my search results are different from what I am getting when I tried to search the same word in the example project.
but i dont know how to set-up php setup !!
hmmmm....and nothing has changed with wiki since the example project was made?
imma test it out.
@Rao-Sumeet you need wamp or something like this to start a server (like i said a very long story) then you can include a separate part of page with php include method http://php.net/manual/fr/function.include.php
it is different. i typed sam in the example project, then took the api url and pasted it into the browser and changed to title="sam" the results were different.
@mpettaw2 what I want to accomplish is to be able to figure out what the example project uses for its wikipedia api. But, I don't want to cheat by looking at its source code.
@MohammadHasham can you link your codepen page ?
@AlexanderDom if u can help me on how to do setup of php ??
@Rao-Sumeet it's not my domain where i know well or practice everyday sorry
rao-sumeet sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@mpettaw2 @AlexanderDom it says in the instructions,
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/.
And that is what I was trying to do. To be able to somehow replicate its search functionality. Thanks for your inputs btw. :smile:
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/.
And that is what I was trying to do. To be able to somehow replicate its search functionality. Thanks for your inputs btw. :smile:
lleander sends brownie points to @mpettaw2 and @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @mpettaw2 |http://www.freecodecamp.com/mpettaw2
:cookie: 324 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@MohammadHasham first of all you bettre use and div because in paragraph you can only put text or inline elements like links images...
where should I go from here?
okay now i am using div tags instead of <p> tags @AlexanderDom
$("body").append("<div class='well'>"+data[1][i] + "</div><div class='well'>"+ data[2][i] + "</div><div class='well'>" +data[3][i] + "</div>");
so put your id in selector or
```$("#parag").append("<pclass='well'>"+data[1][i] + "</p><pclass='well'>"+ data[2][i] + "</p><p class='well'>" +data[3][i] + "</p>");
<p class sorry
@codingisfun11 you already have your variable
@lleander no problem i was reading the api tutorial. it looks like you would have to customize the api to load info a certain way. the doc was hard to read so i am not sure if that is correct but you have the three categories multiple titles, multiple modules, and generators.
what you need to do is acces a child of an Array, myArray = [1,2,3]; myArray[2] is 3 just in your case it's multiple Array so multiple [] brackets
i found this stuff on
@lleander but without looking at the example source code i couldn't tell you how he did it sorry
@lleander The API Sandbox lets you play around with different URL parameters to get the results you need: https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm
mohammadhasham sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
oh and i still need help with the loaded json pretty pls
@mpettaw2 @AlexanderDom yes the wikipedia api documentation is difficult to grasp. :smile:
Maybe I'll just use a different approach so I can move on.
I hope it's ok with FCC if I am not able to replicate the search functionality of the example project.
Maybe I'll just use a different approach so I can move on.
I hope it's ok with FCC if I am not able to replicate the search functionality of the example project.
@lleander actually thats the most difficult thing' because you always have to generate the query from sandbox
you should see the video for basic understanding!
@TylerMoeller I have spent a number of hours/days doing trial and error with the API sandbox. Thanks anyway. :smile:
lleander sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@lleander sorry but there other harder as hell parts :) (for me, who knows perhaps you gonna pass it in a sec :p)
i'm on Steamroller js exercice ><
@AlexanderDom just a last thing that how can i make the href in js
@MohammadHasham change an href of an element ? or i imagine you want to wrap you text in a link ? :)
@lleander It's reasonable to spend a few hours getting familiar with the query parameters to get the search results you want. At a certain point, it will all start to make sense :) Good luck!
i want to wrap any stuff so that for example if i click any word in the description it redirects me to the link
@AlexanderDom
@MohammadHasham find in your data result link then use it
$("#parag").append("<p class='well'><a href="+dataOfLink+">"+ your text
don't forget to close your link
@mpettaw2 what's going on ?
the json output only has values for from and to properties
everything else is blank. and i don't know why
@mpettaw2 There is a pages object, but it only has one entry
@TylerMoeller thanks. this project is exciting and frustrating at the same time. :laughing:
lleander sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: lleander already gave tylermoeller points
@sjames1958gm go to the api url and put "sam" as the title it comes up with a lot of stuff i am not sure if searching "sam" would have mulitple pages or not but it should be more data in the json object
sorry *when i
@mpettaw2 If you use the devtools console not the codepen console you will see the json object displayed and you can click on the triangle and navigate through the object.
thank you
i am going to take a moment to rest my exploding brain. see you guys next time
mohammadhasham sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave alexanderdom points
@sjames1958gm wanna pair help me on steamroller ? ><
Hey I'm having trouble doing the random quotes website https://codepen.io/JacobStewart1/pen/AXVkGk i cant get the quote to come up could someone help me
you can do it in quick-add option of js option of codepen
jacobstewart1 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@JacobStewart1
$(".myButton").click(function() {
clickedQuote();
});
@AlexanderDom ok
@JacobStewart1 you forgto to add you class to your button myButton
your function is never called
jacobstewart1 sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: jacobstewart1 already gave alexanderdom points
@JacobStewart1 put console.log("it was called"); in your functions at start so your now in your console when your function is called
just and advice :)
@ParagonChuy what's going on ?
you have to use an id for event handler
I want to make the application the way I posted up there, but I can't seem to find a way to make it responsive
that when a button is clicked something happens @JacobStewart1
@AlexanderDom no but the id of the button wasnt given which is being clicked
@MohammadHasham yes he forgot his class at the begining
@JacobStewart1 your logic is good but just tweak some brackets
and i guess that dont use script when u have predefined JS pane
for all that stuff
@ParagonChuy you can slide it to left for mobiles or to top and make it like line => list online, then other line
I was thinking about making the twitch logo the menu button
hover over body, just an exemple
THATS GENIUS
Like I legit was looking for a solution like that all day yesterday
@Raj00786 show us your code plz
@AlexanderDom
Ajax code
$.ajax({
url:"http://my-homepage-link/json.json?jsoncallback=?",
type:"GET",
dataType:"jsonp",
beforeSend:function(){
console.log("before send");
},
success:function(data,status){
console.log("success");
}
});My json file in my homepage
{
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
"number": "646 555-4567"
},
{
"type": "mobile",
"number": "123 456-7890"
}
],
"children": [],
"spouse": null
}
@Raj00786 did you tried
url:"http://my-homepage-link/json.json?callback=''"
seems too much json there ;)
or more &callback=''
paragonchuy sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
@ParagonChuy you forgot opacity in
transition:opacity 0.3s ease-in; ;)
really having trouble with setting up a fixed navbar like i want to in MDL
if i use this layout everything works fine but the scrollbar starts under the navbar
not at the top of the page
i dont like that
if i try to set up a fixed position div myself it overlaps the scrollbar
as soon position is fixed a width 100% div will overlap
or is there a way to have a full page scrollbar with the fixed header of MDL?
can you paste your screen print plz because i dont see your problem on codepen
i messed up and was playing with the code
but now you should see the overlapping
so
basically i like the MDL navbar but i hate that the scrollbar doesnt go all the height
if hove you understand my problem... its really hot at my place and my brain starts loosing capability
add
otherwise scroll bar comes from overflow-y:auto of mdl-layout__content
so i need to change overflow-y to scroll so the whole page has a scrollbar?
im so confused :D brb getting a fan and water... basically i want a full height scrollbar with a fixed header
the scrollbar should look like in case of a scrollable header but the header should behave like a fixed one ^^
<main class="mdl-layout__content">
<div class="he">d</div><main class="mdl-layout__content">
http://codepen.io/Mohammad_Hasham/pen/EyLPmW?editors=1100
why me search bar is not centering really tried everything please help!
why me search bar is not centering really tried everything please help!
bomholt sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
now i can progress but first i should take a cold shower... flipping heat
thanks so much dude
good shower :)
i gonna leave too
good coding everybody
how can i make the three elements at the center of the page
http://codepen.io/Mohammad_Hasham/full/EyLPmW/
http://codepen.io/Mohammad_Hasham/full/EyLPmW/
anyone experienced with MDL?
OKay! I'm finished my Tribute Page about pizza! Lol what do you guys think? http://codepen.io/prisca/pen/BzxwXW
Here's the full page: http://codepen.io/prisca/full/BzxwXW/
https://codepen.io/bomholt/full/xOjXPy/ i am trying to achieve something like this but with a scrollbar of full page height ... also with a fixed header. anyone able to help?
Hi, I just finished my wikipedia viewer. My code works well on firefox, but the search part was not working on chrome or microsoft edge. Can anyone tell me why? Here is my code:
$(document).ready(function() {
$("#input1").keypress(function(event) {
console.log(event);
if (event.keyCode == 13) {
$(".title").removeClass("title");
$(".random").removeClass("random");
$.getJSON("https://www.crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=" + $("#input1").val(), function(json) {
var html = "";
json.query.search.forEach(function(val) {
$.getJSON("https://www.crossorigin.me/https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&&exsentences=1&titles=" + val.title, function(json) {
html += '<div style="text-align:left;" class="entry"><a href="https://en.wikipedia.org/?curid=' + Object.values(json.query.pages)[0].pageid + '" target="_blank">' + '<h4>' + Object.values(json.query.pages)[0].title + "</h4>" + Object.values(json.query.pages)[0].extract + "</a></div><br>";
$(".result1").html(html);
});
});
});
};
});
});
Here is my pen:
How can I know if a Font is Humanistic Serif, Traditional Serif, Modern Serif, Geometric or so on... ?
@designBuildShipSoftware
+ Object.values(json.query.pages)[0].pageid // there is no Object.value