hello I have a question about one of the exercises in the front end here is the code
<p>Cat Photos<a href="http://freecatphotoapp.com"></a></p> can someone tell me where the error is with the anchor text?
hello
something here missing
</a>
document.getElementById
parts into variables and use the variables instead
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Guna's Portfolio</title>
</head>
<body>
<div class="container">
<div class="row">
<img src="./images/yellow-metal-design-decoration.jpg" class="img-fluid">
</div>
</div><!-- container -->
<script src="scripts/jquery.slim.min.js"></script>
<script src="scripts/popper.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
</body>
</html>
.container {
border: 1px red solid;
}
img-responsive
or img-fluid
depending on the version of bootstrap
max-width:100%;
p-0
to the container class element
<body>
<div class="container p-0">
<img src="https://static.pexels.com/photos/5836/yellow-metal-design-decoration.jpg" class="img-fluid ">
</div>
</body>
@tiagocorreiaalmeida I didn't understand this part:
to show it on a new request to the same place
does this looks good so far ? :P
.table-fixed {
tbody {
height: 290px;
overflow-y: auto;
width: 100%;
display: block;
}
thead, tr, td, th {
display: block;
}
tbody td, thead > tr> th {
float: left;
}
}
var x = document.getElementById("weather");
var temp = document.getElementById("temp");
var scale = 'C';
var temperature= 0;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showWeather);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showWeather(position) {
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon="+position.coords.longitude,function(a){
temperature = a.main.temp;
x.innerHTML = "<img src='" + a.weather[0].icon + "'></img>" +"<h3><strong>Weather</strong></h3><p>"+ a.weather[0].main +"</p>"+"<h3><strong>Temperature</strong>";
temp.innerHTML = temperature;
});
}
function changeTemp(){
if(scale === 'C') {
scale = 'F';
temperature = (temperature *1.8) + 32;
} else {
scale = 'C';
temperature = temperature;
} temp.innerHTML = temperature;
}
So lets say you have this code:
$("#button").on("click",()=>{ stop the loop });
for (var i in 1000) { continue the loop }
What happens if i click the button when i = 567? Does it stop immediatly? Or does it have to iterate through to 1000 before it can process other code?
stop the loop
for (var i in 1000) { if a variable is true continue the loop }
for (int i = 0; i < address.length; i++) {
URL url = new URL(address[i]);
BufferedInputStream bis = new BufferedInputStream(url.openStream());
FileOutputStream fis = new FileOutputStream(file);
System.out.println("Downloading from " + address[i]);
byte[] buffer = new byte[1024];
int count = 0;
while ((count = bis.read(buffer, 0, 1024)) != -1) {
fis.write(buffer, 0, count);
}
fis.close();
bis.close();
}
mot01 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @iangracia |http://www.freecodecamp.com/iangracia
var cont = true; //<--global
$("#button").on("click",()=>{ cont =false });
for (var i in 1000) {
if(cont===false) break; //stop the loop
}
alpox sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @iangracia |http://www.freecodecamp.com/iangracia
iangracia sends brownie points to @moigithub and @mot01 and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 886 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 3693 | @moigithub |http://www.freecodecamp.com/moigithub
:star2: 1389 | @alpox |http://www.freecodecamp.com/alpox
fixed-top
. This can only work like this if the navbar has the class fixed-top
Hi guys! I have a small question... Do you know why is this not working..?
playSound(["greenSound", "redSound"]);
function playSound(playColors){
intervale = setInterval(function(){
play(playColors);
},2000);
}
function play(moves){
roundsPlayed++;
ion.sound.play(moves[roundsPlayed]);
if(roundsPlayed == rounds){
roundsPlayed = 0;
clearInterval(intervale);
}
}
ion.sound.play - is the play function from a library I'm using, this works fine, the problem is my function is not playing the sound at the interval I want. First you hear a beep then u hear 2 beeps at the same time and it stops.
I have a roundsPlayed variable declared globally.
marko88ks sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 405 | @tiagocorreiaalmeida |http://www.freecodecamp.com/tiagocorreiaalmeida
palingheorghe sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
$(".navbar").addClass("backgroundColor")
ofc.
marko88ks sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1390 | @alpox |http://www.freecodecamp.com/alpox
`
var a = [];
var c = [2,2,2];
var b = 0;
function doStuff(){
a = c.map(function(x){
b = x;
});
console.log(b);
}
doStuff();
var lat = 0;
function getLocation(){
navigator.geolocation.getCurrentPosition(function(pos) {
lat = pos.coords.latitude
});
console.log(lat);
}
getLocation();
`
`
" at the top and "```" at the bottom
doStuff
executes synchronously. In the 2. case, getLocation
- specifically, getCurrentPosition
works asynchronously. This means, that lat
will be set AFTER your console.log
already executed.
mbpiner sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 130 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
mbpiner sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1391 | @alpox |http://www.freecodecamp.com/alpox
getCurrentLocation
@marko88ks Very funny (not) thing: your overflow-x: hidden;
in
body,html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
}
Blocks the jquery scroll event. It never gets called.
If you take that one out (overflow-x: hidden
) it works.
getCurrentPosition
. That is the one which works asynchronously. Ofc. you can add another callback to getLocation
- to be called after getLocation
fully finished
marko88ks sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
forlenza sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @tiagocorreiaalmeida |http://www.freecodecamp.com/tiagocorreiaalmeida
nav a {
white-space: nowrap;
}
The Navbar on the other pages are based on bootstrap. I'm trying to move away from bootstrap, moreover the forum css interferes with bootstrap.
you have problems using bootstrap?
mbpiner sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
nav a
s are set to display block
nav{
font-family:'Open Sans',sans-serif;
width:100%;
background-color:#fff;
border-bottom:1px solid #e7e7e7;
}
.navigation{
display:flex;
max-width:1120px;
width:95%;
margin: 0 auto;
}
#navlogo{
font-family:'Dosis',sans-serif;
font-weight:700;
color:#5FCF80;
font-size:25px;
margin:20px 10px;
text-transform:uppercase;
justify-content:flex-start;
}
#navlogo span{
font-weight:100;
}
nav ul{
margin:0;
justify-content:flex-end;
display:flex;
list-style-type:none;
width:100%;
}
nav li{
position: relative;
margin: 1% 1%;
text-align:left;
}
.fa-chevron-down{
color: #717f86;
font-size: .8rem;
}
nav a{
color: #717f86;
font-weight:700;
text-decoration:none;
display: block;
margin:20px 10px;
}
nav a:visited{
color: #717f86;
}
nav a:hover{
color: #5FCF80;
}
.hmburger{
font-size:2em;
cursor:pointer;
padding:15px;
display:block;
justify-content:flex-end;
}
#toggle{
display:none;
}
.nav-dropdown ul{
display:none;
padding: 0;
position:absolute;
top: 100%;
left:0;
flex-direction:column;
border: 1px solid rgba(0,0,0,.15);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
font-size: .9rem;
width: 100%;
background-color: #fff;
z-index:9999;
}
.nav-dropdown:hover ul{
display:flex;
}
.nav-dropdown:hover{
background-color:#e7e7e7;
}
.nav-dropdown li{
}
#hg-button{
border: 1px solid #5fcf80;
border-radius:25px;
color: #5fcf80;
}
#hg-button-text{
color: #5fcf80;
}
@media (min-width: 991px){
.hmburger{
display: none;
}
}
@media (max-width: 991px) {
nav ul{
justify-content:center;
width:100%;
flex-direction:column;
text-align:center;
}
.navigation{
flex-wrap:wrap;
justify-content: space-between;
}
.nav-dropdown li{
padding:1%;
}
#navlogo{
font-size:24px;
}
.menu{
height:0;
overflow:hidden;
}
#toggle:checked + .menu{
height:100%;
}
}
i changed only the CSS
alteducation sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @ashwins93 |http://www.freecodecamp.com/ashwins93
body > nav > div > ul > li.nav-dropdown > a:hover body > nav > div > ul > li.nav-dropdown > ul {
background-color: #717f86;
}
body > nav > div > ul > li.nav-dropdown:hover ul {
background-color: grey
}
nav li {
position: relative;
margin: 1% 1%;
text-align: left;
padding: 0px 1%;
}
I again have a problem with the setInterval function... I really hate this one.....
aiTurn(["greenSound", "redSound"]);
function aiTurn(playColors){
intervale = setInterval(function(){
play(playColors);
},1500);
}
function play(moves){
ion.sound.play(moves[roundsPlayed]); //moves should be globally
roundsPlayed++;
console.log(roundsPlayed);
if(roundsPlayed == rounds){
clearInterval(intervale);
roundsPlayed = 0;
huTurn = true;
turnColorsOnOff();
}
}
function turnColorsOnOff(){
if(huTurn){
let color;
let turnMoves = [];
/*
$(".button-size").mouseup(function(){
$(this).css("background-color", color);
}).mousedown(function(){
color = $(this).css("background-color");
$(this).css("background-color",$(this).attr("id"));
});
*/
$(".button-size").bind("mouseup touchend", function(){
$(this).css("background-color", color);
});
$(".button-size").bind("mousedown touchstart", function(){
color = $(this).css("background-color");
ion.sound.stop($(this).attr("id") + "Sound");
$(this).css("background-color",$(this).attr("id"));
ion.sound.play($(this).attr("id") + "Sound");
turnMoves.push($(this).attr("id")+"Sound");
});
}else{
$(".button-size").unbind("mouseup");
$(".button-size").unbind("touchend");
$(".button-size").unbind("mousedown");
$(".button-size").unbind("touchstart");
}
setTimeout(function(){
huTurn = false;
turnColorsOnOff();
aiTurn(["greenSound", "redSound"]);
}, 10000);
}
For 20s everything works fine... ai takes his turn, plays the sounds he needs to and then i get my turn for only 10s, and then again everything works ok and then things start going crazy and the play function it's getting called again and again and again
function play(moves){
ion.sound.play(moves[roundsPlayed]); //moves should be globally
roundsPlayed++;
console.log(roundsPlayed);
// The first time play is ran roundsPlayed is 1 and rounds is 2
// So you never actually clear the interval in the ai turn and you keep creating a new interval
if(roundsPlayed == rounds){
clearInterval(intervale);
roundsPlayed = 0;
huTurn = true;
turnColorsOnOff();
}
}
function play(moves){
ion.sound.play(moves[roundsPlayed]); //moves should be globally
roundsPlayed++;
console.log(roundsPlayed);
if(roundsPlayed == rounds){
roundsPlayed = 0;
huTurn = true;
turnColorsOnOff();
}
// You should clear the inveral when the function has finished running so you don't keep creating the interval
clearInterval(intervale);
}
100! / 80!
which is still a runtime complexity of O(10^40)
3*3 = 9
possibilities to set a stone. For each of those stones, you try what would happen after that move - the next player would have 8
possibilities left to set a stone. The next one 7
etc. until noone can set a stone anymore (worst case ofc. - noone wins until the last stone) so you would have to calculate 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1
possibilities which is the faculty of 8, written 8!
.9 * 8 * 7
which can be written as 9! / 6!
because the / 6!
just removes the 6 * 5 * 4 * 3 * 2 * 1
part of the equation
8!
- can take some seconds
9
before in the description :D i fixed it. actually its 9!
and not 8!
362880
possibilities
O(9!)
- worst case
tell me your opinions on the Simon game UI i just build. What should i fix and what looks good so far.
i suck at css so any help will be great :)
top:..;
amd left:..;
attributes and i gave them values like top: -25%;
which i think is not the best thing
align: center;
wont do the job
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
top
or left
or transform