module_15
| <component name="ProjectCodeStyleConfiguration"> | |
| <state> | |
| <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" /> | |
| </state> | |
| </component> |
| <?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> |
| <?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> |
| <?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> |
| .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; | |
| } |
| <!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> |
| 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> | |
| ` | |
| }); |
| .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; | |
| } | |
| <!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> |
| 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'); | |
| }); |
| .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; | |
| } | |
| <!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> |
| 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>' | |
| } | |
| }); |
| button{ | |
| background-color: pink | |
| } |
| <!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> |
| 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>` |
| #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; | |
| } |
| <!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> |
| 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
This comment has been minimized.
Касаемо задания 5.
Изначально не сообразил как делать, посмотрел вебинар, взял Ваш код и стал его разбирать, так что по сути, это переписанный ваш код, но разобранный и понятый