create .json file on run time in javascript and save it in the end

Question

This is my script. It is doing 2 things.

on mouse up it highlights the text
on highlight text, when it is clicked, it opens up a context Menu

What I want to do next is:

take the highlighted text as key
take the selected option from context Menu as value
save key:value pairs in JSON format
write JSON to file

I am new to web, need suggestions on how to do it. so far , my menu items are clickable but what to do next and how to implement what i want to implement is the question i want help with.

<!DOCTYPE html>
<html>

<head>
  <title>TEST</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="context_menu.js"></script>


  <style type="text/css">
    .red {
      color: red;
    }
    
    ;
    body {
      font-family: "Roboto", san-serif;
    }
    
    .center {
      text-align: center;
    }
    
    .menu {
      width: 120px;
      z-index: 1;
      box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
      position: fixed;
      display: none;
      transition: 0.2s display ease-in;
      .menu-options {
        list-style: none;
        padding: 10px 0;
        z-index: 1;
        .menu-option {
          font-weight: 500;
          z-index: 1;
          font-size: 14px;
          padding: 10px 40px 10px 20px;
          // border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
          cursor: pointer;
          &:hover {
            background: rgba(0, 0, 0, 0.2);
          }
        }
      }
    }
    
    button {
      background: grey;
      border: none;
      .next {
        color: green;
      }
      &[disabled="false"]:hover {
        .next {
          color: red;
          animation: move 0.5s;
          animation-iteration-count: 2;
        }
      }
    }
    
    @keyframes move {
      from {
        transform: translate(0%);
      }
      50% {
        transform: translate(-40%);
      }
      to {
        transform: transform(0%);
      }
    }
  </style>

  <body>


    <div class="menu">
      <ul class="menu-options">
        <li class="menu-option" id="demo" onclick="myFunction()">Animal</li>
        <li class="menu-option">Bird</li>
        <li class="menu-option">Human</li>
        <li class="menu-option">Alien</li>
        <li class="menu-option">No one</li>
      </ul>
    </div>

    <div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset imply dummy text sheets containing Lorem Ipsum passages, and more
      recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

  </body>
  <script>
    const menu = document.querySelector(".menu");
    console.log(menu)
    let menuVisible = false;
    const toggleMenu = command => {
      console.log("Togel : " + command)
      menu.style.display = command === "show" ? "block" : "none";
      menuVisible = !menuVisible;
    };

    const setPosition = ({
      top,
      left
    }) => {
      console.log(top)
      console.log(left)
      menu.style.left = `${left}px`;
      menu.style.top = `${top}px`;
      toggleMenu("show");
    };

    // window.addEventListener("click", e => {
    //    
    // });

    $(function() {
      thisRespondHightlightText(".select--highlight--active");
    });
    /*thisRespondHightlightText(".select--highlight--active");*/


    function thisRespondHightlightText(thisDiv) {
      $(thisDiv).on("mouseup", function() {
        console.log("EVENT")
        var selectedText = getSelectionText();
        var selectedTextRegExp = new RegExp(selectedText, "g");
        var text = $(this).text().replace(selectedTextRegExp, "<span class='red'>" + selectedText + "</span>");
        console.log("Text " + selectedText)
        $(this).html(text);
        if (selectedText == "") {
          toggleMenu("hide");
        } else {

          const origin = {
            left: 100,
            top: 100
          };
          setPosition(origin);
        }

      });
    }

    function getSelectionText() {
      var text = "";
      if (window.getSelection) {
        text = window.getSelection().toString();
      } else if (document.selection && document.selection.type != "Control") {
        alert("In else")
        text = document.selection.createRange().text;
      }

      return text;
    }

    function myFunction() {
      document.getElementById("demo").innerHTML = "I am an Animal!";
    }
  </script>
</head>



</html>

You cannot create a file using Javascript on the client side. — Anurag Srivastava, Jul 30 '19 at 08:47
You should save data into localStorage instead.. see https://stackoverflow.com/a/20823621/7035903 — shreyas d, Jul 30 '19 at 08:49
*my menu items are clickable* ... no **one** element is clickable — Liam, Jul 30 '19 at 08:50
This code is a total mess. I have no idea what your trying to do but I'm sure this isn't remotely doing it. VTC too broad — Liam, Jul 30 '19 at 08:52
@Liam sorry yes one is clickable, its there just to explain what i have done and what i am trying to do next — irum zahra, Jul 30 '19 at 08:53
@AnuragSrivastava but i can crate JSON right ? so if you could help me in creating part ? — irum zahra, Jul 30 '19 at 08:54
@shreyasdharav yes i have already seen it, but i dont want to use local storage. will see about storage part of it. for now if someone could help me in creating JSON that would be great — irum zahra, Jul 30 '19 at 08:56
@AjayPandya can I create something in a form of `key:value` pair ? — irum zahra, Jul 30 '19 at 08:57
Try creating json data like `var jsonData = {};` then add items like `jsonData[key] = value;`. Just apply the code correctly where you need it. — Dumisani, Jul 30 '19 at 09:01
I'm sorry, but this question is just not a good fit for SO. SO questions should be reasonably scoped and require a definitive answer. This code is a long way form what you want. Maybe try and break the problem down into smaller pieces. I'd advise you read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask). As it stands I'd expect this question to (eventually) get closed as [too broad](https://stackoverflow.com/help/on-topic) — Liam, Jul 30 '19 at 09:44
@Dumisani it is working. If you can add it as answer i can accept it — irum zahra, Jul 30 '19 at 09:51

Dumisani · Accepted Answer · 2019-07-30T10:09:35.333

1

To create JSON data declare it using

var jsonData = {};

Then assign key:value items to it

jsonData[key] = value;

You can later access its data by using the keys

var value = jsonData.key;
var value = jsonData['key'];

edited Jul 30 '19 at 10:09

answered Jul 30 '19 at 10:03

Dumisani

2,988
1
29
40

create .json file on run time in javascript and save it in the end

1 Answers1