{"id":279,"date":"2025-09-10T06:10:52","date_gmt":"2025-09-10T06:10:52","guid":{"rendered":"https:\/\/learn-by-animation.com\/?page_id=279"},"modified":"2025-09-10T06:10:52","modified_gmt":"2025-09-10T06:10:52","slug":"molarity-2","status":"publish","type":"page","link":"https:\/\/learn-by-animation.com\/?page_id=279","title":{"rendered":"Molarity"},"content":{"rendered":"\n<div class=\"molarity-widget\">\n  <div class=\"wrap\">\n    <header>\n      <div>\n        <h1>Molarity slider<\/h1>\n        <p class=\"lead\">Interactive visualiser for <strong>M = (1000 \u00b7 m) \/ (M<sub>m<\/sub> \u00b7 V<sub>mL<\/sub>)<\/strong>. Move the sliders to see molarity update smoothly.<\/p>\n      <\/div>\n    <\/header>\n\n    <div class=\"grid\">\n      <div class=\"card\">\n        <div class=\"controls\">\n          <div class=\"control\">\n            <label>Mass of solute, m (g) <span id=\"mVal\" class=\"pill\">10 g<\/span><\/label>\n            <input id=\"m\" type=\"range\" min=\"0\" max=\"500\" step=\"0.1\" value=\"10\">\n          <\/div>\n\n          <div class=\"control\">\n            <label>Molar mass, M<sub>m<\/sub> (g\u00b7mol\u207b\u00b9) <span id=\"MmVal\" class=\"pill\">58.44 g\/mol<\/span><\/label>\n            <input id=\"Mm\" type=\"range\" min=\"1\" max=\"400\" step=\"0.01\" value=\"58.44\">\n          <\/div>\n\n          <div class=\"control\">\n            <label>Volume of solution, V<sub>mL<\/sub> (mL) <span id=\"VVal\" class=\"pill\">250 mL<\/span><\/label>\n            <input id=\"V\" type=\"range\" min=\"1\" max=\"5000\" step=\"0.1\" value=\"250\">\n          <\/div>\n\n          <div style=\"display:flex;gap:8px;margin-top:6px\">\n            <button id=\"random\">Randomise<\/button>\n            <button id=\"reset\">Reset<\/button>\n            <button id=\"copy\">Copy formula<\/button>\n          <\/div>\n        <\/div>\n\n        <hr style=\"border:none;height:1px;background:rgba(255,255,255,0.03);margin:14px 0;border-radius:2px\">\n\n        <div class=\"formula\">\n          <div class=\"math\">M = <span class=\"var\">1000<\/span> \u00b7 <span class=\"var\">m<\/span> \/ ( <span class=\"var\">M<sub>m<\/sub><\/span> \u00b7 <span class=\"var\">V<sub>mL<\/sub><\/span> )<\/div>\n\n          <div class=\"resultBox\">\n            <div class=\"big\" id=\"Mdisplay\">0.683 mol\u00b7L\u207b\u00b9<\/div>\n            <div class=\"muted\">Calculated using: <span id=\"calcStr\">M = (1000 \u00b7 10 g) \/ (58.44 g\u00b7mol\u207b\u00b9 \u00b7 250 mL)<\/span><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"card\">\n        <div class=\"visualizer\">\n          <div class=\"beaker\" aria-hidden>\n            <div id=\"liquid\" class=\"liquid\"><\/div>\n            <div id=\"b1\" class=\"bubble\" style=\"width:12px;height:12px;left:28px;bottom:36px;background:rgba(255,255,255,0.08)\"><\/div>\n            <div id=\"b2\" class=\"bubble\" style=\"width:8px;height:8px;left:72px;bottom:58px;background:rgba(255,255,255,0.06)\"><\/div>\n            <div id=\"b3\" class=\"bubble\" style=\"width:6px;height:6px;left:44px;bottom:86px;background:rgba(255,255,255,0.05)\"><\/div>\n          <\/div>\n        <\/div>\n\n        <div style=\"margin-top:12px\">\n          <div style=\"display:flex;justify-content:space-between;align-items:center\">\n            <div style=\"font-weight:700\">Live preview<\/div>\n            <div class=\"muted\">Molarity visual scale<\/div>\n          <\/div>\n          <div style=\"margin-top:8px;color:var(--muted);font-size:13px\">Higher molarity \u2192 fuller beaker &#038; larger animated bubbles<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <footer>\n      <div>Tip: Vary the sliders \u2014 molarity updates with a smooth tween animation.<\/div>\n      <div>Made for exam prep \u2022 formula: <code>M = 1000\u00b7m \/ (M_m \u00b7 V_mL)<\/code><\/div>\n    <\/footer>\n  <\/div>\n<\/div>\n\n<style>\n.molarity-widget {\n  --bg:#0f1724; --card:#0b1220; --accent:#7dd3fc; --muted:#9aa6b2; --glass: rgba(255,255,255,0.04);\n  font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;\n  color:#e6eef6;\n}\n.molarity-widget .wrap{max-width:980px;margin:28px auto;padding:20px;background:linear-gradient(180deg,#071024 0%, #0b1220 60%);border-radius:12px}\n.molarity-widget header{display:flex;align-items:center;gap:16px}\n.molarity-widget h1{font-size:20px;margin:0}\n.molarity-widget p.lead{margin:0;color:var(--muted);font-size:13px}\n.molarity-widget .grid{display:grid;grid-template-columns:1fr 360px;gap:18px;margin-top:18px}\n.molarity-widget .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.6)}\n.molarity-widget .controls{display:flex;flex-direction:column;gap:12px}\n.molarity-widget .control{display:flex;flex-direction:column;gap:8px}\n.molarity-widget label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}\n.molarity-widget input[type=range]{width:100%;accent-color:var(--accent)}\n.molarity-widget .pill{background:var(--glass);padding:6px 10px;border-radius:999px;font-weight:600}\n.molarity-widget .formula{display:flex;flex-direction:column;gap:12px;align-items:flex-start}\n.molarity-widget .formula .math{font-size:22px}\n.molarity-widget .math .var{color:var(--accent);font-weight:700}\n.molarity-widget .resultBox{display:flex;flex-direction:column;gap:8px;align-items:flex-start}\n.molarity-widget .big{font-size:34px;font-weight:700}\n.molarity-widget .muted{color:var(--muted);font-size:13px}\n.molarity-widget .visualizer{height:160px;display:flex;align-items:center;justify-content:center}\n.molarity-widget .beaker{width:120px;height:140px;border-radius:12px;background:linear-gradient(180deg,#071f30,#03314a);position:relative;box-shadow:inset 0 8px 24px rgba(0,0,0,0.6),0 6px 20px rgba(2,6,23,0.6)}\n.molarity-widget .liquid{position:absolute;left:10px;right:10px;bottom:10px;height:40%;background:linear-gradient(180deg,rgba(125,211,252,0.95),rgba(59,130,246,0.95));border-radius:8px;transition:height 600ms cubic-bezier(.2,.9,.2,1),transform 400ms}\n.molarity-widget .bubble{position:absolute;border-radius:50%;opacity:0.85}\n.molarity-widget footer{margin-top:16px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}\n.molarity-widget button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent);padding:8px 12px;border-radius:8px;cursor:pointer}\n.molarity-widget button:hover{background:rgba(125,211,252,0.06)}\n@media (max-width:880px){.molarity-widget .grid{grid-template-columns:1fr;}.molarity-widget .visualizer{display:none}}\n<\/style>\n\n<script>\n(function(){\n  const $ = id => document.getElementById(id)\n  const format = (v, dp=3) => Number(v).toLocaleString(undefined,{maximumFractionDigits:dp,minimumFractionDigits:dp})\n\n  const m = $('m'), Mm = $('Mm'), V = $('V')\n  const mVal = $('mVal'), MmVal = $('MmVal'), VVal = $('VVal')\n  const Mdisplay = $('Mdisplay'), calcStr = $('calcStr')\n  const liquid = $('liquid'), b1 = $('b1'), b2 = $('b2'), b3 = $('b3')\n\n  const defaults = {m:10, Mm:58.44, V:250}\n\n  function computeM(mass, mm, vml){\n    if (vml <= 0 || mm <= 0) return Infinity\n    return (1000 * mass) \/ (mm * vml)\n  }\n\n  let animFrame = null\n  function tweenNumber(el, from, to, ms=600){\n    const start = performance.now();\n    function step(now){\n      const t = Math.min(1,(now-start)\/ms)\n      const eased = 1 - Math.pow(1-t,3)\n      const val = from + (to-from)*eased\n      el.textContent = isFinite(val) ? format(val,3) + ' mol\u00b7L\u207b\u00b9' : '\u2014'\n      if (t < 1) animFrame = requestAnimationFrame(step)\n    }\n    if (animFrame) cancelAnimationFrame(animFrame)\n    animFrame = requestAnimationFrame(step)\n  }\n\n  function updateVisualizer(molarity){\n    const minM = 0, maxM = 5\n    const clamped = Math.max(minM, Math.min(maxM, isFinite(molarity)?molarity:0))\n    const pct = 0.05 + (clamped - minM) \/ (maxM-minM) * 0.85\n    liquid.style.height = (pct*100) + '%'\n\n    const scale = 0.6 + (clamped\/maxM)*1.8\n    b1.style.transform = `translateY(${ -clamped*6 }px) scale(${scale})`\n    b2.style.transform = `translateY(${ -clamped*9 }px) scale(${0.8+clamped\/maxM})`\n    b3.style.transform = `translateY(${ -clamped*12 }px) scale(${0.7+clamped\/maxM*1.1})`\n    const opacity = 0.05 + (clamped\/maxM)*0.95\n    b1.style.opacity = opacity; b2.style.opacity = opacity*0.9; b3.style.opacity = opacity*0.7\n  }\n\n  function updateAll(animate=true){\n    const mass = parseFloat(m.value)\n    const mm = parseFloat(Mm.value)\n    const vml = parseFloat(V.value)\n\n    mVal.textContent = `${format(mass,2)} g`\n    MmVal.textContent = `${format(mm,2)} g\/mol`\n    VVal.textContent = `${format(vml,1)} mL`\n\n    const M = computeM(mass, mm, vml)\n    calcStr.textContent = `M = (1000 \u00b7 ${mass} g) \/ (${mm} g\u00b7mol\u207b\u00b9 \u00b7 ${vml} mL)`\n\n    if (animate){\n      const currentText = Mdisplay.textContent.replace(\/[^0-9.+\\-eE]\/g,'')\n      const currentVal = parseFloat(currentText) || 0\n      tweenNumber(Mdisplay, currentVal, isFinite(M)?M:0)\n    } else {\n      Mdisplay.textContent = isFinite(M)? format(M,3)+' mol\u00b7L\u207b\u00b9' : '\u2014'\n    }\n    updateVisualizer(M)\n  }\n\n  [m, Mm, V].forEach(el => el.addEventListener('input', ()=> updateAll(true)))\n\n  $('reset').addEventListener('click', ()=>{\n    m.value = defaults.m; Mm.value = defaults.Mm; V.value = defaults.V\n    updateAll(true)\n  })\n\n  $('random').addEventListener('click', ()=>{\n    m.value = (Math.random()*490+1).toFixed(2)\n    Mm.value = (Math.random()*200+10).toFixed(2)\n    V.value = (Math.random()*4900+10).toFixed(2)\n    updateAll(true)\n  })\n\n  $('copy').addEventListener('click', async ()=>{\n    try{\n      await navigator.clipboard.writeText('M = (1000 \u00b7 m) \/ (M_m \u00b7 V_mL)')\n      alert('Formula copied to clipboard')\n    }catch(e){\n      alert('Copy failed \u2014 your browser may restrict clipboard access')\n    }\n  })\n\n  updateAll(false)\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Molarity slider Interactive visualiser for M = (1000 \u00b7 m) \/ (Mm \u00b7 VmL). Move the sliders to see molarity update smoothly. Mass of solute, m (g) 10 g Molar mass, Mm (g\u00b7mol\u207b\u00b9) 58.44 g\/mol Volume of solution, VmL (mL) 250 mL Randomise Reset Copy formula M = 1000 \u00b7 m \/ ( Mm \u00b7 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-279","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=279"}],"version-history":[{"count":1,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/279\/revisions\/282"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}