.jpg "Love letter Generator using html css js") |
| Love letter Generator using html css js |
In this article, we given a Love Letter Generator using html css and javascript as a project. Love letter Generator is the unique project that created with html css and javascript. In this project, we created input block to add the names and message. After submitting the details, it will generate the love letter using javascript.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Love Letter Generator using html css and javascript. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Love-letter-generator.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Love Letter Generator using html css and javascript source code
Here we given a html, css and js source code of Love letter generator project as given -
HTML
In HTML, we created a structure by adding box where we added input fields to add the names and message. Linked css and js to add styling and functionality to the project. Copy the html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Letter Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Love Letter Generator</h1>
<form id="loveLetterForm">
<label for="recipientName">Your Lover name:</label>
<input type="text" id="recipientName" required>
<label for="senderName">Your Name:</label>
<input type="text" id="senderName" required>
<label for="letterContent">Write your love letter:</label>
<textarea id="letterContent" rows="8" required></textarea>
<button type="submit">Generate Letter</button>
</form>
<div id="generatedLetter" class="hidden">
<h2>Dear <span id="recipientNameOutput"></span>,</h2>
<p id="letterOutput"></p>
<p>Yours lovely,<br><span id="senderNameOutput"></span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In css, we added styling to the project with css properties. we added a responsiveness to make it accessible on all screens. Copy the given css code and paste it into style.css file.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
}
h1 {
text-align: center;
color: #e91e63;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
font-weight: bold;
}
input[type="text"],
textarea {
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
textarea {
resize: vertical;
}
button {
background-color: #e91e63;
color: #fff;
border: none;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
border-radius: 4px;
font-size: 1rem;
}
button:hover {
background-color: #d81b60;
}
#generatedLetter {
margin-top: 20px;
}
.hidden {
display: none;
}
#generatedLetter h2 {
font-size: 1.5rem;
color: #e91e63;
margin-bottom: 10px;
}
#letterOutput {
white-space: pre-wrap;
line-height: 1.6;
}
#senderNameOutput {
font-style: italic;
color: #666;
}Javascript
In javascript, we added a functionality to generate the letter. Copy the given javascript code and paste it into script.js file.
const loveLetterForm = document.getElementById('loveLetterForm');
const generatedLetter = document.getElementById('generatedLetter');
const recipientNameOutput = document.getElementById('recipientNameOutput');
const letterOutput = document.getElementById('letterOutput');
const senderNameOutput = document.getElementById('senderNameOutput');
loveLetterForm.addEventListener('submit', function (event) {
event.preventDefault();
const recipientName = document.getElementById('recipientName').value;
const senderName = document.getElementById('senderName').value;
const letterContent = document.getElementById('letterContent').value;
recipientNameOutput.textContent = recipientName;
letterOutput.textContent = letterContent;
senderNameOutput.textContent = senderName;
generatedLetter.classList.remove('hidden');
});Output
Check this output of Love letter Generator project -
Also see this -
Hope this helps you to know about Love letter generator using HTML CSS JS with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects