CODEWITHSUNDEEP
javascriptjqueryapimobilejquery-ui-selectable
๖JoJo
๖JoJo

Reputation: 55

Selectable() Jquery mobile alternative

I was looking for the solution for my API but I couldn't find.. All examples or advices didn't work. Could somebody help me out? Or give me any suggestion? I'm still studying JQuery, so any help would be more than welcome..

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New api</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <section>
            <div id="alert"></div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
            <ul id="wordblock">
            </ul>
            <div id="result">Result</div>
        </section>
        <script src="./api.js"></script>
    </main>
</body>

</html>

JQuery code:

function screenResolutionAlert(x) {
    if (x.matches) {
        $("#alert").html("This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse").show();
    } else {
        $("#alert").hide();
    }
}
var x = window.matchMedia("(max-width: 1200px)")
screenResolutionAlert(x)
x.addListener(screenResolutionAlert)

//API swap words code
$(function () {
    $("#wordblock").sortable();
    $("#wordblock").disableSelection();
    const array = ["pierogi", "gołąbki", "pies", "sześcian"];
    const word = array[Math.floor(Math.random() * array.length)];
    let d_word = word.split('');
    shuffle(d_word);

    const lis = [];
    for (let i = 0; i < d_word.length; i++) {
        lis.push('<li class="ui-state-default">' + d_word[i] + '</li>')
    }

    $('#wordblock').html(lis.join(''));

    $('#wordblock').mouseup(function () {
        setTimeout(() => {
            let r_word = '';
            $('#wordblock>li').each(function (e) {
                r_word += $(this).text();
            });
            if (r_word == word) {
                $("#result").html(`Correct! It was exactly "${r_word}"`);
            } else {
                $("#result").html(`Wrong! keep trying.. <br> it's not "${r_word}"`);
            }
        }, 0);
    });

});

function shuffle(a, b, c, d) {
    c = a.length;
    while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}

Yes I was using mobile Jquery links, didn't work... And any versions of.. I tried everything what was written in the internet ;(

Upvotes: 0

Views: 190

Answers (1)

Luca Favorido
Luca Favorido

Reputation: 96

I tried your code and ...it seems to work! Snippet is here below, just press Run code snippet, and order letters to "PIES".

I suggest you to read about APIs, because at the moment you're not using any API at all! 😁

function screenResolutionAlert(x) {
  if (x.matches) {
    $("#alert")
      .html(
        "This API doesn't work with touchpads <br> (mobiles, tablets etc) <br> please use computer or laptop with a mouse"
      )
      .show();
  } else {
    $("#alert").hide();
  }
}
var x = window.matchMedia("(max-width: 1200px)");
screenResolutionAlert(x);
x.addListener(screenResolutionAlert);

//API swap words code
$(function () {
  $("#wordblock").sortable();
  $("#wordblock").disableSelection();
  const array = ["pies"];
  const word = array[Math.floor(Math.random() * array.length)];
  let d_word = word.split("");
  shuffle(d_word);

  const lis = [];
  for (let i = 0; i < d_word.length; i++) {
    lis.push('<li class="ui-state-default">' + d_word[i] + "</li>");
  }

  $("#wordblock").html(lis.join(""));

  $("#wordblock").mouseup(function () {
    setTimeout(() => {
      let r_word = "";
      $("#wordblock>li").each(function (e) {
        r_word += $(this).text();
      });
      if (r_word == word) {
        $("#result").html(`Correct! It was exactly "${r_word}"`);
      } else {
        $("#result").html(`Wrong! keep trying.. <br> it's not "${r_word}"`);
      }
    }, 0);
  });
});

function shuffle(a, b, c, d) {
  c = a.length;
  while (c)
    (b = (Math.random() * (--c + 1)) | 0),
      (d = a[c]),
      (a[c] = a[b]),
      (a[b] = d);
}
ul#wordblock {
  padding-left: 0;
}

ul#wordblock li {
  display: inline-block;
  font-size: 2em;
  padding: 0.2em 0.2em;
  cursor: pointer;
  background-color: aliceblue;
  border-radius: 50%;
  margin: 0.5em;
  width: 1em;
  height: 1em;
  text-align: center;
  line-height: 0.9em;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New api</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <main>
    <section>
      <div id="alert"></div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
      <ul id="wordblock">
      </ul>
      <div id="result">Result</div>
    </section>
    <script src="./api.js"></script>
  </main>
</body>

</html>

Upvotes: 0

Related Questions