Skip to content

Instantly share code, notes, and snippets.

View sandeshtandan's full-sized avatar

Sandesh Tandan sandeshtandan

View GitHub Profile
@sandeshtandan
sandeshtandan / Styling comment box
Created February 26, 2022 07:21
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* Default CSS */
* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
body,
@sandeshtandan
sandeshtandan / Start with HTML
Last active February 26, 2022 07:23
<form>
<div class="input">
<div class="input-top">
<input required type="text" id="name" placeholder="Name">
<input required type="email" id="email" placeholder="Email">
</div>
<textarea required placeholder="Your Comment" id="comment" cols="30" rows="10"></textarea>
<button id="button" type="submit" onclick="myFunction();">Post a Comment</button>
</form>
<ul id="comment-list">
@sandeshtandan
sandeshtandan / Add JavaScript
Created February 24, 2022 13:34
const click = document.querySelector("#click");//select every button to change color
const click1 = document.querySelector("#click1");
const click2 = document.querySelector("#click2");
const click3 = document.querySelector("#click3");
const click4 = document.querySelector("#click4");
const click5 = document.querySelector("#click5");
const click6 = document.querySelector("#click6");
const click7 = document.querySelector("#click7");
const click8 = document.querySelector("#click8");
@sandeshtandan
sandeshtandan / Styling the div and button
Created February 24, 2022 13:32
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Default CSS */
* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
body,
@sandeshtandan
sandeshtandan / Start with HTML
Created February 24, 2022 13:29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Changer with Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
@sandeshtandan
sandeshtandan / Make functional with javascript
Created February 22, 2022 13:27
const copy = document.querySelector("#copy");
const copyButton = document.querySelector("#copy-button");
copyButton.addEventListener("click", () => {
copy.select(); // Highlight the text
copy.setSelectionRange(0, 99999); //Range of text copied
navigator.clipboard.writeText(copy.value); // copy the text into clipboard
alert("Copied to Clipboard: " + copy.value); // display text copied
@sandeshtandan
sandeshtandan / Styling input and button
Created February 22, 2022 13:26
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:wght@300;400;500;600;700;800;900&display=swap");
/* Default CSS */
* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
body,
@sandeshtandan
sandeshtandan / Start with HTML
Created February 22, 2022 13:24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Editor</title>
<link rel="stylesheet" href="style.css">
</head>
@sandeshtandan
sandeshtandan / Making functional with JavaScript
Created February 22, 2022 11:23
const editorFirst = document.querySelector("#editor-first");
const iframe = document.querySelector("iframe");
const run = document.querySelector("#run");
run.addEventListener("click", () => {
var html = editorFirst.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});
first.addEventListener("keyup", () => {
@sandeshtandan
sandeshtandan / Styling the code editor
Created February 22, 2022 11:20
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:wght@300;400;500;600;700;800;900&display=swap');
/* Default CSS */
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
body, head{