🚀#あなたをプロにする2つのJavaScriptプロジェクトシリーズ.
13332 ワード
こんにちは、コーダ!👋
JavaScriptプロジェクトシリーズへようこそ.今日、私は別の驚くべきプロジェクトを共有しています.
💟 今後のプロジェクトのため、このシリーズを保存します.
🌈 2 . JavaScriptを使用したグラデーションジェネレータ.
プレビューを行います
🔸 CodePen Link For Result
それを言わせてください.
インデックス.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Gradient using Javascript</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h3>Create Gradient using Javascript</b></h3>
<div id="gradient"></div>
<input class="color1" type="color" name="color1" value="#00ff00">
<input class="color2" type="color" name="color2" value="#ff0000">
<h2>Code for generated gradient is - </h2>
<h4></h4>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
id=gradient カードにグラデーションを表示する.ステップ- 3 : -以下のスタイルのためのCSSコードです.
スタイル.CSS
body {
font: 'Raleway', sans-serif;
color: rgba(0,0,0,.5);
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
height: 100vh;
background-color: #f6f7fc;
}
#gradient{
position: relative;
background: linear-gradient(45deg, #00ff00 , #ff0000);
width: 250px;
height: 320px;
border-radius: 25px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 50px;
box-shadow: 2px 31px 35px -15px rgba(0,0,0,0.64);
}
input{
border-radius: 50%;
height: 40px;
width: 40px;
border: none;
outline: none;
-webkit-appearance: none;
}
input::-webkit-color-swatch-wrapper {
padding: 0;
}
input::-webkit-color-swatch {
border: none;
border-radius: 50%;
}
h3 {
font: 600 1.5em 'Raleway', sans-serif;
color: rgba(0,0,0,.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .3em;
width: 100%;
}
ステップ- 4 : -以下は、このジェネレータで最も重要な部分ですJavaScriptコードです.私たちはタグのDOMオブジェクトを格納するためにいくつかの変数を宣言しました.それから、私たちは
"setGradient()" 入力タグからカラーコードを取得し、HTMLのグラデーションIDに割り当てます.スクリプト.js
var css = document.querySelector("h4");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var gradient = document.getElementById("gradient");
function setGradient() {
gradient.style.background =
"linear-gradient(45deg, "
+ color1.value
+ ", "
+ color2.value
+ ")";
css.textContent = gradient.style.background + ";";
}
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
💟 今後のプロジェクトのため、このシリーズを保存します.
以上です.このプロジェクトを正常に実行した場合は、以下のコメントをください.
🛑 そして、あなたがInstagramに@ CodeCert Landに続くように、より多くの内容が必要ならば.
クレームを保つだけでコード化😎
Reference
この問題について(🚀#あなたをプロにする2つのJavaScriptプロジェクトシリーズ.), 我々は、より多くの情報をここで見つけました https://dev.to/chetan_atrawalkar/2-javascript-project-series-that-makes-you-pro-3gfjテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol