From 46e728bfce4cbfcc92695bfc530485b90d127d3b Mon Sep 17 00:00:00 2001
From: Boris Verkhovskiy <boris.verk@gmail.com>
Date: Sun, 24 Jul 2022 00:25:17 -0700
Subject: [PATCH] Preview conversion on mouse-over

---
 index.html |  4 ++--
 index.js   | 19 ++++++++++++++-----
 main.css   |  9 +++++++++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 4adcbfb..998ebc5 100644
--- a/index.html
+++ b/index.html
@@ -233,10 +233,10 @@ <h3>Privacy</h3>
           This is a static website (hosted on <a href="https://pages.github.com/">GitHub Pages</a>) and the conversion happens <a href="https://github.com/curlconverter/curltorequests/blob/master/index.js">entirely in your browser</a> using JavaScript.
         </p>
         <p class="pt-lg-2">
-          There is also <a href="https://marketplace.visualstudio.com/items?itemName=curlconverter.curlconverter">a VS Code extension</a> and a command line tool you can install from <a href="https://www.npmjs.com/package/curlconverter">npm</a> with
+          There is also <a href="https://marketplace.visualstudio.com/items?itemName=curlconverter.curlconverter">an extension for VS Code</a> and a command line tool you can install from <a href="https://www.npmjs.com/package/curlconverter">npm</a> with
         </p>
         </p>
-          <code>npm install -g curlconverter</code>
+        <code class="unselectable">$ </code><code>npm install -g curlconverter</code>
         </p>
       </div>
       <div class="col-sm-6 col-md-4">
diff --git a/index.js b/index.js
index 0dd4254..c74e8b1 100644
--- a/index.js
+++ b/index.js
@@ -124,8 +124,7 @@ const changeLanguage = function (language) {
 }
 
 const getLanguage = function () {
-  const languageSelect = document.getElementById('language-select')
-  return languageSelect.value
+  return document.getElementById('language-select').value
 }
 
 const showIssuePromo = (errorMsg) => {
@@ -166,11 +165,11 @@ const showExample = function (code) {
   convert()
 }
 
-const convert = function () {
+const convert = function (language) {
   let curlCode = document.getElementById('curl-code').value
   let generatedCode
   let error
-  const language = getLanguage()
+  language = language || getLanguage()
   let warnings = []
 
   // Convert the placeholder text as a demo
@@ -243,7 +242,7 @@ if (Object.prototype.hasOwnProperty.call(languages, hash)) {
 }
 
 const curlCodeInput = document.getElementById('curl-code')
-curlCodeInput.addEventListener('input', convert)
+curlCodeInput.addEventListener('input', () => { convert() })
 
 // listen for change in select
 const languageSelect = document.getElementById('language-select')
@@ -264,6 +263,16 @@ for (const navbarItem of languageNavbarItems) {
     changeLanguage(language)
     convert()
   })
+
+  navbarItem.addEventListener('mouseenter', function (e) {
+    e.preventDefault()
+    const language = e.target.href.split('#')[1]
+    convert(language)
+  })
+  navbarItem.addEventListener('mouseout', function (e) {
+    e.preventDefault()
+    convert()
+  })
 }
 
 const getExample = document.getElementById('get-example')
diff --git a/main.css b/main.css
index 983c3ca..42cf752 100644
--- a/main.css
+++ b/main.css
@@ -77,3 +77,12 @@ pre {
 .github-fork-ribbon:before {
   background-color: #333;
 }
+
+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}