JavaScript Quote Maker
After converting UI Design to HTML CSS I am going to convert it by using my own custom javascript.
hence to make the javascript quote maker functional I will use my custom javascript code and use some external libraries.
So let's start first of all to do is to link jQuery CDN you can use it via file whatever you want.
further, I have changed the design a little bit in HTML to look more perfect you can do it as well.
Then give ids to HTML elements in order to make them javascript selectors.
likewise, add some more CSS in the style sheet, it will work on the javascript event.
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quote Maker UI Design Adobe XD to HTML</title> <!-- Style Sheet --> <link rel="stylesheet" href="css/style.css"> <!-- Javascript --> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> <!-- DOM to IMAGE --> <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js" integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA==" crossorigin="anonymous"></script> <!-- Color Picker --> <script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css"> <script> $(document).ready(function(){ $('.color-picker').spectrum({ type: "component", showInput: true, showInitial: true }); }); </script> </head> <body> <div class="wrapper"> <div class="logo"> <div class="back-logo"></div> <a href="">Quote Maker</a> </div> <div class="form-box"> <form action="" enctype="multipart/form-data"> <div class="form-control"> <input type="text" id="name" placeholder="Name" autocomplete="off"> </div> <div class="form-control"> <textarea name="" id="quote" cols="30" rows="7"></textarea> </div> <div class="form-inline"> <div class="form-control"> <input id="background-color" class="color-picker" placeholder="Text Background Color" /> </div> <div class="form-control"> <input id="text-color" class="color-picker" placeholder="Text Color" /> </div> </div> <label for="">Set Background Image</label> <div class="form-inline"> <div class="form-control"> <input type="file" id="background"> </div> <div class="form-control"> <input id="overlay-color" class="color-picker" placeholder="Background Overlay" /> </div> </div> <div class="form-control"> <label for="">Set Decoration Image (Must be in PNG 500 x 300)</label> <input type="file" id="top-image"> </div> <br/> <input type="submit" value="Create" id="create"> </form> </div> <!-- Form Box --> <div class="quote-box"> <div class="quote-content"> <img src="img/flower.png" alt="" id="quote-img"> <q id="quoteText">Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Obcaecati ab quas, saepe delectus, fuga nihil? <p id="quoter">John Doe</p> </q> </div> </div> </div> <script src="js/main.js"></script> </body> </html>
In this HTML code, I am using CDN for color picker and DOM to Image convert script.
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
width: 100vw;
height: 100vh;
background: url(../img/background.png) no-repeat;
}
.logo{
width: 340px;
height: 60px;
position: absolute;
top: 0;
right: 0;
}
.logo .back-logo{
width: 100%;
height: 100%;
background-color: #ffffff;
mix-blend-mode: soft-light;
border-radius: 15px 0 0 15px;
position: relative;
box-shadow: 1px 1px 20px #610d1c;
}
.logo a{
font-family: Trajan Pro;
font-size: 30px;
font-weight: bold;
text-decoration: none;
display: block;
color: #AF4A6B;
position: absolute;
top: 15px;
left: 25px;
}
.form-box{
width: 510px;
height: 520px;
position: absolute;
top: 80px;
right: 150px;
background-color: rgba(255,213,209,0.9);
border-radius: 15px;
padding: 50px;
box-shadow: 3px 3px 20px #610d1c;
}
.form-box .form-control{
margin-bottom: 15px;
border-radius: 15px;
}
.form-inline{
display: flex;
justify-content: space-around;
align-items: center;
grid-column-gap: 10px;
}
input,textarea{
font-family: arial;
width: 100%;
padding: 10px 15px;
border: none;
outline: none;
color: #640d1e;
background-color: #fee5e4;
border-radius: 15px;
position: relative;
box-shadow: 0 1px 20px #ffb2ac;
}
label{
font-family: arial;
font-size: 12px;
color: #610d1c;
}
input[type="file"]::file-selector-button{
display: none;
}
input[type="file"]::before{
content: "upload";
position: absolute;
top: 0;
right: 0;
background-color: #e98399;
color: #ffffff;
padding: 10px 15px;
cursor: pointer;
}
.form-control.half input{
width: 200px !important;
}
input[type="submit"]{
width: 136px;
height: 30px;
background: linear-gradient(to top, #e98399, #610d1c);
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1.5;
float: right;
cursor: pointer;
}
input[type="submit"]:hover{
background: linear-gradient(to bottom, #e98399, #610d1c);
}
.quote-content{
width: 500px;
height: 520px;
padding: 20px;
box-shadow: 1px 1px 20px #610d1c;
border-radius: 15px;
position: relative;
top: 80px;
left: 150px;
transform: perspective(600px) rotateY(15deg);
}
.quote-content img{
width: 400px;
height: 200px;
object-fit: contain;
margin: 0 auto;
}
.quote-content q{
font-family: Trajan Pro;
font-size: 24px;
font-weight: bold;
text-decoration: none;
display: block;
color: #AF4A6B;
padding: 50px 20px;
border-radius: 15px;
position: relative;
top: -50px;
z-index: -1;
background-color: rgba(255,255,255,0.7);
}
.quote-content p{
font-family: Trajan Pro;
font-size: 24px;
font-weight: bold;
text-decoration: none;
display: block;
color: #AF4A6B;
position: absolute;
bottom: 15px;
right: 30px;
}
.quote-content a{
width: 136px;
height: 35px;
line-height: 35px;
background: linear-gradient(to top, #e98399, #610d1c);
color: #fff;
text-transform: uppercase;
text-align: center;
text-decoration: none;
letter-spacing: 1.5;
border-radius: 15px;
float: right;
transition: 0.5s;
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
}
.quote-content a:hover{
background: linear-gradient(to bottom, #e98399, #610d1c);
}
/* Add CSS in Javascript Event */.quote-content.overlay{
background-position: center center;
background-blend-mode: multiply;
}
.quote-content.ready{
transform: unset !important;
position: relative !important;
top: 0 !important;
left: 0 !important;
border-radius: 0 !important;
}
.quote-content.ready img{
width: 100%;
position: relative;
z-index: 2 !important;
}
.quote-content.ready q{
z-index: 1 !important;
}
Now the final step to add javascript code, don't forget to use the color picker and DOM to Image external CDN links or via file.
JavaScript Quote Maker Custom Code
document.getElementById("create").addEventListener("click", setValues); // All Input Const of Form Elements const name = document.querySelector('#name'); const quote = document.querySelector('#quote'); const background = document.querySelector('#background'); const backgroundColor = document.querySelector('#background-color'); const topImage = document.querySelector('#top-image'); const textColor = document.querySelector('#text-color'); const overlayColor = document.querySelector('#overlay-color'); // Output Const of Quote Box const quoteText = document.getElementById('quoteText'); const quoteImage = document.querySelector('#quote-img'); const backgroundImage = document.querySelector('.quote-content'); function setValues(e){ e.preventDefault(); var download = document.querySelector('.download'); if (download) { download.remove(); } if (name.value === "") { alert("Name is required"); } else if (quote.value === "") { alert("Quote is required"); } else{ // Set Value of Quote Text quoteText.innerText = (quote.value); // Set Value of Quoter Name const quoter = document.createElement("p"); quoter.classList.add("quoter"); quoter.innerText = (name.value); quoteText.appendChild(quoter); // Set Quote Text Color quoteText.style.color = (textColor.value); quoter.style.color = (textColor.value); // Set Quote Background Color quoteText.style.background = (backgroundColor.value); // Set Background Image Overlay backgroundImage.style.backgroundColor = (overlayColor.value); // Create Download Button var download = document.createElement("a"); download.classList.add("download"); download.innerText = "Download"; backgroundImage.appendChild(download); } download.addEventListener("click", downloadQuote); } var _URL = window.URL || window.webkitURL; background.addEventListener("change", function(){ var file, img; if ((file = this.files[0])) { if (file.size > 10240000) { alert("image size must be 10Mb"); } else{ img = new Image(); var objectUrl = _URL.createObjectURL(file); img.onload = function () { if (this.width > 1300 || this.height > 2500) { alert("image width should be 1300px and height 2500px maximum"); } else{ var reader = new FileReader(); reader.addEventListener('load', function(){ backgroundImage.style.backgroundImage = "url("+this.result+")"; backgroundImage.classList.add("overlay"); }); reader.readAsDataURL(file); } _URL.revokeObjectURL(objectUrl); }; img.src = objectUrl; } } }); topImage.addEventListener("change", function(){ var file, img; if ((file = this.files[0])) { if (file.size > 1024000) { alert("image size must be 1Mb"); } else{ img = new Image(); var objectUrl = _URL.createObjectURL(file); img.onload = function () { if (this.width > 500 || this.height > 500) { alert("image width should be 500px and height 300px maximum"); } else{ var reader = new FileReader(); reader.addEventListener('load', function(){ quoteImage.setAttribute("src", this.result); }); reader.readAsDataURL(file); } _URL.revokeObjectURL(objectUrl); }; img.src = objectUrl; } } }); function downloadQuote(){ var download = document.querySelector('.download'); download.remove(); backgroundImage.classList.add("ready"); domtoimage.toJpeg(backgroundImage, { quality: 0.95 }) .then(function (dataUrl) { var link = document.createElement('a'); link.download = 'download.jpeg'; link.href = dataUrl; link.click(); backgroundImage.classList.remove("ready"); }); }
Quote Maker UI Design in Adobe XD
Convert Quote Maker UI Design into HTML CSS
For background and images follow the below link
0 Comments