Develop Reference

How to test different media queries for a javascript

I have below javascript written, I would like to add tooltip on a button for every desktop device of different sizes. Can anyone advise how can I mention different media screen in my javascript and how could I test it in my laptop for every media screen I included in style.
<style>
.banner-text>div>.banner-link.link-highlight
{
display: none;
}
.booking-widget-home
{
background-image: url('https://www.goxyz.in/content/dam/goxyz/6e-website/banner/target/05/Banner-Blue-checks.jpg') !important;
}
.banner-title
{
color: white;
}
.banner-description
{
color: white;
}
.offers-container.offers-up
{
cursor: pointer;
}
.banner-link.link-highlight
{
border-radius: 10px;
}
.ntooltip
{
position: absolute;
background: #92dff6;
color: #3e3158;
padding: 2px 0;
border-radius: 10px;
bottom: 42px;
left: 100px;
text-align: center;
font-size: 11px;
width: 130px;
box-shadow: 2px 5px 14px 0 rgba(0, 0, 0, .5);
}
.ntooltip:before
/* triangle decoration */
{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #92dff6;
content: '';
position: absolute;
left: 50%;
top: -10px;
margin-left: -10px;
}
</style>
<script>
(function()
{
'use strict';
var cnt = 6000;
function init()
{
if (typeof jQuery != "undefined")
{
// call to change content
content_change();
}
else
{
cnt = cnt - 500;
if (cnt > 500) setTimeout(init, 500);
}
}
// function to change your content
function content_change()
{
if (jQuery(".booking-widget-home").length > 0)
{
jQuery('.offers-container.offers-up > .offers-wrapper > div >h1 ').text('Kerala Alert!');
jQuery('.offers-container.offers-up > .offers-wrapper > div > p.banner-description ').html("Tooltip test is successfull</br><span><a href='https://www.goggle.com' target='_blank' class='banner-link link-highlight'>Add snacks</a></span>");
$('.banner-description > span').append('<div class="ntooltip">Click Here to Know More</div>');
}
else
{
cnt = cnt - 500;
if (cnt > 500) setTimeout(content_change, 500);
}
}
init();
})()
</script>

Create grid in HTML

