Skip to content

Instantly share code, notes, and snippets.

@becsegal

becsegal/README.md

Created March 11, 2020 01:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save becsegal/ba689205558306dcad5bdbcfa2f58447 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save becsegal/ba689205558306dcad5bdbcfa2f58447 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=ba689205558306dcad5bdbcfa2f58447
Raw
README.md

Instructions

When a user enters text in the input fields, update the corresponding chat bubble.

Update the left chat

  • Add a click handler for the left chat button (id="buttonLeft")
  • When the button is clicked, save the value of the left input field to a variable (id="inputLeft")
  • Update the chat bubble text to display the saved value (id="chatLeft")

Update the right chat

  • Add a click handler for the right chat button (id="buttonRight")
  • When the button is clicked, save the value of the right input field to a variable (id="inputRight")
  • Update the chat bubble text to display the saved value (id="chatRight")

Bonus challenge

  • After updating the chat bubbles, clear the text in the input field. Update both click handlers!
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Inputs Drill 4: Chat App</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="speech-bubble left">
<h2 id="chatLeft">Hello!</h2>
</div>
</div>
<div class="row">
<div class="speech-bubble right">
<h2 id="chatRight">Hi!</h2>
</div>
</div>
</div>
<div class="inputs">
<div class="col left">
<input id="inputLeft" placeholder="Add chat to the left">
<button id="buttonLeft">Chat Left</button>
</div>
<div class="col right">
<input id="inputRight" placeholder="Add chat to the right">
<button id="buttonRight">Chat Right</button>
</div>
</div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css","editor.javascript"]}
Raw
script.js
const _0x244d=['#inputLeft','#buttonRight','#inputRight','val','click'];(function(_0x3bc422,_0x244dc1){const _0x27d79b=function(_0x525126){while(--_0x525126){_0x3bc422['push'](_0x3bc422['shift']());}};_0x27d79b(++_0x244dc1);}(_0x244d,0x15f));const _0x27d7=function(_0x3bc422,_0x244dc1){_0x3bc422=_0x3bc422-0x0;let _0x27d79b=_0x244d[_0x3bc422];return _0x27d79b;};$('#buttonLeft')[_0x27d7('0x3')](function(){let _0x325c0e=$(_0x27d7('0x4'))['val']();$('#chatLeft')['text'](_0x325c0e);$(_0x27d7('0x4'))[_0x27d7('0x2')]('');});$(_0x27d7('0x0'))[_0x27d7('0x3')](function(){let _0x564bcc=$(_0x27d7('0x1'))[_0x27d7('0x2')]();$('#chatRight')['text'](_0x564bcc);$(_0x27d7('0x1'))[_0x27d7('0x2')]('');});
Raw
styles.css
* {
box-sizing: border-box;
}
.container {
padding: 20px;
}
.inputs {
display: flex;
justify-content: space-between;
}
.col {
width: 40%;
}
.col:last-child {
text-align: right;
}
input {
width: 100%;
border: 1px solid #ccc;
border-radius: 0.2em;
padding: 8px;
font-size: 1em;
}
button {
font-size: 1em;
padding: 8px;
border-radius: 0.2em;
margin-top: 3px;
color: white;
border: 1px solid transparent;
}
.left button {
background-color: #00aabb;
border: 1px solid #00aabb;
}
.right button {
background-color: #ff1493;
border: 1px solid #ff1493;
}
.speech-bubble {
position: relative;
border-radius: .4em;
padding: 5px 15px;
color: white;
}
.speech-bubble.left {
background: #00aabb;
}
.speech-bubble.left:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-right-color: #00aabb;
border-left: 0;
border-bottom: 0;
margin-top: -10px;
margin-left: -20px;
}
.speech-bubble.right {
background: #ff1493;
margin-top: 20px;
text-align: right;
}
.speech-bubble.right:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #ff1493;
border-right: 0;
border-bottom: 0;
margin-top: -10px;
margin-right: -20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment