Build a Lorem Ipsum Dummy Placeholder Text Generator Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lorem Ipsum</title>

    <!-- styles -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="section-center">
      <h3>tired of boring lorem ipsum?</h3>
      <form class="lorem-form">
        <label for="amount">paragraphs:</label>
        <input type="number" name="amount" id="amount" placeholder="5" />
        <button type="submit" class="btn">generate</button>
      </form>
      <article class="lorem-text"></article>
    </section>

    <!-- javascript -->
    <script src="app.js"></script>
  </body>
</html>

 

 

 

styles.css

 

 

/*
=============== 
Fonts
===============
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: #49a6e9;
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --ff-primary: "Roboto", sans-serif;
  --ff-secondary: "Open Sans", sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.25rem;
  --radius: 0.5rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}
/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--ff-secondary);
  background: var(--clr-grey-10);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
}
img:not(.logo) {
  width: 100%;
}
img {
  display: block;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-family: var(--ff-primary);
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 0.875rem;
}
p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}
/*  global classes */

.btn {
  text-transform: uppercase;
  background: var(--clr-primary-5);
  color: var(--clr-primary-1);
  padding: 0.375rem 0.75rem;
  letter-spacing: 1px;
  display: inline-block;
  transition: var(--transition);
  font-size: 0.875rem;
  border: 2px solid var(--clr-primary-5);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
}
.btn:hover {
  color: var(--clr-primary-5);
  background: var(--clr-primary-8);
  border-color: var(--clr-primary-8);
}
/* section */
.section {
  padding: 5rem 0;
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 40rem;
  margin-top: 5rem;
  text-align: center;
}
@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}
main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
/*
=============== 
Lorem Ipsum
===============
*/
h3 {
  text-transform: uppercase;
  color: var(--clr-primary-1);
}
.lorem-form {
  text-transform: capitalize;
  letter-spacing: var(--spacing);
  margin-top: 2rem;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
label {
  font-size: 1.25rem;
  color: var(--clr-primary-1);
}
input {
  padding: 0.25rem 0.5rem;

  width: 4rem;
  border-radius: var(--radius);
  border: none;
  margin: 0 0.5rem;
  font-size: 1.25rem;
}
button {
  background: var(--clr-primary-10);
}
.result {
  margin-bottom: 2rem;
}

 

 

app.js

 

 

const text = [
  `Jelly sweet roll jelly beans biscuit pie macaroon chocolate donut. Carrot cake caramels pie sweet apple pie tiramisu carrot cake. Marzipan marshmallow croissant tootsie roll lollipop. Cupcake lemon drops bear claw gummies. Jelly bear claw gummi bears lollipop cotton candy gummi bears chocolate bar cake cookie. Cupcake muffin danish muffin cookie gummies. Jelly beans tiramisu pudding. Toffee soufflé chocolate cake pastry brownie. Oat cake halvah sweet roll cotton candy croissant lollipop. Macaroon tiramisu chocolate bar candy candy carrot cake jelly sweet. Gummies croissant macaroon dessert. Chocolate cake dragée pie.`,
  `Next level tbh everyday carry, blog copper mug forage kitsch roof party pickled hammock kale chips tofu. Etsy shoreditch 8-bit microdosing, XOXO viral butcher banh mi humblebrag listicle woke bicycle rights brunch before they sold out ramps. Twee shabby chic taiyaki flannel, enamel pin venmo vape four loko. Hexagon kale chips typewriter kitsch 8-bit organic plaid small batch keffiyeh ethical banh mi narwhal echo park cronut.`,
  `Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.`,
  `Cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers kitty power ignore the squirrels, you'll never catch them anyway for what a cat-ass-trophy! or purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table. Pretend you want to go out but then don't bite off human's toes, yet disappear for four days and return home with an expensive injury; bite the vet so catch eat throw up catch eat throw up bad birds. `,
  `This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.
I just told you! You've killed me! Fry! Quit doing the right thing, you jerk! Michelle, I don't regret this, but I both rue and lament it. Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.`,
  `Airedale hard cheese mozzarella. Pecorino melted cheese port-salut emmental babybel cheese and wine melted cheese manchego. Everyone loves blue castello everyone loves fromage cheese slices airedale cheddar cream cheese. Bavarian bergkase who moved my cheese halloumi port-salut gouda jarlsberg ricotta rubber cheese. Stinking bishop smelly cheese brie.`,
  `Salvia glossier subway tile, leggings mustache YOLO semiotics chia. Pitchfork tbh af blog church-key meggings vaporware PBR&B master cleanse post-ironic man bun pabst mustache letterpress synth. Snackwave raw denim godard, 3 wolf moon shaman offal kitsch unicorn live-edge selvage schlitz fashion axe vaporware drinking vinegar prism. Shabby chic tacos artisan, chambray chicharrones cardigan leggings typewriter af pop-up williamsburg meditation PBR&B viral. You probably haven't heard of them DIY jean shorts subway tile fashion axe bushwick kitsch tumeric cloud bread vaporware freegan franzen pork belly chicharrones banh mi.`,
  `Man braid celiac synth freegan readymade, pitchfork fam salvia waistcoat lomo bitters gentrify four loko. Pitchfork semiotics post-ironic vegan. Tofu meditation microdosing hashtag semiotics venmo. Flexitarian vape tilde taiyaki. Prism poutine farm-to-table, messenger bag vegan taxidermy tattooed sartorial squid jean shorts fixie selvage trust fund vape.`,
  `Rutters Plate Fleet boom chandler Brethren of the Coast handsomely lookout marooned brigantine knave. Buccaneer gangway jack rum loot spyglass line Jack Tar fore gaff. Gaff topmast scuttle ballast swab draught measured fer yer chains dance the hempen jig Chain Shot yardarm.`,
];

const form = document.querySelector(".lorem-form");
const amount = document.getElementById("amount");
const result = document.querySelector(".lorem-text");

form.addEventListener("submit", function (e) {
  // A click on a form submit button – initiates its submission to the server.

  e.preventDefault();

  const value = parseInt(amount.value);
  const random = Math.floor(Math.random() * text.length);

  if (isNaN(value) || value < 0 || value > 9) {
    result.innerHTML = `<p class="result">${text[random]}</p>`;
  } else {
    let tempText = text.slice(0, value);
    tempText = tempText
      .map(function (item) {
        return `<p class="result">${item}</p>`;
      })
      .join("");
    result.innerHTML = tempText;
  }
});

 

See also  Build a Bootstrap CSS UI Unit Weight Converter Web App in Vanilla Javascript Full Project For Beginners

 

logo.svg

 

 

<svg width="230" height="47" viewBox="0 0 230 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M21.1797 25.2324C20.916 27.4883 20.0811 29.2314 18.6748 30.4619C17.2783 31.6826 15.418 32.293 13.0938 32.293C10.5742 32.293 8.55273 31.3896 7.0293 29.583C5.51562 27.7764 4.75879 25.3594 4.75879 22.332V20.2812C4.75879 18.2988 5.11035 16.5557 5.81348 15.0518C6.52637 13.5479 7.53223 12.3955 8.83105 11.5947C10.1299 10.7842 11.6338 10.3789 13.3428 10.3789C15.6084 10.3789 17.4248 11.0137 18.792 12.2832C20.1592 13.543 20.9551 15.291 21.1797 17.5273H18.3525C18.1084 15.8281 17.5762 14.5977 16.7559 13.8359C15.9453 13.0742 14.8076 12.6934 13.3428 12.6934C11.5459 12.6934 10.1348 13.3574 9.10938 14.6855C8.09375 16.0137 7.58594 17.9033 7.58594 20.3545V22.4199C7.58594 24.7344 8.06934 26.5752 9.03613 27.9424C10.0029 29.3096 11.3555 29.9932 13.0938 29.9932C14.6562 29.9932 15.8525 29.6416 16.6826 28.9385C17.5225 28.2256 18.0791 26.9902 18.3525 25.2324H21.1797ZM26.8896 23.9287C26.8896 22.376 27.1924 20.9795 27.7979 19.7393C28.4131 18.499 29.2627 17.542 30.3467 16.8682C31.4404 16.1943 32.6855 15.8574 34.082 15.8574C36.2402 15.8574 37.9834 16.6045 39.3115 18.0986C40.6494 19.5928 41.3184 21.5801 41.3184 24.0605V24.251C41.3184 25.7939 41.0205 27.1807 40.4248 28.4111C39.8389 29.6318 38.9941 30.584 37.8906 31.2676C36.7969 31.9512 35.5371 32.293 34.1113 32.293C31.9629 32.293 30.2197 31.5459 28.8818 30.0518C27.5537 28.5576 26.8896 26.5801 26.8896 24.1191V23.9287ZM29.6143 24.251C29.6143 26.0088 30.0195 27.4199 30.8301 28.4844C31.6504 29.5488 32.7441 30.0811 34.1113 30.0811C35.4883 30.0811 36.582 29.5439 37.3926 28.4697C38.2031 27.3857 38.6084 25.8721 38.6084 23.9287C38.6084 22.1904 38.1934 20.7842 37.3633 19.71C36.543 18.626 35.4492 18.084 34.082 18.084C32.7441 18.084 31.665 18.6162 30.8447 19.6807C30.0244 20.7451 29.6143 22.2686 29.6143 24.251ZM47.0576 23.9434C47.0576 21.5117 47.6338 19.5586 48.7861 18.084C49.9385 16.5996 51.4473 15.8574 53.3125 15.8574C55.168 15.8574 56.6377 16.4922 57.7217 17.7617V9.5H60.4316V32H57.9414L57.8096 30.3008C56.7256 31.6289 55.2168 32.293 53.2832 32.293C51.4473 32.293 49.9482 31.541 48.7861 30.0371C47.6338 28.5332 47.0576 26.5703 47.0576 24.1484V23.9434ZM49.7676 24.251C49.7676 26.0479 50.1387 27.4541 50.8809 28.4697C51.623 29.4854 52.6484 29.9932 53.957 29.9932C55.6758 29.9932 56.9307 29.2217 57.7217 27.6787V20.3984C56.9111 18.9043 55.666 18.1572 53.9863 18.1572C52.6582 18.1572 51.623 18.6699 50.8809 19.6953C50.1387 20.7207 49.7676 22.2393 49.7676 24.251ZM70.5947 32H67.8848V16.1504H70.5947V32ZM67.665 11.9463C67.665 11.5068 67.7969 11.1357 68.0605 10.833C68.334 10.5303 68.7344 10.3789 69.2617 10.3789C69.7891 10.3789 70.1895 10.5303 70.4629 10.833C70.7363 11.1357 70.873 11.5068 70.873 11.9463C70.873 12.3857 70.7363 12.752 70.4629 13.0449C70.1895 13.3379 69.7891 13.4844 69.2617 13.4844C68.7344 13.4844 68.334 13.3379 68.0605 13.0449C67.7969 12.752 67.665 12.3857 67.665 11.9463ZM80.5088 16.1504L80.5967 18.1426C81.8076 16.6191 83.3896 15.8574 85.3428 15.8574C88.6924 15.8574 90.3818 17.7471 90.4111 21.5264V32H87.7012V21.5117C87.6914 20.3691 87.4277 19.5244 86.9102 18.9775C86.4023 18.4307 85.6064 18.1572 84.5225 18.1572C83.6436 18.1572 82.8721 18.3916 82.208 18.8604C81.5439 19.3291 81.0264 19.9443 80.6553 20.7061V32H77.9453V16.1504H80.5088ZM96.8535 23.9434C96.8535 21.4727 97.4248 19.5098 98.5674 18.0547C99.71 16.5898 101.224 15.8574 103.108 15.8574C105.042 15.8574 106.551 16.541 107.635 17.9082L107.767 16.1504H110.242V31.6191C110.242 33.6699 109.632 35.2861 108.411 36.4678C107.2 37.6494 105.569 38.2402 103.519 38.2402C102.376 38.2402 101.258 37.9961 100.164 37.5078C99.0703 37.0195 98.2354 36.3506 97.6592 35.501L99.0654 33.875C100.228 35.3105 101.648 36.0283 103.328 36.0283C104.646 36.0283 105.672 35.6572 106.404 34.915C107.146 34.1729 107.518 33.1279 107.518 31.7803V30.418C106.434 31.668 104.954 32.293 103.079 32.293C101.224 32.293 99.7197 31.5459 98.5674 30.0518C97.4248 28.5576 96.8535 26.5215 96.8535 23.9434ZM99.5781 24.251C99.5781 26.0381 99.9443 27.4443 100.677 28.4697C101.409 29.4854 102.435 29.9932 103.753 29.9932C105.462 29.9932 106.717 29.2168 107.518 27.6641V20.4277C106.688 18.9141 105.442 18.1572 103.782 18.1572C102.464 18.1572 101.434 18.6699 100.691 19.6953C99.9492 20.7207 99.5781 22.2393 99.5781 24.251Z" fill="#222222"/>
<path d="M139.987 26.4336H131.052L129.045 32H126.145L134.289 10.6719H136.75L144.909 32H142.023L139.987 26.4336ZM131.901 24.1191H139.152L135.52 14.1436L131.901 24.1191ZM149.696 23.9434C149.696 21.5117 150.272 19.5586 151.425 18.084C152.577 16.5996 154.086 15.8574 155.951 15.8574C157.807 15.8574 159.276 16.4922 160.36 17.7617V9.5H163.07V32H160.58L160.448 30.3008C159.364 31.6289 157.855 32.293 155.922 32.293C154.086 32.293 152.587 31.541 151.425 30.0371C150.272 28.5332 149.696 26.5703 149.696 24.1484V23.9434ZM152.406 24.251C152.406 26.0479 152.777 27.4541 153.52 28.4697C154.262 29.4854 155.287 29.9932 156.596 29.9932C158.314 29.9932 159.569 29.2217 160.36 27.6787V20.3984C159.55 18.9043 158.305 18.1572 156.625 18.1572C155.297 18.1572 154.262 18.6699 153.52 19.6953C152.777 20.7207 152.406 22.2393 152.406 24.251ZM169.63 23.9434C169.63 21.5117 170.206 19.5586 171.358 18.084C172.511 16.5996 174.02 15.8574 175.885 15.8574C177.74 15.8574 179.21 16.4922 180.294 17.7617V9.5H183.004V32H180.514L180.382 30.3008C179.298 31.6289 177.789 32.293 175.855 32.293C174.02 32.293 172.521 31.541 171.358 30.0371C170.206 28.5332 169.63 26.5703 169.63 24.1484V23.9434ZM172.34 24.251C172.34 26.0479 172.711 27.4541 173.453 28.4697C174.195 29.4854 175.221 29.9932 176.529 29.9932C178.248 29.9932 179.503 29.2217 180.294 27.6787V20.3984C179.483 18.9043 178.238 18.1572 176.559 18.1572C175.23 18.1572 174.195 18.6699 173.453 19.6953C172.711 20.7207 172.34 22.2393 172.34 24.251ZM193.167 32H190.457V16.1504H193.167V32ZM190.237 11.9463C190.237 11.5068 190.369 11.1357 190.633 10.833C190.906 10.5303 191.307 10.3789 191.834 10.3789C192.361 10.3789 192.762 10.5303 193.035 10.833C193.309 11.1357 193.445 11.5068 193.445 11.9463C193.445 12.3857 193.309 12.752 193.035 13.0449C192.762 13.3379 192.361 13.4844 191.834 13.4844C191.307 13.4844 190.906 13.3379 190.633 13.0449C190.369 12.752 190.237 12.3857 190.237 11.9463ZM206.875 30.0811C207.842 30.0811 208.687 29.7881 209.409 29.2021C210.132 28.6162 210.532 27.8838 210.61 27.0049H213.174C213.125 27.9131 212.812 28.7773 212.236 29.5977C211.66 30.418 210.889 31.0723 209.922 31.5605C208.965 32.0488 207.949 32.293 206.875 32.293C204.717 32.293 202.998 31.5752 201.719 30.1396C200.449 28.6943 199.814 26.7217 199.814 24.2217V23.7676C199.814 22.2246 200.098 20.8525 200.664 19.6514C201.23 18.4502 202.041 17.5176 203.096 16.8535C204.16 16.1895 205.415 15.8574 206.86 15.8574C208.638 15.8574 210.112 16.3896 211.284 17.4541C212.466 18.5186 213.096 19.9004 213.174 21.5996H210.61C210.532 20.5742 210.142 19.7344 209.438 19.0801C208.745 18.416 207.886 18.084 206.86 18.084C205.483 18.084 204.414 18.582 203.652 19.5781C202.9 20.5645 202.524 21.9951 202.524 23.8701V24.3828C202.524 26.209 202.9 27.6152 203.652 28.6016C204.404 29.5879 205.479 30.0811 206.875 30.0811ZM222.897 12.3125V16.1504H225.856V18.2451H222.897V28.0742C222.897 28.709 223.029 29.1875 223.293 29.5098C223.557 29.8223 224.006 29.9785 224.641 29.9785C224.953 29.9785 225.383 29.9199 225.93 29.8027V32C225.217 32.1953 224.523 32.293 223.85 32.293C222.639 32.293 221.726 31.9268 221.11 31.1943C220.495 30.4619 220.188 29.4219 220.188 28.0742V18.2451H217.302V16.1504H220.188V12.3125H222.897Z" fill="#49A6E9"/>
</g>
<defs>
<filter id="filter0_d" x="0.758789" y="9.5" width="229.171" height="36.7402" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

Leave a Reply