I'm looking to create a grid like this: Grid
I'm using this:
$(document).ready(function() {
for (var i = 0; i < 366; i++) {
$('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
}
});
to generate 365 divs, then, with CSS, create the 'grid' style.
.dia {
width: 45px;
height: 45px;
background: white;
outline: 2px solid;
float: left;
}
.div-padre {
width: 800px;
}
I tried to clearfix but the last div goes wrong, I don't care if they are divs, tr or whatever, but in the future i would like to select one square and change color, so div or tr or something, I need you to be able to do that later

This is a border/outline management issue, take a look at this:
$(document).ready(function() {
for (var i = 0; i < 366; i++) {
$('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
}
});
.dia {
width: 45px;
height: 45px;
background: white;
border: 2px solid;
float: left;
margin-top:-2px;
margin-left:-2px;
}
.div-padre {
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>

Use border: 2px solid; margin: -1px; instead of outline: 2px solid;
$(document).ready(function() {
for (var i = 0; i < 365; i++) {
$('#div-padre')
.append(
$('<div>', {
id: 'div-' + (i+1),
class: 'dia'
}));
}
});
.dia {
width: 45px;
height: 45px;
background: white;
border: 2px solid;
margin: -1px;
float: left;
}
.div-padre {
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>

For loop runs length of array but displays one element array.length times

I'm working on a project for freeCodeCamp and I'm running a for loop through an array of twitch.tv users. I've created a table and for each username in my array, it's supposed to add the new row, fill it with the data, and move onto the next element. The problem is that every time I run the code it seems to be choosing a random index in the array and running the loop through to equal the number of elements in the array. I think it's a display issue because it's connecting to the server for each individual call.
Hopefully someone can help me out.
var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404']
var streams = 'https://wind-bow.gomix.me/twitch-api/streams/';
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/';
var users = 'https://wind-bow.gomix.me/twitch-api/users/';
var getStream = function(data) {
if (data.stream === null) {
$('.status').append('Offline');
} else {
var streamStatus = data.stream.channel.status;
var html = '<td class="stream">' + streamStatus + '</td>';
$('.stream').html(html);
}
}
var getChannels = function(data) {
var game = data.display_name;
var logoHtml = data.logo;
var channelUrl = data.url;
var gameHtml = '' + game + '';
var logoHtml = '<img class="image" src="' + logoHtml + '">';
$('.game').html(gameHtml);
$('.logo').html(logoHtml);
}
$(document).ready(function() {
$('.choice').on('click', function() {
$('.choice').removeClass('selected');
$(this).toggleClass('selected');
});
var table = $('<table id="twitch-table"></table>').appendTo('#content');
for (var i = 0; i < twitch.length; i++) {
var row = $('<tr></tr>').appendTo(table);
$('<td class="logo"></td>').appendTo(row);
$('<td class="game"></td>').appendTo(row);
$('<td class="stream"></td>').appendTo(row);
$.getJSON(streams + twitch[i], getStream, 'jsonp');
$.getJSON(channels + twitch[i], getChannels, 'jsonp');
}
});
body {
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
font-size: 100%;
}
a {
text-decoration: none;
}
#main {
width: 600px;
margin: 2% auto 0;
}
#header {
padding: 0;
margin: 0;
background: #116466;
color: #d1e8e2;
line-height: 100px;
width: 100%;
}
h1 {
margin: 0 0 0 5%;
font-size: 300%;
}
#row {
background: #285277;
width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
.choice {
position: relative;
text-align: center;
width: 33%;
background: #285277;
padding: 5px 10px;
display: inline-block;
color: #d1e8e2;
font-size: 150%;
}
.choice a {
/*padding: 5px 20px;*/
color: #d1e8e2;
}
#content {
width: 100%;
background: #efefef;
}
/*
.choice a:active {
background: #1E3D59;
}
*/
.selected {
background: #1E3D59;
}
.selected:after {
content: '';
position: absolute;
top: 100%;
right: 45%;
width: 0;
height: 0;
border-top: solid 10px #1E3D59;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
table {
width: 600px;
}
tr {
margin: 5px 0;
display: flex;
width: 100%;
justify-content: space-between;
}
td {
border-collapse: collapse;
box-sizing: border-box;
margin: 0;
padding: 0;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.game {
padding-left: 10px;
width: 100px;
font-size: 120%;
line-height: 75px;
text-overflow: ellipsis;
}
.game a {
color: #111;
}
.image {
height: 75px;
width: 75px;
}
.logo {
padding: 3px 5px;
box-sizing: border-box;
}
.stream {
padding-right: 10px;
width: 350px;
display: inline-block;
text-overflow: ellipsis;
line-height: 75px;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitch.tv JSON API</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://use.fontawesome.com/57c9bf8971.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id='main'>
<header id='header'>
<h1>Twitch Streamers</h1>
</header>
<div id='row'>
<ul>
<li class='choice selected'><a href='#'>All</a></li>
<li class='choice'><a href='#'>Online</a></li>
<li class='choice'><a href='#'>Offline</a></li>
</ul>
</div>
<div id='content'>
</div>
</div>
</body>
</html>

The problem is in these lines:
$('.game').html(gameHtml);
$('.logo').html(logoHtml);
$('.stream').html(html);
They select all lines with game class (or logo or stream) And change them all.
See here a fixed JSfiddle.

You need to use the callback function properly. Your getStreams and getChannels functions are applying data to all rows, instead of its own individual row.
Below are the modified callback functions declarations:
var getStream = function(url, idx) {
$.getJSON(url, function(data){
if (data.stream === null) {
$('.status').append('Offline');
} else {
var streamStatus = data.stream.channel.status;
var html = '<td class="stream">' + streamStatus + '</td>';
$('tr').eq(idx).find('.stream').html(html);
}
});
}
var getChannels = function(url, idx) {
$.getJSON(url, function(data){
var game = data.display_name;
var logoHtml = data.logo;
var channelUrl = data.url;
var gameHtml = '' + game + '';
var logoHtml = '<img class="image" src="' + logoHtml + '">';
$('tr').eq(idx).find('.game').html(gameHtml);
$('tr').eq(idx).find('.logo').html(logoHtml);
});
}
And, call them within your for loop as:
getStream(streams + twitch[i], i);
getChannels(channels + twitch[i], i);
JSFiddle for your reference: https://jsfiddle.net/yogesh214/yxLu9mwg/4/

I understand your problem now:
As #Shalom Peles said, you're using $('.stream') to select all the elements in the document with the class .stream instead of just the element within your row.
Instead use .find to select within an element. For example:
let row = $('<div class="my-row"></div>'); // creates a row
row.append(/* ... */);
let elementInsideRow = row.find('.my-column'); // this selects an element *inside* the row element.
Also: use let instead of var for all declarations
I edited your code to work for streams. Do the same for channels. Read the comments.
var twitch = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'storbeck', 'habathcx', 'RobotCaleb', 'noobs2ninjas', 'ESL_LOL', 'wow_2', 'brunofin', 'comster404']
var streams = 'https://wind-bow.gomix.me/twitch-api/streams/';
var channels = 'https://wind-bow.gomix.me/twitch-api/channels/';
var users = 'https://wind-bow.gomix.me/twitch-api/users/';
// refactor this like I did below
var getChannels = function(data) {
var game = data.display_name;
var logoHtml = data.logo;
var channelUrl = data.url;
var gameHtml = '' + game + '';
var logoHtml = '<img class="image" src="' + logoHtml + '">';
$('.game').html(gameHtml);
$('.logo').html(logoHtml);
}
$(document).ready(function() {
$('.choice').on('click', function() {
$('.choice').removeClass('selected');
$(this).toggleClass('selected');
});
var table = $('<table id="twitch-table"></table>').appendTo('#content');
// you need to use `let` here because you need block scope
// in general, use `let` instead of `var` everywhere.
// https://stackoverflow.com/questions/21906133/when-should-i-use-let-and-var
for (let i = 0; i < twitch.length; i++) {
let row = $('<tr></tr>');
$.getJSON(streams + twitch[i], function(data) {
$('<td class="logo"></td>').appendTo(row);
$('<td class="game"></td>').appendTo(row);
$('<td class="stream"></td>').appendTo(row);
if (data.stream === null) {
// instead of selecting all the elements with `.status`, use `find` to select *within* the `row` element
// $('.status').append('Offline');
row.find('.status').append('Offline');
} else {
var streamStatus = data.stream.channel.status;
var html = '<td class="stream">' + streamStatus + '</td>';
row.find('.stream').html(html);
}
// apend it when you're done
row.appendTo(table);
}, 'jsonp');
// make the same changes for channel
//$.getJSON(channels + twitch[i], getChannels, 'jsonp');
}
});
body {
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
font-size: 100%;
}
a {
text-decoration: none;
}
#main {
width: 600px;
margin: 2% auto 0;
}
#header {
padding: 0;
margin: 0;
background: #116466;
color: #d1e8e2;
line-height: 100px;
width: 100%;
}
h1 {
margin: 0 0 0 5%;
font-size: 300%;
}
#row {
background: #285277;
width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
.choice {
position: relative;
text-align: center;
width: 33%;
background: #285277;
padding: 5px 10px;
display: inline-block;
color: #d1e8e2;
font-size: 150%;
}
.choice a {
/*padding: 5px 20px;*/
color: #d1e8e2;
}
#content {
width: 100%;
background: #efefef;
}
/*
.choice a:active {
background: #1E3D59;
}
*/
.selected {
background: #1E3D59;
}
.selected:after {
content: '';
position: absolute;
top: 100%;
right: 45%;
width: 0;
height: 0;
border-top: solid 10px #1E3D59;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
table {
width: 600px;
}
tr {
margin: 5px 0;
display: flex;
width: 100%;
justify-content: space-between;
}
td {
border-collapse: collapse;
box-sizing: border-box;
margin: 0;
padding: 0;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.game {
padding-left: 10px;
width: 100px;
font-size: 120%;
line-height: 75px;
text-overflow: ellipsis;
}
.game a {
color: #111;
}
.image {
height: 75px;
width: 75px;
}
.logo {
padding: 3px 5px;
box-sizing: border-box;
}
.stream {
padding-right: 10px;
width: 350px;
display: inline-block;
text-overflow: ellipsis;
line-height: 75px;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitch.tv JSON API</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://use.fontawesome.com/57c9bf8971.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id='main'>
<header id='header'>
<h1>Twitch Streamers</h1>
</header>
<div id='row'>
<ul>
<li class='choice selected'><a href='#'>All</a></li>
<li class='choice'><a href='#'>Online</a></li>
<li class='choice'><a href='#'>Offline</a></li>
</ul>
</div>
<div id='content'>
</div>
</div>
</body>
</html>

link in html is not working

I have the following code snippet that I am embedding into a Wix website.
// JavaScript
var countries = [
{ name: 'Thailand', link: 'www.google.com' },
{ name: 'Tanzania', link: '' },
{ name: 'Tunisia', link: '' },
{ name: 'Taiwan', link: '' },
];
var matchingCountries = [];
function updateCountry() {
var searchTerm = document.getElementById('countrySearchInput').value;
var resultsList = document.getElementById('countrySearchResults');
resultsList.innerHTML = '';
if(searchTerm.length === 0) return;
var matchingCountries = countries.filter(function(country) {
return country.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
});
if(matchingCountries.length > 0) {
var fewerCountries = matchingCountries.splice(0, Math.min(matchingCountries.length, 5));
fewerCountries.forEach(function(country) {
resultsList.innerHTML += "<li><a href='" + country.link + "'>" + country.name + "</a></li>";
});
} else {
resultsList.innerHTML += "<li>No search results</li>";
}
}
function startSearch() {
document.getElementById('countrySearchResultsContainer').style.display = 'block';
}
function endSearch() {
document.getElementById('countrySearchResultsContainer').style.display = 'none';
}
/* CSS */
#country-search {
font-family: Helvetica;
}
*, *:before, *:after {
box-sizing: border-box;
}
#country-search {
width: 400px;
display: block;
}
#country-search .entry input {
width: 400px;
font-size: 24px;
padding: 12px;
border-radius: 10px;
border: 3px solid white;
background-color: rgba( 150, 150, 150, 0.1);
margin: 0;
}
#country-search .entry input:focus {
/*
border: 3px solid white;
outline: none;
*/
}
#countrySearchResultsContainer {
width: 100%;
border: 3px solid #eee;
border-radius: 5px;
display: none;
background-color: rgba(220,220,220,0.7);
}
#countrySearchResults {
margin: 0;
width: 100%;
padding: 0;
}
#countrySearchResults li {
font-size: 24px;
list-style-type: none;
padding: 12px;
}
#countrySearchResults li:hover {
background-color: #eee;
}
#countrySearchResults li:not(:last-child) {
padding-bottom: 10px;
}
#countrySearchResults li a {
text-decoration: none;
color: black;
}
#countrySearchResults li a:visited {
color: black;
}
#countrySearchInput {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-webkit-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-moz-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-ms-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#countrySearchInput::-ms-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<!-- HTML -->
<div id="country-search">
<div class="entry">
<input id="countrySearchInput" type="text" placeholder="Enter a country name" onkeyup="updateCountry()" onfocus="startSearch()" onblur="endSearch()" />
</div>
<div id="countrySearchResultsContainer">
<ul id="countrySearchResults">
</ul>
</div>
</div>
In this script, I am trying to type in Thailand, and when it appears as an option, I click it. However, when I do, the website: "www.google.com" does not pop up. What am I missing?

