Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
@Kozlove1

This comment has been minimized.

Copy link
Owner Author

@Kozlove1 Kozlove1 commented Feb 23, 2021

Касаемо задания 5.
Изначально не сообразил как делать, посмотрел вебинар, взял Ваш код и стал его разбирать, так что по сути, это переписанный ваш код, но разобранный и понятый

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment