Created
February 23, 2021 09:39
-
-
Save Kozlove1/a72dde0b19f5cd37b8cebd3ca7b16aa1 to your computer and use it in GitHub Desktop.
module_15
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <component name="ProjectCodeStyleConfiguration"> | |
| <state> | |
| <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" /> | |
| </state> | |
| </component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <module type="WEB_MODULE" version="4"> | |
| <component name="NewModuleRootManager"> | |
| <content url="file://$MODULE_DIR$"> | |
| <excludeFolder url="file://$MODULE_DIR$/.tmp" /> | |
| <excludeFolder url="file://$MODULE_DIR$/temp" /> | |
| <excludeFolder url="file://$MODULE_DIR$/tmp" /> | |
| </content> | |
| <orderEntry type="inheritedJdk" /> | |
| <orderEntry type="sourceFolder" forTests="false" /> | |
| </component> | |
| </module> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <project version="4"> | |
| <component name="ProjectModuleManager"> | |
| <modules> | |
| <module fileurl="file://$PROJECT_DIR$/.idea/modul 15.iml" filepath="$PROJECT_DIR$/.idea/modul 15.iml" /> | |
| </modules> | |
| </component> | |
| </project> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <project version="4"> | |
| <component name="ChangeListManager"> | |
| <list default="true" id="77e239b1-512f-43a8-8ab7-eaa8ce743d86" name="Default Changelist" comment="" /> | |
| <option name="SHOW_DIALOG" value="false" /> | |
| <option name="HIGHLIGHT_CONFLICTS" value="true" /> | |
| <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> | |
| <option name="LAST_RESOLUTION" value="IGNORE" /> | |
| </component> | |
| <component name="FileTemplateManagerImpl"> | |
| <option name="RECENT_TEMPLATES"> | |
| <list> | |
| <option value="CSS File" /> | |
| <option value="JavaScript File" /> | |
| <option value="HTML File" /> | |
| </list> | |
| </option> | |
| </component> | |
| <component name="ProjectId" id="1osOrW8Ps4LZAB5UXIkZZmZzk0F" /> | |
| <component name="ProjectViewState"> | |
| <option name="hideEmptyMiddlePackages" value="true" /> | |
| <option name="showLibraryContents" value="true" /> | |
| </component> | |
| <component name="PropertiesComponent"> | |
| <property name="DefaultHtmlFileTemplate" value="HTML File" /> | |
| <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" /> | |
| <property name="WebServerToolWindowFactoryState" value="false" /> | |
| <property name="list.type.of.created.stylesheet" value="CSS" /> | |
| <property name="vue.rearranger.settings.migration" value="true" /> | |
| </component> | |
| <component name="RunManager" selected="Node.js.15.3.2.js"> | |
| <configuration name="15.3.2.html" type="JavascriptDebugType" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/modul 15/15.3.2/15.3.2.html" useBuiltInWebServerPort="true"> | |
| <method v="2" /> | |
| </configuration> | |
| <configuration name="15.3.2.js" type="NodeJSConfigurationType" temporary="true" nameIsGenerated="true" path-to-js-file="$PROJECT_DIR$/15.3.2/15.3.2.js" working-dir="$PROJECT_DIR$/15.3.2"> | |
| <method v="2" /> | |
| </configuration> | |
| <recent_temporary> | |
| <list> | |
| <item itemvalue="Node.js.15.3.2.js" /> | |
| <item itemvalue="JavaScript Debug.15.3.2.html" /> | |
| </list> | |
| </recent_temporary> | |
| </component> | |
| <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" /> | |
| <component name="TaskManager"> | |
| <task active="true" id="Default" summary="Default task"> | |
| <changelist id="77e239b1-512f-43a8-8ab7-eaa8ce743d86" name="Default Changelist" comment="" /> | |
| <created>1614072031067</created> | |
| <option name="number" value="Default" /> | |
| <option name="presentableId" value="Default" /> | |
| <updated>1614072031067</updated> | |
| <workItem from="1614072032133" duration="1097000" /> | |
| </task> | |
| <servers /> | |
| </component> | |
| <component name="TypeScriptGeneratedFilesManager"> | |
| <option name="version" value="3" /> | |
| </component> | |
| <component name="WindowStateProjectService"> | |
| <state x="731" y="321" key="#com.intellij.fileTypes.FileTypeChooser" timestamp="1614072791119"> | |
| <screen x="0" y="0" width="1920" height="1040" /> | |
| </state> | |
| <state x="731" y="321" key="#com.intellij.fileTypes.FileTypeChooser/0.0.1920.1040@0.0.1920.1040" timestamp="1614072791119" /> | |
| </component> | |
| </project> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .btn { | |
| padding: 0; | |
| background-color: transparent; | |
| border: none; | |
| outline: none; | |
| -webkit-tap-highlight-color: transparent; | |
| box-shadow: none; | |
| cursor: pointer; | |
| display: flex; | |
| margin: 5px 10px; | |
| padding: 10px 15px; | |
| border-radius: 1px; | |
| font-size: 12px; | |
| line-height: 15px; | |
| text-transform: uppercase; | |
| color: white; | |
| background: #315efb; | |
| transition: 0.3s; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <button class="btn j-btn-test">ОДинг флаг тут лишний</button> | |
| <div class="j-chart"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const btn = document.querySelector('.j-btn-test'); | |
| const chart = document.querySelector('.j-chart'); | |
| btn.addEventListener('click', () => { | |
| chart.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="180px" height="120px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"> | |
| <g> | |
| <path fill="#103B9B" d="M644.161,487.021v-1c0-6.563-5.34-11.903-11.903-11.903H24.807V325.882h750.387v148.236h-91.322 c-6.563,0-11.903,5.34-11.903,11.903v1H644.161z"/> | |
| <path fill="#103B9B" d="M683.871,473.118h90.322V326.882H25.807v146.236h606.451c7.128,0,12.903,5.777,12.903,12.903h25.807 C670.968,478.896,676.743,473.118,683.871,473.118z"/> | |
| <rect x="25.807" y="154.839" fill="#FFFFFF" width="748.387" height="146.236"/> | |
| <path fill="#ED1F34" d="M24.807,646.161V497.925h607.451c6.563,0,11.903-5.34,11.903-11.903v-1h27.807v1 c0,6.563,5.34,11.903,11.903,11.903h91.322v148.236H24.807z"/> | |
| <path fill="#ED1F34" d="M683.871,498.925c-7.128,0-12.903-5.777-12.903-12.903h-25.807c0,7.126-5.775,12.903-12.903,12.903H25.807 v146.236h748.387V498.925H683.871z"/> | |
| <path d="M787.097,129.032H12.903C5.775,129.032,0,134.81,0,141.936v516.129c0,7.126,5.775,12.903,12.903,12.903h774.193 c7.128,0,12.903-5.777,12.903-12.903V141.936C800,134.81,794.225,129.032,787.097,129.032z M774.193,154.839v146.236H25.807 V154.839H774.193z M25.807,645.161V498.925h606.451c7.128,0,12.903-5.777,12.903-12.903s-5.775-12.903-12.903-12.903H25.807 V326.882h748.387v146.236h-90.322c-7.128,0-12.903,5.777-12.903,12.903s5.775,12.903,12.903,12.903h90.322v146.236H25.807z"/> | |
| </g> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="180px" height="120px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"> | |
| <g> | |
| <path fill="#FFFFFF" d="M116.129,154.839H25.807v490.322h748.387V154.839H167.742c-7.126,0-12.903-5.775-12.903-12.903h-25.807 C129.032,149.063,123.255,154.839,116.129,154.839z M400,258.064c78.264,0,141.936,63.673,141.936,141.936 c0,78.263-63.672,141.936-141.936,141.936S258.064,478.263,258.064,400C258.064,321.738,321.736,258.064,400,258.064z"/> | |
| <path d="M787.097,129.032H167.742c-7.126,0-12.903,5.775-12.903,12.903s5.777,12.903,12.903,12.903h606.451v490.322H25.807V154.839 h90.322c7.126,0,12.903-5.775,12.903-12.903s-5.777-12.903-12.903-12.903H12.903C5.777,129.032,0,134.808,0,141.936v516.129 c0,7.128,5.777,12.903,12.903,12.903h774.193c7.126,0,12.903-5.775,12.903-12.903V141.936 C800,134.808,794.223,129.032,787.097,129.032z"/> | |
| <path fill="#ED1F34" d="M400,517.129c-64.585,0-117.129-52.544-117.129-117.129S335.415,282.871,400,282.871 S517.129,335.415,517.129,400S464.585,517.129,400,517.129z"/> | |
| <path fill="#ED1F34" d="M400,516.129c64.034,0,116.129-52.095,116.129-116.129S464.034,283.871,400,283.871 S283.871,335.966,283.871,400S335.966,516.129,400,516.129z"/> | |
| <path d="M400,541.936c78.264,0,141.936-63.673,141.936-141.936c0-78.262-63.672-141.936-141.936-141.936 S258.064,321.738,258.064,400C258.064,478.263,321.736,541.936,400,541.936z M400,283.871c64.034,0,116.129,52.095,116.129,116.129 S464.034,516.129,400,516.129S283.871,464.034,283.871,400S335.966,283.871,400,283.871z"/> | |
| </g> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="180px" height="120px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"> | |
| <g> | |
| <path fill="#ED1F34" d="M128.032,659.064v-1c0-6.563-5.34-11.903-11.903-11.903H24.807V153.839h750.387v492.322H167.742 c-6.563,0-11.903,5.34-11.903,11.903v1H128.032z M236.559,330.893c-6.563,0-11.903,5.34-11.903,11.903v114.408 c0,6.563,5.34,11.903,11.903,11.903h94.333v94.333c0,6.563,5.34,11.903,11.903,11.903h114.408c6.563,0,11.903-5.34,11.903-11.903 v-94.333h94.333c6.563,0,11.903-5.34,11.903-11.903V342.796c0-6.563-5.34-11.903-11.903-11.903h-94.333v-94.333 c0-6.563-5.34-11.903-11.903-11.903H342.796c-6.563,0-11.903,5.34-11.903,11.903v94.333H236.559z"/> | |
| <path fill="#ED1F34" d="M167.742,645.161h606.451V154.839H25.807v490.322h90.322c7.128,0,12.903,5.777,12.903,12.903h25.807 C154.839,650.938,160.614,645.161,167.742,645.161z M223.656,342.796c0-7.126,5.776-12.903,12.903-12.903h93.333v-93.333 c0-7.126,5.775-12.903,12.903-12.903h114.408c7.128,0,12.903,5.777,12.903,12.903v93.333h93.333 c7.128,0,12.903,5.777,12.903,12.903v114.408c0,7.126-5.775,12.903-12.903,12.903h-93.333v93.333 c0,7.127-5.775,12.903-12.903,12.903H342.796c-7.128,0-12.903-5.776-12.903-12.903v-93.333h-93.333 c-7.127,0-12.903-5.777-12.903-12.903V342.796z"/> | |
| <path fill="#FFFFFF" d="M355.699,457.204v93.334h88.602v-93.334c0-7.126,5.775-12.903,12.903-12.903h93.334v-88.602h-93.334 c-7.128,0-12.903-5.777-12.903-12.903v-93.333h-88.602v93.333c0,7.126-5.775,12.903-12.903,12.903h-93.333v88.602h93.333 C349.924,444.301,355.699,450.078,355.699,457.204z"/> | |
| <path d="M236.559,470.107h93.333v93.333c0,7.127,5.775,12.903,12.903,12.903h114.408c7.128,0,12.903-5.776,12.903-12.903v-93.333 h93.333c7.128,0,12.903-5.777,12.903-12.903V342.796c0-7.126-5.775-12.903-12.903-12.903h-93.333v-93.333 c0-7.126-5.775-12.903-12.903-12.903H342.796c-7.128,0-12.903,5.777-12.903,12.903v93.333h-93.333 c-7.127,0-12.903,5.777-12.903,12.903v114.408C223.656,464.33,229.432,470.107,236.559,470.107z M249.462,355.699h93.333 c7.128,0,12.903-5.777,12.903-12.903v-93.333h88.602v93.333c0,7.126,5.775,12.903,12.903,12.903h93.334v88.602h-93.334 c-7.128,0-12.903,5.777-12.903,12.903v93.334h-88.602v-93.334c0-7.126-5.775-12.903-12.903-12.903h-93.333V355.699z"/> | |
| <path d="M787.097,129.032H12.903C5.775,129.032,0,134.81,0,141.936v516.129c0,7.126,5.775,12.903,12.903,12.903h103.226 c7.128,0,12.903-5.777,12.903-12.903s-5.775-12.903-12.903-12.903H25.807V154.839h748.387v490.322H167.742 c-7.128,0-12.903,5.777-12.903,12.903s5.775,12.903,12.903,12.903h619.354c7.128,0,12.903-5.777,12.903-12.903V141.936 C800,134.81,794.225,129.032,787.097,129.032z"/> | |
| </g> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="180px" height="120px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"> | |
| <g> | |
| <rect x="355.945" y="154.839" fill="#FFFFFF" width="418.248" height="194.838"/> | |
| <path fill="#FFFFFF" d="M64.516,450.322H25.807v194.839H254.87V450.322H116.129c-7.127,0-12.903-5.777-12.903-12.903H77.419 C77.419,444.545,71.644,450.322,64.516,450.322z"/> | |
| <rect x="25.807" y="154.839" fill="#FFFFFF" width="229.493" height="194.838"/> | |
| <rect x="355.515" y="450.322" fill="#FFFFFF" width="418.679" height="194.839"/> | |
| <path fill="#164FCE" d="M279.676,646.161V437.419c0-6.563-5.34-11.902-11.903-11.902H116.129c-6.563,0-11.903,5.339-11.903,11.902 v1H76.419v-1c0-6.563-5.34-11.902-11.903-11.902H24.807v-51.033h243.396c6.563,0,11.903-5.34,11.903-11.903V153.839h51.032v208.742 c0,6.563,5.34,11.903,11.903,11.903h432.151v51.033H342.611c-6.563,0-11.903,5.339-11.903,11.902v208.742H279.676z"/> | |
| <path fill="#164FCE" d="M281.106,154.839v207.742c0,7.126-5.776,12.903-12.903,12.903H25.807v49.033h38.709 c7.128,0,12.903,5.776,12.903,12.902h25.806c0-7.126,5.776-12.902,12.903-12.902h151.644c7.128,0,12.903,5.776,12.903,12.902 v207.742h49.032V437.419c0-7.126,5.776-12.902,12.903-12.902h431.582v-49.033H343.042c-7.128,0-12.903-5.777-12.903-12.903V154.839 H281.106z"/> | |
| <path d="M787.097,129.032H12.903C5.775,129.032,0,134.81,0,141.936v516.129c0,7.126,5.775,12.903,12.903,12.903h774.193 c7.128,0,12.903-5.777,12.903-12.903V141.936C800,134.81,794.225,129.032,787.097,129.032z M774.193,349.677H355.945V154.839 h418.248V349.677z M343.042,375.484h431.151v49.033H342.611c-7.127,0-12.903,5.776-12.903,12.902v207.742h-49.032V437.419 c0-7.126-5.775-12.902-12.903-12.902H116.129c-7.127,0-12.903,5.776-12.903,12.902s5.776,12.903,12.903,12.903H254.87v194.839 H25.807V450.322h38.709c7.128,0,12.903-5.777,12.903-12.903s-5.775-12.902-12.903-12.902H25.807v-49.033h242.396 c7.127,0,12.903-5.777,12.903-12.903V154.839h49.032v207.742C330.139,369.707,335.914,375.484,343.042,375.484z M255.3,349.677 H25.807V154.839H255.3V349.677z M355.515,645.161V450.322h418.679v194.839H355.515z"/> | |
| </g> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="180px" height="120px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"> | |
| <g> | |
| <path fill="#FFFFFF" d="M516.129,245.161v-90.322H283.871v490.322h232.258V296.774c0-7.126,5.775-12.903,12.903-12.903v-25.807 C521.904,258.064,516.129,252.287,516.129,245.161z"/> | |
| <rect x="24.807" y="153.839" fill="#164FCE" width="234.258" height="492.322"/> | |
| <rect x="25.807" y="154.839" fill="#164FCE" width="232.258" height="490.322"/> | |
| <path fill="#ED1F34" d="M540.936,646.161V296.774c0-6.563-5.34-11.903-11.903-11.903h-1v-27.807h1 c6.563,0,11.903-5.34,11.903-11.903v-91.322h234.258v492.322H540.936z"/> | |
| <path fill="#ED1F34" d="M541.936,245.161c0,7.126-5.775,12.903-12.903,12.903v25.807c7.128,0,12.903,5.777,12.903,12.903v348.387 h232.258V154.839H541.936V245.161z"/> | |
| <path d="M787.097,129.032H12.903C5.777,129.032,0,134.81,0,141.936v516.129c0,7.126,5.777,12.903,12.903,12.903h774.193 c7.128,0,12.903-5.777,12.903-12.903V141.936C800,134.81,794.225,129.032,787.097,129.032z M774.193,645.161H541.936V296.774 c0-7.126-5.775-12.903-12.903-12.903s-12.903,5.777-12.903,12.903v348.387H283.871V154.839h232.258v90.322 c0,7.126,5.775,12.903,12.903,12.903s12.903-5.777,12.903-12.903v-90.322h232.258V645.161z M25.807,154.839h232.258v490.322H25.807 V154.839z"/> | |
| </g> | |
| </svg> | |
| ` | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .btn_text { | |
| margin-right: 10px; | |
| } | |
| .btn_icon_1 { | |
| width: 15px; | |
| height: 15px; | |
| font-size: 15px; | |
| } | |
| .btn_icon_2 { | |
| width: 15px; | |
| height: 15px; | |
| font-size: 15px; | |
| } | |
| .btn_none { | |
| display: none; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <button class="btn j-btn-test"> | |
| <div class="btn_text">Вот</div> | |
| <div id=icon1 class="btn_icon_1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16"> | |
| <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.904-2.854a.5.5 0 1 1 .707.708L6.707 9.95h2.768a.5.5 0 1 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.475a.5.5 0 1 1 1 0v2.768l4.096-4.097z"/> | |
| </svg> | |
| </div> | |
| <div id=icon2 class="btn_icon_2 btn_none"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle-fill" viewBox="0 0 16 16"> | |
| <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-5.904-2.803a.5.5 0 1 1 .707.707L6.707 10h2.768a.5.5 0 0 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.525a.5.5 0 0 1 1 0v2.768l4.096-4.096z"/> | |
| </svg> | |
| </div> | |
| </button> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const btn = document.querySelector('.btn'); | |
| const icon = document.querySelector('.btn_icon_1'); | |
| const icon2 = document.querySelector('.btn_icon_2'); | |
| btn.addEventListener('click', () => { | |
| icon.classList.toggle('btn_none'); | |
| icon2.classList.toggle('btn_none'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .btn_text { | |
| margin-right: 10px; | |
| } | |
| .btn_icon_1 { | |
| width: 15px; | |
| height: 15px; | |
| font-size: 15px; | |
| } | |
| .btn_icon_2 { | |
| width: 15px; | |
| height: 15px; | |
| font-size: 15px; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| </head> | |
| <body> | |
| <button class="btn j-btn-test"> | |
| <div class="btn_text">Вот</div> | |
| <div id=icon1 class="btn_icon_1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16"> | |
| <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.904-2.854a.5.5 0 1 1 .707.708L6.707 9.95h2.768a.5.5 0 1 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.475a.5.5 0 1 1 1 0v2.768l4.096-4.097z"/> | |
| </svg> | |
| </div> | |
| <div id=innerD></div> | |
| </button> | |
| <div id=innerD2></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const btn = document.querySelector('.btn'); | |
| const icon = document.querySelector('.btn_icon_1'); | |
| const innerD = document.querySelector('#innerD'); | |
| const innerD2 = document.querySelector('#innerD2'); | |
| btn.addEventListener('click', () => { | |
| innerD.innerHTML = `<p>Экран ${window.screen.width}x${window.screen.height}</p>` | |
| if ("geolocation" in navigator) { | |
| navigator.geolocation.getCurrentPosition((position) => { | |
| const { coords } = position; | |
| innerD2.innerHTML = `<div>${coords.latitude} ${coords.longitude}</div>`; | |
| }); | |
| } else { | |
| innerD2.innerHTML = '<p>«Информация о местоположении недоступна»</p>' | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| button{ | |
| background-color: pink | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| </head> | |
| <body> | |
| <button id='btn'>Timezone</button> | |
| <div id='output'><div> | |
| <div id='output2'> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const btn = document.querySelector('#btn'); | |
| const output = document.querySelector('#output'); | |
| const output2 = document.querySelector('#output2'); | |
| if ("geolocation" in navigator) { | |
| navigator.geolocation.getCurrentPosition((position) => { | |
| const { coords } = position; | |
| btn.addEventListener('click', () => { | |
| let xhr = new XMLHttpRequest(); | |
| xhr.open("GET", `https://api.ipgeolocation.io/timezone?apiKey=32bcd4a6e4b548968e7afcdb682ac679&lat=${coords.latitude}&long=${coords.longitude}`); | |
| xhr.send(); | |
| xhr.onload = function() { | |
| if (xhr.status == 200) { | |
| let result = JSON.parse(xhr.response); | |
| const a = result.date_time_txt | |
| const b = result.timezone | |
| output.innerHTML = | |
| `<div>${a}</div> | |
| <div>${b}</div>` | |
| } | |
| } | |
| }) | |
| }) | |
| } | |
| // fetch(`https://api.ipgeolocation.io/timezone?apiKey=32bcd4a6e4b548968e7afcdb682ac679&lat=${coords.latitude}&long=${coords.longitude}`) | |
| // .then((respones) => { | |
| // console.log(respones) | |
| // output.innerHTML = `<p>${response[0].year}</p>` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #chat { | |
| width: 400px; | |
| margin: 15px auto; | |
| padding: 20px; | |
| } | |
| .info_output { | |
| color: grey; | |
| font-style: italic; | |
| } | |
| .chat_output { | |
| margin: 20px 0; | |
| border: 1px solid grey; | |
| padding: 10px; | |
| height: 150px; | |
| overflow-y: scroll; | |
| position: relative; | |
| display: flex; | |
| flex-wrap: nowrap; | |
| flex-direction: column; | |
| } | |
| .chat_output > div { | |
| max-width: 80%; | |
| padding: 5px 10px; | |
| margin: 5px 0; | |
| border-radius: 3px; | |
| color: #fff; | |
| } | |
| .chat_output .recieved { | |
| background: #353580; | |
| align-self: flex-start; | |
| } | |
| .chat_output .sent { | |
| background: #1b8a1b; | |
| align-self: flex-end; | |
| } | |
| .chat_input input { | |
| padding: 5px 10px; | |
| } | |
| .btn_send { | |
| padding: 7px 10px; | |
| color: #fff; | |
| background: grey; | |
| border: none; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| </head> | |
| <body> | |
| <main id="chat"> | |
| <div class="info_output"></div> | |
| <div class="chat_output"></div> | |
| <div class="chat_input"> | |
| <input type="text" placeholder="Введите сообщение" /> | |
| <button class="btn_send">Отправить</button> | |
| </div> | |
| </main> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const wUrl = "wss://echo.websocket.org/"; | |
| function pageLoaded() { | |
| const infoOutput = document.querySelector(".info_output"); | |
| const chatOutput = document.querySelector(".chat_output"); | |
| const input = document.querySelector("input"); | |
| const sendBtn = document.querySelector(".btn_send"); | |
| let socket = new WebSocket(wUrl); | |
| socket.onopen = () => { | |
| infoOutput.innerText = "Соединение установлено"; | |
| } | |
| socket.onmessage = (event) => { | |
| writeToChat(event.data, true); | |
| } | |
| socket.onerror = () => { | |
| infoOutput.innerText = 'Произошла ошибка'; | |
| } | |
| sendBtn.addEventListener('click', sendMessage); | |
| function sendMessage() { | |
| if (!input.value) return; | |
| socket.send(input.value); | |
| writeToChat(input.value, false); | |
| input.value === ""; | |
| } | |
| function writeToChat(message, isRecieved) { | |
| let messageHTML = `<div class="${isRecieved? "recieved" : "sent"}">${message}</div>`; | |
| chatOutput.innerHTML += messageHTML; | |
| } | |
| } | |
| document.addEventListener("DOMContentLoaded", pageLoaded); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Касаемо задания 5.
Изначально не сообразил как делать, посмотрел вебинар, взял Ваш код и стал его разбирать, так что по сути, это переписанный ваш код, но разобранный и понятый