1607459160
Build a Color Palette Generator with Javascript
Today in this we are going to build a color palette generator . It is beginners friendly tutorial which is available with source code for reference
Subscribe : https://www.youtube.com/channel/UC9vqZpApNd4M0Pl5yR4banw
Source Code :
HTML :
<html>
<head>
<title>Color Palette Generator</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="contentBox">
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
</div>
<div class="actions">
<p>Press Space to Generate or Click on Generate Button</p>
<button>Generate</button>
</div>
<script src="main.js"></script>
</body>
</html>
CSS :
{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: righteous;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contentBox {
width: 100%;
height: 70vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.contentBox .colorBox {
width:15%;
height: 80%;
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.contentBox .colorBox .color{
width:100%;
height: 80%;
background-color: aqua;
border-radius: 10px 10px 0 0;
}
.contentBox .colorBox .code{
width:100%;
text-align: center;
margin-bottom: 30px;
}
.actions {
width: 100%;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.actions p{
box-shadow: 0 10 25px -10px rgba(0, 0, 0, 0.3);
padding: 12px 60px;
background-color: #212121;
border-radius: 10px;
font-size: 1.2rem;
color: #fff;
margin: 0 25px;
}
.actions button{
box-shadow: 0 10 25px -10px rgba(0, 0, 0, 0.3);
padding: 12px 60px;
background-color: #212121;
border-radius: 10px;
font-size: 1.2rem;
color: #fff;
margin: 0 25px;
border:none;
outline: none;
transition: 0.3s;
}
.actions button:hover {
background-color: skyblue;
color:#212121;
cursor: pointer;
}
JavaScript :
var code = document.querySelectorAll('.code');
var color = document.querySelectorAll('.color');
var button = document.querySelector('button');
button.addEventListener("click",colorGen);
function colorGen() {
var letters = '0123456789abcdef';
var hastag = ['#','#','#','#','#','#'];
for (let i=0;i<6;i++){
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
}
for (let i=0;i<code.length;i++){
code[i].innerHTML = hastag[i];
color[i].style.backgroundColor = hastag[i];
}
}
colorGen();
window.onkeyup = (e)=> {
if (e.which||e.keycode == 33) {
colorGen();
}
};
#js #javascript
What is GEEK
Buddha Community
1619614811
Random Password Generator Using JavaScript, HTML & CSS
Random Password Generator is a program that automatically generates a password randomly. Those generated passwords are mix with numbers, alphabets, symbols, and punctuations. This type of program helps the user to create a strong password.
Step By Step Tutorial :https://cutt.ly/ZbiDeyL
#password generator #random password generator #python password generator #random password generator javascript #html #javascript
1605177756
JavaScript Password Generator
In this video, I will be showing you how to build a password generator in JavaScript.
#password generator #random password generator #password #javascript #javascript project #javascript fun project
1605099909
JavaScript Password Generator - Part 2
In this video, I will be showing you how to build a password generator in JavaScript
#password generator #random password generator #javascript #js #javascript fun project #javascript project
1622207074
What is JavaScript - Stackfindover - Blog
Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.
Who invented JavaScript?
JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.
What is JavaScript?
JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.
Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.
JavaScript Hello World Program
In JavaScript, ‘document.write‘ is used to represent a string on a browser.
<script type="text/javascript">
document.write("Hello World!");
</script>
How to comment JavaScript code?
- For single line comment in JavaScript we have to use // (double slashes)
- For multiple line comments we have to use / * – – * /
<script type="text/javascript">
//single line comment
/* document.write("Hello"); */
</script>
Advantages and Disadvantages of JavaScript
#javascript #javascript code #javascript hello world #what is javascript #who invented javascript
1616670795
Hire Dedicated JavaScript Developers -Hire JavaScript Developers
It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.
Does your business need an interactive website or app?
Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.
The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.
Get your business app with JavaScript
For more inquiry click here https://bit.ly/31eZyDZ
Book Free Interview: https://bit.ly/3dDShFg
#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers