Skip to content

Instantly share code, notes, and snippets.

@becsegal

becsegal/README.md

Created March 11, 2020 01:12
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save becsegal/4c8a0bab79a4cf4392d268702cace42b to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=4c8a0bab79a4cf4392d268702cace42b
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"]}
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