Code
Here's my entire code for the website I built.
Resources:
Javascript the definitive guide : https://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527
W3SCHOOL: https://www.w3schools.com/
Stack Overflow: https://stackoverflow.com/
YouTube: https://www.youtube.com/
This code is before 10/3/2019 7:44PM
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
<title>D a v i d Y a s u d a </title>
</head>
<body id="e2">
<style>
#e2 {
overflow:visible;
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="file:///C:/Users/David/Pictures/index.html#">Overview</a>
<a href="file:///D:/CSS.pdf" download>Downloard Code</a>
<a href="https://dhyasuda0.blogspot.com/2019/10/acknowledgement.html">Acknowledgements</a>
<a href="#uuu">Contact</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
<h1 class="h1"> D a v i d <br> Y a s u d a </h1>
<h3> I design & build abstract code</h3>
<h1 class="secondary"> BLOG. </h1>
<h1 class="Yats"> <h8> <a class="link" href="https://dhyasuda0.blogspot.com/2019/10/vector-art.html">Simulating Vectors</a></h8> <br> <br>
<br><br> <img class="JS" src="https://seeklogo.com/images/N/nodejs-logo-FBE122E377-seeklogo.com.png" height="100px" width="100px">
<br>
When you miss the axiomatic methods from C++ and Java when working on Game Design in JavaScript. You can still create patterns by chaining code in Vector art.
</h1>
<section>
<h1 class="K">
I'm David Yasuda and this is one of my many personal projects. <br>The focus of this project is to share my life and academics <br>using my own website built by scratch using HTML/CSS/Java script.<br>
Normally, you evaluate a student academic records and decide from there.<br> But concrete academics can sometimes be imprecise towards a students work habit.<br>
Furthermore, I want to showcase my ability to code and build digital products. <br> I also want to elaborate my passion towards designing and building by <br>showing off personal projects and coding algorithms. <br> In addition, to shine upon my extra curricular that <br>shaped me for who I am.
<br> <br>
<br> I'm currently studying at Saint Xavier University. <br>A peaceful university yet not known for there computer science <br>department. I'm majoring in Computer science and currently pursuing my bachelors.
<br>But my future goal is to complete my doctorates in computer science <br> and become the first ever in my family to do so.<br> My future aspiration is to graduate your <br> university and represent myself and the university by becoming a <br>professeur in Computer Science. <br>
But ultimately to start my own business in computer science.
</h1>
<div class="color">
<h8><a class="link" href="https://dhyasuda0.blogspot.com/2019/10/data-structures-and-algorithms.html"> Data structures and Algorthims</a> <br><br><br>
</h8>
<img class="alg" src="https://cdn1.iconfinder.com/data/icons/seo-accessibility-usability-2-3/256/Flow_Diagram-512.png" height="300px" width="300px">
<br><br>
<h1 class="GG"> Using push and pull we can create a simple algorthim to find or return a value using JavaScript.</h1> <br> </div>
</section>
<h1 class="Projects"> Projects. </h1>
<body id="s2">
<h1 class="rojects" style="height:500px;width:550px;overflow:visible;"> <h8>SpinKit</h8> <br> <br>
<div id="page">
<div id="Message-Container">
<div id="message">
<p id="moves"></p>
<a href="#menu"><input id="okBtn" type="button" onclick="toggleVisablity('Message-Container')" value="Cool!" /></a>
</div>
</div>
<div id="menu">
<div class="custom-select">
<select id="diffSelect">
<option value="10">Easy</option>
<option value="15">Medium></option>
</select>
</div>
<input id="startMazeBtn" type="button" onclick="makeMaze()" value="Start" />
</div>
<div id="view">
<div id="mazeContainer">
<canvas id="mazeCanvas" class="border" height="350" width="350"></canvas>
</div>
</div>
</div>
</body>
Nobody likes to wait... But I made a program so it'll be less painful. <br>
I've created a SpinKit, an open source collection of loading spinners using JavaScipt and CSS
</h1>
<script>
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
function rand(max) {
return Math.floor(Math.random() * max);
}
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function changeBrightness(factor, sprite) {
var virtCanvas = document.createElement("canvas");
virtCanvas.width = 500;
virtCanvas.height = 500;
var context = virtCanvas.getContext("2d");
context.drawImage(sprite, 0, 0, 500, 500);
var imgData = context.getImageData(0, 0, 500, 500);
for (let i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] = imgData.data[i] * factor;
imgData.data[i + 1] = imgData.data[i + 1] * factor;
imgData.data[i + 2] = imgData.data[i + 2] * factor;
}
context.putImageData(imgData, 0, 0);
var spriteOutput = new Image();
spriteOutput.src = virtCanvas.toDataURL();
virtCanvas.remove();
return spriteOutput;
}
function displayVictoryMess(moves) {
document.getElementById("moves").innerHTML = "You Moved " + moves + " Steps.";
toggleVisablity("Message-Container");
}
function toggleVisablity(id) {
if (document.getElementById(id).style.visibility == "visible") {
document.getElementById(id).style.visibility = "hidden";
} else {
document.getElementById(id).style.visibility = "visible";
}
}
function Maze(Width, Height) {
var mazeMap;
var width = Width;
var height = Height;
var startCoord, endCoord;
var dirs = ["n", "s", "e", "w"];
var modDir = {
n: {
y: -1,
x: 0,
o: "s"
},
s: {
y: 1,
x: 0,
o: "n"
},
e: {
y: 0,
x: 1,
o: "w"
},
w: {
y: 0,
x: -1,
o: "e"
}
};
this.map = function() {
return mazeMap;
};
this.startCoord = function() {
return startCoord;
};
this.endCoord = function() {
return endCoord;
};
function genMap() {
mazeMap = new Array(height);
for (y = 0; y < height; y++) {
mazeMap[y] = new Array(width);
for (x = 0; x < width; ++x) {
mazeMap[y][x] = {
n: false,
s: false,
e: false,
w: false,
visited: false,
priorPos: null
};
}
}
}
function defineMaze() {
var isComp = false;
var move = false;
var cellsVisited = 1;
var numLoops = 0;
var maxLoops = 0;
var pos = {
x: 0,
y: 0
};
var numCells = width * height;
while (!isComp) {
move = false;
mazeMap[pos.x][pos.y].visited = true;
if (numLoops >= maxLoops) {
shuffle(dirs);
maxLoops = Math.round(rand(height / 8));
numLoops = 0;
}
numLoops++;
for (index = 0; index < dirs.length; index++) {
var direction = dirs[index];
var nx = pos.x + modDir[direction].x;
var ny = pos.y + modDir[direction].y;
if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
//Check if the tile is already visited
if (!mazeMap[nx][ny].visited) {
//Carve through walls from this tile to next
mazeMap[pos.x][pos.y][direction] = true;
mazeMap[nx][ny][modDir[direction].o] = true;
//Set Currentcell as next cells Prior visited
mazeMap[nx][ny].priorPos = pos;
//Update Cell position to newly visited location
pos = {
x: nx,
y: ny
};
cellsVisited++;
//Recursively call this method on the next tile
move = true;
break;
}
}
}
if (!move) {
// If it failed to find a direction,
// move the current position back to the prior cell and Recall the method.
pos = mazeMap[pos.x][pos.y].priorPos;
}
if (numCells == cellsVisited) {
isComp = true;
}
}
}
function defineStartEnd() {
switch (rand(4)) {
case 0:
startCoord = {
x: 0,
y: 0
};
endCoord = {
x: height - 1,
y: width - 1
};
break;
case 1:
startCoord = {
x: 0,
y: width - 1
};
endCoord = {
x: height - 1,
y: 0
};
break;
case 2:
startCoord = {
x: height - 1,
y: 0
};
endCoord = {
x: 0,
y: width - 1
};
break;
case 3:
startCoord = {
x: height - 1,
y: width - 1
};
endCoord = {
x: 0,
y: 0
};
break;
}
}
genMap();
defineStartEnd();
defineMaze();
}
function DrawMaze(Maze, ctx, cellsize, endSprite = null) {
var map = Maze.map();
var cellSize = cellsize;
var drawEndMethod;
ctx.lineWidth = cellSize / 40;
this.redrawMaze = function(size) {
cellSize = size;
ctx.lineWidth = cellSize / 50;
drawMap();
drawEndMethod();
};
function drawCell(xCord, yCord, cell) {
var x = xCord * cellSize;
var y = yCord * cellSize;
if (cell.n == false) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + cellSize, y);
ctx.stroke();
}
if (cell.s === false) {
ctx.beginPath();
ctx.moveTo(x, y + cellSize);
ctx.lineTo(x + cellSize, y + cellSize);
ctx.stroke();
}
if (cell.e === false) {
ctx.beginPath();
ctx.moveTo(x + cellSize, y);
ctx.lineTo(x + cellSize, y + cellSize);
ctx.stroke();
}
if (cell.w === false) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y + cellSize);
ctx.stroke();
}
}
function drawMap() {
for (x = 0; x < map.length; x++) {
for (y = 0; y < map[x].length; y++) {
drawCell(x, y, map[x][y]);
}
}
}
function drawEndFlag() {
var coord = Maze.endCoord();
var gridSize = 4;
var fraction = cellSize / gridSize - 2;
var colorSwap = true;
for (let y = 0; y < gridSize; y++) {
if (gridSize % 2 == 0) {
colorSwap = !colorSwap;
}
for (let x = 0; x < gridSize; x++) {
ctx.beginPath();
ctx.rect(
coord.x * cellSize + x * fraction + 4.5,
coord.y * cellSize + y * fraction + 4.5,
fraction,
fraction
);
if (colorSwap) {
ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
} else {
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
}
ctx.fill();
colorSwap = !colorSwap;
}
}
}
function drawEndSprite() {
var offsetLeft = cellSize / 50;
var offsetRight = cellSize / 25;
var coord = Maze.endCoord();
ctx.drawImage(
endSprite,
2,
2,
endSprite.width,
endSprite.height,
coord.x * cellSize + offsetLeft,
coord.y * cellSize + offsetLeft,
cellSize - offsetRight,
cellSize - offsetRight
);
}
function clear() {
var canvasSize = cellSize * map.length;
ctx.clearRect(0, 0, canvasSize, canvasSize);
}
if (endSprite != null) {
drawEndMethod = drawEndSprite;
} else {
drawEndMethod = drawEndFlag;
}
clear();
drawMap();
drawEndMethod();
}
function Player(maze, c, _cellsize, onComplete, sprite = null) {
var ctx = c.getContext("2d");
var drawSprite;
var moves = 0;
drawSprite = drawSpriteCircle;
if (sprite != null) {
drawSprite = drawSpriteImg;
}
var player = this;
var map = maze.map();
var cellCoords = {
x: maze.startCoord().x,
y: maze.startCoord().y
};
var cellSize = _cellsize;
var halfCellSize = cellSize / 2;
this.redrawPlayer = function(_cellsize) {
cellSize = _cellsize;
drawSpriteImg(cellCoords);
};
function drawSpriteCircle(coord) {
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.arc(
(coord.x + 1) * cellSize - halfCellSize,
(coord.y + 1) * cellSize - halfCellSize,
halfCellSize - 2,
0,
2 * Math.PI
);
ctx.fill();
if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) {
onComplete(moves);
player.unbindKeyDown();
}
}
function drawSpriteImg(coord) {
var offsetLeft = cellSize / 50;
var offsetRight = cellSize / 25;
ctx.drawImage(
sprite,
0,
0,
sprite.width,
sprite.height,
coord.x * cellSize + offsetLeft,
coord.y * cellSize + offsetLeft,
cellSize - offsetRight,
cellSize - offsetRight
);
if (coord.x === maze.endCoord().x && coord.y === maze.endCoord().y) {
onComplete(moves);
player.unbindKeyDown();
}
}
function removeSprite(coord) {
var offsetLeft = cellSize / 50;
var offsetRight = cellSize / 25;
ctx.clearRect(
coord.x * cellSize + offsetLeft,
coord.y * cellSize + offsetLeft,
cellSize - offsetRight,
cellSize - offsetRight
);
}
function check(e) {
var cell = map[cellCoords.x][cellCoords.y];
moves++;
switch (e.keyCode) {
case 65:
case 37: // west
if (cell.w == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x - 1,
y: cellCoords.y
};
drawSprite(cellCoords);
}
break;
case 87:
case 38: // north
if (cell.n == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x,
y: cellCoords.y - 1
};
drawSprite(cellCoords);
}
break;
case 68:
case 39: // east
if (cell.e == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x + 1,
y: cellCoords.y
};
drawSprite(cellCoords);
}
break;
case 83:
case 40: // south
if (cell.s == true) {
removeSprite(cellCoords);
cellCoords = {
x: cellCoords.x,
y: cellCoords.y + 1
};
drawSprite(cellCoords);
}
break;
}
}
this.bindKeyDown = function() {
window.addEventListener("keydown", check, false);
$("#view").swipe({
swipe: function(
event,
direction,
distance,
duration,
fingerCount,
fingerData
) {
console.log(direction);
switch (direction) {
case "up":
check({
keyCode: 38
});
break;
case "down":
check({
keyCode: 40
});
break;
case "left":
check({
keyCode: 37
});
break;
case "right":
check({
keyCode: 39
});
break;
}
},
threshold: 0
});
};
this.unbindKeyDown = function() {
window.removeEventListener("keydown", check, false);
$("#view").swipe("destroy");
};
drawSprite(maze.startCoord());
this.bindKeyDown();
}
var mazeCanvas = document.getElementById("mazeCanvas");
var ctx = mazeCanvas.getContext("2d");
var sprite;
var finishSprite;
var maze, draw, player;
var cellSize;
var difficulty;
// sprite.src = 'media/sprite.png';
window.onload = function() {
let viewWidth = $("#view").width();
let viewHeight = $("#view").height();
if (viewHeight < viewWidth) {
ctx.canvas.width = viewHeight - viewHeight / 100;
ctx.canvas.height = viewHeight - viewHeight / 100;
} else {
ctx.canvas.width = viewWidth - viewWidth / 100;
ctx.canvas.height = viewWidth - viewWidth / 100;
}
//Load and edit sprites
var completeOne = false;
var completeTwo = false;
var isComplete = () => {
if(completeOne === true && completeTwo === true)
{
console.log("Runs");
setTimeout(function(){
makeMaze();
}, 500);
}
};
sprite = new Image();
sprite.src =
"https://image.ibb.co/dr1HZy/Pf_RWr3_X_Imgur.png" +
"?" +
new Date().getTime();
sprite.setAttribute("crossOrigin", " ");
sprite.onload = function() {
sprite = changeBrightness(1.2, sprite);
completeOne = true;
console.log(completeOne);
isComplete();
};
finishSprite = new Image();
finishSprite.src = "https://image.ibb.co/b9wqnJ/i_Q7m_U25_Imgur.png"+
"?" +
new Date().getTime();
finishSprite.setAttribute("crossOrigin", " ");
finishSprite.onload = function() {
finishSprite = changeBrightness(1.1, finishSprite);
completeTwo = true;
console.log(completeTwo);
isComplete();
};
};
window.onresize = function() {
let viewWidth = $("#view").width();
let viewHeight = $("#view").height();
if (viewHeight < viewWidth) {
ctx.canvas.width = viewHeight - viewHeight / 100;
ctx.canvas.height = viewHeight - viewHeight / 100;
} else {
ctx.canvas.width = viewWidth - viewWidth / 100;
ctx.canvas.height = viewWidth - viewWidth / 100;
}
cellSize = mazeCanvas.width / difficulty;
if (player != null) {
draw.redrawMaze(cellSize);
player.redrawPlayer(cellSize);
}
};
function makeMaze() {
//document.getElementById("mazeCanvas").classList.add("border");
if (player != undefined) {
player.unbindKeyDown();
player = null;
}
var e = document.getElementById("diffSelect");
difficulty = e.options[e.selectedIndex].value;
cellSize = mazeCanvas.width / difficulty;
maze = new Maze(difficulty, difficulty);
draw = new DrawMaze(maze, ctx, cellSize, finishSprite);
player = new Player(maze, mazeCanvas, cellSize, displayVictoryMess, sprite);
if (document.getElementById("mazeContainer").style.opacity < "100") {
document.getElementById("mazeContainer").style.opacity = "100";
}
}
</script>
<br> <br>
<section> <h8 class="T"> Calcultor <br>
<div id="container">
<h5 class="dday"
<div id="calculator">
<form>
<h1 class="GG">How much was your bill?</h1>
<h1 class="GG"></h1>
<input id="billamt" type="text" placeholder="Bill Amount">
<br>
<br>
<h1 class="GG">How was your service? </h1>
<h1 class="GG">
<select id="serviceQual">
<option disabled selected value="0">-- Choose an Option --</option>
<option value="0.3">30% - Outstanding</option>
<option value="0.2">20% - Good</option>
<option value="0.15">15% - It was OK</option>
<option value="0.1">10% - Bad</option>
<option value="0.05">5% - Terrible</option>
</select>
</h1>
</form>
<h1 class="GG">How many people are sharing the bill?</h1>
<input id="peopleamt" type="text" placeholder="Number of People">
<br><button type="button" id="calculate">Calculate!</button>
</div>
<!--calculator end-->
<div id="totalTip">
<sup>$</sup><span id="tip">0.00</span>
<small id="each">each</small>
</div>
<!--totalTip end-->
</div>
<!--container end-->
<script>
//Calculate Tip
function calculateTip() {
var billAmt = document.getElementById("billamt").value;
var serviceQual = document.getElementById("serviceQual").value;
var numOfPeople = document.getElementById("peopleamt").value;
//validate input
if (billAmt === "" || serviceQual == 0) {
alert("Please enter values");
return;
}
//Check to see if this input is empty or less than or equal to 1
if (numOfPeople === "" || numOfPeople <= 1) {
numOfPeople = 1;
document.getElementById("each").style.display = "none";
} else {
document.getElementById("each").style.display = "block";
}
//Calculate tip
var total = (billAmt * serviceQual) / numOfPeople;
//round to two decimal places
total = Math.round(total * 100) / 100;
//next line allows us to always have two digits after decimal point
total = total.toFixed(2);
//Display the tip
document.getElementById("totalTip").style.display = "block";
document.getElementById("tip").innerHTML = total;
}
//Hide the tip amount on load
document.getElementById("totalTip").style.display = "none";
document.getElementById("each").style.display = "none";
//click to call function
document.getElementById("calculate").onclick = function() {
calculateTip();
};
</script>
</h5>
<br><br>
<h1 class="g"> I created a bill calcultor when you're tipping! <br> Doing the math is tedious enough. <br> We code so we can make your lifes easier. <br> So I made a calcutlor so you won't have to do the math. <br>
<br> <a class="links" href="https://dhyasuda0.blogspot.com/2019/09/calculator.html ">Hello!</a>
<script>
</script>
</h1>
</h8>
</h1>
<section>
<div class="colors"> <h8> Animation <br><br><br> </h8>
<a id="custom-button">
<h9>Hello World</h9>
</a>
<br><br>
<br> <br>
<h1 class="GG"> I created a simple 2D animation using <br> JavaScript and Cascating Style Sheet. <br>
Hover over the button! <br><br>
<a class="links" href="https://dhyasuda0.blogspot.com/2019/09/animation-button.html">Hey!</a>
</h1> <br><br><br><br>
<hr>
<h8>SpinKit</h8>
<script>
var looper;
var degrees = 0;
function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
degrees++;
if(degrees > 359){
degrees = 1;
}
}</script>
<img id="img1" src="https://assets.leetcode.com/static_assets/public/images/LeetCode_logo_rvs.png" alt="cog1" class="center" width="50">
<script class="ID">rotateAnimation("img1",1);</script>
<br><br>
<h1 class="GG"> Nobody likes to wait... But I made a program so <br>it'll be less painful. <br>
I've created a SpinKit, an open source collection of loading <br>spinners using JavaScipt and CSS
</h1>
<br> <br> <br> <br> <br>
</h8></div>
</section>
</section>
<h1 class="prim"> Academics.
</h1>
<section class="Deabtee">
<br>
<h8 class="Y"> <a class="link" href="https://resources.chicagodebates.org/wp-content/uploads/2018/10/Red-T1-Results.pdf"> Debate </a><br><br><hr><br> <br>
<h1 class="g"> I particapted in the debate team in highschool <br>and in college. <br> I went to my first tournament <br>in sophmore year in highschool. <br>With disapointing results <br>I held my head up and <br>was rewarded best <br>speaker in the University of Chicago tournement t3. <br>I also placed second place in T1 Senior year tournement. <br>During senior year me and my partner were considered <br>varsity level. The Saint Xavier debate team is <br>underdeveloped <br>at the time I started, but helped <br>and recruit and members. We plan on going to a tournament <br>during winter.
</h1>
</h8>
</h1>
<div class="H"> <h8> <a class="link" href="https://theden.sxu.edu/organization/scse"> CS&E Society</a> <br><br>
<h1 class="GG"> The Computer Science and Egineering aligns <br> ability to speak to a team and a client. <br> We work together on coding problems, and show case our <br> work to clients. <br> </h1>
<h8>
<hr>
<a class="link" href="https://www.sxu.edu/academics/resources/learning-center/tutoring.asp" >Math tutor</a> <br>
</h8>
<h1 class="GG"> I'm currently tutoring elementary level algebra <br>and geometry.<br> Above that I also a personal tutor for my friends on <br> algorthims, truth tables, linear search,<br> binary/hexadecimals, computer hardware, <br>HTML/CSS/JavaScript/Jquery and logical arthmetics.
</h1>
</h8></div>
</section>
<br><br><br>
<h1 class="Yat"> <h8> <a = class="link" href="https://leetcode.com/dhyasuda/">Leet Code! </a></h8> <br> <br>
Find me in LeetCode!<br>Leet code is a website were you practice code. LeetCode has a strong collection of questions and multiple solutions to each questions. It's also provides a hands on training on real coding interview questions.
</h1>
<br><br><br>
<section>
<br>
<h8 class="AAA"> <a class="link" href="https://www.sxu.edu/admissions/summer-workshops.asp"> HTML workshop </a><br><br><hr><br> <br>
<h1 class="g"> I'm the co founder of the HTML workshop in SXU. We strive <br> to show off our college by <br> teaching Computer Science students <br> to make their own website and design. <br> I've been in SXU for 4 months and I teached newcomers about <br>
</h1>
</h8>
</h1>
<div class="Hs"> <h8> <a class="link" href="https://theden.sxu.edu/organizations"> Extra Curriculars</a> <br><br>
<h1 class="GG"> <ul>
<li> <a class="links" href="https://theden.sxu.edu/organization/chess">Chess club</a></li><br>
<li> <a class="links" href="https://theden.sxu.edu/organization/speechclub">Speech Club</a></li><br>
<li> <a class="links" href="https://mualphatheta.org/">Mu Alpha Theta Society </a></li><br>
<li> <a class="links" href="https://theden.sxu.edu/organization/mathclub">Math Club</a></li><br>
<li> <a class="linkk" href="https://theden.sxu.edu/organization/nsslha">National Student Speech Language </a></li><br>
<li> <a class="links" href="https://theden.sxu.edu/organization/gamenoshame">Game No Shame</a></li><br>
</ul>
</h1>
</h8></div>
</section>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<h1 class="secondary"> Say hi. </h1>
<section>
<br>
<h8 class="say"> <br><br><br>
<h1 class="g"> <h8 class="ask"> <a id="custom-button" href="https://mail.google.com/mail/u/0/#inbox?compose=DmwnWtDnGmPGbtwfCcBCpJMvqpbVlVShtcMwPhXplVZtfnlmmJNZTMPlLgwfRwSFznFBxcKtqwMv">Dhyasuda0@gmail.com</a>
<hr>
</h8> <br><br><br><br><br>
I love to design and make things. I speak, teach, and consult at my universitiy. e.g HTML workshop, Computer Science and Engineering Society , Computer Science Tutor, and Debate Team. <a id="uuu" href="https://leetcode.com/dhyasuda/"> Say hi! </a>
</h1>
</h8>
</h1>
<div> <img src="https://ton.twitter.com/i/ton/data/dm/1179812882437066757/1179812874350407680/Gd9o9-FT.jpg:medium" height="600px" width="550px">
</section>
</section>
<style> #custom-button{
display:inline-block;
color:white;
background-color:#29425c;
padding:10px;
font-size:30px;
border: 2px solid #29425c;
border-radius:5px;
margin:top:10px;
cursor:pointer;
box-shadow:2px 2px 5px black;
transition: box-shadow ease-in-out 0.4s
}
#custom-button:hover{
box-shadow:0px 0px 0px black;
}
</style>
</body>
</html>
//CSS
.secondary{
padding-left:100px;
padding-top:10px;
padding-bottom:-100px;
font-size:150px;
}
.Projects
{
padding-left:100px;
padding-top:200px;
font-size:150px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.alg{
display:block;
margin-left:auto;
margin-right:auto;
}
h8 {
font-size:50px;
padding-right:100px;
}
.body1{
background:#FFF;
font-family:arial;
overflow: visible;
}
.h1{
padding-left:680px;
font-size:15px;
font-family:Courier New;
}
h2 {
color: #FFF;
}
h3 {
padding-left:480px;
padding-bottom:300px;
font-family:Courier New;
font-size:30px;
}
section {
display: flex;
}
.www{
display:flex;
}
.N {
padding-left:200px
}
.K {
background:#3e6578;
margin:auto;
padding-top:50px;
padding-bottom: 200px;
padding-left: 100px;
padding-right: 100px;
color:#FFF;
font-size:16px;
}
a:link{
color:white;
}
a:visted {
color:#FFF;
}
a:hover{
color:blue;
}
.T {
background:#224a54;
margin:auto;
padding-top:50px;
padding-bottom: 200px;
padding-left: 100px;
padding-right: 100px;
color:#FFF;
font-size:50px;
}
.color {
background:#1c323d;
margin:auto;
padding-top:30px;
padding-bottom: 600px;
padding-left: 150px;
padding-right: 100px;
color:#FFF;
font-size:16px;
}
.color {
background:#1c323d;
padding-right:10px;
padding-bottom:150px;
}
p {
background-color:#1c323d;
font-size: 15px;
padding-top:30px;
padding-bottom:50px;
padding-left:450px;
padding-right:500px;
color:#FFF;
}
.colors {
background:lightgrey;
margin:auto;
padding-top:30px;
padding-bottom: 140px;
padding-left: 110px;
padding-right: 100px;
color:black;
font-size:16px;
}
.rojects {
background-color:#e9c3b8;
font-size: 15px;
padding-top:30px;
padding-bottom:200px;
padding-left:450px;
padding-right:500px;
color:black;
overflow:hidden;
}
.g {
font-size:16px;
padding-left:20px;
background-background:black;
}
.GG {
font-size:17px;
padding-left:10px;
}
.prim {
padding-left:100px;
padding-top:200px;
font-size:150px;
}
.Aca {
background-color:#FEF;
font-size: 15px;
padding-top:30px;
padding-bottom:0px;
padding-left:4000px;
padding-right:5000px;
color:#FFF;
}
.Y{
background-image:url(https://tobiasahlin.com/images/portfolio/speaking.jpg);
margin:auto;
padding-top:50px;
padding-bottom: 65px;
padding-left: 100px;
padding-right: 100px;
color:#FFF;
font-size:50px;
}
.AAA{
background-image:url(https://i.ytimg.com/vi/A9abHX_NSK4/maxresdefault.jpg);
padding-top:50px;
padding-bottom: 65px;
padding-left: 90px;
padding-right: 88px;
color:#FFF;
font-size:50px;
}
.H
{
background-image:url(https://tobiasahlin.com/images/portfolio/github.png);
margin:auto;
padding-top:50px;
padding-bottom:188px;
padding-left: 30px;
padding-right: 100px;
color:#FFF;
font-size:50px;
}
.Hs
{
background-image:url(http://getwallpapers.com/wallpaper/full/4/7/d/693803-best-good-background-picture-2816x1760-for-retina.jpg);
margin:auto;
padding-top:50px;
padding-bottom:170px;
padding-left: 290px;
padding-right: 50px;
color:#FFF;
font-size:50px;
}
.Yat {
background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOOAMexZA1e9g8v7xVX--3R1zkfL1z4BrAuYL314WO8g4Fv8KA);
font-size: 15px;
padding-top:30px;
padding-bottom:200px;
padding-left:450px;
padding-right:500px;
color:#FFF;
}
.JS{
display: block;
margin-left: auto;
margin-right: auto;
}
.Yats {
background-color:#fdf0ec;
font-size: 15px;
padding-top:30px;
padding-bottom:200px;
padding-left:450px;
padding-right:500px;
color:black;
}
.say
{
margin:auto;
background-color:#1f4954;
padding-top:1px;
padding-bottom: 93px;
padding-left: 100px;
padding-right: 100px;
color:#FFF;
font-size:50px;
border-bottom: 5px solid red;
}
.ask
{
font-size:30;
}
.Ht
{
background-color:#232;
margin:auto;
padding-top:50px;
padding-bottom: 200px;
padding-left: 100px;
padding-right: 100px;
color:#232;
font-size:50px;
}
.link:hover {
font-size:51px;
}
.links:hover{
font-size:20px;
}
.linkk:hover{
font-size:18px;
body {
font-family: Roboto;
background: #8E0E00;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #8E0E00, #1F1C18);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #8E0E00, #1F1C18);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#container {
height: 525px;
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.lop {
background: #1F030C;
color: white;
margin: 0;
padding: 10px 100px;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
h5 {
background-color:white;
font-size:1;
}
form input[type="text"] {
width=90px;
}
input {
padding-left: 20px;
}
#billamt {
font-size: 14px;
/*color: #2980b9;*/
color: #red;
background-color: #f7f7f7;
width: 60%;
padding: 5px 5px 8px 8px;
}
#billamt:focus {
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
#peopleamt {
width: 60%;
padding: 5px 5px 8px 8px;
margin-left: 20px;
color: #red;
background-color: #f7f7f7;
font-size: 14px;
}
.dollarSign {
display: inline;
}
select {
padding-left:500px;
}
.dday {
background-color:black;
padding-bottom:299;
}
button {
text-transform: uppercase;
font-weight: bold;
display: block;
margin: 30px auto;
background: #AD133A;
border-radius: 5px;
width: 200px;
height: 50px;
font-size: 17px;
color: white;
}
button:hover {
background: #4c2827;
border-bottom-color: #111;
}
button:active {
position: relative;
top: 1px;
}
#totalTip {
font-size: 15px;
margin-top: 5px;
text-align: center;
}
#totalTip:before {
content: "Tip amount";
font-size: 15px;
font-weight: bold;
display: block;
text-transform: uppercase;
}
#totalTip sup {
font-size: 15px;
top: -18px;
}
#totalTip small {
font-size: 15px;
font-weight: bold;
display: block;
}
$menuHeight: 65px+10px;
@mixin transition {
transition-property: background-color opacity;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
overflow-y:hidden;
}
html,
.s2 {
width: 50vw;
height: 500vh;
position: fixed;
padding: 0;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#mazeContainer {
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: linear;
top: $menuHeight;
opacity: 0;
display: inline-block;
background-color: rgba(0, 0, 0, 0.30);
margin: auto;
overflow-y:hidden;
#mazeCanvas {
margin: 0;
display: block;
border: solid 1px black;
overflow:hidden;
}
}
input,
select {
@include transition;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.30);
height: 45px;
width: 150px;
padding: 10px;
border: none;
border-radius: 5px;
color: white;
display: inline-block;
font-size: 15px;
text-align: center;
text-decoration: none;
appearance: none;
overflow-y:hidden;
&:hover {
background-color: rgba(0, 0, 0, 0.70);
}
&:active {
background-color: black;
}
&:focus {
outline: none;
}
}
.custom-select {
display: inline-block;
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: 125px center;
overflow-y:hidden;
}
}
}
#Message-Container {
visibility: hidden;
color: white;
display: block;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.30);
z-index: 1;
#message {
width: 300px;
height: 300px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
}
#page {
font-family: "Segoe UI", Arial, sans-serif;
text-align: center;
height: auto;
width: auto;
margin: auto;
overflow-y:hidden;
}
#menu {
margin: auto;
padding: 10px;
height: 65px;
box-sizing: border-box;
overflow-y:hidden;
}
h1 {
margin: 0;
margin-bottom: 10px;
font-weight: 600;
font-size: 3.2rem;
overflow-y:hidden;
}
}
}
#view {
position: absolute;
top:65px;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
overflow-y:hidden;
}
}
}
.border {
border: 1px black solid;
border-radius: 5px;
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
overflow-y:hidden;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 400px) {
input, select{
width: 120px;
}
}
Comments
Post a Comment