addign starting files

ssegevv · Dec 3, 2024 · b1cb13f · b1cb13f
1 parent b63ee3c
commit b1cb13f
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 0 deletions.
diff --git a/backgroundgenerator/index.html b/backgroundgenerator/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Gradient Background</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body id="gradient">
+	<h1>Background generator</h1>
+	<input type="color" class="color1" name="color1" value="#e66465">
+	<input type="color" class="color2" name="color2" value="#f6b73c">
+	<h2>current css background:</h2>
+	<h3></h3>
+	<button>Random Color</button>
+	<h3 id="Random"></h3>
+	<script type="text/javascript" src="script.js"></script>
+</body>
+</html>
diff --git a/backgroundgenerator/script.js b/backgroundgenerator/script.js
@@ -0,0 +1,55 @@
+
+/*BACKGROUND COLOR*/
+const colourBackground = () => {
+	const color1 = document.querySelector('.color1');
+	const color2 = document.querySelector('.color2');
+	const gradientNum = document.querySelector('h3');
+
+	const colorEvent = () => {
+		const body = document.getElementById('gradient');
+		body.style.background = `linear-gradient(to right, ${color1.value}, ${color2.value})`;
+		gradientNum.textContent = `${body.style.background};`;
+	}
+
+	color1.addEventListener("input", colorEvent);
+	color2.addEventListener("input", colorEvent);
+}
+colourBackground()
+
+
+/*BUTTON RANDOM COLOR*/
+
+const buttonHexColour = () => {
+
+	const randomNumTxt = document.getElementById('Random');
+	const button = document.querySelector('button');
+
+	const randomHexArray = [ 
+		1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'
+	];	
+
+	const getCharacter = (index) => {
+	return randomHexArray[index];
+	}
+
+	const getRandomNumber = () => {
+		return Math.floor(Math.random() * 15);
+	}
+
+	const genColorNumber = () => {
+		let hexLadder = ('#');
+		for(i=0; i<6; i++) {
+			let character = getCharacter(getRandomNumber());
+			hexLadder += character;
+		}
+		return hexLadder;
+	}
+
+	const buttonPress = () => {
+		button.addEventListener('click', () => {
+			randomNumTxt.textContent = genColorNumber();
+		});
+	}
+	buttonPress()
+}
+buttonHexColour()
diff --git a/backgroundgenerator/style.css b/backgroundgenerator/style.css
@@ -0,0 +1,27 @@
+body {
+	font: 'Raleway', sans-serif;
+    color: rgba(0,0,0,.5);
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: .5em;
+    top: 15%;
+	background: linear-gradient(to right, #e66465 , #f6b73c); /* Standard syntax */
+}
+
+h1 {
+    font: 600 3.5em 'Raleway', sans-serif;
+    color: rgba(0,0,0,.5);
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: .5em;
+    width: 100%;
+}
+
+h3 {
+	font: 900 1em 'Raleway', sans-serif;
+    color: rgba(0,0,0,.5);
+    text-align: center;
+    text-transform: none;
+    letter-spacing: 0.01em;
+
+}