Color Code Genaretor by using programming Lenguage.

Instructiv October 06, 2020
Color Code Genaretor.presented by instructiv

Color Code Genaretor by using programming Lenguage.
আসসালামু আলাইকুম।আমাদের instructiv এর পক্ষ থেকে জানাই আপনাকে আন্তরিক অভিনন্দন ও শুভেচ্ছা। আজকে আমি যে প্রজেক্ট নিয়ে কথা বলব সেটা হয়তো টাইটেল দেখে বুঝতে পেরেছ। হে আমি আজ color code generator project নিয়ে এসেছি, যার মাধ্যমে আপনারা যেকোনো কালার কোড সেকেন্ডের মধ্যে বের করতে পারবেন।  

কিভাবে কালার কোড জেনেরেটর তৈরি করবেন?
এই প্রজেক্ট টি তৈরি করা হয়েছে html, css and javascript দিয়ে। তাই প্রথমে শুরু করি html দিয়ে
প্রথমে আপনি একটি  নোট-পেড ওপেন করেন।  তারপর নিচের কোড গুলো কপি করে নিয়ে পেস্ট করে দিন আপনার নোট-পেডে ওপেন করা ফাইলে, আর ফাইলটির নাম  index.html দিয়ে সেভ করে নিন।
html
<mxp><!DOCTYPE html>
<html>
<head>
<title>color code generator</title>
<script src="script.js" ></script>
<link rel="stylesheet" href="style.css">

</head>
<body>

<input type="range" class="box1" max="255" min="1" value="50" id="myrange1">
<input type="range" class="box2" max="255" min="1" value="50" id="myrange2">
<input type="range" class="box3" max="255" min="1" value="50" id="myrange3">


<button onclick="mycolor()" class="myclass"  >generate</button>
<tr>
<td><div id="box11"></div></td>
</tr>
<tr>
<td><div id="box22"></div></td>
</tr><tr>
<td><div id="box33"></div></td></tr>

<div id="mycolor"><div id="myid"><h4 id="code"></h4></div></div>

</body>
</html>
</mxp>

 এখানে আমরা html  দিয়ে শুধু প্রজেক্টের স্ট্রাকচার তৈরি করলাম
এবার আমরা প্রজেক্টের স্ট্রাকচারটি ডিজাইন করব css দিয়ে। এখন নিচের css কোড গুলো কপি করে নিন আর আপনি আরেকটি ফাইল তৈরি করে তৈরিকৃত ফাইলের মধ্যে পেস্ট করে দিন। আর অবশ্যই ফাইলের নাম  style.css দিয়ে সেভ করে নিন। 
css

* {
margin:0;
padding :0;

}

body{
height :434px;
width :320px;
background :#00C7FB;

}
.box1 {
  -webkit-appearance: none;
margin:7px;
  width: 95%;
  height: 35px;
  border-radius: 5px;  
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(255,0,0,1));
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.box1::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:none ;
  width: 15px;
  height: 15px;
  border-radius: 20%;
  background: #eee;
  cursor: pointer;
}

.box1::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.box2 {
  -webkit-appearance: none;
margin:7px;
  width: 95%;
  height: 35px;
  border-radius: 5px;  
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,255,0,1));
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.box2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:none ;
  width: 15px;
  height: 15px;
  border-radius: 20%;
  background: #eee;
  cursor: pointer;
}

.box2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.box3 {
  -webkit-appearance: none;
margin:7px;
  width: 95%;
  height: 35px;
  border-radius: 5px;  
  background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,255,1));
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.box3::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:none ;
  width: 15px;
  height: 15px;
  border-radius: 20%;
  background: #eee;
  cursor: pointer;
}

.box3::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

#box11{
margin:0;
height:50px;
width :50px;
position:absolute ;
top:200px;
right :0px;
bottom:0px;
left:30px;
border-radius:6px;
box-shadow:  0px 0 20px rgba(255,0,0,.4);
}
#box22{
margin:0;
height:50px;
width :50px;
position:absolute ;
top:200px;
right :0px;
bottom:0px;
left:125px;
border-radius:6px;
box-shadow:  0px 0 20px rgba(0,255,0,.4);
}

#box33{
margin:0;
height:50px;
width :50px;
position:absolute ;
top:200px;
right :0px;
bottom:0px;
left:230px;
border-radius:6px;
box-shadow:  0px 0 20px rgba(0,0,255,.4);
}

#mycolor{
text-align:center;
margin:0;
height:150px;
width :250px;
position:absolute ;
top:270px;
right :0px;
bottom:0px;
left:30px;
border-radius:6px;
box-shadow:  0px 0 20px rgba(0,0,0,.4);
}
#code{

height:40px;
width:140px;
color:blue;
position:absolute ;
top:0px;
left:0px;
z-index:10;

}
#myid{

height:40px;
width:140px;
position :relative;
background:rgba(200,200,200,1);;
top:95px;
left:60px;
border-radius:6px;
box-shadow:0 0 10px rgba(100,50,150,.8);
text-shadow:0 0 2px rgba(0,0,180,.4);
z-index:100;

}

.myclass{
color:cyan;
padding:2px;
font-size:125%;
font-family:courier;
margin:0;
height:30px;
width :150px;
position:absolute ;
top:150px;
right :0px;
bottom:0px;
left:80px;
border:none;
outline-style:none;
border-radius:6px;
box-shadow:  0px 0 20px rgba(0,0,0,.4);
}


আমরা কালার  প্রজেক্টের স্ট্রাকচার ডিজাইন করলাম  এবার আমরা আমাদের প্রজেক্টের মূল কাজটি করব javascript দিয়ে।  
এখন javascript এর মাধ্যমে এই প্রজেক্টটির প্রাণ দিব।আপনারা সবাই জানেন যে javascript হচ্ছে প্রোগ্রামিংয়ের প্রাণ।এইজন্য আমাদের এই   script ফাইল   ডাউনলোড করেতে হবে।

ডাউনলোড করা ফাইল সহ উপরের index.html, style.css আপনি একটি ফোল্ডারে রেখে শুধু index.html ভিউ করলেই  কাজ হবে।

আজকের মতো এখানেই শেষ করছি। আসা করি আপনার ভালো লাগবে। আর অবশ্যই  আপনার প্রতিক্রিয়া জানাবেন, বন্ধুদের সঙ্গে শেয়ার করতে ভুলবেন না কিন্তু। 

এতক্ষণ আমাদের সাথে থাকার জন্য আপনাকে ধন্যবাদ। দেখা হবে এরকম আরো কোন একটি পোস্টে। ততক্ষণ পর্যন্ত অপেক্ষা করুন। ভালো ভালো প্রজেক্ট পেতে আমাদের ওয়েবসাইটে চোখ রাখুন। আজ এখানেই শেষ করছি। 
#stay_home_stay_safe
খোদা হাফেজ। 


Tags:

Post a Comment

0 Comments

Thanks for your support.