The URL that you have entered is incorrect. When referencing external websites you need to include the scheme. Change the link from www.google.com to http://www.google.com and you will be able to open the link when entering Thailand.

When you use www.google.com, the link will refer to a file or something in the folder the HTML files in in called www.google.com. If you want to use a weblink in your file, you should consider adding http:/ or https:/ before your link.
https:/www.google.com/

Changing all the cursors?

When I hover each span, the cursors are changed follow its title !
var cursors = [ "auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize", "s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize" ,"col-resize","row-resize","all-scroll","zoom-in","zoom-out","grab","grabbing" ];
var newHTML = [];
for (var i = 0; i < cursors.length; i++) {
newHTML.push('<span>' + cursors[i] + '</span>');
}
$("body").html(newHTML.join(""));
$("span").on( "mouseover", function() {
$(this).css( "cursor", cursors[4] );
});
html, body{
margin: 30px auto;
width: 90%;
text-align: center;
background: linear-gradient(top, green, lightblue);
}
h1{
color: #f49ba2;
}
span{
background-color: #ddd;
margin: 5px;
padding: 5px;
border: #abc 1px solid;
display: inline-block;
}
span:odd{
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="element"></p>

Do you mean this?
See https://api.jquery.com/index/
var cursors = [ "auto","default","none","context-menu","help","pointer","progress","wait","cell","crosshair","text","vertical-text","alias","copy","move","no-drop","not-allowed","e-resize","n-resize","ne-resize","nw-resize", "s-resize","se-resize","sw-resize","w-resize","ew-resize","ns-resize","nesw-resize","nwse-resize" ,"col-resize","row-resize","all-scroll","zoom-in","zoom-out","-webkit-grab", "-webkit-grabbing" ];
var newHTML = [];
for (var i = 0; i < cursors.length; i++) {
newHTML.push('<span>' + cursors[i] + '</span>');
}
$("body").html(newHTML.join(""));
$("span").on( "mouseover", function() {
$(this).css( "cursor", cursors[$(this).index()] );
});
html, body{
margin: 30px auto;
width: 90%;
text-align: center;
background: linear-gradient(top, green, lightblue);
}
h1{
color: #f49ba2;
}
span{
background-color: #ddd;
margin: 5px;
padding: 5px;
border: #abc 1px solid;
display: inline-block;
}
span:odd{
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>