{"id":1654,"date":"2023-07-15T15:25:27","date_gmt":"2023-07-15T12:25:27","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1654"},"modified":"2023-07-15T15:25:52","modified_gmt":"2023-07-15T12:25:52","slug":"todo-subitem","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1654\/","title":{"rendered":"Todo subitem"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Todo subitem\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/CYhvtFFDfRM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;main&gt;\n    &lt;header&gt;\n      &lt;h1&gt;Todo List&lt;\/h1&gt;\n    &lt;\/header&gt;\n    &lt;section&gt;\n      &lt;ul&gt;\n        &lt;li&gt;\n          &lt;span&gt;Groceries&lt;\/span&gt;\n          &lt;ul&gt;\n            &lt;li&gt;&lt;span&gt;3 Tomatoes&lt;\/span&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;span&gt;1 bunch of cherries&lt;\/span&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;span&gt;6 onions&lt;\/span&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;span&gt;3 heads of garlic&lt;\/span&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;span&gt;1 bag spring mix&lt;\/span&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/li&gt;\n        &lt;li&gt;&lt;span&gt;Cancel gym membership&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span&gt;Clean gutters&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span&gt;Take package to the post office&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span&gt;Call Avery about Ali's party (afternoon)&lt;\/span&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;span&gt;Sort recycling &amp; put out trash&lt;\/span&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/section&gt;\n    &lt;footer&gt;\n      &lt;form class=&quot;wrapper&quot; name=&quot;addToList&quot;&gt;\n        &lt;input type=&quot;text&quot; placeholder=&quot;Add more&quot; \/&gt;\n        &lt;button title=&quot;Add&quot;&gt;+&lt;\/button&gt;\n      &lt;\/form&gt;\n      &lt;small&gt;Use the &quot;&gt;&quot; to add a subitem&lt;\/small&gt;\n    &lt;\/footer&gt;\n  &lt;\/main&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">* {\n  box-sizing: border-box;\n}\n:root {\n  --gapSize: 0.6rem;\n  --barSize: 0.3rem;\n  --bulletSize: 0.6rem;\n  --altBg: linear-gradient(#f7ff00, #db36a4);\n  --bg: linear-gradient(#f0c, #7303c0, #339);\n}\nbody {\n  display: flex;\n  height: 100vh;\n  align-items: center;\n  justify-content: center;\n  background: #212121;\n  font-family: 'Rubik';\n}\nmain {\n  position: relative;\n  box-shadow: 0 5px 15px -5px #000;\n  background: #fff;\n  border-radius: 10px;\n  overflow: hidden;\n}\nheader {\n  position: relative;\n  background: #fff;\n  padding: 1.4rem 0;\n  box-shadow: 0 1px 10px rgba(0,0,0,0.2);\n  z-index: 3;\n}\nheader h1 {\n  margin: 0;\n  text-align: center;\n  background: var(--bg) fixed;\n  background-clip: text;\n  -webkit-background-clip: text;\n  color: transparent;\n}\nsection {\n  height: 50vh;\n  overflow: scroll;\n}\nsection ul {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\nsection ul &gt; li {\n  position: relative;\n  padding: var(--gapSize) 1.4rem;\n  --currentBg: #fff;\n}\nsection ul &gt; li span {\n  background: var(--altBg) fixed;\n  background-clip: text;\n  -webkit-background-clip: text;\n  transition: all 200ms ease-in-out;\n}\nsection ul &gt; li:hover &gt; span {\n  color: transparent;\n}\nsection ul &gt; li:nth-child(odd) {\n  background: #f5f5f5;\n  --currentBg: #f5f5f5;\n}\nsection ul &gt; li::before {\n  content: '';\n  display: inline-block;\n  width: var(--bulletSize);\n  height: var(--bulletSize);\n  border-radius: var(--bulletSize);\n  margin-right: var(--bulletSize);\n  vertical-align: middle;\n  background: var(--bg) fixed;\n}\nsection ul &gt; li::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: calc(-1 * (var(--bulletSize) + var(--gapSize)));\n  left: calc(1.4rem + (var(--bulletSize) \/ 2) - (var(--barSize) \/ 2));\n  width: var(--barSize);\n  background: var(--bg) fixed;\n  border-radius: 0 0 10px 10px;\n  z-index: 1;\n}\nsection ul &gt; li:first-child::after {\n  top: calc(var(--bulletSize) + var(--gapSize));\n}\nsection ul &gt; li:last-child::after {\n  bottom: 2.7rem;\n}\nsection ul &gt; li ul {\n  position: relative;\n  padding-top: var(--gapSize);\n}\nsection ul &gt; li ul::before {\n  content: '';\n  position: absolute;\n  top: var(--gapSize);\n  left: var(--barSize);\n  width: calc(1.4rem - (var(--barSize) \/ 2));\n  height: 1rem;\n  background: linear-gradient(var(--currentBg), var(--currentBg)) padding-box, var(--bg) fixed border-box;\n  border-width: var(--barSize) var(--barSize) 0 0;\n  border-radius: 0 10px 0 0;\n  border-style: solid;\n  border-color: transparent;\n}\nsection ul &gt; li ul &gt; li:nth-child(odd) {\n  background: transparent;\n  z-index: 1;\n}\nfooter {\n  position: relative;\n  background: #fff;\n  padding: 1.4rem;\n  box-shadow: 0 1px 10px rgba(0,0,0,0.2);\n  z-index: 3;\n}\nfooter form {\n  position: relative;\n  margin-bottom: 0.2rem;\n}\nfooter input {\n  width: 100%;\n  padding: 0.4rem 1rem;\n  border: 1px solid #ccc;\n  border-radius: 6px;\n  font-family: 'Rubik';\n}\nfooter input:focus {\n  outline: 0;\n  box-shadow: 0 0 5px #ec38bc;\n}\nfooter button {\n  position: absolute;\n  top: 0px;\n  bottom: 0px;\n  right: 0px;\n  aspect-ratio: 1;\n  background: var(--bg) fixed;\n  border: none;\n  border-radius: 0 6px 6px 0;\n  color: #fff;\n}\nfooter small {\n  font-style: italic;\n  color: #78909c;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const form = document.querySelector(&quot;form[name=addToList]&quot;);\nconst input = document.querySelector(&quot;form[name=addToList] input&quot;);\nconst section = document.querySelector(&quot;section&quot;);\nconst list = document.querySelector(&quot;section &gt; ul&quot;);\n\nconst addNameToList = function (e) {\n\te.preventDefault();\n\tif (!input.value) return false;\n\n\tconst text = document.createTextNode(input.value);\n\tconst newItem = document.createElement(&quot;li&quot;);\n\tconst itemContent = document.createElement(&quot;span&quot;);\n\n\titemContent.appendChild(text);\n\tnewItem.appendChild(itemContent);\n\n\tif (input.value.startsWith(&quot;&gt;&quot;)) {\n\t\titemContent.textContent = itemContent.textContent.replace(&quot;&gt;&quot;, &quot;&quot;);\n\n\t\tconst lastItem = document.querySelector(&quot;section &gt; ul &gt; li:last-child&quot;);\n\t\tconst subList = lastItem.querySelector(&quot;ul&quot;) || document.createElement(&quot;ul&quot;);\n\n\t\tlastItem.appendChild(subList);\n\t\tsubList.appendChild(newItem);\n\t} else {\n\t\tlist.appendChild(newItem);\n\t}\n\n\tinput.value = &quot;&quot;;\n\tsection.scrollTo({ top: section.scrollHeight, behavior: &quot;smooth&quot; });\n};\n\nform.addEventListener(&quot;submit&quot;, addNameToList);<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1655,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-1654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1654"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1654\/revisions"}],"predecessor-version":[{"id":1656,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1654\/revisions\/1656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1655"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}