JSFiddle - React, Tailwind, and code Playground

by merygarriga

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Console Object</title>
  </head>

  <body>
    <h1>CONSOLE OBJECTS</h1>
    <h2>console.log</h2>
    <p>It writes (logs) a message to the console.<br>It's useful for testing purposes.</p>

    <h2>console.clear</h2>
    <p>It clears the console.<br>It also writes "Console was cleared"</p>
    <button onclick="clearFuntcion()">Clear Console</button><br><br><br>

    <br>
    <h2>window.pageXOffset</h2>
    <button onclick="scrollFunction()" id="scrollButton">Click to scroll down</button>
    <p>Click the button to scroll the document window 100px vertically<br>We add a text to see that the scroll button it's working.</p>
    <p class="justificat">
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam blandit fringilla felis nec fringilla. Suspendisse sed condimentum ex. Nulla vitae est enim. Nam non ligula ac arcu malesuada cursus. In et condimentum lectus. Curabitur vel turpis vitae lorem condimentum suscipit a et urna. Maecenas vitae interdum nunc, non cursus sem. Nullam euismod urna enim, at euismod elit fermentum et. Nulla dui ex, suscipit vitae ex ullamcorper, feugiat ullamcorper erat. Nullam a odio sed libero elementum tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat ex vel turpis dapibus ultrices at in ante.
      <br><br>
      Nunc quis sagittis lacus, consequat porttitor risus. Phasellus quis est rhoncus, volutpat tortor id, consectetur orci. Nulla a dignissim nisl, elementum rutrum lorem. Nunc quis ante cursus, dictum metus a, ultrices dui. Etiam vel libero nec augue facilisis egestas ut non tellus. Mauris augue mauris, efficitur non nibh vel, tristique suscipit nisi. In sed nunc imperdiet urna varius sodales ut non mauris.
      <br><br>
      Etiam rhoncus nulla vel eros interdum...

CSS

* {
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background: url(../imagenes/escut.png) repeat fixed 0px -81px;
    text-align: center;
    background-color: slategray;
}

h1 {
    font-size: 3em;
    color: #DED1A9;
}

h2 {
  font-size: 2em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #1A3651;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color: #B0B8BF;
  margin: 40px 40px;
}

button{
  background-color: #DEBAA9;
  color: #AD7960;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  position: relative;
  border-radius: 4em;
  padding: 0.8em 1.8em;
  cursor: pointer;
  user-select: none;
  transition-duration: 0.4s;
}

button:hover {
  transition-duration: 0.1s;
  background-color: #AD7960;
  color: #7D3F21;
}

button: after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px white;
}

button: active: after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 4em;
  left: 0;
  top: 0;
  opacity: 1;
  transition: 0s;
}

#scrollButton {
    position: fixed;
    bottom: 30px;
    right: 30px; 
}

p.justificat {
  text-align: justify;
}

JavaScript

console.log("Hello world!");

function clearFuntcion() {
  console.clear();
}

function scrollFunction() {
  window.scrollBy(100, 100);
}