Test your skills: Strings (Strings 2)

Assessment request.

by crcabrera

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Strings: Task 2</title>
    <style>
      p {
        color: purple;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <section class="preview"></section>
  </body>
</html>

CSS

/* Some default styling for cookbook examples */
/*
rgb(53,43,34)
rgb(75,70,74)
rgb(95,97,110)
rgb(137,151,188)
rgb(160,178,226)
*/
body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h2 {
  font-size: 1.6rem;
  margin: 0;
}

p {
  margin: 0.5em 0;
}

/* styles for the editor */

.playable {
  font-family: monospace;
  display: block;
  margin-bottom: 10px;
  background-color: #f4f7f8;
  border: none;
  border-left: 6px solid #558abb;
  color: #4d4e53;
  width: 90%;
  max-width: 700px;
  padding: 10px 10px 0px;
  font-size: 90%;
}

.playable-css {
  height: 80px;
}

.playable-js {
  height: 160px;
}

.playable-buttons {
  text-align: right;
  width: 90%;
  max-width: 700px;
  padding: 5px 10px 5px 26px;
  font-size: 100%;
}

.preview {
  width: 90%;
  max-width: 700px;
  border: 1px solid #4d4e53;
  border-radius: 2px;
  padding: 10px 14px 10px 10px;
  margin-bottom: 10px;
}

.preview input {
  display: block;
  margin: 5px;
}

JavaScript

const quote = "I do not like green eggs and ham. I do not like them, Sam-I-Am.";
const substring = "green eggs and ham";

// Add your code here
const quoteLength = quote.length;
const index = quote.indexOf(substring);
const revisedQuote = quote.slice(0, index + substring.length + 1);

// Don't edit the code below here!

const section = document.querySelector("section");

section.innerHTML = " ";
const para1 = document.createElement("p");
para1.textContent = `The quote is ${quoteLength} characters long.`;
const para2 = document.createElement("p");
para2.textContent = revisedQuote;

section.appendChild(para1);
section.appendChild(para2);