Tanu Nanda Prabhu Tanu-N-Prabhu

## style.css
body {
  background-color: rgb(246, 4, 4);
  color: #fff;
  padding-top: 100px;
}

.container {
  display: flex;
  justify-content: center;
}

## index.html
<!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>

## javaScriptGraph.html
<!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>

## drawFunction.js
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

## resetFunction.js
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');

## javaScriptGraph.html
<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>

## library.html
<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>

## darkMode.js
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");
}

## darkMode.css
.body {
    padding: 10px;
}

.container {
    padding: 25px;
    background-color: #FFAA80;
    width: 100%;
    justify-content: center;
    align-items: center;

## darkMode.html
<!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 -->
	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>
	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;