lkian sends brownie points to @ezioda004 and @joeeeezy_twitter :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @ezioda004 |http://www.freecodecamp.org/ezioda004
@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.
<!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>
http
now, so you have to change your audio source. You can get all other library in the setting.
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
onFormSubmit = event => {
const fields = this.state.fields;
this.props.onFieldsSubmit(fields);
this.setState({
fields: {
type: '',
title: ''
}
});
event.preventDefault();
};
onFormSubmit = event => {
event.preventDefault(); // this would not work
const fields = this.state.fields;
this.props.onFieldsSubmit(fields);
this.setState({
fields: {
type: '',
title: ''
}
});
};
preventDefault()
cancels the rest of the code?
' '
<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>
this.state.fields.type
?
heathercoraje sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9142 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@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
?...
part)
mgrienauer sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1593 | @alpox |http://www.freecodecamp.org/alpox
//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>');
}
}
}
});
}
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"];
This is if I understood what you want correctly @Donnie-D
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');}
}
this part
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 104 | @codernewby |http://www.freecodecamp.org/codernewby
/backgroundArr[i]/gi
) in a regular expression, you might want to do it like this
new RegExp()
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2441 | @darrenfj |http://www.freecodecamp.org/darrenfj
if(output === "Rain") do something;
else if (...) ...
Hi,
$("#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:
germangamboa95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3830 | @khaduch |http://www.freecodecamp.org/khaduch
#checkIDGrid
dynamically .click()
doesnt work..on()
and the function works.<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>
.val
(vanilla JS) or .va()
method (jQuery) and in the "enter" eventListener use window.open()
with modified url?
window.open("https://www.youraddress.com","_self")
a
needs to be altered
ingundela sends brownie points to @sh4r10 :sparkles: :thumbsup: :sparkles:
:cookie: 113 | @sh4r10 |http://www.freecodecamp.org/sh4r10
:active
sh4r10 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @ezioda004 |http://www.freecodecamp.org/ezioda004
a:active {
background-color: white;
}
a:active {
background-color: white !important;
}
.nav-item {
background: white !important;
}
.navbar-light .navbar-nav .nav-link {
color: #808080!important;
}
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">
...
.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;
}
compressed
class is what you are using to modify the background color of the navbar on scroll
.navbar-light .navbar-nav .nav-link {
color: #808080!important;
font-size: 0.8rem;
text-align: center;
}
.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.
@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
!important
to override. It can cause unintended side effects
!important
!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.
ingundela sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
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 ?
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).<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>
@gulsvi Oh that's interesting
Thanks bro
dardandmr sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2692 | @gulsvi |http://www.freecodecamp.org/gulsvi
Only thing that looks odd is the tweet button
Twit This Quote
Better just
Tweet Quote
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 ;)
@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);
$(getNewQuote);