From 7e18816009998f6c548a0fae46cfdc8a30860f12 Mon Sep 17 00:00:00 2001 From: Uri Grupel Date: Mon, 27 May 2024 11:29:39 +0300 Subject: [PATCH] Improved the random images code --- index.html | 5 ++++- script-min.js | 2 +- script.js | 43 +++++++++++-------------------------------- styles-min.css | 2 +- styles.css | 4 ++++ 5 files changed, 21 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 85a32e3..d312509 100644 --- a/index.html +++ b/index.html @@ -96,7 +96,10 @@

למה הגבת ככה?

- + Dancing Bear + Bling Bling + Stevie Wonder + The Frankenstein diff --git a/script-min.js b/script-min.js index 808a249..29a3292 100644 --- a/script-min.js +++ b/script-min.js @@ -1 +1 @@ -async function copyToClipboard(t){text=document.getElementById(t).textContent;try{await navigator.clipboard.writeText(text),showTooltip("Copied",document.getElementById(t))}catch(t){}}function getAdvice(){document.getElementById("bet-result").classList.remove("hidden")}function getNumbers(){let t=range(1,37),e=range(1,7),n=[];for(let o=0;o<6;o++){const o=randInt(0,t.length),i=t.splice(o,1)[0];n.push(i),ot+o*n))}function randInt(t,e){return diff=e-t,diff<=0?t:t+Math.floor(Math.random()*diff)}function showTooltip(t,e){const n=parseFloat(getComputedStyle(document.documentElement).fontSize),o=document.getElementById("tooltip");o.textContent=t,o.style.opacity="1",o.style.pointerEvents="auto";const i=e.getBoundingClientRect(),s=window.scrollX+i.right-o.getBoundingClientRect().width,c=i.bottom+window.scrollY+n;o.style.top=`${c}px`,o.style.left=`${s}px`,setTimeout((()=>{o.style.opacity="0",o.style.pointerEvents="none"}),1e3)}function translate(t,e){const n="zxcvbnm,./asdfghjkl;'qwertyuiop[]",o="זסבהנמצתץ.שדגכעיחלךף,/'קראטוןםפ][";let i=n,s=o;"en"===e&&(i=o,s=n);let c="";for(const e in t){const n=i.search(t[e].toLowerCase());c=-1===n?c.concat(t[e]):c.concat(s[n])}return c}function getTranslation(){const t=document.querySelectorAll("#lang-choices input");let e="";for(const n of t)n.checked&&(e=n.value);const n=document.getElementById("input-message").value,o=document.getElementById("output-message");""===e&&(e=findTargetLang(n)),o.textContent=translate(n,e),copyToClipboard("output-message")}function findTargetLang(t){const e="zxcvbnm,./asdfghjkl;'qwertyuiop[]",n="זסבהנמצתץ.שדגכעיחלךף,/'קראטוןםפ][";let o=0,i=0;for(const s in t){let c=e.search(t[s].toLowerCase());-1!=c&&i++,c=n.search(t[s].toLowerCase()),-1!=c&&o++}return o{e.setAttribute(t,n)}))}document.getElementById("input-message").addEventListener("keydown",(t=>{"Enter"===t.key&&getTranslation()})); \ No newline at end of file +async function copyToClipboard(t){text=document.getElementById(t).textContent;try{await navigator.clipboard.writeText(text),showTooltip("Copied",document.getElementById(t))}catch(t){}}function getAdvice(){document.getElementById("bet-result").classList.remove("hidden")}function getNumbers(){let t=range(1,37),e=range(1,7),n=[];for(let o=0;o<6;o++){const o=randInt(0,t.length),s=t.splice(o,1)[0];n.push(s),ot+o*n))}function randInt(t,e){return diff=e-t,diff<=0?t:t+Math.floor(Math.random()*diff)}function showTooltip(t,e){const n=parseFloat(getComputedStyle(document.documentElement).fontSize),o=document.getElementById("tooltip");o.textContent=t,o.style.opacity="1",o.style.pointerEvents="auto";const s=e.getBoundingClientRect(),c=window.scrollX+s.right-o.getBoundingClientRect().width,l=s.bottom+window.scrollY+n;o.style.top=`${l}px`,o.style.left=`${c}px`,setTimeout((()=>{o.style.opacity="0",o.style.pointerEvents="none"}),1e3)}function translate(t,e){const n="zxcvbnm,./asdfghjkl;'qwertyuiop[]",o="זסבהנמצתץ.שדגכעיחלךף,/'קראטוןםפ][";let s=n,c=o;"en"===e&&(s=o,c=n);let l="";for(const e in t){const n=s.search(t[e].toLowerCase());l=-1===n?l.concat(t[e]):l.concat(c[n])}return l}function getTranslation(){const t=document.querySelectorAll("#lang-choices input");let e="";for(const n of t)n.checked&&(e=n.value);const n=document.getElementById("input-message").value,o=document.getElementById("output-message");""===e&&(e=findTargetLang(n)),o.textContent=translate(n,e),copyToClipboard("output-message")}function findTargetLang(t){const e="zxcvbnm,./asdfghjkl;'qwertyuiop[]",n="זסבהנמצתץ.שדגכעיחלךף,/'קראטוןםפ][";let o=0,s=0;for(const c in t){let l=e.search(t[c].toLowerCase());-1!=l&&s++,l=n.search(t[c].toLowerCase()),-1!=l&&o++}return o{"Enter"===t.key&&getTranslation()})); \ No newline at end of file diff --git a/script.js b/script.js index 8807430..6000224 100644 --- a/script.js +++ b/script.js @@ -146,36 +146,15 @@ function findTargetLang(text) { } function getReason() { - const options = [ - { - alt: 'Dancing Bear', - src: 'images/bear.webp', - width: 450, - height: 500, - }, - { - alt: 'Bling Bling', - src: 'images/bling.webp', - width: 500, - height: 500, - }, - { - alt: 'Stevie Wonder', - src: 'images/stevie.webp', - width: 500, - height: 333, - }, - { - alt: 'The Frankenstein', - src: 'images/frankenstein.webp', - width: 401, - height: 500, - }, - ]; - const img = document.getElementById('reason-img'); - img.classList.remove('hidden'); - index = randInt(0, options.length); - Object.entries(options[index]).forEach(([key, value]) => { - img.setAttribute(key, value); - }); + const imgs = document.getElementsByClassName('reason-img'); + const index = randInt(0, imgs.length); + let i = 0; + for (const img of imgs) { + if (i === index) { + img.classList.remove('none'); + } else { + img.classList.add('none'); + } + i++; + } } diff --git a/styles-min.css b/styles-min.css index 40ab2c5..e0d1af0 100644 --- a/styles-min.css +++ b/styles-min.css @@ -1 +1 @@ -*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}:root{direction:rtl;writing-mode:horizontal-tb}.copy-button{width:35px;height:35px}.output{display:flex;gap:1em;border:1px solid black;border-radius:2px;align-items:center;padding-inline-start:1em}.output p{flex-grow:1}.output button{flex-shrink:0}.container{padding-inline:4em;padding-block:2em;transition:padding .25s ease-in}main{display:flex;flex-direction:column;max-width:70em;margin-inline:auto}header{background-color:black;color:hsl(128,53%,79%);text-align:center}h1{font-variant:small-caps}.text-input{width:100%;padding-inline-start:1em}.action-container{display:flex;justify-content:center;margin-block:1em}.action-container button{cursor:pointer;padding:.5em 1em;background-color:hsl(128,100%,25%);color:white;border-width:0}.action-container button:hover{background-color:hsl(128,100%,15%)}.hidden{visibility:hidden}.tooltip{opacity:0;padding:.5em 1em;pointer-events:none;position:absolute;background-color:white;box-shadow:0 0 10px rgba(0,0,0,.3)}.radio-options{width:fit-content}.reason-img{scale:1;max-width:100%;height:auto;box-shadow:0 0 10px rgba(0,0,0,.3);margin-inline:auto}@media only screen and (max-width:50em){.container{padding-inline:.5em}} \ No newline at end of file +*,*::before,*::after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}:root{direction:rtl;writing-mode:horizontal-tb}.copy-button{width:35px;height:35px}.output{display:flex;gap:1em;border:1px solid black;border-radius:2px;align-items:center;padding-inline-start:1em}.output p{flex-grow:1}.output button{flex-shrink:0}.container{padding-inline:4em;padding-block:2em;transition:padding .25s ease-in}main{display:flex;flex-direction:column;max-width:70em;margin-inline:auto}header{background-color:black;color:hsl(128,53%,79%);text-align:center}h1{font-variant:small-caps}.text-input{width:100%;padding-inline-start:1em}.action-container{display:flex;justify-content:center;margin-block:1em}.action-container button{cursor:pointer;padding:.5em 1em;background-color:hsl(128,100%,25%);color:white;border-width:0}.action-container button:hover{background-color:hsl(128,100%,15%)}.hidden{visibility:hidden}.none{display:none}.tooltip{opacity:0;padding:.5em 1em;pointer-events:none;position:absolute;background-color:white;box-shadow:0 0 10px rgba(0,0,0,.3)}.radio-options{width:fit-content}.reason-img{scale:1;max-width:100%;height:auto;box-shadow:0 0 10px rgba(0,0,0,.3);margin-inline:auto}@media only screen and (max-width:50em){.container{padding-inline:.5em}} \ No newline at end of file diff --git a/styles.css b/styles.css index fc309e1..8b2c27a 100644 --- a/styles.css +++ b/styles.css @@ -123,6 +123,10 @@ h1 { visibility: hidden; } +.none { + display: none; +} + .tooltip { opacity: 0; padding: 0.5em 1em;