Skip to content

Instantly share code, notes, and snippets.

View Tanu-N-Prabhu's full-sized avatar
🎯
Focusing

Tanu Nanda Prabhu Tanu-N-Prabhu

🎯
Focusing
View GitHub Profile
body {
background-color: rgb(246, 4, 4);
color: #fff;
padding-top: 100px;
}
.container {
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Digital Clock</title>
<!--Referencing a CSS Style Sheet-->
<link rel="stylesheet" href="./style.css">
</head>
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>JavaScript Graphs</title>
</head>
function draw(){
// Accepting and seperating comma seperated values
var n = document.getElementById("num").value.split(/\s/);
console.log(n);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var width= 40; // bar width
var X = 30; // first bar position
function reset(){
// Clearing the input field
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
inputs[i].value = '';
// Clearing the Canvas
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
<div class="container">
<br>
<br>
<h2 align = "center">Graph Representation Is More Visually Appealing!</h2>
<div class="form-group">
<br>
<label for="email"><b>Enter the values seperated by a space</b></label>
<input type="text"class="form-control" id="num" value="10 20 30 40 50">
<br>
<button class="btn btn-primary btn-primary" id = "submit" onclick="draw()">Submit</button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
var app = document.getElementsByTagName("BODY")[0];
if (localStorage.lightMode == "dark") {
app.setAttribute("data-light-mode", "dark");
}
.body {
padding: 10px;
}
.container {
padding: 25px;
background-color: #FFAA80;
width: 100%;
justify-content: center;
align-items: center;
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Dark Mode</title>
<!-- Necessary libraries and hyper-links for the website -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Library for responsiveness -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Icon for the dark mode -->