diff --git a/assets/scripts/script.min.js b/assets/scripts/script.min.js new file mode 100644 index 0000000..4d2de60 --- /dev/null +++ b/assets/scripts/script.min.js @@ -0,0 +1 @@ +const inputTitle=document.querySelector(".simple-note__input--title"),inputBody=document.querySelector(".simple-note__input--body"),clearButton=document.querySelector(".settings__button--clear"),downloadButton=document.querySelector(".settings__button--download"),printHelperTitle=document.querySelector(".print-helper__title"),printHelperBody=document.querySelector(".print-helper__body");function clearNote(){let e=confirm("Are you sure you want to clear your note? Press OK to clear.");e&&(inputTitle.value="",inputBody.value="",saveTitle(),saveBody(),updatePrint())}function downloadNote(){let e=inputTitle.value||"Simple Note",t=inputBody.value,n=document.createElement("a");n.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(t)),n.setAttribute("download",e),n.style.display="none",document.body.appendChild(n),n.click(),document.body.removeChild(n)}function updatePrint(){printHelperTitle.innerText=inputTitle.value,printHelperBody.innerText=inputBody.value}const note_title="Note_Title",note_body="Note_Body";function saveTitle(){localStorage.setItem(note_title,inputTitle.value)}function saveBody(){localStorage.setItem(note_body,inputBody.value)}function loadNote(){let e=localStorage.getItem(note_title)||"";inputTitle.value=e;let t=localStorage.getItem(note_body)||"";inputBody.value=t}function debounce(e,t=250){let n;return(...i)=>{clearTimeout(n),n=setTimeout(()=>{e.apply(this,i)},t)}}const debouncedSaveTitle=debounce(saveTitle),debouncedSaveBody=debounce(saveBody);inputTitle.addEventListener("input",debouncedSaveTitle),inputBody.addEventListener("input",debouncedSaveBody),inputTitle.addEventListener("change",updatePrint),inputBody.addEventListener("change",updatePrint),downloadButton.addEventListener("click",downloadNote),clearButton.addEventListener("click",clearNote),document.addEventListener("DOMContentLoaded",()=>{loadNote(),updatePrint()});const settings=document.querySelector(".settings"),settingsToggle=document.querySelector(".settings__button--toggle-settings"),settingsToggleDescription=document.querySelector(".settings__button-description--toggle-settings"),settingsList=document.querySelector(".settings__buttons"),settingsItems=settingsList.querySelectorAll("a, button");function toggleSettings(){let e="true"==settingsToggle.getAttribute("aria-expanded");e?(settings.setAttribute("data-expanded",!1),settingsToggle.setAttribute("aria-expanded",!1),settingsToggleDescription.innerText="Press to open settings.",settingsList.setAttribute("aria-hidden",!0),settingsList.tabIndex=-1,settingsItems.forEach(e=>{e.tabIndex=-1})):(settings.setAttribute("data-expanded",!0),settingsToggle.setAttribute("aria-expanded",!0),settingsToggleDescription.innerText="Press to close settings.",settingsList.setAttribute("aria-hidden",!1),settingsList.removeAttribute("tabIndex"),settingsItems.forEach(e=>{e.tabIndex=0}))}settingsToggle.addEventListener("click",toggleSettings),document.addEventListener("DOMContentLoaded",()=>{settingsList.setAttribute("aria-hidden",!0),settingsItems.forEach(e=>{e.tabIndex=-1})});let theme=localStorage.getItem("theme")||"light";const themeButton=document.querySelector(".settings__button--theme"),themeDescription=document.querySelector(".settings__button-description--theme");function enableLightTheme(){document.documentElement.setAttribute("data-theme","light"),localStorage.setItem("theme","light"),themeDescription.innerText="Press to change to dark theme."}function enableDarkTheme(){document.documentElement.setAttribute("data-theme","dark"),localStorage.setItem("theme","dark"),themeDescription.innerText="Press to change to light theme."}themeButton.addEventListener("click",()=>{"dark"===(theme=localStorage.getItem("theme"))?enableLightTheme():enableDarkTheme()}),document.addEventListener("DOMContentLoaded",()=>{"dark"===theme&&enableDarkTheme()}); \ No newline at end of file diff --git a/assets/styles/style.min.css b/assets/styles/style.min.css new file mode 100644 index 0000000..42ef324 --- /dev/null +++ b/assets/styles/style.min.css @@ -0,0 +1 @@ +img,main,svg{display:block}a,button,input,textarea{color:inherit;background-color:transparent}@font-face{font-display:swap;font-family:Roboto;font-style:normal;font-weight:400;src:url("../fonts/roboto/roboto-400.eot");src:url("../fonts/roboto/roboto-400.eot?#iefix") format("embedded-opentype"),url("../fonts/roboto/roboto-400.woff2") format("woff2"),url("../fonts/roboto/roboto-400.woff") format("woff"),url("../fonts/roboto/roboto-400.ttf") format("truetype"),url("../fonts/roboto/roboto-400.svg#Roboto") format("svg")}@font-face{font-display:swap;font-family:"Roboto Slab";font-style:normal;font-weight:500;src:url("../fonts/roboto-slab/roboto-slab-500");src:url("../fonts/roboto-slab/roboto-slab-500?#iefix") format("embedded-opentype"),url("../fonts/roboto-slab/roboto-slab-500.woff2") format("woff2"),url("../fonts/roboto-slab/roboto-slab-500.woff") format("woff"),url("../fonts/roboto-slab/roboto-slab-500.ttf") format("truetype"),url("../fonts/roboto-slab/roboto-slab-500.svg#RobotoSlab") format("svg")}:root{--font-roboto:Roboto,sans-serif;--font-roboto-slab:"Roboto Slab",serif;--font-1:var(--font-roboto);--font-2:var(--font-roboto-slab);--black:0,0%,0%;--white:0,0%,100%;--cod-gray:0,0%,6%;--gray:0,0%,58%;--color-1:var(--black),0.8;--color-2:var(--white);--color-3:var(--gray)}:root[data-theme=dark]{--color-1:var(--white),0.8;--color-2:var(--cod-gray);color-scheme:dark}*,::after,::before{margin:0;padding:0;box-sizing:border-box}html{min-height:100%}img,svg{max-width:100%;height:auto}svg{width:100%}button,input,textarea{display:block;border:none;font:inherit}ol,ul{list-style:none}::placeholder{color:hsl(var(--color-3));opacity:1}:focus-visible{outline:solid .125rem;outline-color:hsla(var(--color-1,0 0% 0% 1));outline-offset:var(--focus-offset,0)}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}.__sr-only{border:none;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;white-space:nowrap;position:absolute;top:auto;left:-99rem;clip:rect(0,0,0,0);clip-path:inset(50%)}:root[data-theme=light] .settings__svg--theme-sun{display:none}:root[data-theme=dark] .settings__svg--theme-sun{display:block}:root[data-theme=dark] .settings__svg--theme-moon{display:none}:root[data-theme=dark] .settings__svg-westtle--background{fill:#ffffff}:root[data-theme=dark] .settings__svg-westtle--cat{fill:#000000}.settings{--settings-color:var(--color-3);--settings-background:var(--color-2);--settings-interact:var(--color-1);color:hsl(var(--settings-color));max-height:16.25rem;transition:left .25s cubic-bezier(.45, .05, .55, .95);position:fixed;top:1.125rem;bottom:1.125rem;left:-2.625rem;z-index:99}.settings[data-expanded=true]{left:0}.settings__buttons{background-color:hsl(var(--settings-background));border:.125rem solid hsl(var(--settings-color));border-left:none;max-height:100%;padding:.75rem .5rem;overflow:hidden}.settings[data-expanded=true] .settings__buttons{overflow-y:auto}.settings__buttons>*{margin-bottom:1.125rem}.settings__buttons>:last-child{margin:0}.settings__button{display:block;width:1.5rem;cursor:pointer;transition:color .11s ease-in-out,opacity .11s ease-in-out}.settings__button:focus-visible{--focus-offset:0.125rem;color:hsla(var(--settings-interact))}.settings__button--toggle-settings{background-color:hsl(var(--settings-background));border:.125rem solid hsl(var(--settings-color));border-left:none;position:absolute;left:100%}.settings__button--westtle{opacity:.75}.settings__button--westtle:focus-visible{opacity:1}@media (hover:hover){.settings__button:hover{color:hsla(var(--settings-interact))}.settings__button--westtle:hover{opacity:1}}.settings__button--toggle-settings,.settings__buttons{box-shadow:0 .0625rem .25rem hsl(0,0%,0%,.25)}.settings__svg--toggle-settings{padding:13.67%;transition:transform .25s cubic-bezier(.45, .05, .55, .95)}.settings__button--toggle-settings[aria-expanded=true] .settings__svg--toggle-settings{color:hsla(var(--settings-interact));transform:rotate(180deg)}.settings__svg--westtle{border-radius:.1875rem}.settings__svg-westtle--background,.settings__svg-westtle--cat{transition:fill .11s ease-in-out}.settings__separator{display:block;border-bottom:.125rem solid;border-color:currentColor;border-radius:6.1875rem}body{color:hsla(var(--color-1));background-color:hsl(var(--color-2))}.simple-note{width:90%;max-width:29.125rem;margin:0 auto;padding:2rem 0}.simple-note__input{width:100%;padding:.5625rem .75rem;transition:color .1s ease-in-out}.simple-note__input--title{font-family:var(--font-2);font-size:1.5rem;font-weight:500;line-height:normal}.simple-note__input--body{height:80vh;min-height:20.3125rem;font-family:var(--font-1);font-size:1rem;font-weight:400;line-height:1.5;resize:none}@supports (display:flex){._flex{display:flex}._flex-column{flex-direction:column}._flex-grow{flex-grow:1}.simple-note__input--body{height:auto}}.simple-note__print-helper{display:none} \ No newline at end of file diff --git a/index.html b/index.html index 5111eee..c30c844 100644 --- a/index.html +++ b/index.html @@ -48,15 +48,15 @@ - + + + + - - - +