@ezioda004 @JoEeeezy_twitter thanks for checking. I guess I did something wrong. I'm just going to reset and start again.
lkian sends brownie points to @ezioda004 and @joeeeezy_twitter :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @ezioda004 |http://www.freecodecamp.org/ezioda004
api offline
how to make load sign on website before loading the actual page
like loading or some logo on starting & then it will load the entire page
I am doing okay. Been toying around with some of my old pens.
Can anyone take a look at my code here and tell me an honest opinion of how normal/efficient it is? I feel like at the end I was just moving things around into different brackets and going with a trial and error approach. I'm sure there's several things that could be optimized and would love the feedback. This project took me way longer than I'd hoped it would lol. https://codepen.io/markclynch/pen/QmKNVN?editors=1111
@markclynch - it's hard to make a quick evaluation of your code, one thing that you can do with the CodePen tools is to use the dropdown on the right side of the various boxes (like the JS box, in this case) and to "Tidy JS", which will reformat the code with indentations, and then "Analyze JS", which is highlighting one problem in the way a function is defined.
Something that just jumps out at me is the places where you are doing the calculation for the minutes or seconds and repeating the calculation essentially to generate an output that has the extra "0" padding in there for the single digit counts. You could make one function that just does that output of the display digits and call that after you do the calculation, it would minimize some of the duplicated code. Those are the kinds of things you can look for - places where you repeat code and calculations might be able to be encapsulated in a function that can be reused.
I just modified the code to set the default to 1 minute for each timer, and when it got to the end, where both timers were displaying 0, it didn't give me the option to reset or start over, I would have to reload the page to do that. (You weren't necessarily asking about functional or usability concerns, I guess, but it's an observation.) For that matter, there isn't a way to pause, stop, or reset while the clock is being used.
Those are a couple quick comments - I hope it gives you something along the lines of what you were looking for feedback on.
finished crawler game
@khaduch Definately does. Last I was testing it the reset button came back after the test finished. I may have broken something :) I didn't want the stop/reset to be available as I thought that would be a "feature" to keep you going since you couldn't simply restart it if you got distracted, forced focus if you will.
@khaduch I'll have a look to see where I can trim the code down. I'm trying to use vs code now and trying to set up one of their beautify extensions, doesn't seem to be working perfectly.
@dhavalveera Sorry, I'm a newbie, can't help myself much lol :)
how to make load sign on website before loading the actual page
like loading or some logo on starting & then it will load the entire page
like loading or some logo on starting & then it will load the entire page
@markclynch Sir I don't mean that Newbie should help, whoever can help then tell me
but it seems like that no one Happy to help others
then what is the meaning of HELPFRONTEND
Don't think that attitude is going to get you them however. Also did you try google first? Seems like I could google and find that answer. @dhavalveera
@dhavalveera what's your problem? You want to make a pre-loader?
whenever Page is Loaded then first it should show a Logo then it should the website's page
Can anyone tell me how I'm misplacing my call for main.js here (It's in VS code, trying to transcribe from Codepen.io and it's not working out):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pomodoro Clock</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>
<h1>Pomodoro Timer</h1>
<div class="timerContainer">
<button id="minusCounter">-</button>
<button id="timerDisplay">1</button>
<button id="plusCounter">+</button>
</div>
<div class="startReset">
<button id="butStart">Start</button>
<button id="butReset">Reset</button>
</div>
<div>
<img src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/4b11ad8f-3e48-4112-83df-336065c49829/icon/d31ca7be-0497-4370-801f-97a29dc3b584">
</div>
<div class="breakContainer">
<button id="minusBreakTimer">-</button>
<button id="breakDisplay">1</button>
<button id="plusBreakTimer">+</button>
</div>
<br>
<p>break timer</p>
</body>
<footer><script src="main.js" type="text/javascript"></script></footer>
</html>
oh I think I'm missing jquery
@markclynch in codepen you can copy only the body part. and codepen can't link to
http now, so you have to change your audio source. You can get all other library in the setting.
I'm asking mostly so I know cause I'm almost done with the advanced algo's and ready to move on to my own projects for a nice portfolio of projects. But I'm terrible at setting up the HTML imports for jquery, javascript and anything else.
Could you tell me where I need to put the jquery in there?
and where script for main.js should be called? Is it all in the header, and I had thought if I call one before the other it can break everything, which I think is happening. I have a 100% working codepen, but can't get everything working (js and jquery) in vc Code editor
@padunk
Trying to move stuff from codepen to vs script now. That way I can host things on my own portfolio page.
vs code sorry
@markclynch you want to import your code from codepen to your local comp?
for jQuery, you can put the link in the html head, and for script usually at the end of the body.
@padunk Thanks lol! Working great now I think. Just running the test now, will know in 2 minutes :) I was calling jQuerry like this also <script src="jquery-3.3.1.min.js"></script> and I needed to do it as <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> instead also haha, so silly the little mistakes I make
markclynch sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @padunk |http://www.freecodecamp.org/padunk
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2440 | @darrenfj |http://www.freecodecamp.org/darrenfj
Hi there, did anyone ever had the problem that your <main> overlaps with <header>? I'm sure the reason is that I have the background image in <header> with position: absolute; I already tried to change it to relative but then my background image disappears. I need to make it absolute so that it is independent from the text I wrote over the image which needs to be on the bottom. I tried now so much but my text from <main> still goes over my whole <header>
for what reason
onFormSubmit = event => {
const fields = this.state.fields;
this.props.onFieldsSubmit(fields);
this.setState({
fields: {
type: '',
title: ''
}
});
event.preventDefault();
};
This message was deleted
onFormSubmit = event => {
event.preventDefault(); // this would not work
const fields = this.state.fields;
this.props.onFieldsSubmit(fields);
this.setState({
fields: {
type: '',
title: ''
}
});
};
My guess is that
preventDefault() cancels the rest of the code?
If I move the line up, then this.setState does not set value to
' '
@Heathercoraje Check your console. If there is an error with the preventDefault then it would skip the code following it.
the thing is on dev too, I see the state of fields becoming emtpy
then inside form (input) it has previous value
@Heathercoraje Ah
You are rendering the value of the inputs from the state?
<form onSubmit={this.onFormSubmit}>
<input
autoFocus
placeholder=" Type "
name="type"
value={this.state.type}
onChange={this.onInputChange}
/>
<input
autoFocus
name="title"
placeholder=" Task name"
value={this.state.title}
onChange={this.onInputChange}
/>
<input type="submit" />
</form>
Thanks @sjames1958gm
heathercoraje sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9142 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
I am doing the fcc again, how do i use es6?
I need some help with angular 1.7
Currently my project is in angular 1.7 and uses typescript. How do I use https://github.com/marceljuenemann/angular-drag-and-drop-lists this library in it?
Any help will be greatly appreciated!
@CreativeShin
how do i use es6
I think that the solution should works regardless. Isn't it the case?
I think those are the linters thrown by the on line editor.
Try adding this at the top of file and see if you still have warnings
/*jshint esversion: 6 */@CreativeShin
im working on the twitch stream project and im wondering how do i fetch a streamers logo data? the api doesnt return any info if the streamer isnt live
@mgrienauer You need two endpoints. The channel endpoint and the stream endpoint. You get the streamers information through the channel endpoint, and information about the current stream (offline/online) from the stream endpoint.
No, what you are talking about is the query string and that one only passes additional information about what should be queried to the endpoint
An endpoint is a specific route (Without the
?... part)
@alpox ahh i see...is there a way to include both endpoints in one jquery ajax call? so that it returns two objects, or atleast the info from both calls?
or do i need to make two seperate calls
or i guess i could make a function that checks if a user is online, update their info, then if the user is offline i can use another function?
@alpox thanks for the info btw that saves me a headache
mgrienauer sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1593 | @alpox |http://www.freecodecamp.org/alpox
You could try that, but i would rather rely on the other way round because you can then be sure to always get the channel data and get it always in the same form
hey guys how do i align the data with the logos in my pen??
@Juke-Magic do you mean the online/ offline/ all buttons?
@Juke-Magic you can use jquery to make a div for each streamer in your array, and then make that div a flexbox
@Juke-Magic I would just nest your results in a row, and make each row a flex container, then use some align properties
this is a nice concise flexbox helper https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hi fellas! If you look at the pen below. Its all over the place lol. I have created an array of a few links and assigned those links to some variables i.e. rain, cloud, sun etc. Now i want to change the background of my page according to the data pulled from the api. THE PROBLEM is that when i try to compare the words using regexp, i think the comparison is being done against the links the array elements point towards and not the elements themsleves. How could I avoid this situation?
https://codepen.io/Donnie-D/pen/YaydRM?editors=0010
https://codepen.io/Donnie-D/pen/YaydRM?editors=0010
@Donnie-D so you want to compare it against the name of the variable?
//create function that take a streamer username as input and returns json data from twitch api
function ajaxStreamCall(streamer){
//make ajax call with streamer name to check stream status
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/streams/' + streamer,
headers: {
'Client-ID': 'ieym1jzi0ljgp9ntvvw0dcuxaw4hzf'
},
// log data to console if success
success: function(data) {
console.log(data);
//create function that takes twitch api data and updates html on page
function updateStreamData(){
//update html on streamer div to display current stream info
if (data.stream !== null){
$('#' + streamer).append('<p>online</p>');
}
}
}
});
}
wait i think i see what you mean lol
@Donnie-D you don't have to do that. You'll have the variables separate from the strings, they don't have to be connected
i have a question, im trying to append something to the div with an id, which will be equal to the variable streamer
how can i do this in jquery
thanks by the way
var Rain =
"https://assets-auto.rbl.ms/4388606144d2f05020da2d1eb705336e37c521d5e3bad105e4b964fa13794b49";
var Sunny = "http://www.kinyu-z.net/data/wallpapers/78/975159.jpg";
var Cloudy =
"https://pics.freeartbackgrounds.com/midle/Blue_Cloudy_Sky_Background-1074.jpg";
var backgroundArr = ["Rain", "Sunny", "Cloudy"];
yup thats what i have just done as well :+1: i just had an incomplete thought process towards whether if i add those words as strings in the array then ??????
lol
[JAVA] hello everyone can someone tell me when the casting is java is implicit and when it should be explicit ? Im confused with that
i m back!
hey lol sorry not much. Just that I have tried your suggestion. Now albeit the code looks straight forward but for some reason it doesnt execute the if part. Do you think my format is wrong or something?
https://codepen.io/Donnie-D/pen/YaydRM?editors=0010
https://codepen.io/Donnie-D/pen/YaydRM?editors=0010
@h1tag
var backgroundArr = ['Rain', 'Sunny', 'Cloudy'];
var k= $('#detail').text();
//console.log(k);
for(var i=0; i<backgroundArr.length; i++){
if(k.match(/backgroundArr[i]/gi)){
console.log(backgroundArr[i]);
//console.log('true');
}else{console.log('false');}
}
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 104 | @codernewby |http://www.freecodecamp.org/codernewby
@Donnie-D I think that you can't add a variable like this (
/backgroundArr[i]/gi) in a regular expression, you might want to do it like this
using the
new RegExp()
@h1tag this feels like going down the rabbit hole lol. trickier than i thought
do you think theres an easier way of doing what i intend with it? i.e. change the background depending on the output?
@DarrenfJ no worries, I'm sure I will have many more, thanks for your help
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2441 | @darrenfj |http://www.freecodecamp.org/darrenfj
they're not that many cases you have
wouldnt that include comparing my output against the array elements?
lol
let us try that
dont wanna put a lady off by saying that
Hey guys, can I have some feedback for my hangman style app? Be as harsh as you need to https://germangamboa95.github.io/hangman.io/
Hi,
- I am new to jquery.
- when I click the checkbox I need to show an image in the first column for a particular row.
- I wrote the click functionality but its not going inside the click.
- can you tell me how to fix it.
- providing my code below
$("#checkIDGrid").click(function() {
alert("I am here");
var img = $('<img />', {
id: 'Myid',
src: 'https://thumbs.dreamstime.com/z/pixel-perfect-web-development-flat-icons-set-website-programming-process-webpage-coding-user-interface-creating-45297890.jpg',
alt: 'MyAlt'
});
img.appendTo($('<tr>'));
});@germangamboa95 - I don't know if you intentionally didn't reveal the answer for the disease in question if I didn't guess it, but if it did show then I missed it.
If I can copy / paste your intro card, there are a couple typos that you could fix.All we have to go is synonyms of condition. We can only afford to make 6 errors per patient. - the original textAll we have to go on is symptoms of their condition. We can only afford to make 6 errors per patient. - my suggested correction
And another thing I noticed, when I finally got one right, is that it doesn't offer any "congratulations" when you get one right. It did tally the points in the proper locations as far as Patients saved and lost.
One thing that I do find, looking at this on my laptop, is that I have to do a lot of scrolling up and down to see the full height of the playing board. Also on the input you could use the placeholder attribute on your input element to prompt the users where to enter the letters, and perhaps make the display of the letters used easier to read?
Neat idea - looks like "fun" learning about different maladies... :worried:
@rajkumart08_twitter - one problem that you have is that you are using the same ID value multiple times in your table. Not sure if that is causing the exact problem but it will cause problems if you try to access things by ID. I'm looking at your page now to see if I can help in any other way.
@khaduch Thanks! I am working on implementing those changes. I
germangamboa95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3830 | @khaduch |http://www.freecodecamp.org/khaduch
Does anyone here use cloudflare? Or can point me to a decent explanation of A records and CNAME's and ip addresses. I have a general understanding but don't really get how things are hooked up in my particular situation. The problem is my website only loads if you include the www
@rajkumart08_twitter - I haven't been able to fully investigate this but since your checkboxes are not created immediately on page load, but appear after dismissing the initial alert box, is the code that is setting up the click handler running after the elements are created? If it isn't, then the click handler will not be added to the elements, so you'll never get it to be triggered.
@rajkumart08_twitter Seems like delegation issue here, since you create
You can however use
Heres the working fiddle http://jsfiddle.net/d0e00sbb/
#checkIDGrid dynamically .click() doesnt work.You can however use
.on() and the function works.Heres the working fiddle http://jsfiddle.net/d0e00sbb/
one quick question
<div class="tab">
<button class="tablinks margin" onclick="dropdown(event,'x')">HOME</button>
<button class="tablinks" onclick="dropdown(event,'y')">COMPANY</button>
<button class="tablinks" onclick="dropdown(event,'z')">JOBS</button>
</div>
<div id="x" class="tabcontent">
<h3>rice thing</h3>
<h3>rice thing</h3>
<h3>rice thing</h3>
<h3>rice thing</h3>
</div>
<div id="y" class="tabcontent">
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
</div>
<div id="z" class="tabcontent">
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
</div>
<script>
function dropdown(event,food){
var i, tabcontent, tablinks;
tabcontent=document.getElementByclassName("tabcontent");
for(i=0;i<tabcontent.length; i++){
tabcontent[i].style.display="none"}
tablinks=document.getElementByclassName("tablinks");
for (i=0;i<tablinks.length;i++){
tablinks[i].className=tablinks[i].className.replace("active",'');
document.getElementByid(x).style.display="block";
event.currentTarget.className +="active";
}
}
</script>
lets say I have an input box and I want to make to so that when you type something in it and click enter it replaces the current tab with the google.com /search?q=yourinputhere
how can I achieve this
i need help with the above code as am new in javascript i tried to create dropdown menu on each button but it was nt working i need help
why does the code look so complicated for such a simple task
@sh4r10 So grab the value from input via
.val (vanilla JS) or .va() method (jQuery) and in the "enter" eventListener use window.open() with modified url?
I want to replace the current tab
window.location.href worked for a while and then it stopped, but when i cleared the cookies from google it started working again and then stopped again after a while
@ezioda004
Hi everyone, may you please help with my project https://ingundela.github.io/morep/ … how can I have on a mobile view when I click the humburger menu displays white background (current it is transparent on a click), on a scroll it is white.. Thank you
in your media query
@ingundela
@sh4r10 Try this?
window.open("https://www.youraddress.com","_self")
@ingundela the styling for your
a needs to be altered
@sh4r10 Thanks, but I want it to be while on a click of the menu and not permanent when it is on mobile view
ingundela sends brownie points to @sh4r10 :sparkles: :thumbsup: :sparkles:
:cookie: 113 | @sh4r10 |http://www.freecodecamp.org/sh4r10
ahhh I guess you can add pseudo class :hover to your a links and then they will change color when you mouse over them @ingundela
@sh4r10 @MuhammedKarim I want to anchive the same style of when you scroll on mobile view
thanks a lot man @ezioda004
sh4r10 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @ezioda004 |http://www.freecodecamp.org/ezioda004
@MuhammedKarim @ezioda004 when I add .navbar:active{
background: #fff;
}
to media query, the white background only appears for a second…basecally I want on a click of the menu to have white background and menu items same color I have when scrolling
background: #fff;
}
to media query, the white background only appears for a second…basecally I want on a click of the menu to have white background and menu items same color I have when scrolling
@ingundela
a:active {
background-color: white;
}
@ingundela
a:active {
background-color: white !important;
}
@ingundela So create a click event listener on that hamburger and addclass to that element with white background and on scroll remove that class from that element?
@ezioda004 @MuhammedKarim it kinder worked if I do this:
.nav-item {
background: white !important;
}
.navbar-light .navbar-nav .nav-link {
color: #808080!important;
}
for now this is a solution I got...
@ingundela Add the
compressed class to your nav element and your toggler button
<nav class="navbar fixed-top navbar-expand-lg navbar-light compressed" id="navScrollspy">
<div class="container">
<a class="navbar-brand h1 mb-0" href="index.html"><img src="img/morep-logo.png"></a>
<button class="navbar-toggler compressed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
...
If you right-click your nav menu, select "inspect" and then scroll down the page, you'll see those two classes get added to create the white background.
This is in your main.css:
.navbar.compressed {
padding: 5px 0 !important;
border-bottom: 1px solid #e6e6e6 !important;
background-color: #fff !important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
or can I add it directly to the navbar?
You can add it directly to the navbar if you want the menu background to be white all the time
Is this your code, or is it a template you are using?
I haven't studied your JS to see what you're doing - but the
compressed class is what you are using to modify the background color of the navbar on scroll
@gulsvi this is my code… I don’t want it to be white at all time..
@gulsvi yes it is mate…I added it from my js file
@gulsvi and I’m still learning js
@gulsvi
// to add compressed class to the menu on scroll
$(document).ready(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() >= 20) {
$(".navbar, .navbar-toggler").addClass("compressed");
} else {
$(".navbar, .navbar-toggler").removeClass("compressed");
}
});
// to add compressed class to the menu on scroll
$(document).ready(function() {
$(window).on("scroll", function() {
if ($(window).scrollTop() >= 20) {
$(".navbar, .navbar-toggler").addClass("compressed");
} else {
$(".navbar, .navbar-toggler").removeClass("compressed");
}
});
@gulsvi just by adding this .nav-item {
background: white !important;
}
background: white !important;
}
.navbar-light .navbar-nav .nav-link {
color: #808080!important;
font-size: 0.8rem;
text-align: center;
}
does the job, but I wanted to be able to say on a click of menu the background: white and color #000 with js
@ingundela The styling of that menu is in the
.collapse class - you can modify Bootstrap's collapse class by adding your own styling to it in your css. That's how to do it without JavaScript.
It will be tedious going through all the CSS modifications to make and properly overriding them - would take us 15-20 minutes of tinkering around with it unless someone has done this recently and knows exactly what classes to override - there are likely nav links and their :focus, :active states to consider as well
Can somebody tell me why the freecodecamp logo is a bit higher than the others and how to lower it? https://codepen.io/dimitris51/full/GxOVbX/
@Dimitrios51 The image you are using for freecodecamp logo doesn't match with the dimensions of other images, hence its a bit higher after the 'width:25vw; height:25vw' on that image. your fcc logo image is 800x800 and others are 64x64
@gulsvi thanks you mate… but it works just fine by adding:
.nav-item {
background: white !important;
}
.navbar-light .navbar-nav .nav-link {
color: #808080!important;
font-size: 0.8rem;
text-align: center;
}to the media queries
ingundela sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2691 | @gulsvi |http://www.freecodecamp.org/gulsvi
@gulsvi I still have to learn better how to target expecific element/ class from Bootstrap to make the changes I want
@hemangsk but since I am using the width-height command to specify the element, shouldn't it be the same?
@ingundela That change you made comes with some sacrifices - but if you're happy with it, that's good :) it's best to work with existing classes in Bootstrap rather than relying on
!important to override. It can cause unintended side effects
@gulsvi so, that means that everytime I want to style something I should first look for the bootstrap class?
in that case I’ll not have to use important?
@ingundela Yes, that's the best way to override bootstrap. Use the same classes that they use for their styling, then you won't have to use
!important
I feel like even using the existing bootstrap classes I’ve to use important;
It can feel that way, but as long as your custom CSS comes after bootstrap, there's no need to use
!important to override. If you work with other developers, it will make it easier to share code as well - since they'll know exactly what you're trying to do.
@gulsvi well, if I’m using my own style file some time the style does not take effect when I don’t use important
That should not be the case if you use the same classes that bootstrap is using for your styling
@gulsvi Thanks you… that why I love and enjoy learning code… I’M LEARNING SOMETHING NEW EVERYDAY!
ingundela sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
btw
Does anyone have any idea what I should do right now:
I have just 3 more Advanced algorithms to finish and I am done with Front End
Should I apply for the old fcc certificate or should I resubmit my projects and all in the beta fcc to claim the new certificate
What's your opinions ?
@dardandmr I don't think they are issuing certificates with the beta program yet. Go for it with the older one (and congrats!) :)
@chuksono There are some bugs in your JS.
Working example:
getElementsByClassName not getElementByclassName (it's case sensitive). Also, getElementById(food) not getElementByid('x') ("Id" should be capitalized, and you want to refer back to the food variable).Working example:
<div class="tab">
<button class="tablinks margin" onclick="dropdown(event,'x')">HOME</button>
<button class="tablinks" onclick="dropdown(event,'y')">COMPANY</button>
<button class="tablinks" onclick="dropdown(event,'z')">JOBS</button>
</div>
<div id="x" class="tabcontent">
<h3>rice thing</h3>
<h3>rice thing</h3>
<h3>rice thing</h3>
<h3>rice thing</h3>
</div>
<div id="y" class="tabcontent">
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
<h3>beans stuff</h3>
</div>
<div id="z" class="tabcontent">
<h3>veggies</h3>
<h3>veggies</h3>
<h3>veggies</h3>
<h3>veggies</h3>
</div>
<script>
function dropdown(event, food) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none"
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
document.getElementById(food).style.display = "block";
event.currentTarget.classList.add("active");
}
}
</script>
@dardandmr Yes, 99% sure that's correct. I will search and find the source where I read that.
dardandmr sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2692 | @gulsvi |http://www.freecodecamp.org/gulsvi
@dardandmr Yeah, confirmed 100% now, no certificates issued for the beta yet. https://forum.freecodecamp.org/t/beta-certificates/98947/3
How much can it take for this last part to get finished is there any release date ?
@gulsvi
found all my answers
Hello guys, so after much tinkering, I finally completed my random quote machine. I will appreciate your feedback and improvement suggestions. https://codepen.io/Zappy555/pen/oqpzEZ
Only thing that looks odd is the tweet button
Twit This Quote
Better just
Tweet Quote
New Quote and Tweet Quote
@dardandmr, thanks. I'll get it fixed. I actually wanted a bigger button width.
zappy555 sends brownie points to @dardandmr :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @dardandmr |http://www.freecodecamp.org/dardandmr
@Zappy555 you can add
The class: btn-lg and it get's bigger
Godd job ;)
@DarkxPunk
Great Work bro
it looks impossible without JS
I struggeled doing this with JS... you have done it with CSS
I am doing a hell of a lot of psudo class mashing together
is Great too
wow
Here something for you:
CSSGrid.io
Great Course to learn the new Grid system of CSS
Great course
@DarkxPunk
Yeah I hope it is useful to someone. It birthed from a use case I needed it for.
Doing a page with multiple forms that have different fields.
@Zappy555 Nice work. Add code comments :) it will help us review the code and help you understand it better later on.
There are some things you may want modify for simplification.
Change:
$.ajax({
url: 'https://api.forismatic.com/api/1.0/',
jsonp: 'jsonp',
dataType: 'jsonp',
data:{
method: 'getQuote',
lang: 'en',
format: 'jsonp'
},
success: function(response){to:
$.ajax({
url: 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?',
dataType: 'jsonp',
success: function(response){Change:
$('.getQuote').on('click', function(){
getNewQuote();
});To:
$('.getQuote').on('click', getNewQuote);
Also, in jQuery 3 document.ready is obsolete - remove your document.ready and replace it with:
$(getNewQuote);
Last feedback - it's a bad practice to rely on global variables that are set asynchronously - pass the quote + author to a function when building your twitter click functionality.
Hello, I have a web app based on vuejs / vuetify /webpack and I am doing some get/post from thirdparty apis with axios, that requires sending in the header the api key, which obviously is bad practice. What would be the steps to instead send the user form data to the server (ie. Express) then the server handles it and then posts back to the frontend the json? (so that the api header request is never seen by the frontend and thus exploited).