A message to pass Using HTML, CSS & JavaScript

Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "A message to pass" project using HTML, CSS & JavaScript. 

Preview 

In the above video, you’ve seen the preview of the "A message to pass" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below. 

A Message To Pass [Source Code] 

To get the following HTML, CSS & JS code for the "A message to pass" project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document. 

Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.

You can also download all source code files from the given download button.

HTML
<!DOCTYPE html>
<html lang="en">

<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>A message to pass</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>A Message You Would Like To Pass</h1>
        <input type="text" value="">
        <div class="btn">Submit</div>
        <p class="error">Please enter a value to pass</p>
        <h3>Last Message Delivered...!</h3>
        <p class="message"></p>
    </div>
    <script src="index.js"></script>
</body>

</html>
CSS
@import url(&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&amp;display=swap&quot;);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(219, 51, 253);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: &quot;Poppins&quot;, sans-serif;
}

.container {
  background-color: white;
  width: 700px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

h1 {
  font-size: 28px;
  margin: 10px;
}

input {
  width: 90%;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  font-size: 18px;
  margin-bottom: 10px;
}

.btn {
  background-color: rgb(219, 51, 253);
  padding: 10px 30px;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  font-size: 18px;
  margin-top: 5px;
  font-weight: 500;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  /* display: inline-block; */
}

.error {
  background-color: rgb(255, 139, 139);
  padding: 5px 0;
  width: 70%;
  text-align: center;
  display: none;
}

h3 {
  margin-top: 5px;
  font-size: 22px;
}

.message {
  font-size: 18px;
  color: rgb(44, 29, 255);
  font-weight: bold;
  margin-top: -5px;
}
JavaScript
const btnEl = document.querySelector(".btn");
const inputEl = document.querySelector("input");
const messageEl = document.querySelector(".message");
const errorEl = document.querySelector(".error");


btnEl.addEventListener("click",displayMessage);

function displayMessage(){
    if(inputEl.value){
        messageEl.textContent = inputEl.value;
        inputEl.value = "";
    }else{
        errorEl.style.display = "block";
       setInterval(() => {
        errorEl.style.display = "none";
       }, 10000);
    }
    
}
You have to wait 15 seconds.

Generating Download Link...

Post a Comment

Previous Post Next Post